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分かかりそう
これが序盤の序盤の序盤だと思うと吐きそう。とりあえず明日は今日書いたソースコードを読んでから次の章に移ろうと思います
9/6(土)
念願のボートレース平和島とサッカー観戦でサボった
9/7(日)
朝からフットサルで飲み会が夜からあるから、昼間にやろうとしたけど自分に負けた
9/8(月)
シンプルに残業して帰りが遅くなった
9/9(月)
シンプルに残業して帰りが遅くなった
9/10(水)
リモートで時間があったのでやった
読んだ記事
Reactの流儀
学んだこと
-
コンポーネントを作成する順序
シンプルなアプリケーションであれば階層の高いコンポーネントから作ると良いらしい。
大規模なアプリケーションは階層の低いコンポーネントから作ると良いらしい。
再利用できそうな小さいコンポーネントからどんどん作って行くイメージ？ -
stateとpropsの使い分け
作業
４日間PCを立ち上げなかったせいか電源が切れており、npm startをしてもエラーがでてしまった。（原因不明すぎてイラついた）
9/11(木)
EAFC25をやってサボった
9/12(金)
会社の飲み会でサボった
9/13(土)
ボートレース多摩川とフットサルの間の時間でやった
読んだ記事
Reactを初めてみた3日目
JSとJSXの違い
学んだこと
-
vite
詳しく調べられてないけど、とにかく便利なビルドツールだった -
JSX
HTMLライクな構文を使用してReactコンポーネントを記述することができる
javascriptのようにメソッドを利用せず、HTMLをそのまま渡すことができる
作業
水曜日にやった「Reactの流儀」のサンプルコードを実行しようと思ったが、環境がおかしくなったようで立ち上げることができなかった。
ざっくりこんなエラーが出た。
react.dev@0.0.0 start
~
react-scripts 0.0.0
Error: EMFILE: too many open files, watch
react-scripts をインストールしてみたものの、うまくいかず調べていると vite というビルドツールがあるという記事を見かけて試したところ普通に立ち上がった。
jsファイルがjsxファイルになったので、違いを調べつつ学習に影響なさそうだったのでこのまま進めることにした。
フットサルの時間が近づいてきたので、明日「reactの流儀」の続きをやります。
9/14(日)
昨日夜のフットサルと午前中のフットサルで脱水症状になったのでサボった
9/15(月)
東京ダービーのためサボった（FC東京勝利！）
9/13(火)
会社帰りにカフェでやった
読んだ記事
Reactの流儀
覚えたこと
-
state
stateはコンポーネントの共通の親のコンポーネントに置く（サンプルコードのように複数コンポーネントを跨ぐ場合） -
e.target.value
onChange()を呼び出した時に使った e.target.value とはなんなのか調べた。
e(event)はイベントオブジェクトを表していて、targetにイベントが発生した要素があり、valueはその値を保持しているとのこと。
イベント処理で保持している値を取得するときに、eオブジェクトから取得していると覚えておく。
- indexOf
javascript の文字列検索の関数
作業
食べ物の名前とカテゴリと値段、在庫が入った配列を検索バーに入力された値に応じてフィルタリングする機能を作った。
イベントオブジェクトを利用して、入力された値をstateへ渡す。
渡された値を利用して、文字列比較を行いフィルタリングした。
大きい階層のコンポーネントで指定した値を下のコンポーネントで表示する方法、下のコンポーネントから親コンポーネントの持つstatusへ更新をかける方法を学んだ。
双方向データバインディングと呼ぶらしい
9/14(水)
React アプリの作成
Discussion