こんにちは．
ギリギリ専門学生T.Miura(24)です.
訳ありです．
この記事は私がReact超初心者から初心者へ至るまでの手記です．
Reactを始めてから手記を書くまでの期間は半月ほどです．
私が皆様の物差しになります．
私の事前知識
基本情報程度のコンピューターサイエンスの基礎
Java 基礎 | servlet jsp 基礎
C++基礎
既存PHPの改修
Javascriptについては全く触ったことがありませんでした．
C++やJavaのメモリ関連は役立ちました．
対象者
reactをこれから学び始める人へ
はじめに
私は初めてReactで開発を始めたのは 2025/1末です．
pokeAPIを使用してポケモンを表示するものを作成していました．
しかし，これはほぼAIに作成してもらいました．
自分で書いた所なんて3割ないくらいだと思います．
自分で書いた所もReactと検索して設計思想を見たりYouTubeで学んだりラジバンダリです．
今思うとこれは完全に効率が悪かったです．
Stateやprops等についてしか学んでいませんでしたが，体系的に学んでいなかったので全体像が不明のまま進めていました．
ただ，メリットもあります．
次の勉強法がスムーズに入ってきた + 見返したら読めるようになって感動しました．
一度は何も分からずAIに頼って成果物を作成するのをお勧めします．
学んだことを活かしてその成果物を魔改造するのもアウトプットになりますからね．
私の勉強法
月並みですがUdemyを使用しました．
Udemyはセクションごとなのでいつでもアウトプットできます．
(AI成果物をここで魔改造するのです)
この講座はハンズオン形式だったので，Udemyを眺めながら面白そうなところは自分でやってみるを繰り返してます．
分からないことは以下のプロンプトを使用してchatGPTに聞いていました．
私の質問内容について対話形式で初心者向けに解説してください
登場人物は「初心者プログラマ」「超凄腕敏腕プログラマ」です
初心者プログラマは仮説を用いて超凄腕敏腕プログラマに質問します．
仮説にはあっている点と，初心者が陥りやすい間違いがあります．
超凄腕敏腕プログラマは仮説に対してフィードバックします．
超凄腕敏腕プログラマはフィードバックの他に質問された技術について以下のセクションで回答します
生まれた理由
製作者の思想
低レイヤーでどのようになっているのか？
よくある使われ方
できること
できないこと
実務の現場での使われ方
モダンな使われ方
その技術がなかったらどうなるのか
注意点
よくあるミス
使ってはいけないケース
以下質問内容
{質問内容}
なぜこれを聞いているのか
最初のプロンプト
私の質問内容について対話形式で初心者向けに解説してください
登場人物は「初心者プログラマ」「超凄腕敏腕プログラマ」です
初心者プログラマは仮説を用いて超凄腕敏腕プログラマに質問します．
仮説にはあっている点と，初心者が陥りやすい間違いがあります．
ゆっくり解説は好きですか？
あれわかりやすいですよね．
片方が専門家に徹して片方は知らない
その親近感でとても見やすく頭に入ってきやすいです．
それを利用しています．
次のプロンプト
生まれた理由
製作者の思想
低レイヤーでどのようになっているのか？
よくある使われ方
できること
できないこと
実務の現場での使われ方
モダンな使われ方
その技術がなかったらどうなるのか
製作者の思想を理解することによってよりReactを理解できるようにするために聞いています．
正直，使い方よりも重視しています．
何を解決するために生まれたのかを製作者目線で考えることが回り道のようで近道なのかと考えています．
その次に実際の使い方です．
Udemyで出てきた使い方はもちろん，思わぬ使い方や実務的な使い方もしれます．
モダンな使われ方では，さらに発展的なアーキテクチャについて触れてくれることが多いので思わぬ収穫があります．
注意点, よくあるミス, 使ってはいけないケースについて
注意点
よくあるミス
使ってはいけないケース
聞き方でもわかるようにダメなことを教えてもらってます．
教えてもらったことを教訓に自己流で変な使い方をしないようにしています．
実務で使う時に周りのエンジニアから嫌われちゃいますからね．
プロンプトの利点
自分でも気づかなかった陥りやすい間違いをしれることですね．
失敗を知ることが一番の近道です．同じ轍は踏まないことが大事ですから．
そして，質問内容に仮説を書くことが重要です．
自分の意見を持って発言する，質問することは今後の人生で必ず必要になります．
「Stateって何？」
ってただ聞かれただけだと ggrks! って言いたくなりますからね．
成果物
ここからは私の成果物についてです
開発環境
react 18
node 18
docker 27
- State
- Reducer
- Context
基本的に上記を使用してTodoサイトを作成しました．
AI使用について
成果物
CSS以外AIを使用せずにTodoサイトを作成
こだわり
コンポーネントを適切に分割し，再利用性を高める
- buttonやinputをコンポーネント化しpropsで送る．
- 同じことを何度も書かなくてよくなって楽．
- 特定の機能以外は受け付けないようにする
Contextを使用
- コンポーネントで使用するものは定数にする.
useContextで呼び出してそれを使用する形です．
常に定数をpropsで渡すことで，reducerのtypeに変なものを入れてしまうことが一度もありませんでした．
私の弱点
- CSSに弱すぎる
- TailwindCSSを学ぶ前に vanilla CSSを学ぶ必要があるかも
- 変数名のぶれ
- inputフィールドのリセットができていない
React初心者以降へ行くためには
- useEffect
- Redux
- Next.js
規模が大きくなると必要になるものですので，これらの設計や使用方法を覚えることが中級者への入り口な気がしています．
そもそも論
Reactの書き方を覚えることについて．
私的にはReactの書き方を覚える必要はないと思っています．
なぜその仕様なのか，どういった思想でできたのか
そういった抽象的なことを知り，落とし込むことが重要だと考えています．
書き方なんて言語がかわればまるで違うこともあります．
仕様，思想を知る，理解する力を養えば長期的に見れば近道ではないでしょうか？