はじめに
コーダー向けのスキルアップロードマップを作成しました。
以下2点は学習済みという前提で、その先どのように学習するかの手引きになります。
- HTML, CSSの基礎は理解できている
- FTPでコーディングしたデータをアップロードして本番環境でサイトを公開できる
これらがまだ怪しいという方は、まずはこの2つを学習してみてください。
ロードマップの全体像
まずはロードマップの全体像です。後ほど各項目ごとに詳しく解説していきます。
初級・中級・上級の3つに分けており、各級のスキル感でどのようなプロジェクトに携われるかも解説しています。
初級（経験年数目安：1〜2年）
- コーディングの基礎知識を増やす
- デザインを忠実に再現できるようする
- 業務の流れを理解する
- CSS設計を理解する
- 画像の最適な書き出し方法を理解する
- プラグインを用いて動的な処理を実装できるようになる
- XDやFigmaなどのデザインツールを扱えるようになる
- 様々なWebサービスに慣れる
- 情報のキャッチアップ方法を見つける
中級（経験年数目安：2年〜）
- サイトが表示される仕組みを理解する
- JavaScriptで様々な処理を実装できるようになる
- PHPの基礎を理解する
- （任意）必要に応じてWordPressを理解する
- Gitを理解する
- SEO・マーケティングを理解する
- Sass, ES6, Gulp, Webpackなどを理解する
- ターミナルの操作に慣れる
- 調べ方を覚える
- 英語に耐性を付ける
- 正しいコミュニケーション方法を覚える
- アウトプットする習慣を付ける
上級（経験年数目安：3年〜）
- APIを理解する
- JSの非同期処理を理解する
- データベースの仕組みを理解する
- Vue.js, React.jsなどのモダンなフレームワークを理解する
初級編
初級編は以下の通りです。
- コーディングの基礎知識を増やす
- デザインを忠実に再現できるようする
- 業務の流れを理解する
- CSS設計を理解する
- 画像の最適な書き出し方法を理解する
- プラグインを用いて動的な処理を実装できるようになる
- XDやFigmaなどのデザインツールを扱えるようになる
- 様々なWebサービスに慣れる
- 情報のキャッチアップ方法を見つける
まずは1〜3をしっかりと学びましょう。これらを疎かにすると、実際のプロジェクトでスキル不足や知識不足によるトラブルを起こす可能性があります。
1. コーディングの基礎知識を増やす
まずは基本的なコーディングの知識を増やしていきます。
以下で紹介しているのはあくまで一例です。このように、まずはベースとなる知識を広く浅く「知る」ところから始めましょう。
- HTML Living Standard
- コンテンツモデル
- コアウェブバイタル
- ブラウザによる挙動の違い
- Can I use（ブラウザごとのサポート状況を確認できる）
- Polyfill（ポリフィル）による対策
- 様々なレイアウト手法（Flex, Gridなど）
- サイトの読み込み速度の決まり方（どのように読み込み速度を速くできるか）
- レスポンシブ手法
- SEO
- 計測タグ
また、様々な専門用語も理解できるようにしておきましょう。
2. デザインを忠実に再現できるようする
デザインは様々なメンバー（デザイナーやクライアント）によって作られます。そして、完成したデザイン通りにサイト上で表示されないと、これまでの過程が水の泡です。
難しいレイアウトでコーディングに時間がかかってしまう場合は繰り返し練習あるのみです。
コーディングで再現が難しい場合は画像で対応しても問題ないか、先方やディレクターに相談することも大切です。
また、プロジェクトによってはピクセルパーフェクトを求められることもあります。この辺りはトラブルになりがちなので事前に確認しておくといいでしょう。
3. 業務の流れを理解する
Webサイト制作には様々な業務フローが存在して、それは会社やプロジェクトによって多種多様です。
しかし、大まかな流れは同じなので、どのような工程があるのかはしっかりと把握しておきましょう。実装に関する部分だけでなく、初回コンタクトや契約からリリース後の運用まで（プロジェクトの最初から最後まで）の流れを理解しておくのが重要です。
そして、自分はどこを対応できるのか、得意部分はどこなのか、今回のプロジェクトの対応範囲はどこまでなのか、などをしっかりと把握しておくとプロジェクトが成功しやすくなります。
4. CSS設計を理解する
賛否両論ありそうですが、前述の1〜3を習得するまではCSS設計のことは一切考えなくていいと私は思っています。
いくらCSS設計が完璧でもデザインと全然違ったら元も子もないですし、基本的な知識やリテラシーがないとトラブルも起きやすいです。
・・・
CSS設計の種類は数多くありますが、一番最初は「OOCSS」がおすすめです。とてもシンプルでCSS設計のコツを掴みやすいと思います。
OOCSSが抽象的過ぎて逆に分かりにくい方は「FLOCSS」がおすすめです。OOCSSよりルールが明確なので、OOCSSでCSS設計のイメージが湧きにくいという方は是非試してみてください。
最初のうちはCSS設計なんてめんどくさいだけ、クラス名や構造を考えたりすると逆に時間がかかってしまう、と考えると思います。私もそうでした。
しかし、CSS設計を正しく理解することで、複数ページのコーディングでも効率良く作業ができたり、慣れればクラス名や構造を考える時間も一切気にならなくなります。
しばらく時間が経ってページの一部分を改修することになっても、既存のコードを使いまわせたり、予期せぬレイアウト崩れを防ぐこともできます。
また、昨今のフロントエンド開発（React.jsやVue.js）のコンポーネント設計の考え方にも応用できるので、将来フロントエンドエンジニアの道に進みたいと思っている方でもCSS設計はしっかりと学ぶことをおすすめします。
5. 画像の最適な書き出し方法を理解する
サイトの容量のうち大部分を占めるのが画像です。画像の書き出しを適当に行うと、サイトパフォーマンスが著しく悪くなります。
拡張子は画像の種類によって使い分ける必要があるので、まずは各拡張子の特徴を学びましょう。
また、画像の圧縮も大切です。場合によっては劣化してしまう可能性もあるので気をつけましょう。
6. プラグインを用いて動的な処理を実装できるようになる
最初のうちは機能の実装はプラグイン頼みで問題ありません。jQueryを使った書き方でも大丈夫です。
まずはスライダーやモーダルウィンドウ、アコーディオンなどのよく使う機能を実装できるようになりましょう。
7. XDやFigmaなどのデザインツールを扱えるようになる
昨今のWebデザインはXDかFigmaで作られることが多いです。
画像の書き出しやコンポーネントの別バージョンの切り替え（ホバー時の見た目など）、共同ファイルの場合は変に編集しないようにするなど、最低限で大丈夫なのでこれらのツールを扱えるようにしておきましょう。
XDとFigmaは無料で利用できます（2023/3現在）。
8. 様々なWebサービスに慣れる
Web制作では様々なサービスを利用します。
コミュニケーションツールではチャットワークやSlack、課題管理ではバックログやJira、ソース管理ではGithubやGitLabなど、数多くのサービスを利用します。
これらの操作に自信がない方は、自分でアカウントを作って触ってみるといいでしょう。
9. 情報のキャッチアップ方法を見つける
Web業界はトレンドの移り変わりがとても激しいです。日々情報をキャッチアップすることを常に心がけましょう。
情報のキャッチアップ方法の例
- ニュースサイト、オウンドメディア
- SNS
- 同僚や知人
- ウェビナー、イベント参加
- メルマガ
また、ある特定の環境（同じ地域や同じ会社）にずっといると、そこでの「当たり前」が必ず存在してきます。しかし、そこでの当たり前は、実は全く当たり前でないこともあります。
このようなことは結構あるので、俯瞰して物事を考え、自分の中の情報を常にアップデートするようにしましょう。
初級のまとめ
これまでの内容をマスターできれば、ペライチのLPや数ページ程度のサイトのコーディングなら問題ないと思います。
逆に、これまでの内容が疎かな状態で仕事を貰うとトラブルになる可能性が高いので、まずは初級編の内容をある程度マスターすることを目指してみましょう。
初級編の知識は本当に基礎の基礎ですが、ここを疎かにしてはいけません。基礎をしっかりと固めることで、中級上級のスキルにも活きてきます。
中級編
中級編は以下の通りです。
- サイトが表示される仕組みを理解する
- JavaScriptで様々な処理を実装できるようになる
- PHPの基礎を理解する
- （任意）必要に応じてWordPressを理解する
- Gitを理解する
- SEO・マーケティングを理解する
- Sass, ES6, Gulp, Webpackなどを理解する
- ターミナルの操作に慣れる
- 調べ方を覚える
- 英語に耐性を付ける
- 正しいコミュニケーション方法を覚える
- アウトプットする習慣を付ける
中級編では、コード以外の知識もどんどん学んでいきます。こうすることで、Web制作全般のリテラシーが高まり、想定外のことが起きたり未経験の内容の依頼が来ても適切な見積もりや対応ができるようになります。
1. サイトが表示される仕組みを理解する
サイトがどのようにブラウザ上に表示されるのかを理解していると、エラーが起きたときに何が原因なのかを正しく判断できたり、複雑な処理を実装をすることになってもうまく対応できるようになります。
学習の観点の例
- ブラウザの動作について理解する（HTTPリクエスト、HTTPレスポンス、文字や画像がブラウザに描画される順番や仕組みなど）
- Web制作におけるフロントサイドとサーバーサイドの違いを理解する
- サイトを公開するにあたり必要な技術やサービスを理解する（サーバー、ドメイン、DNS、データベース、開発/ステージング環境などのインフラ全般など）
2. JavaScriptで様々な処理を実装できるようになる
これまでJavaScript（以下JS）の処理をjQueryで書いていた場合、jQueryは使わず純正のJSで書くようにしましょう。また、純正のJSで書くことを「Vanilla JS」や「Pure JS」と呼びます。
JSをしっかりと理解できれば、プラグインのカスタマイズや難しい処理の実装なども少しずつできるようになります。
JSの学習の観点をいくつかまとめてみました。
DOM
DOMとは何か、JSでDOM要素を取得や編集する方法など、DOMの基本的な概念や操作方法を理解しましょう。
基本構文
基本的な文法、データ型、演算子、関数、クラス、オブジェクト、プロパティ、メソッドなどのJSの基本的な構文を理解しましょう。
処理の実行タイミング
JSの処理は基本的にイベントをトリガーに実行されます。
なので、イベントとは何か、イベントの種類、登録方法、イベントの伝播、イベントプロパティ、などのイベントの基本的な概念や操作方法を理解しましょう。
また、JSファイルの読み込み位置（<head>の中や</body>の手前など）による違いも理解しておきましょう。これを理解できれば、読み込み位置によってエラーが出るときと出ないときがある理由が分かり、最適なJSファイルの読み込ませ方も分かるようになると思います。
配列操作
連想配列や多次元配列、それらの宣言方法、追加や削除の方法、ソートや絞り込み方法など、配列に関する基本的な概念や操作方法をまずは学びましょう。
また、ES6以降の記法で配列を操作する便利なメソッドがたくさんあるので、それらも扱えるようにしておきましょう。
| メソッド | 解説 |
|---|---|
map() |
配列内の要素に対して自由に処理を加え、新たな配列を返します。 |
reduce() |
配列内の各要素に対して、指定された関数を適用し、単一の値を返します。 |
filter() |
条件に一致する要素だけを含む新たな配列を返します。 |
find() |
条件に一致する最初の要素を返します。 |
findIndex() |
条件に一致する最初の要素のインデックスを返します。 |
some() |
条件を満たす要素が配列に含まれているかどうかを返します。 |
every() |
配列内のすべての要素が指定された条件を満たすかどうかを返します。 |
includes() |
指定された要素が配列に含まれているかどうかを返します。 |
flat() |
入れ子になった配列を展開して、新しい平らな配列を作成します。 |
flatMap() |
map()とflat()を同時に実行し、各要素を変換してから、結果の配列を平らにします。 |
プラグインのカスタマイズ
プラグインにはオプション（スライドの移動速度やページネーションを表示するかなどの設定）の他にも、イベントやフックという仕組みが用意されています。
これらを利用することで、特定のプラグイン側の処理の時に独自の処理を追加したりなど、プラグインをより自由にカスタマイズすることができます。
このようにプラグインを自由にカスタマイズするには、公式ドキュメントを読み解く力も必要なので少しずつ慣れていきましょう。
綺麗なJSを書けるように
変数や関数名を分かりやすく命名するのはとても重要です。後で見返したり、違うメンバーが見ても一瞬で理解できるようにしましょう。
適切なコメントを残すことも大切です。JSDocコメントというものを取り入れてみましょう。
他にも参考になりそうな記事をいくつか貼っておきます。
（jQueryですが考え方の参考になります）
3. PHPの基礎を理解する
PHPを扱えれば、共通パーツの外部ファイル化や変数や関数によるHTMLの記述効率化などができるようになります。
基本的な構文や考え方はJSと同じですが、JSはフロントサイドで実行されて、PHPはサーバーサイドで実行されるという大きな違いがあります。この観点を意識して学習してみましょう。
学習の観点の例
- 変数や関数の定義方法
- if文、for文などの基本構文
- 外部ファイルの読み込み方法
- 変数のスコープ
- グローバル変数
- デバッグ方法
（任意） 必要に応じてWordPressを理解する
昨今のコーディング教材にはWordPressが必ずと言っていいほど組み込まれています。しかし、必ずしもWordPressを学習する必要はありません。
将来Web開発をメインでやりたいという方には正直ほぼ不要です。なので、WordPress系のプロジェクトに携わりたいという方のみ学習する方針でいいと思います。
WordPressの学習範囲は主に3つに分かれるので、自分にあったケースで学習してみてください。
- 既存テーマや有料テーマを用いたノーコードベースでの開発
- オリジナルテーマでの開発（ブロック機能は使わない）
- オリジナルテーマでの開発（ブロック機能を使う）
※ブロック機能 = ブロックエディタやブロックテーマ
ブロックエディタ（Gutenberg/グーテンベルグ）とは、WordPress5.0から標準搭載されている、ワードプレスで記事やページを編集する機能です。文章や画像をブロック単位で管理するため、より直感的に操作できるというメリットがあります。
引用：https://www.kagoya.jp/howto/rentalserver/wppractice/wordpress_gutenberg/
4. Gitを理解する
一定以上の規模の会社やプロジェクトであれば、ほぼ確実にGitを使っています。最初のうちはファイル納品が多くても、徐々にGitによる納品も増えてきます。
最低限で大丈夫なので、Gitは触れるようになっておきましょう。
Gitを操作するには主に2つの方法があります。
- GUI：ソースツリーなどのアプリを使って直感的に操作する方法
- CUI：ターミナルでコマンドを実行して操作する方法
5. SEO・マーケティングを理解する
マーケティング系の専門用語や関連するサービスを全く知らないと、クライアントからの指示も理解できないので、以下に挙げたものは最低限理解しておきましょう。
- Google Analyticsの連携方法
- Google Search Consoleの連携方法
- Google Tag Managerの連携方法
- 計測タグとは
- 検索エンジンやSEOの仕組み
6. Sass, ES6, Gulp, Webpackなどを理解する
これらの技術を使うことで効率良くコーディングができます。
しかし、プロジェクトや会社によっては使っていなかったり、そもそも使用禁止なケースもあるので気をつけましょう。
学習の観点の例
- Sassを導入して様々な書き方を試してみる
- GulpやWebpackを使ってコンパイルしてみる（エディタでコンパイルする方法はあまりおすすめしません）
- JSをファイル分割してみる
- ES6以降の書き方を試してみる
- JSのプラグインを
<script>で読み込むのではなくnpmで読み込んでみる
7. ターミナルの操作に慣れる
そこそこ大きい規模のプロジェクトの場合、自分のPCに対して開発環境の構築をする場面が出てきます。また、特定の機能を自分のPCにインストールする時にターミナルでしかインストールできない場合もあります。
このように、Webの仕事を続けているとターミナルを使わなければいけない場面が必ず出てきます。なので、ターミナルの操作方法や基礎知識を身につけるのも大切です。
学習の観点
- ターミナルアプリやシェルの種類
- WindowsやMacで操作が変わることもあるので解説記事は要注意
- ターミナルの基礎コマンド
-
cd,ls,pwdを覚えればとりあえずOK
-
- 「パス通す」を理解する
- Homebrew（Macのみ）
- Node.jsのバージョン切り替え
余談
ターミナルは割と自由にカスタマイズできます。上がデフォルトで、下がカスタマイズ後のターミナルです。
デフォルトのターミナル画面（Macのzsh）
カスタマイズしたターミナル画面
上と下の画面では、それぞれgit statusとgit branchを実行しています。どちらが見やすいかは一目瞭然ですね。
カスタマイズしたほうは、カレントディレクトリのパスや今のブランチを表示させたり、コマンドの上下を一行開けて見やすくしたりしています。また、Gitに差分があるときは＋マークが表示されるようにもしています。
8. 調べ方を覚える
自分で解決できない時はググって解決することがほとんどだと思います。このググり力も少しずつ鍛えていくことが大切です。
誰かが書いた技術記事以外にも、公式ドキュメントや海外のサイトで調べる方法もあります。むしろそっちのほうが速く解決できることもあります。
公式ドキュメントは英語がほとんどですが、確実な情報が載っています。
ニッチな情報を探したい時はstack overflowを使ってみましょう。同じような質問が結構あったりします。日本語版のstack overflowもありますが、こちらは情報量が圧倒的に少ないので、使うならやはり本家がおすすめです。
他にも、teratailやMENTAのような他者に助けてもらう系のサービスも時には頼ってみましょう。
最近ではChatGPTなどのAIとコミュニケーションを取って解決する手法もトレンドだと思います。サンプルコードを求める場合は、ChatGPTよりphindのほうが処理速度が早い印象でした。
9. 英語に耐性を付ける
プラグインやライブラリを導入する際に役立つ公式ドキュメントは英語書かれていることが多いです。また、エラーメッセージも基本英語だと思います。日本語で解説記事がヒットしないときはstack overflowで探すこともあります。
このように、英語に触れる（触れなくてはいけない）場面はそこそこ多いはずです。
英語だからと億劫になっているといつまで経っても成長しないしですし、作業の速度も遅いままです。
私自身、英語は一切話せない書けないというレベルですが、英語に対してのストレスはかなり減りました。ChromeにGoogle翻訳を入れたり、VSCodeにディープラーニングを入れたり、分からない単語があったらすぐ調べるようにしていたら自然とストレスがかからなくなっていました。結局は「慣れ」だと思います。
英語に耐性がない方は、まずは自分なりの克服方法を探すところから初めてみましょう。
10. 正しいコミュニケーション方法を覚える
正しく分かりやすいコミュニケーションができないと、認識齟齬が生まれてトラブルになったり、余計な作業が増えてその分無駄に工数を消費することになったりなど、デメリットばかりです。
なので、正しく分かりやすいコミュニケーションを常に心がけるようにしましょう。
- 分からないことがあったら作業を始める前に聞く
- 自分がなにかを伝える時は、常に相手の立場になって考える
- 相手のリテラシーに合わせて言葉遣いや使う単語を変える
- 相手に手間をかけさせない
当たり前のことしか書いていませんが、この当たり前をできない人が数多くいるのが現実です。
・・・
例えば、ディレクターへのテストアップ報告は、私なら以下のように考えます。
悪い例
考えるべきこと
- すぐ確認できるようにテスト環境のURLも添えておこう
- この人は複数のプロジェクトを抱えているから、どのプロジェクトなのかも書いておこう
- リリースまでのスケジュールが短めだから、申し訳ないけど急ぎ目で見てほしいな
- スケジュールの資料は結構前のチャットを遡らないと出てこないから、このURLも添えておこう
これらを踏まえた例
11. アウトプットする習慣を付ける
アウトプットするのは大事とよく言われていますが、それはその通りだと思います。
アウトプットの選択肢はたくさんあるので自分にあった方法を探してみましょう。
- ブログ記事の執筆
- 勉強会やLTでの発表
- プロダクト（サイト）を作成して公開する
- SNSでのシェア
アウトプットするには自分の手を動かして資料を作ったりコードを書いたりするので、その時に必ず「情報を調べる」という作業が発生します。
その時に、今までなんとなく書いていたコードを深堀りして調べたり、解説記事を読んでいる時にたまたま目に入った関連記事で新たな知識を得たりなど、アウトプットをすると自分の知識がアップデートされます。なので、アウトプットするのは大事とよく言われるのです。
とはいえ、アウトプットが苦手だったり自分に合わないという方もいると思うので、そのような方は全く別の方法でスキルアップを試みるでも全然いいと思います。
中級のまとめ
これまでの内容をマスターできれば、中堅の実装者として様々なプロジェクトで活躍できると思います。多少難易度の高いプロジェクトでも、これまでの経験を活かして臨機応変に対応できるはずです。
このレベルになると、この先自分が高めたいスキルも十分に理解できていると思うので、後はその目標に対してひたすらスキルアップをしていくだけです。
上級編
上級編は以下の通りです。
- APIを理解する
- JSの非同期処理を理解する
- データベースの仕組みを理解する
- Vue.js, React.jsなどのモダンなフレームワークを理解する
- モダンな技術を学習する
上級編まで来ると、人によってキャリアビジョンが変わってくるはずです。
フロントエンド開発の道に進む人もいれば、サーバーサイド開発も視野に入れる人もいると思うので、この上級編で解説している内容はあくまでひとつの例になります。
一応、「フロントエンド開発」の道に進む前提で上級編のロードマップを作ってみました。
1. APIを理解する
フロントエンド開発やサーバーサイド開発に欠かせないのが「API」です。
APIという名前はよく聞きますが、それがどのような仕組みなのか、コード上でどのように実装するのかをまずは理解しましょう。
学習の観点をいくつか挙げてみたので参考にしてみてください。
HTTPリクエストとレスポンスの理解
HTTPリクエストの概念、HTTPメソッド（GET、POST、PUT、DELETEなど）、ヘッダー、ボディ、ステータスコードなどを理解しましょう。
API仕様書の読み方
API仕様書は、APIが提供するエンドポイント、リクエストのパラメータ、レスポンスデータなどを定義するドキュメントです。API仕様書を読み解く力も重要です。
APIセキュリティの理解
APIは、外部からのアクセスに対して脆弱になる可能性があります。そのため、APIのセキュリティについて理解し、適切な認証や認可を行うことが重要です。また、そもそもAPIがどのように作られるのかも理解しておきましょう。
エラー処理
APIリクエストやレスポンスには、エラーが発生する可能性があります。APIエラーに対する適切な処理方法を学び、エラーが発生した場合にユーザーに適切なフィードバックを提供することが重要です。
JSでAPIを実行する方法
JavaScriptでAPIを実行するには、fetch APIやAxiosを使うのが一般的です。
fetch APIを使用してAPIを実行するには、fetch関数を呼び出し、Promiseオブジェクトによってレスポンスを処理します。thenメソッドを使用して、レスポンスの内容をResponseオブジェクトから取得し、必要に応じて処理します。
fetch('https://example.com/api/data')
.then(function(response) {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.error('There was a problem with the fetch operation:', error);
});
2. JSの非同期処理を理解する
APIの処理は非同期で行う必要があるので、この「非同期処理」というものを理解しましょう。
JSで非同期処理を行うにはasync/awaitを使います。async/awaitは、非同期処理を行う関数の宣言方法とPromiseオブジェクトを直感的に扱えます。
async/awaitを使用するには、asyncを関数宣言の前に付け、関数内でawaitを使用します。awaitは、Promiseオブジェクトを返す非同期関数の呼び出しに付けることができ、Promiseが解決されるまで関数の実行を一時停止します。
function getData() {
return new Promise((resolve, reject) => {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => resolve(data))
.catch(error => reject(error));
});
}
async function displayData() {
try {
const data = await getData();
console.log(data);
} catch (error) {
console.error(error);
}
}
displayData();
この例では、getData関数でfetchを使用してJSONデータを取得します。fetchメソッドで取得されたレスポンスオブジェクトは、response.json()を呼び出して解析し、Promiseオブジェクトを返します。その後、resolveメソッドでJSONデータを解決します。取得したJSONデータをdisplayData関数で出力する前に、try/catchでエラーハンドリングを行います。
このコードを実行すると、APIから取得したJSONデータがコンソールに表示されます。getData関数は、fetchメソッドで取得されたレスポンスをPromiseでラップすることで、非同期にデータを取得します。try/catchを使用することで、getData関数からエラーが発生した場合でも、エラーをハンドリングすることができます。
3. データベースの仕組みを理解する
データベースの仕組みを学ぶことで、会員制サイトがどのように作られているのか、同じURLなのにログインユーザーによって違う名前を何故表示できるのか、などを理解できるようになります。
基本的な部分だけで十分なので、データベースの仕組みを理解できればサーバーサイドエンジニアの会話も理解できるようになり、プロジェクトやフロントエンド開発も円滑に進むようになります。
4. Vue.js, React.jsなどのモダンなフレームワークを理解する
昨今のフロントエンド開発でよく使われるフレームワークを学びます。
React（Next.js）とTypeScriptのみになりますが、私が実際に助けられた教材をいくつか紹介します。
（書籍）モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応)
React入門におすすめの一冊で、JavaScriptの基礎も同時に学べます。図解やサンプルコードが多くてとても分かりやすかったです。
（書籍）作って学ぶ Next.js/React Webサイト構築
CMS機能付きのコーポレートサイトを作りながらNext.jsを学ぶ書籍です。とても分かりやすく、この書籍通りに進めていけばNext.jsの基礎は十分理解できます。同時にヘッドレスCMS（microCMS）についても学べます。
（YouTube）Next.jsと一緒に学ぶReact講座 - しまぶーのIT大学
Next.jsの第一歩におすすめのYouTubeです。とても丁寧にひとつひとつ解説してくれているので、初学者に特におすすめです。
（YouTube）Next.js入門 - プログラミングチュートリアル
Next.jsの基礎を学んだ後におすすめのYouTubeです。ヘッドレスCMSや問い合わせフォームなど、基礎から少し発展した知識を学べます。
（サイト）サバイバルTypeScript
「TypeScriptをすぐに実務で利用できるように」をコンセプトにしたTypeScript学習サイトです。必要最低限の知識を最短で学べるので、まずはここでTypeScriptの基礎を学ぶといいでしょう。
（YouTube）日本一わかりやすいTypeScript入門【基礎編】 - 【とらゼミ】トラハックのエンジニア学習講座
TypeScriptの環境構築から具体的な書き方まで、かなり細かく解説しているYouTubeです。動画で学ぶならこちらのチャンネル一択かなと思います。
5. モダンな技術を学習する
フロントエンドは日々新しい技術が生まれ、トレンドの移り変わりが激しいです。常に最新の情報をキャッチアップして、必要なスキルを習得しましょう。
以下に挙げているものは、最近私が気になっていたり、実際に使い始めてみた技術の一部です。
- Turbopack（Webpackの後継）
- Astro（静的サイトを作ることに特化したフレームワーク）
- React Native for Web（モバイルアプリとWebアプリ両方を同時開発できるReact）
まとめ
コーディングやフロントエンド技術の学習方法は人によって様々です。目指すキャリアビジョンや環境によって学習方法は変わってくるので、今回紹介したロードマップはあくまで参考のひとつとして考え、自分なりのロードマップを作ってみてください。
最後におすすめの教材のリンクなどを貼っておきます🙂
おすすめの書籍や教材
有名企業研修資料まとめ
以下2つはこの中でも特に良かった資料です。
Discussion