Udemyの動画教材でReactを学んでいて、「コンポーネントの作り方」「画面に渡すデータ(Props)の扱い方」「状態(State)の管理」といった、Reactの土台になる部分を一通り学び終えました。
JSX、コンポーネント、Props、State。用語には少しずつ慣れてきたものの、正直まだどちらも頭に馴染みきってはいません。
進めながら気づいたのは、Reactの記法だけを追いかけても足りないということでした。「なぜこの書き方をするのか」の理由が、素のJavaScriptの理解不足で分からなくなる場面が何度もありました。Reactを学んでいるつもりが、JSを学び直している。そんな感覚です。
わからないまま進める、を選んだ
完璧に理解してから次に進む、というやり方は今回は選びませんでした。
作品を作りながら、手を動かしながら、後から少しずつ腑に落ちさせていく。「わからないまま進める気持ち悪さ」より、「作りながら繋がっていく」方に賭けています。
Web制作を身につけたときも、実はこのやり方でした。今回も同じで良い気がしています。
AIに丸ごと書かせない理由
学習中、AIにコードを丸ごと書かせるという選択肢は取りませんでした。理由は単純です。自分が読み解けないコードは、自分のものにならないからです。
正直、自分で書くと時間がかかります。しんどい場面もあります。それでも、今この段階でそこを飛ばしたくありませんでした。
でも、アシストは積極的に使う
丸投げはしない。一方で、IDEの補完やEmmet、インラインチャットからの提案は普通に使っています。
今日、実際にこんなことがありました。useStateと打ったとき、候補一覧が出ている状態でEnterを押さずに次へ進んでしまい、usesという未確定の文字列だけが残って画面がエラーになったのです。原因は単純で、候補を選び切らないまま入力を終えていたことでした。
VS CodeのJSX補完がそもそも効いていなかったこと(Emmetの対象言語設定にJSXが入っていなかった)にも、今日別で気づきました。設定を一つ足すだけで直る話でしたが、こういう細かい詰まりは、自分で書いているからこそ気づけるものだと思います。
ケアレスミスを防げて、しかも速くて確実。IDEの機能やEmmet、インラインチャットの提案は、そういう位置づけで使っています。「考える部分は自分でやる」「機械的な部分はツールに任せる」という線引きが、今回の学習で少しずつはっきりしてきました。
今の自分なりの答え
- コードを理解する部分は自分の手でやる。ここは今すり抜けない
- ミスを防ぐ・速くする部分は、迷わずツールに任せる
「AIをどこまで使うか」は、制作畑からフロントエンドに移ろうとしている人なら、一度は必ず迷うポイントだと思います。特に、制作の現場で「速さ」に慣れてきた人ほど、この線引きに悩みやすい気がしています。
丸投げ拒否、アシスト活用。今の自分なりの答えですが、これが正解かどうかはまだ分かりません。作りながら、また見直していくつもりです。
