React学習日記 2025年9月
普段会社ではPHPを使って開発しているエンジニアです。
かれこれ7年ぐらいPHPを触ってきましたが、30歳となった今新たに言語を覚えようと思い今日から学習し始めました。
Reactを学ぶ理由
今勤めている会社でReactの案件が少しあったり、協力会社がReactをメインで扱っている事もあるので分かっておこうかなと思いました。
今後転職するにしても今の会社で頑張るにしても、Reactを覚えることが何かの良いきっかけになればと思います。
学習のゴール
- 社内でReactを扱った業務を任せてもらう
- 個人開発でReactとNext.jsでアプリケーションをリリースする
日記
ここからは2025年9月にどう勉強したか記録します。
9/1(月)
読んだ記事
Reactドキュメント
クイックスタート と 三目並べ
学んだこと
- コンポーネント - ボタンなどの小さい部品やページ全体などのマークアップを返す。reactはコンポーネントの組み合わせで構成されている
- state変数 - useStateをインポートして利用する。コンポーネントに値を保持しておくことができる
const [現在の値, 値を更新する関数] = useState(初期値);
// 値を更新する関数をonClickなどで実行すると値が更新される
useで始まる関数はhookと呼ぶらしい。
stateフックとかっていうのかな？
実作業
node.jsをインストールし、三目並べを実行するローカル環境を作成
3目並べで四角い枠をクリックすると「X」が反映することろまでやった
9/2(火)
眠かったが仕事の後に新宿三丁目のカフェに寄って気合い入れた
読んだ記事
Reactドキュメント
三目並べ - ゲームを完成させる
学んだこと
-
stateのリフトアップ
子コンポーネントでクリックされたかどうかの状態を管理していたので、目の単体でしか管理できていなかった
stateを親コンポーネントに配列で持つことで、各子コンポーネントで更新された状態をまとめて管理することができる
データの流れを確認しようとするとちょっと混乱するけど、子コンポーネント基準で流れを確認すると分かりやすい気がする -
props
props という単語が急に出てきてわからなかったので調べた
https://ja.react.dev/learn/passing-props-to-a-component
HTMLの属性みたいなやつに引数を渡すと値の受け渡しができる
これをpropsと呼んでいるらしい
↑理解正しいかな？
- データの更新の仕方
保持しているデータを直接更新する方法と、保持しているデータを一旦コピーしてコピーしたデータに対して変更をかけた後に元のデータへ更新する方法の2パターンある
後者は状態の変更を元に戻せるので、後に再利用できる利点がある
実作業
- stateのリフトアップ
- 次に操作するユーザの状態管理の追加
- 目がそろった時、目が埋まった時にアラートを出す（目がそろった時のパターンを返す関数を作成）
9/3(水)
2日連続仕事の後に勉強したら寝不足になってしまい、気づいたら寝てしまっていた
サボった
9/4(木)
仕事の後ランニングと坂道ダッシュしたら疲れて寝てしまった
サボった
9/5(金)
ボートレース平和島でG1があったので有給を取っていたがまさかの台風で順延。
ボートレース場の指定席で予想の合間にやるつもりだったが家でやることになった。
読んだ記事
Reactドキュメント
三目並べ - タイムトラベルの追加
学んだこと
- スプレッド構文
[...変数名, 値] とすることで、配列内の次の新しい項目を指定した値で追加できる
実作業
- 操作履歴の出力をする為のマークアップとstateを追加
- 現データの管理の追加
感想
操作履歴を出す際に「ゲームコンポーネント」と「操作履歴コンポーネント」が子コンポーネント化して、ボタンとかが子子コンポーネントになってしまったがこれはうまく管理できるのか。
ややこしくなっちゃいそうで不安だが、うまく管理できるやり方があると信じてる
一旦完成したけど、データの流れを改めて追うと混乱する
こんな1番最初のチュートリアルで作るアプリケーションのデータの流れを追って理解するのに20分ぐらいかかった気がする
また明日同じソースコードを読み返しても理解するのに20分かかりそう
これが序盤の序盤の序盤だと思うと吐きそう。とりあえず明日は今日書いたソースコードを読んでから次の章に移ろうと思います
Discussion