最近、未経験からフロントエンドエンジニアを目指す方がとても増えています。
ただ、本当に色んなスキルが必要なので、何をどういう順番で勉強すればいいか、不安になりますよね。
- 確実にエンジニアとしての就職・転職を成功させたい！
- 適当な企業に入社して後悔したくない...
- 自社開発企業への入社を目指している
- 現場に入ってから迷惑をかけたくない
こんなことを思っている方は、本ロードマップに沿った学習をしていただければ大丈夫です！
フルスタックエンジニア、兼プログラミングスクール講師が作成しました。
「使っている」「教えている」経験がベースとなった、濃密なロードマップです！
このロードマップを使って学習していただければ、フロントエンドエンジニアとしての就職・転職を成功させるためのスキルが身に付きます。
早速、まずは本ロードマップについて見ていきましょう！
ロードマップ学習1：Webシステムの仕組みを理解する
まず最初に教養として、Webアプリケーションをはじめとしたシステムが動く仕組みを勉強しましょう。
これは、Webアプリケーションを開発するためは、前提となる多くの基礎知識が必要だからです。
例えば、インターネットの仕組みからHTTP、サーバに関する知識、セキュリティの基本、ネットワーク内の通信の流れまで多岐にわたります。
極端な話、こういったことを知らなくてもなんとなくWebアプリケーションを作れてしまいます。
しかし、ちょっと複雑なものを作ろうとすると、基礎知識不足で何もできなくなってしまうのです。
現場に入って「いざ開発！」というタイミングで、基礎をイチから勉強はしたくないですよね？
そのため、バックエンドエンジニアとして前提となるWebシステムの基礎は、プログラミング学習の初期に勉強しておくべきなのです。
おすすめの教材
Webシステムの仕組みをよく分かっていない方にはこちらの書籍がおすすめです。
この本は Web 開発の入門者に必要な知識がギュッと詰まっており、IT 業界未経験者が知らないことも一気に学べるため一冊目にピッタリです！
2017年に発売されてから Amazon だけでも約 600 件の評価が付いており、初学から学び直しまで、定番の一冊となっています。
イラストと図解を駆使して分かりやすく解説してくれているため、これから学習をはじめるハードルを下げてくれるのが特徴です。
なお、発売したのが数年前ということで、常に最新の教材で勉強したいという方には不向きかもしれません。
しかし Web システムの基礎は文字通りベースとなる技術であり、簡単に変わるものではありませんので安心してください！
一度学べば、Web アプリケーション開発の基礎知識として一生使えるものになるでしょう。
イラスト図解式 この一冊で全部わかるWeb技術の基本
ロードマップ学習2：ターミナルでコマンド操作に慣れる
バックエンドエンジニアになるなら、ターミナルを用いたコマンド操作は避けて通れないスキルです。
ターミナルは、コンピュータにテキスト形式で命令を出すインターフェース（画面）です。
このターミナルで使われる短いテキスト命令を「コマンド」と呼びます。
ターミナルでのコマンド操作は、開発作業の効率をグンと上げてくれます。
また、コマンドじゃないと出来ない操作も多いため、当たり前のようにターミナルを使える必要があります。
プログラミングの学習をいきなり始めるとターミナルの操作で必ずつまづくため、早い段階でしっかり慣れておきましょう！
おすすめの教材
ターミナルの操作を一通り学ぶには、こちらの Udemy（動画）講座がおすすめです。
>>> ターミナルは怖くない！コマンド & Zsh 入門コース【コマンド/Zsh/Homebrew/APT/正規表現付き!】
本講座は以下のような方を対象としています。
- ターミナルを使ったことがない
- ターミナルに苦手意識がある
- 効率的に開発できるようになりたい
まさに、はじめてコマンド操作を学ぶ方には最適な講座ですよね。
また、一般的な書籍やカリキュラムではファイルやフォルダの操作だけを学びますが、それ以外の応用的なトピックも本講座には含まれています。
とはいえ、初心者が学ぶターミナル操作としては、少しハードルが高いです。
そのため、序盤の基礎的な内容だけ学び、後に必要になってから学び直すという使い方をしましょう！
なお、書籍ではなく Udemy 講座をおすすめするのには理由があります。
それは、ターミナルは「いま何をやっているのか」が分かりづらいため、Udemy 講座のように動画でイメージを掴める方がわかりやすいからです。
もちろん、ターミナルを軽く触ったことがあれば復習しやすい書籍学習でもOKですが、はじめてなら概要を掴んで苦手意識をなくすことを優先しましょう！
>>> ターミナルは怖くない！コマンド & Zsh 入門コース【コマンド/Zsh/Homebrew/APT/正規表現付き!】
ロードマップ学習3：Visual Studio Code で開発効率を爆上げしよう
統合開発環境（IDE）とは、プログラムを書くための複数のツールが一つにまとまったソフトウェアです。
開発する上では絶対に使う道具ですので、最初に使い方をしっかり覚えておきましょう。
コードの編集からデバッグなど、開発に必要なすべての操作を一元管理できるため、テクニックを理解しているかどうかで開発効率が大きく変わります。
使い方をちゃんと知っておくと、例えば以下のような便利テクニックを使えるようになります。
- 1行分を全部書かなくても、勝手に補完＝続きを書いてくれる
- 複数行のソースコードを同時に書き換えられる
- 入力ミスによる失敗を事前に防いでくれる
無料で使え、特に人気なものは Visual Studio Code（VSCode）です。
実際の現場でもよく使われており、便利な使い方の情報も多いのでまずは VSCode の使い方を理解することが重要です。
おすすめの教材
道具の使い方は実際に見て覚える方が早いため、ターミナル操作と同様、Udemy 講座での学習がおすすめです。
>>> ざっくり学ぶ、Visual Studio Codeの使い方講座
この講座ではインストール方法から基本的な使い方を最初に学びます。
その上で「効率の良い編集作業」を学ぶためのセクションが個別に設けられており、まさにテクニックを知るには最適な講座です。
こういったテクニックは現場に入ってから、先輩の仕事を見て、はじめて学ぶことが多いです。
それを学習段階から知ると、開発効率はもちろん学習効率も何倍にもアップするため、この講座で早めに学んでおきましょう！
通常、Udemy 講座は 1万円以上と高いため、月に数回のセールを狙っての購入する方が多いです。
しかし、こちらの講座は（執筆時点では） 2,400 円と安めなので、気軽に学ぶことができますね。
>>> ざっくり学ぶ、Visual Studio Codeの使い方講座
ロードマップ学習4：Git を学んでソースコードの保存・管理・共有する
Git（ギット）とは、プログラムのソースコードなどの変更履歴を記録・追跡するためのバージョン管理システムです。
参考：GitHub
GIt を使うと、間違ってファイルを消してしまっても、前の状態にいつでも戻せることが大きなメリットです。
試行錯誤を繰り返してアプリケーションを作る開発作業では、必須のツールと言えますね。
また、チームで開発するときにも、他の開発者と簡単にソースコードを共有できるため、現場では必ず使われています。
学習の段階では軽視されがちな Git スキルですが、ちゃんと学んでおかないと以下のようなことが起きてしまいます。
- 編集しているうちにアプリが動かなくなってしまい、戻せなくなってしまう
- 現場に入ると当たり前のことが出来ず、迷惑をかけてしまう
- 操作ミスをして、自分や他の人が苦労して書いたソースコードを消してしまう
こんな事態は避けたいですよね。
このように、もはや Git は使えて当たり前の前提知識であり、知らないことがデメリットになるツールの一つです。
学習をする上でも試行錯誤しやすくなるメリットがありますので、早めに学んでおくべきです。
おすすめの教材
はじめて Git を使うのであれば、この書籍一択です。
こちらはマンガ形式でストーリーを理解しながら Git 操作を学べることが特徴です。
実際、どんな便利な道具だとしても「使うべき場面」を知らないと、そもそも使うことができません。
その点、Git が役立つ場面をマンガで理解できるため、いざ自分が必要となった時にも違和感なく Git を使いこなすことができます！
また、実践パートも用意されているため、使いながら覚えられるのも良いところですね。
表紙のイメージから敬遠する方もいるかもしれませんが、実際に開発現場でもおすすめされるぐらいの良書です。
ロードマップ学習5：HTML と CSS でWebサイトを作れるようになる
ここまでで、プログラミングを勉強する準備が整いました。
最初のプログラミング言語として、まずは HTMLとCSS を学びましょう。
HTMLとCSSはWebサイト上で目に見える部分を作り上げるためのプログラミング言語です。
そのため、Webアプリケーション開発に携わるエンジニアとしては、避けては通れない技術の一つです。
なお、バックエンドエンジニアは主にサーバー（裏側）の処理を担当します。
HTMLやCSSはフロントエンジニアに任せ、バックエンドエンジニアには不要な知識と思う方もいるかもしれません。
しかし、専任のフロントエンドエンジニアがいない現場も多く、バックエンドエンジニアがHTMLとCSSで画面を作ることがよくあります。
したがって、バックエンドエンジニアだとしても、HTMLとCSSを一度は勉強しておく必要があるのです。
おすすめの教材
就職・転職を目指してHTMLとCSSを学習するには、この書籍がおすすめです。
>> 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
HTMLとCSSはあくまで道具ですが、綺麗な見た目のWebアプリを作る上ではWebデザインの知識も必要です。
これ1冊でHTMLとCSSだけでなく、Webデザインまで学べるので楽ちんですね。
ちなみに、なぜ就職・転職を目指す方におすすめかというと、選考では「ポートフォリオ」を作って提出するからです。
ここでのポートフォリオとは、自分のスキルを証明するために見せる「オリジナルのWebアプリ」のことです。
オリジナルですので、当然ながら見た目・レイアウトといったWebデザインを自分で考える必要があります。
綺麗さは第一印象に繋がり、第一印象は評価にも繋がるので、手を抜けないポイントなのです。
先述の通り、バックエンドエンジニアとしてはHTMLとCSS（＋Webデザイン）が最優先ではありません。
しかし、就職・転職活動で損しないためにも、この一冊だけ勉強しておきましょう！
CSSフレームワーク（TailwindCSS）を使って効率的にデザインする
TailwindCSS は最近注目を集めている CSSフレームワークです。
通常、スタイル（装飾）を適用するためにはまずクラス名を考え、そのクラスに対応するCSSを記述、HTMLの中にクラスを追加していきます。
一方、TailwindCSS では事前に用意されたクラスのみを直接HTMLに書くため、CSSの管理が楽になるメリットがあります。
この手軽さから、手軽にデザインできるということで非常に注目を集めているCSSフレームワークです。
（実際、私の現場でも TailwindCSS を使っています）
また、レスポンシブデザイン（スマホやPCで見た目が変わるデザイン）も簡単に実装できるため、スマホを意識したサイト・アプリ制作にも向いています。
おすすめの教材
TailwindCSS はコレ！という書籍がないため、Udemy 講座で学ぶのがおすすめです。
>>> 【Tailwindcss3.0】利用者急増中！作って学ぶ爆速で理解したい人向けのTailwindcss完全入門パック
こちらは TailwindCSS をインストールする方法や基本的な使い方はもちろん、効率的にデザインするためのテクニックも紹介してくれます。
また、一つの Web サイトをパーツごとに作りながら学べるため、挫折することなく、自然に TailwindCSS を使えるようになります。
さらに TailwindCSS によるレスポンシブ対応、つまりスマホユーザーを意識したデザインの仕方も分かります。
TailwindCSS を覚えるためにはとにかく書くことが重要です。
実践形式のこの講座で、TailwindCSS を自由に使いこなせるようになりましょう！
>>> 【Tailwindcss3.0】利用者急増中！作って学ぶ爆速で理解したい人向けのTailwindcss完全入門パック
ただし、講座価格は 1万円を超えており、TailwindCSS を学ぶだけと考えると少々高く感じますよね。
そのため、不定期開催（月に数回）の Udemy セールを狙って購入しておくのがおすすめです。
JavaScript で操作性が高く使いやすいアプリを作る
HTMLとCSSを理解したら、次に学ぶべきは JavaScript というプログラミング言語です。
HTMLとCSSが「静的＝動きのない」Webサイトを作るとしたら、それに対して JavaScript は「動的＝動きのある」Webサイトを作るために使われます。
例えば Google 検索するときにキーワードをフォームに入力すると、その内容に応じて検索候補がすぐに表示されますよね。
これは、入力されたキーワードに応じて JavaScript が検索候補をその場で取得し、画面に表示してくれているからなのです。
このように、現代の Web サイトはほとんどが動きのあるものですので、フロントエンドエンジニアにとって JavaScript の学習は不可欠です。
おすすめの教材
JavaScriptをこれから学びたい方に、特におすすめなのが『確かな力が身につくJavaScript「超」入門 第2版』です。
>>> 確かな力が身につくJavaScript「超」入門 第2版
この教材は3万部突破のベストセラーで、さらに 2019年に内容が全面的にアップデートされています。
また、この本は「絶対に挫折しない・させない」というコンセプトで作られています。
そのため、とにかく初心者がつまずきやすいポイントをカバーしてくれていることが特徴です。
初学者だけでなく、一度 JavaScript を挫折したことがある人でも安心ですね。
この書籍で JavaScript の基礎から現場で必要とされる応用力までしっかりと身に付け、フロントエンドエンジニアとしての第一歩を踏み出しましょう。
TypeScript で安全かつ高品質なコードを書く
まず TypeScript とは、JavaScriptに「型」を追加するためのプログラミング言語です。
「型」とは変数や関数の引数に対して、どのような値が入るかを制限するものです。
例えば、予期せぬ値が入ってしまう場合には予めエラーを出し、開発中に気付くことができます。
結果的にバグを減らすことができ、品質の高いコードを書くことができます。
現代のフロントエンド開発では、TypeScriptを使用することが一般的になってきているため、フロントエンドエンジニアを目指すなら必須のスキルセットです。
おすすめの教材
はじめて TypeScript を触る場合はは「ゼロからわかる TypeScript入門」という書籍がおすすめします。
この書籍はプログラミング初心者や本職としてのプログラマーでない方を対象にした内容となっているため、基本からしっかり学びたい方に適しています。
さらに、TypeScriptのコーディング環境の構築方法や、Visual Studio Codeを用いた実践的なコーディング方法など、開発の上でのテクニックも網羅しており、これ一冊で TypeScript を使いこなすには十分です！
また、JavaScriptのおさらいも含まれているため、JavaScriptの知識を定着させたい方にも適しています。
一冊で TypeScript が身に付くため、こちらで本格的なフロントエンド学習をスタートしましょう！
API・非同期通信によるデータ送受信の仕組みを理解する
API（Application Programming Interface）とは
API は「Application Programming Interface」の略です。
簡単に言うと、異なるソフトウェア同士が連携するためのルールや手順を定めたものです。
例えば、フロントエンドとバックエンド、または外部サービスとのデータのやり取りに使用されます。
フロントエンドの開発を行う際は、必ずといって良いほどデータの送受信を含むため、フロントエンドエンジニアとして重要な知識の一つです。
非同期通信とは
通常の通信では、新しく何かのデータを取得するような通信（リクエスト）を送った後、API などから反応が返ってくるまでは次の処理がストップします。
言い換えると、一時的に操作ができなくなったり、一つずつしか処理を行えないため、ユーザーの使い勝手は悪くなってしまいます。
これに対して、非同期通信はリクエストを送った後も次の処理に移ることで処理効率が良くなり、速度も改善します。
現代のWebアプリでは使い勝手や速度が重視されているため、非同期通信はあらゆる場面で使われています。
API と非同期通信はプログラミングスクールでも学ぶ機会が少ないのですが、フロントエンドエンジニアにとっては基礎中の基礎です。
React や Next.js を使う上でも必要ですので、この後の学習や就職・転職後に困らないよう、早めに身に付けなければいけません。
おすすめの教材
非同期処理・Web API・Ajaxに関する理解をするためには、こちらがおすすめです。
>>> JavaScriptで学ぶWebアプリ開発の必須知識〜Node.js・Web API・Ajax・async/await〜この講座は、非同期処理、Web API、およびAjaxに特化しており、これらのテーマについて実際のコードを書きながら詳しく学べる内容となっています。
初心者から中級者までの知識をカバーし、実際のWebアプリケーション開発で遭遇するであろう問題や実例にも触れています。
また、講座の中では具体的な実装方法やWeb APIの仕組み、そしてAjaxを用いたデータ送受信の流れなど、概念についても触れているため、初心者の方でもイメージしやすくなっています！
ただし、あくまで裏側の処理であり、地味な内容ですので「つまらない」と感じてしまうかもしれません。
それでも、API や非同期通信は、現代のWebアプリケーション開発をする上では必須ですので、今だけは辛抱して習得しちゃいましょう！
>>> JavaScriptで学ぶWebアプリ開発の必須知識〜Node.js・Web API・Ajax・async/await〜
React でモダンなフロントエンド開発を学ぶ
Reactは、最近のフロントエンド開発では最も注目を集めているライブラリの一つです。
React は Facebook社が開発したJavaScriptライブラリであり、Web サイトやアプリの UI 構築に特化しています。
また、FacebookやInstagram、そしてYahoo!, Airbnb, Reddit, Netflix など、大手企業やサービスでReactが使用されていることから、今後の成長が期待できます。
求人・案件数も多いため、これからフロントエンドエンジニアとしての就職・転職を目指すなら React は必須スキルです。
また、React を応用した「React Native」を使うとスマホアプリも開発できるため、いつか個人開発で幅広くアプリを作って収入を得たい方にも React は適しています。
おすすめの教材
「モダンJavaScriptの基本から始める React実践の教科書」は、React を学びはじめる初心者におすすめの教材です。
>>> モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応）
この教材はモダンなJavaScriptの基礎からReactの実践的な内容、そしてTypeScriptまでもカバーしています。
また、著者が持つ経験から、多くの学習者が感じるであろう挫折ポイントを解消するような構成となっております。
さらに実務でのシチュエーションをもとに技術を解説しているので、現場で役立つ React スキルを身につけることができます。
なお、本の最終章の「カスタムフック」という技術は少し応用的な内容であり、ここは初心者だと難しいかもしれません。
ただし、カスタムフックは有用ながら応用レベルであるため、まず流し読みだけして、後で必要になったら読み直すのがおすすめです！
それ以外は基礎レベルとして間違いなく必要なスキル・ノウハウが凝縮されているため、この一冊で React をマスターしましょう！
Next.js で高機能な Webアプリケーションを作成する
Next.js は、モダンなWebアプリケーションを効率的に作成する上で非常に有名なフロントエンドのフレームワークです。
Next.jsは、世界中で数多くの企業や開発者に利用されているReactをベースにしたフレームワークです。
これにより、高速なユーザーエクスペリエンス（UX）を提供し、開発の効率を向上させます。
特に、サーバーサイドレンダリングや静的サイト生成などの高度な機能が備わっており、SEO や UX の向上も簡単にできることが特徴です。
Next.js はこのような高機能さから、モダンなWebアプリケーション開発において主要な選択肢となりました。
フロントエンドエンジニアとして効率的な開発と、優れたユーザー体験を実現するためには、Next.js の学習が重要です。
おすすめの教材
Next.jsとTypeScriptを使用したWebアプリケーション開発の入門から基礎まで学べる書籍として、こちらがおすすめです。
TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
この教材は、Next.jsの基本から、モダンなWebフロントエンド開発の設計思想まで幅広くカバーしています。
また、実際のアプリケーション開発の手順やテクニックを詳しく学べるので、初心者から中級者まで幅広く役立ちます。
この教材の中ではモダンJavaScriptの基礎や、React/Next.jsの基本機能、さらには Next.js アプリのリリース（公開）方法までも紹介されています。
特に、発展的な内容である「Atomic Design」や「Storybook」など、コンポーネントベースの設計思想は、フロントエンドエンジニアにとっても重要です。
「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」は、Next.jsの実践的な開発を学ぶための理想的な教材です。
React と TypeScript を学習したら、この本でモダンなWebアプリケーション開発のスキルを向上させましょう！
React のテストを書いてコード品質を高める
React に限らず、テストを書くことは、開発者が安心して開発を進めるために重要なステップです。
そして Webアプリケーションの品質や保守性を保つためには、フロントエンドの自動テストは必須です。
初心者の方は特に、作ったアプリを自分で動かして動作を確認しますよね。
一方「自動テスト」ではプログラムが高速にテストするため、手間が圧倒的に少なくなります。
テストを書くことで、コードの品質を担保し、後々のトラブルを防ぐことができます。
例えば、意図しない変更や新しい機能の追加時に、テストが存在することでそれらの変更がアプリケーションを破壊する可能性があるかどうかを素早く検知できます。
さらに、テストコードは実装の意図を明確に示すドキュメントの役割も果たします。
このように、開発においてテストを書くことは、コードの品質を維持し、開発者自身の安心感を確保するために不可欠です。
おすすめの教材
フロントエンドのテストの基本や実践的な方法を学びたいなら、「フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識」が最適です。
>>> フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識
本書はフロントエンドエンジニアを対象に、テストの基本知識と具体的な実践手法をわかりやすく解説しています。
特に、Reactを用いた開発に特化した内容や、Next.jsを使ったサンプルWebアプリケーションを用いた実践的な内容が詰め込まれています。
例として、UIコンポーネントテストや、ユーザーの操作を再現したテストなど、フロントエンドのテストに関連する様々なトピックが取り上げられています。
また、口コミでもテストの入門内容から、実際のアプリケーションでのテスト方法が豊富に説明されている点や、実務で応用しやすいとの声が挙がっています。
「フロントエンド開発のためのテスト入門」は、React のテストを効果的に書くための知識を習得するためのおすすめの教材です。
是非手に取り、テストを書くスキルを磨いて、高品質なアプリケーションを作成しましょう！
【初心者向け】独学での勉強に自信がない場合は？
いかがでしたでしょうか？
フロントエンドエンジニアになるために必要な学習方法を一気にご紹介しました。
しかし、書籍や Udemy での学習はモチベーション維持が難しいですし、不明点が出ても解決が難しいですよね。
そこで宣伝となりますが、MENTA というサービスで個人的に皆さんの学習をお手伝いさせてもらっています。
今回ご紹介したロードマップに合わせた内容で、メンタリングや質問のサポートも出来ますので、独学に不安があれば気軽にメッセージをお送りください！
（Twitter の DM でも OK です）
【スクール形式：3,000円〜】ロードマップに沿った学習で未経験からフロントエンドエンジニアへ！
ロードマップに沿った学習を成功させるコツは？
学習すべき内容を把握した上で、以下の記事からWebエンジニアの仕事内容やスキルなどを改めて見てみてください。
盛りだくさんであった項目が必要である理由がよくわかり、勉強がつらい時にも乗り切れるようになります！
