VIDEO LESSON

React.js入門：コンポーネント・props・stateを読書リストで学ぶの解説動画

再生時間 7:53動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00リアクト入門の第一回です。
0:02今回は、コンポーネント、プロップス、ステートという、リアクトの土台になる三つの考え方を、
0:07読書リストを作りながら学びます。
0:11リアクトは、画面をコンポーネントという部品に分け、データに応じて表示を組み立てるジャバスクリプトのライブラリです。
0:19題材は、タイトルで検索でき、未読だけを表示でき、チェックで読了を切り替えられる、
0:23小さな読書リストです。
0:27部品の分け方から、値の渡し方、画面の更新までを、動くコードで順に確認していきましょう。
0:33コードが初めての方も、画面とデータの対応を追いながら進めれば大丈夫です。
0:38一つずつ確かめていきましょう。
0:41まず、プロジェクトを作成します。
0:43サポート中のノードジェイエスのエルティーエスを用意し、別の作業用ディレクトリーで、
0:49エヌピーエム・クリエイト・バイトを実行して、リアクト・ティーエスのテンプレートを選びます。
0:54インストール後に開発サーバーを起動し、ターミナルに表示されるローカルユーアールエルを開きます。
1:01編集するファイルは、エスアールシー配下のアプリ、ブックロウ、リーディングリスト、
1:05そしてインデックス・シーエスエスの四つです。
1:09メイン・ティーエスエックスはそのまま使い、生成されたパッケージ情報はプロジェクトで管理してください。
1:15テンプレートの依存バージョンは作成した時点で変わるため、表示された内容を確認しながら進めてください。
1:22次に、本一冊分の行を表示するブックロウを作ります。
1:26コンポーネント名は大文字で始めます。
1:29ブック型は、識別子、タイトル、読了かどうかという、本のデータの形です。
1:34ブックロウプロップスは、親から受け取る値の型で、本のデータと、切り替えを知らせる関数を受け取ります。
1:41これがプロップス、つまり親から子へ渡す入力です。
1:45行の中では、チェックボックスのチェック状態に本の読了状態を表示し、変更されたらオン・トグルを呼んで、
1:49操作を親に伝えます。
1:54ラベルで文字とチェックボックスを関連付けるので、文字をクリックしても操作できます。
2:00型を書いておくと、渡す値の間違いを早い段階で見つけやすくなります。
2:05初めての方は、まずデータの形から読むと理解しやすいです。
2:09ここで大切なルールがあります。
2:12プロップスは親から渡される入力なので、子の中でブック・リードに直接値を代入するような書き換えはしません。
2:20代わりに、オン・トグルに本の識別子を渡して呼び、更新を親に任せます。
2:26この分担では、読書リスト全体のデータを親が管理し、子は表示と、操作があったことの通知だけを担当します。
2:34データの置き場所が一か所に決まるので、画面のどこが変わるのかを追いやすくなります。
2:40次の画面からは、その親の側の仕組みを見ていきます。
2:44親のリーディングリストでは、ユーズステートで三つのステートだけを保持します。
2:51本の配列、検索語、そして未読だけを表示するかの真偽値です。
2:56ステートは、コンポーネントが次の描画でも覚えておく値で、更新用の関数を呼ぶことで、
3:02新しい値を使った表示が作られます。
3:07検索結果や未読数は、この三つから計算できるので、別のステートには保存しません。
3:14初期データは三冊で、読了は一冊、未読は二冊です。
3:18保持する値を絞ることが、後の更新ミスを防ぐ第一歩になります。
3:23入力欄の値は、そのまま検索や表示に使うため、親の近くに置くのが自然です。
3:30どの操作でどの値が変わるか、最初に決めておきましょう。
3:35読了の切り替えでは、配列を直接変更せず、新しい配列を渡します。
3:40セットブックスに更新関数を渡し、前の配列をマップで変換して、識別子が一致する本だけを、
3:46スプレッド構文でコピーして読了状態を反転させます。
3:52他の本はそのまま使います。
3:54元の配列やオブジェクトを書き換えないので、処理を純粋に保てます。
3:59また、ステートの更新は、その場で今の変数を書き換える操作ではありません。
4:06更新が反映された次の描画で、新しい本の配列を使って画面が組み立てられます。
4:12前の状態から次を作るときに、この更新関数の書き方が役立ちます。
4:17実機でも、元の配列が書き換わらず、対象の一冊だけが切り替わることを確認しました。
4:24安心して使える更新の形です。
4:26一覧を表示するときは、キーに本の識別子を指定します。
4:30キーは、リアクトが兄弟要素の中で同じ本を追跡するための識別子です。
4:35絞り込みや並び替えがある一覧で、配列の位置をキーにすると、行の対応が変わって問題になることがあります。
4:43描画のたびに乱数を作る方法も避け、本に紐づく安定した識別子を使ってください。
4:48なお、キーはリアクト専用の特別な値なので、通常のプロップスとしては子に渡されません。
4:55子が必要な識別子は、ブックのデータそのものから取得します。
4:59検索と絞り込みは、描画のたびに計算します。
5:03検索語は前後の空白を取り除き、日本語ロケールに合わせて小文字化し、本のタイトルも同じ方法で小文字化して、
5:08含まれるかどうかを調べます。
5:14そこへ、未読だけの条件を組み合わせたものが、表示用の本の配列です。
5:19未読数も、本の配列から数えます。
5:22表示件数がゼロのときは、条件に合う本がないという案内を表示します。
5:28計算で求められる値は、ステートに重ねて持たないのがポイントです。
5:33件数の表示も、この計算結果から作るので、検索や切り替えとずれることがありません。
5:40表示とデータが常に対応します。
5:43この絞り込みに、ユーズエフェクトは必要ありません。
5:46画面を描くために、手元のデータを絞り込むだけなら、描画中の計算で足ります。
5:52エフェクトは、ブラウザーのイベント監視や通信など、外部の仕組みと同期するためのものです。
5:59計算できる値を別のステートへ転記するために追加すると、同期の処理が増えて複雑になります。
6:05また、今回のデータはブラウザー上のメモリーだけに保持し、再読み込みすると初期状態に戻ります。
6:12保存先が必要になったら、読み込み中や失敗時の表示も合わせて考える段階へ進みましょう。
6:19まずは、計算で済むのか、外部との同期なのかを分けて考える習慣を付けましょう。
6:25この判断は、後の回でも繰り返し使います。
6:28最後に、アプリに組み込んで動作を確認します。
6:31アプリ・ティーエスエックスでリーディングリストを表示し、開発サーバーとは別のターミナルでビルドも確認します。
6:40初期状態は、全三冊、未読二冊、表示三冊です。
6:44リアクトで検索すると一冊になり、未読フィルターを有効にしたままその本を読了にすると、
6:48一覧から消えます。
6:52これはデータが削除されたのではなく、今の条件に合わなくなったためです。
6:58検索語を消せば再び表示され、存在しないタイトルではゼロ件の案内が出ます。
7:03タブキーとスペースキーで操作できることも確かめてください。
7:08まとめです。
7:09コンポーネントに表示を分け、プロップスで値と操作を渡し、ステートの更新から画面を組み立てる。
7:16この流れを動くコードで確かめることが、今回のゴールです。
7:21検索結果のように計算できる値はステートにせず、配列は新しい値で更新し、キーには安定した識別子を使う。
7:29この三つの判断ができれば、機能を増やすときも、データの置き場所に迷いにくくなります。
7:35次回は、ユーズステート、ユーズエフェクトなどの基本フックスを学びます。
7:41お疲れさまでした。
7:42練習として、初期データの本を一冊変えたり、検索語の初期値を変えたりして、
7:47表示がどう変わるか予想してから実行してみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

React.jsのコンポーネント・props・stateを、検索と読了切り替え付きの読書リストで学びます。TypeScriptの完全なコード例、配列更新、key、useEffectの判断を解説。

解説記事・サンプルコードを読む：React.js入門：コンポーネント・props・stateを読書リストで学ぶ →