教材
はじめに
仕事でReactに触れる事になりましたが、全然わかっていない・・・
Reactを知るなら、まずはコレをしたほうがいいと推薦があったのでやることにしました
今はReact Hooksが主流になっているので、業務ではあまり使われない書き方もありますが、基本となる部分が理解できるようです
開発準備
- チュートリアルに書いてある
CodePenを利用して開発環境を用意します
- スターターコードを開きます
- 画面、右下にある
Forkボタンで自分のアカウントにスターターコードを派生させます - 表示レイアウトを変更してコードが長く見えるようにしました
- 以下のような表示にして準備完了です
チュートリアル開始
Reactとは?
React はユーザインターフェイスを構築するための、宣言型で効率的で柔軟な JavaScript ライブラリです。複雑な UI を、「コンポーネント」と呼ばれる小さく独立した部品から組み立てることができます。
冒頭に書いてあるということは、コンポーネント（小さくした部品）というのを意識したほうがよさそう・・・
コンポーネント
いくつか異なるコンポーネントクラスがあるらしいけど、チュートリアルはReact.Componentを使うらしい
props, render
コンポーネントは props（“properties” の略）と呼ばれるパラメータを受け取り、render メソッドを通じて、表示するビューの階層構造を返します。
render メソッドが返すのはあなたが画面上に表示したいものの説明書きです。React はその説明書きを受け取って画面に描画します。
具体的には、render は、描画すべきものの軽量な記述形式である React 要素というものを返します。
たいていの React 開発者は、これらの構造を簡単に記述できる “JSX” と呼ばれる構文を使用しています。
<div />という構文は、ビルド時にReact.createElement('div')に変換されます。
propsでメソッドの引数のように値を渡せそう
renderで表示したい内容を書きそう
チュートリアルのコンポーネント
コードを見てみると、3 つの React コンポーネントがあることが分かります。
Square（正方形のマス目）
Board（盤面）
Game
チュートリアルに書いてあるのを忠実に書き写す
内容を書いていくとチュートリアルの写経になってしまうので割愛しますが、調べた事を書いていきます
アロー関数構文
チュートリアルのリンク先が英語だったので、日本語で書いてくれている記事を探しました
State
state と props の違いは何ですか？
props（“properties” を短くしたもの）と state は、両方ともプレーンな JavaScript のオブジェクトです。どちらもレンダー結果に影響を及ぼす情報を持ってはいますが、ある重要な一点が異なっています。つまり、props は（関数引数のように）コンポーネントへ渡されるのに対し、state は（関数内で宣言された変数のように）コンポーネントの内部で制御されます。
値の保持に利用する感じ
更新するときに利用するsetStateは非同期。なので、this.stateが最新の値になっているかは保証されていない
どうすればいいの？
どうやって現在の state に依存する値を更新したらいいですか？
setState へオブジェクトを渡す代わりに関数を渡してください。その関数は常に最新の状態の state を使って呼ばれることが保証されています（次項参照）。
setState へオブジェクトを渡すのと関数を渡すのとのでは何が違いますか？
更新関数を渡すと、その関数内で現在の state の値へアクセスできるようになります。setState 呼び出しはバッチ処理されるため、更新処理を連結して、それぞれの更新が競合せずに順序だって動作することが保証されます。
setStateを使うときは、更新関数を利用するといい
イミュータブル,ミュータブル
変更の検出をするために、直接書き換え（ミュータブルな操作）すると差分チェックができないため
更新するべきコンポーネントを探しやすい
完成
最後に
-
チュートリアルの所要時間
- 1時間くらいで完了できる内容になっていました
- 一旦、3目並べとしてなら、もう少し短く済みそう
-
つまったところ
- Stateを管理するコンポーネントを変更していきながら進んでいくので、State、Propsあたりで混乱しました
- エラーで動作しなくなることもありましたが、チュートリアルの中に、途中段階のコードがちょくちょくあるので、見比べたりコピペしたりして、エラーを解消できました
-
学んだ点
- とりあえずReactに足を踏み入れたという感じはします
- Stateが非同期ということなので、作っていく段階でアレ？っていう動作をしそうなコードを書きそうだと感じました
- ライフサイクルを勉強したほうがココらへんが、落とし込める気がします
- チュートリアルでは触れられていない関数コンポーネントとか、まだ複数のコンポーネントがありそうです
最近のサービスのフロントエンドは、ボタンを押したとかのアクションに素早く応答して画面に表現してくれます
Reactを勉強して、今のフロントエンドを理解できるようにしていこうと思います