setState

イントロ.簡単な紹介 やったこと 三つの補足 隠しボタンとは 色選択機能自体はオーバースペック 「ねむちん」、「ねるねるね」とは何か。 実際のソース こんにちは、たちつてとです。 今回は、出費管理アプリの明細一覧画面、 各明細のカテゴリ色をユーザが 変えられるようにしたい、がテーマです。 イントロ.簡単な紹介 突然出てきた「出費管理アプリ」ですが、 自作(←超重要)アプリでして Dart/Flutterなんか何も知らなかった僕が 1ヶ月くらいで作った、汗と血と男汁が染み込んだ いかにもいかついアプリです。 以下の記事に、 3秒くらいで理解できるよう一枚の画像に まとめてました。 プログラミング…

コンポーネント 見た目と機能を持つUI部品 「関数コンポーネント」「クラスコンポーネント」の二つが代表される クラスコンポーネント ① React.Component を拡張して作られるJavaScriptクラスである。 import React, { Component } from "react"; //拡張する Component をインポート class ClassComponent extends Component { // extends で拡張したクラスを生成 render() { // レンダリングする要素は render() メソッド内で返される return <butto…

参考にさせていただいたページ InputEvent#isComposing とIME有効/無効の検出 · GitHub たにしきんぐダム はじめに 以下のタイミングで任意の処理を実行したい。という動機から調査を始めました。 IMEを伴わない半角文字入力や文字削除などをしたときは即座に任意の処理を実行 IME入力中は何も実行せず、確定のEnterを押したときに任意の処理を実行 古くはkeydownイベントで判定していましたが、User-Agentまで組み合わせた判定が必要となったりするので非常に煩雑で、ブラウザのバージョンアップによってUser-Agentが変化することも少なくないため不具合に繋…

余談 前回 環境構築 お世話になった記事 ソースコード カードの管理とグリッド表示 カードの回転＋コールバック地獄 GitHub 余談 今回は3/10作品目ですね。 Flutter+Dartが本当に未経験だったので導入にかなり時間がかかりました。😅😅😅😅 前回 cydermark.hatenablog.com 環境構築 とにかくこのあたりが辛かった🌶🌶 Mac Flutter Dart Android Studio XCode お世話になった記事 zenn.dev qiita.com rinoguchi.net ソースコード カードの管理とグリッド表示 class Board extends …

イントロ.作戦決定までのあらすじ 削除フラグとは 物理削除 論理削除 作戦決行 ソースと必要な処理の記述 最後に選択肢の確認 まとめ こんにちは、たちつてとです。 出費記録アプリを作っています。 その中でちょっとかっこいいUIを作ってしまったので、 ほんのちょっとだけ嬉しくて記事にします。 今回は、削除フラグ(後述)を編集できる画面を作りました。 →出費のカテゴリの要/不要をユーザが操作できる、 ようになりました。 まずはほんの少しイントロというか、 プログラムとして何を作ったかを紹介します。 【Dart/Flutter開発】画面遷移とカレンダー機能を実装、実際の(自作)アプリと考え方を共に.…

画面遷移と値の引き渡し カレンダーの実装 こんにちは、たちつてとです。 【Dart/Flutter開発】表示制御と検索機能の実装、実際の(自作)アプリと考え方を共に...【スマホアプリ】では、一覧型の画面での機能：要素の非表示制御・検索機能について説明しました。 今回は、登録画面を紹介します。といっても、更新機能はOnPressやらOnTapに更新処理かますだけなんで、紹介するほどのことでもないと思います。更新の記述も人によってまちまちでしょうし... で、今回は タップ→登録画面への遷移 カレンダー について、紹介しようと思います。 機能の外観は下画像になります。 ちなみに見た目に関しては、…

引き続き React Query のターン。 useQuery か、なるほどいいねこれということで導入しようと思っても、手元のコードは全然 class component ですよっていう場合に、どうやって導入していく方法があるかという整理。 おおよそそのまま、クラスコンポーネントでhooks使うにはどうするかっていう話になります。 検証コード 例として、以下のようなシンプルなコードを考える。 外部リソースとしてユーザ一覧を管理している 画面からユーザの追加を行う 画面でユーザ一覧を表示する

ボタン押下時の表示制御 ボタンテキストの「＋」/「ー」切り替え 表示制御 検索機能 まとめ こんにちは、たちつてとです。 ゆるい収支管理アプリのベースができたので、 そこまでにどういう記述が必要だったかをまとめました。 ちなみに見た目に関しては、簡単にですが 【Flutter/Dart開発】見た目を整えるための基礎知識をまとめた【スマホアプリ】 でまとめました。 一覧型の画面と登録型の画面を作ったのですが、まず一覧型の画面から。 画像の通り、日付とお金(出費)が対応した一覧画面になります。 画像の通り、機能は ボタン押下で、表示/非表示になるエリアがある。 ボタン押下で、表示される日付のデータ…

ひさしぶりに学習した。 Reactは2015年くらいには、趣味でVRハウスを作ったり、QRコードを読めるページを作ったり、仕事でも使ったり、React鳥貴族っていう名前のただの飲み会に行ったりと、しばらくは触っていたのだけど、チームの異動があって、最近は主にjsx-domという、JSXを書いてBabelを通すとcreateElementに変換してくれる、という独特の世界観のJSXを書いたりしていた。 jsx-domは、Styled Componentsを使えたり、useRefを使えたりと、ちょっとReactのエッセンスは吸われているものの、単にcreateElementしてくれるだけで、差分レ…

はじめに mongolyy.hatenablog.com に引き続き、 youtu.be を見ていこうと思います。 動画視聴メモ Reconciler https://github.com/zpao/building-react-from-scratch/blob/master/dilithium/src/Reconciler.js function mountComponent(component) { // This will generate the DOM node that will go into the DOM. We defer to the // component inst…

はじめに 最近「Reactハンズオンラーニング」という書籍を読んでいるのですが、 Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス作者:Alex Banks,Eve PorcelloオライリージャパンAmazon Reactの基本として、jsxを使用しないプリミティブな書き方をしていて、Reactが担っている役割に興味が出てきたので、以下の「Building React From Scratch」という動画を読みて理解を深めることにしました。 全編英語だったので、整理のためにメモを残したいと思います。 www.youtube.com Githubのリポジ…

昨日の記事でMaterial-UIのTableを使ってオブジェクト配列を持つstate変数の値を表示しましたが 最初にsetState()でセットしたオブジェクトが表示されていませんでした components/DataTable.tsx useItem.tsxで取得したstate変数をDataTable.tsxで定義したstate変数にセットし直しています useEffectでログ出力を追加しました import {useState, useEffect} from 'react'; import Table from '@mui/material/Table'; import TableB…