Next.js経験値0の状態でやっておけばよかったことまとめ
はじめに
これはReactを触り始めて3ヶ月ぐらいたったかなぐらいの時。
Reactを吹っ飛ばしていきなりNext.jsのPJに入るという宇宙線に飛ばされた私の「あれやっておけばよかった〜」という悔恨日記である。
同じような境遇の方の参考になれば幸いです😇
スペック
前提として、いずれもPJ開発経験「なし」！！
- React：3ヶ月
チュートリアル後、自己研鑽として静的サイトをReactで構築し直してみる程度。「コンポーネントを作ってみよう」と模索している段階。 - Next.js：0ヶ月
チュートリアル未。過去サイトを作る際に「一部をNext.jsで管理した方が良さそう」と感じ、ほんの少し触ったことがある程度。 - TypeScript：0ヶ月
チュートリアル未。前職でTypeScriptへの移行が進む中、少しだけコードを読んだり触ったりした経験がある程度。知識はほぼゼロに近い状態。
結論「公式チュートリアルを急いで取り組むと良い!」
これに限ります。
未経験の状態で一番辛いのは「理解できない」から「作れない」という状況に陥ること。
で、孤独のグルメと違い孤独になると挫折する。
逆に私がメンタルボロクソになりながら乗り切れた要因の一つは「Reactのチュートリアルを終わらせていたから最低限の知識はあった」ということです。
そしてメンタルボロクソになっている時に声をかけてくれたメンバーの寄り添い・励みがあったことが何よりの支えでした😭大感謝!
公式チュートリアル
初心者が陥りやすい部分
チュートリアルを終えていても初心者なので陥りやすい部分があります。
私の経験から以下の項目は特に注意して取り組むべきでした👇
- 型定義の重要性 →型をどのように定義し、管理すれば良いのか。
- コンポーネント設計の工夫 →再利用可能な設計、条件分岐を使ったファイル整理の方法。
- Routerの扱い
- エラーの解消方法
- Hookの使い方 →プロジェクトでよく使うHookの理解。
という部分に加え
- びびっちゃダメ。未経験であっても、とりあえず触れてみることが大事。
- 周りくどいと思える設計やファイル構成は後でメンテナンスが大変になりがちなので最初からシンプルでわかりやすい方法で進めていくこと。
というのを感じました。
時間があればUdemy
コミュニティーに入るよりも、公式チュートリアルをやってみること。
そして公式チュートリアルが難しいのであればUdemyをお勧めします。
プロが解説しながら手を動かしており、また質問もできるので時間があるのであれば
Youtubeの解説でも良いのですが英語が多かったり、手法としてギリギリ攻めている...と感じるものがあるので丸っと初心者には向かない内容が多いかもしれないです。
0ベースだからこそやっていたこと
チュートリアルをやる暇が一切なかった。（言い訳）
そんな状態で手っ取り早く動いて効果があったアプローチを晒す。
- 公式ドキュメントを片手に調べながら進める
- PJメンバーが書いたページやコンポーネントのソースをひたすらみまくる
- 1日考えてもわからなかったら質問する
複雑な管理の状態でもこの動きでよくここまで進めれたなというのをまず褒めてあげたい。
お前はよく頑張っているぞと...。
全く何もわからない状態からスタートしたので「やりたいことの状態」や「関連しそうな単語」で検索→さらに公式ドキュメントで深掘りして実装を試す。
それでもわからなければ再度Web検索→それでもわからなければGPT→これで1日やってもわからなければ初めて質問する...というスタンスで進めていました。
初めての技術で挑むPJのコツって多分こんな感じなんだろうなと思った。
特に効果があったのは
「すでにPJ内にあるページやコンポーネントのソースをひたすらみまくる」ということ。
PJごとに管理のルールや独自の書き方があるため、ソースを読むことで以下のようなことが把握できました。
- PJ全体の構成や状態
- コンポーネントの分け方や再利用の方法
- ソースコードの書き方やスタイル
を知るのは大事だと思った。
個人的に吸収が大きかったかもしれない。
まとめ
難しいけど楽しい！
だからこそ「チュートリアルをやっておく」「公式ドキュメントは常に片手に」「他人のソースは眺めておこう」というのは理解する上で大事なことでした。
Discussion