はじめに

年末年始の不規則な生活を反省し、生活習慣を改善しようと決意したイモトです。

今回の記事はコーダーとしてHTML・CSSやjQueryを使ったサイト制作をしていた私ですが、後述する内容でモダンな技術スタックを習得してフロントエンドエンジニアとして無事キャリアアップして、後にNext.jsを使ったプロジェクトに参画しています。

JavaScriptの苦手意識を克服し、ReactやNext.jsを実務レベルまで引き上げるための学習ステップを具体的にご紹介します。

この記事が、同じように「脱コーダー」を目指している方の参考になれば幸いです。

過去の私のコーディングレベル

まずは、私の過去のスキルについて紹介します。コーダーとして自社サービスに携わっていた1～3年目のころの話です。

HTML・CSS ⇒ PC・SP（時にはタブレット対応）のレスポンシブコーディングは問題なく実装できるレベル。
jQuery ⇒ プラグイン（slickやskrollr等）を使ってスライダーやパララックスを実装可能。
Vanilla JavaScript（素のJavaScript） ⇒ 非常に苦手で、変数や条件文は理解できても、関数やクラス構文があやふやなレベル
PHP ⇒ 先輩エンジニアのコードを参考にしながら改修を続けていたのでようやくゼロから実装できるようになってきたレベル

この状態で3年間を過ごし、JavaScriptの学習本を買っては諦める、を繰り返していました。

モダン環境で開発したいと思ったきっかけ

最大のきっかけは、このままでは年収アップが見込めないと感じたことです。また、SNSや周囲のエンジニアがモダンな技術スタックで活躍しているのを見て、強い焦りと劣等感を抱いていたのを覚えています。

どこから学び直しを始めたか

前置きが長くなりましたが
以下、私が実際に行った学習ステップを順に紹介します。

1. JavaScriptの基礎から学ぶ

まずはJavaScriptを基礎から学び直しました。これまで参考書を途中で放棄していたため、今回は「実装して学ぶ」ことを意識しました。

重点を置いたポイント
変数・配列・条件文：基本構文を復習し、実践で使える知識に落とし込む。
関数の返り値・引数：関数の仕組みを理解することは、Reactのpropsやイベント処理の理解に直結します
使用した教材
オライリーの「初めてのJavaScript」。全て読む必要はなく、上記の変数、配列、条件文、関数等の基礎を読んでいました
実践したこと
まずは簡単なDOM操作を学び、JavaScriptがHTMLに与える影響を体感。
次に、オセロゲームやじゃんけんゲームを通じてロジックを構築。
わからない部分はChatGPTを活用するが、まずは自力で考えることを徹底。

2. Reactの基礎を学ぶ

Reactでは、コンポーネントや状態管理が重要な基礎となります。公式ドキュメントを中心に学び、以下の手順で実践しました。
状態管理（state）やuseEffectなどは最初は理解が難しいかもしれません。その際は公式ドキュメントのスタートガイドを参考にし、さらに書籍やChatGPTを活用して補完してください。

学習の流れ
1. 公式の「クイックスタート」を参照し、基本的なコンポーネント設計を体験
2. 状態管理（State）やuseEffectなどの基礎を理解
3. 実際に「TODOリストアプリ」を作成し、コンポーネント間のデータフローを学ぶ
  状態管理やライフサイクルの理解に苦労する場合は、書籍「りあクト！」やChatGPTを活用。
おすすめ教材

3. Next.jsを学ぶ

Next.jsは、Reactの弱点を補う機能が豊富に用意されたフレームワークです。
以下の手順で学びました。

公式ドキュメントの活用
Next.js公式ドキュメントを見て学習して、SSRやSSGなどのレンダリング手法を学び、ブログサイトを作成
実践例
Eコマースサイトを作成し、SSRやAPI連携の基礎を理解
ここまでくると作りたい欲が色々出てくる頃かなと思いますので、作りたいものをNext.jsで実現してみてください！
思いつかなければ、以下のようなものがおすすめです。
おすすめ制作物
ブログサイト（SSGや動的ルーティングの学習）
Eコマースサイト（SSRやAPI連携の実践）

4. TypeScriptを学ぶ

フロントエンドエンジニアとして今後キャリアのことを考えるとTypeScriptも学習することをおすすめします。
TypeScriptは、コードの安全性を高め、プロジェクト全体の品質を向上するものなので技術スタックとして採用している企業も多いです。

おすすめ教材
1. りあクト！
2. TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
3. サバイバルTypeScript

学習後も実践を繰り返しましょう！！JavaScript学習の際に作成したオセロゲーム、じゃんけんゲームなどをTypeScriptへリファクタリングしてみるのもよいですし、ReactやNext.jsの時に作成した制作物をTypeScriptへリファクタリングするのも良いです！

実践したこと
以前に作成したオセロゲームやReactアプリをTypeScriptにリファクタリング

さいごに

基本的に「学ぶ→作る」のサイクルを繰り返せば、必ずスキルは向上すると実感しました。

コーダーとして脱したい方、フロントエンドエンジニアとしてキャリアアップの一助になれば幸いです！