作業概要

環境構築をして、チュートリアルを終わらせた。やっぱりゲーム作るの楽しいな。勝利の判定ロジックがシンプルに書かれてて面白い。でも、初心者だとブラックボックス的に見えちゃうんだろうなぁ。もったいないなぁ。

Udemyがセールしてたので3本購入した。（毎度思うけど94% OFFってぶっ飛んでんなぁ。）

作業時間/見積：3.5h / 3h

学び

教材作り的な観点と学習者の観点で分けて書いていっても良さそう。

create-react-appが強ぇ...
- 必要なpackageをinstall
- アプリのディレクトリ生成
- ローカルサーバー起動もコマンド1発
  - オートリロード付き
  - 同じネットワーク内からアクセスできるURLを表示してくれるので、スマホからPCのローカルサーバーへアクセスできる
- テストやビルドの仕組みも用意されている
学習をoptionで選べるのは自由度増えて良い体験
- チュートリアルにローカルで作る人は環境構築してねというのがあった
- 閉じてあるので関係ない人はスルーするだけ
- やりたい人は開いて学べる
今やっていることの完成形が分からないとかなり不安
- 先に設計図なり、見本なり見れると良かったな
- GameController的なの要るのでは？と思いながら作っていて、やっぱり最後に出てきた
- エラーが出て良い箇所とそうでない箇所の明確な区別が無く、デバッグすべきか悩むシーンがあった
VS Codeのコードスニペットをはじめて使った
- とりあえずよく書くreactのconstructorを登録
- スニペットを配ってる人もいるけど、呼び出せないと意味ないので自分で作る方が良いと思う

VS Codeにアドオンを追加
- 参考記事: React: Visual Studio Codeで開発環境を整える
- ESLint
- Prettier - Code formatter
nodeのバージョン管理
- nodebrewを久々に使った
- v13.12.0に上げた
create-react-appって何やってんの？
- 脳死でできるぐらい便利なのは分かったけど、何をやってるのかはログ眺めただけじゃ良く分からない
- 軽く調べたけど深そうなので後回しにして未調査に積んどこう
コンポーネントのkey
- 同じキーならstateを保持して使い回せる
- keyが変化していれば破棄して再生成される
- Devtoolでkeyを確認できる？
未調査
- GraphQL
- プロトタイプベース言語
- create-react-appがやってること
- yarn test, yarn buildを用いた開発フロー
- React DevToolsの使い方 ← 次はコレを試したい