【実録】フロントエンジニアとして働くまでの学習法(2024年最新)
(この記事は2022年2月に更新)
今回はフロントエンジニアとして働くまでに、自分が学習してきた中でよかった教材や学習法をロードマップ形式でまとめました。
本記事の主な対象者
・HTMLとCSSを使った簡単なwebサイトは作成できる
・今後フロントエンジニアとして働きたい
・ 実務現場でも通用する土台を学びたい
・ ポートフォリオを作成したい
自分のエンジニアとしての簡単な実務経歴を紹介すると、
渋谷の自社開発系企業で、フロントエンジニアとして1年半程、働いています(現在進行形)。
主な使用言語は「React」「TypeScript」「Next.js」で、最近ではRailsを用いてバックエンド側の実装も担当しています。
自分は、今までに3つの新規プロジェクトと2つの既存自社サービス開発でフロント側の実装を行ってきました。
実際の実務現場を通して、自分が学習してきた中でよかった教材をロードマップ形式で今回は解説します。
目次
(1) JavaScriptの学習
(2) ReactとTypeScriptの学習
(3) Next.jsの学習
(4) API連携の学習
(5) ポートフォリオ制作(総まとめ)
(1) JavaScriptの学習
まずは純正のJavaScriptの学習をします。
ReactやNext.jsといっても根本はJavaScriptなので、この部分を飛ばしてしまうと、後でかなり苦労してしまいます。
また今回はweb制作ではなく、webアプリ開発現場を想定しているのでjQueryの学習は不要です。
学習手順
① ドットインストールでミニアプリ開発
② udemy講座(ガチで学びたい人のためのWEB開発徹底実践)
③ JavaScript本格入門(書籍)
① ドットインストールでミニアプリ開発
まず初めに、JavaScriptの基礎を固めるために「ドットインストール」を利用します。
ドットインストールは以前Twitterでも紹介したのですが、JavaScript講座は実際にミニアプリを開発しながら、基礎を学ぶことができるのでかなり好評です。
JavaScriptを学ぶのであれば最初はドットインストールがおすすめ。『スロット』『クイズ』『おみくじ』などの、ミニアプリを開発しながら『動的な動き』を学べる。書いたコードが『動いた』という体験を得やすい。 pic.twitter.com/vb4NgnwHRV
— KAZUNARI | AI×ビジネス役立ち情報 (@MacopeninSUTABA) October 21, 2021
進め方としては、「JavaScript基礎文法講座」→「JavaScriptDOM講座」→「ミニアプリ開発」の順番で進めていきます。
この手順で学習をすることで、学んだ基礎をミニアプリ開発講座を通してアウトプットすることができるので、知識を「使える技術」として定着させることができます。
② udemy講座(ガチで学びたい人のためのWEB開発徹底実践)
ドットインストールで基礎を定着した後におすすめなのは、udemyの「ガチで学びたい人のためのWEB開発徹底実践講座」です。
こちらの講座を通して、応用的なJavaScriptの知識を、webサイトを制作していく中で身につけることができます。
こちらの講座ではjQueryを使わず、純正のJavaScriptだけを利用してアニメーションの実装を進めていくので、完走すれば、「実務でも通用する力」を身につけることができます。
初心者には若干難しい講座でもあるので、最初から理解しようとするのではなく、「繰り返し学ぶ中で身につけていく」という考えを持って、学習を進めていくことが大切です。
③ JavaScript本格入門(書籍)
最後に今までの総まとめとして、「JavaScript本格入門」という書籍を利用します。
(2) ReactとTypeScriptの学習
JavaScriptの基礎を学んだ後で、よやくJavaScriptのライブラリーであるReactとTypeScriptの学習に入ります。
「Reactって何？」「TypeScriptって何？」という人は、以下の記事がわかりやすく解説しているので、参考にしてみてください。
Reactとは？フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説！
【入門】TypeScriptとは？言語の特徴やJavaScriptとの違いを解説
本記事では、あくまで「学習法」についての紹介なので、言語についての詳しい解説は省略します。
学習手順
① トラハックさんの「新・日本一わかりやすいReact入門」(Youtube)
② トラハックさんの「チャットボット開発講座」(Youtube)
③ トラハックさんの「ECサイト開発講座」(Youtube)
④ じゃけぇさんの「ステップアップコース完全版」(udemy)
まず「progateは？」「Reactチュートリアルは？」と思った方もいるかもしれません。
この2つの教材は、Reactコンポーネントの実装が「クラスコンポーネント」というもので実装されています。(実装が少し古い)
今現在は、クラスコンポーネントではなく、「関数コンポーネント」が採用されている現場がほとんどなので、progateとReactチュートリアルに関しては、飛ばしてしまって大丈夫です。
① トラハックさんの「新・日本一わかりやすいReact入門」(Youtube)
まず初めに、「Reactって何？」って人でも理解できる、トラハックさんのYoutube講座「新・日本一わかりやすいReact入門」でReactの基礎を学習します。
トラハックさんはエンジニア系Youtuberで、解説はスライドが多用されており、非常にわかりやすい動画構成になっています。
環境構築といった初心者がつまずきがちな箇所も、わかりやす解説してくれるので、非常に勉強になります。
トラハックさんの講座は、動画内で「なぜ？」といった疑問も、その場で解決してくれるような構成なので、スムーズに学習を進めることができます。
そのため、トラハックさんの動画内で、雑談のように解説していることもかなり重要です。
自分もトラハックさんの動画で、Reactの基礎を学んだといっても過言ではないくらい、お世話になりました。
このクオリティーの動画が「無料」で学べる時代に生まれることができてよかったと、身に染みて感じています。
実際に、こちらの講座(全9本の動画)で学べることは、
① Reactの環境構築
② JSXについて
③ コンポーネント
④ useState
⑤ ライフサイクル
⑥ useEffect
⑦ APIの呼び出し
といった Reactを学ぶ上で必要事項を網羅的に、わかりやすく解説してくれています。
トラハックさんの「新・日本一わかりやすいReact入門」で、Reactの基礎を網羅的に習得することができます。
② トラハックさんの「チャットボット開発講座」(Youtube)
次に、①で学んだReactの基礎知識を実際にチャットボットのアプリ開発を通してより理解する、「チャットボット開発講座」をやります。
こちらの講座では、LINEのような簡易的なチャットボットを作成しながら、Reactのアプリ開発の流れを一通り、掴むことができます。
難しい内容も、トラハックさんがスライドを用いて解説をしてくれているので、スムーズに進めていくことができます。
こちらの講座が終わる頃には、Reactの基礎力を「使える技術」としてランクアップさせることができます。
③ トラハックさんの「ECサイト開発講座」(Youtube)
最後は、今までのReact学習の総まとめとして、トラハックさんの「ECサイト開発講座」を行なっていきます。
こちらの講座は、かなり動画数は多いものの、実際にECアプリを開発していく過程でReactの応用的な知識を学ぶことができます。
Firebaseとの連携も学ぶことができるので、実際の現場に近い開発をこの講座で経験することができます。
この講座を終える頃には、実務現場で使える基礎力は身に付いているはずです。
④ じゃけぇさんの「ステップアップコース完全版」(udemy)
最後に「React×TypeScript」を学ぶことができる、udemyの講座、「Reactが楽しくなるステップアップコース完全版」
こちらの講座はReactの総まとめかつ、TypeScriptも導入した開発を学ぶことができます。
大半の現場ではReact×TypeScriptとTypeScriptを導入しているのが一般的になっているので、この講座を通して実務でも使える技術を習得します。
実際にこちらの講座で学べる内容は、
① レンダリングの最適化
② スタイルの当て方について
③ ルーティング
④ Atomic Design
⑤ グローバルな状態管理
⑥ API連携の基礎
⑦ React×TypeScript
と、実務では当たり前に使うような技術を、網羅的にわかりやすく解説してくれています。
じゃけぇさんの「ステップアップコース完全版」は、「【エンジニア必見】udemyのプログラミング学習おすすめ講座4選(2021年最新)」の記事で詳しく解説をしているので、ぜひ参考にしてみてください。
またこちらの講座は、書籍としても出版されており、現場に入った時にも辞書的な役割をしてくれるのでかなりおすすめです。
ReactHooksについても丁寧に解説されているので、Reactを使う人は必須の書籍と言っても過言ではありません。
React×TypeScriptの学習方法を再度まとめます、
① トラハックさんの「新・日本一わかりやすいReact入門」(Youtube)
② トラハックさんの「チャットボット開発講座」(Youtube)
③ トラハックさんの「ECサイト開発講座」(Youtube)
④ じゃけぇさんの「ステップアップコース完全版」(udemy)
これらを一通りクリアすれば、実務で使える基礎力を身につけることができます。
(3) Next.js
次にJavaScriptのフレームワークでもあるNext.jsを学んでいきます。
Next.jsはReactを土台として作られているので、Reactの知識を持っていることでスムーズに学習を進めていくことができます。
自分の開発現場でもNext.jsを導入している場合が多く、最近はトレンドにもなっている技術です。
「Next.jsの何が良いの？」と思った方は、こちらの記事を一読することをお勧めします。
Next.jsを使うべき5つの理由 + 実装Tips
学習手順
① Next.jsチュートリアル
② Next.js×Tailwind CSSで作るモダン開発(udemy)
① Next.jsチュートリアル
まず初めに、「Next.jsって何？」って人でも概要を理解することができる、Next.jsチュートリアルを進めていきます。
こちらのチュートリアルでは、実際にブログアプリを作成しながら、Next.jsの強みである「サーバーサイドレンダリング」について学んでいくことができます。
Next.jsチュートリアルは日本語に翻訳されているものもあるので、英語が苦手な人は、こちらで学習を進めていくことをお勧めします。
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました
② Next.js×Tailwind CSSで作るモダン開発(udemy)
次に、udemy講座の「Next.js×Tailwind CSSで作るモダン開発」でアプリ開発を通してNext.jsを「使える技術」として、習得してきます。
こちらの講座は4時間とコンパクトかつ内容が濃いので、おすすめの講座です。
Next.jsチュートリアルで学んだ知識を、アプリを開発する流れを通して深めていきます。
こちらのudemy講座で学べる内容は以下の通りです。
① getStaticProps
② getStaticPaths (Dynamic routes)
③ Deploy to Vercel
④ RestAPI
⑤ Auth component UI
⑥ useSWR + ISR + SSG
また最近のトレンドでもある「tailwindcss」も導入されているので、最新技術をキャッチアップすることができます。
(4) API連携
次にバックエンド側で作成される、APIとの連携について学んでいきます。
自分の経験した開発では、バックエンド側でAPIを作成し、フロント側はSPAでAPI連携する開発がほとんどだったので、こちらの学習をしていきます。
APIは概念としても、最初から理解するのはかなり難しいので、使っていく中で徐々に理解を深めていくことが大切です。
学習手順
① Web API: The Good Parts(書籍)
② トラハックさんの「Web API入門」(Youtube)
① Web API: The Good Parts(書籍)
まず初めに、webAPIの名著でもある、「Web API: The Good Parts」でAPIの概念や設計について学習をします。
こちらの書籍は、分量もそこまでないので、ある程度webについての知識がある人だったら1日程度で読める内容となっています。
主に学べる内容としては、
① Web APIとは何か
② エンドポイントの設計
③ レスポンスデータの設計
④ HTTPの使用を最大限利用する
⑤ 設計や変更をしやすいAPIを作る
と、API初心者の人でも問題なく、API設計について学ぶことができる1冊になっています。
現場でも、辞書的な役割を果たしてくれるので、APIを扱う人は持っておきたい1冊となっています。
② トラハックさんの「Web API入門」(Youtube)
次に、トラハックさんの「Web API入門講座」で実際にアプリケーションを作りながらAPIの理解を深めていきます。
こちらの講座では、基礎編と実践編の2つにパートが別れており、最終的にはCARDのAPIを実際に作成して、それをフロント側で呼び出すと言った、API連携の一連の流れを学ぶことができます。
図解での解説も多いため、初心者でもスムーズにAPIについて学ぶことができます。
(5) ポートフォリオ制作
最後はポートフォリオを自分で作成し、今までの総まとめをしていきます。
「React×TypeScript×API」のポートフォリオを作成をお勧めしています。
ポートフォリ作成についての参考にできる記事「【2021年最新】フロントエンジニア向けのアプリ開発4選」で詳しく解説をしているので、ぜひ参考にしてみてください。
いかがだったでしょうか。
今回は、自分の経験を元として、実務現場で活かせるフロント向けの学習法を紹介しました。
ぜひこの記事を参考に、していただけますと嬉しいです。
他にも、WordPressの学習法やweb制作の学習法といった記事も出しているので、ぜひ参考にしてみてください。
