はじめに

今回はフロント学習で重宝できる教材をまとめました。

軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。

実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。

今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。

「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。

この記事の主な対象者

フロントエンドの学習をこれからしていきたい人
何を学べばよいのかがわからない人
HTMLとCSSはある程度かける人

この記事の目標

フロント学習の指針が立てられる
実務現場でも活用できるスキルを学べる教材を知れる

JavaScript

ドットインストールのJavaScript編

まずはじめに紹介するのはプログラミング教材でもお馴染みのドットインストールのJavaScript編です。

ドットインストールのJavaScript編では

基礎文法
DOM操作
実際に動きを持つUIの開発(ミニアプリ開発)

という手順で進んでいきます。

ドットインストールでは学んだ文法等の知識を実際に手を動かしアウトプットできるので知識の定着がしやすいです。

JavaScriptを全く触ったことがない人は、ドットインストールで基礎を網羅的に学習するのがおすすめです。

ガチで学びたい人のためのWEB開発徹底実践 (Udemy)

次に紹介するのはUdemy教材の「ガチで学びたい人のためのWEB開発徹底実践」です。

こちらの教材ではバニラJS(純正のJavaScript)を利用して、Web制作をしていく過程で応用的なJavaScriptの使い方を学ぶことができます。

今まで学んだ文法や関数をどのようにWeb制作の現場で使うのかを学ぶことができます。

Web制作をする上でJavaScriptを使う方にはおすすめの教材です。

JavaScript本格入門 (書籍)

最後にJavaScriptの勉強で紹介するのは「JavaScript本格入門」です。

こちらの書籍は入門とタイトルには書いてあるもの、JavaScript未経験者だと少し理解に苦戦するレベル感の書籍だと思います。(個人的な感想)

そのため、ある程度の文法やDOM操作の基本を理解した上で入ることをお勧めします。

具体的には今まで学んだ基礎文法に加えて、

オブジェクト指向
Ajax等の非同期処理
DOMの応用的な使い方

を学ぶことができます。

JavaScript学習の総まとめ的な立ち位置としておすすめの教材です。

また非同期所理をより詳しく学びたい人はこちらの記事がわかりやすいのでおすすめです。

React

Reactは公式チュートリアルがあるのですが、今ではあまり開発で採用されていないクラスコンポーネントを利用しているので自分はやりませんでした。

同様にProgateに関してもクラスコンポーネントでの解説なので省いています。

トラハックのエンジニア学習講座 (Youtube)

まずはじめに紹介するのは、自分がReactの基礎学習で一番お世話になった「トラハック」さんのYoutube講座です。

Reactの基礎の開発から始まり、チャットアプリやECサイトなどの実際のアプリ開発を通す過程で知識を定着できる動画構成になっています。

またYoutubeなのでこれらは全て無料で学べます。

トラハックさんの動画では環境構築から丁寧に解説をしてくれているので、初心者でも挫折しにくい構成になっています。

トラハックさんの動画で学べることは下記の内容になっています。

Reactの基礎全般(状態管理やフックまたコンポーネント等)
React×Firebaseでのアプリ開発
Reduxを用いた状態管理

基礎の基礎から、実務現場でもよく使う内容も学べるので、React未経験の人にはかなりおすすめの教材になっています。

JavaScriptの基礎から始める挫折しないためのReact入門 (Udemy)

こちらの講座ではJavaScriptの基礎学習からReactまでを学ぶことができます。

解説がわかりやすく「なぜ」が残らないように学習を進めることができます。

最後に簡単なアプリ開発を講座内で行うので、実務に直結するJavaScriptとReactの基礎を学ぶことができます。

Reactが楽しくなるステップアップコース完全版

こちらの講座ではJavaScriptの基礎からReactまでを学ぶことができる教材になっています。

「SPAとは何か」などモダンフロントで頻出の概念の解説から始まります。

また実際にアプリを開発しながらJavaScriptやReactを学ぶことができるので、知識の定着がしやすい構成になっています。

また、ためになる雑談も動画内でされているので飽きずに学習を進めることができます。

TypeScript

次に現代のフロント開発においてほぼマストで使われているTypeScriptの学習教材を紹介します。

トラハックのTypeScript

まずはじめに紹介するのはReactの教材でも紹介したトラハックさんの動画です。

こちらの動画ではTypeScript未経験者でもわかるように、環境構築、基礎文法の解説また型定義について解説がされています。

また後半ではジェネリクスや非同期処理といった少し応用的な内容も学ぶことができます。

トラハックさんの動画で「TypeScriptとは何か」そして「どのように使うのか」といった内容を学ぶことができるのでおすすめの教材です。

サバイバルTypeScript

次に紹介するのはTypeScriptの本質を基礎からハンズオン形式で学ぶことができる「サバイバルTypeScript」です。

こちらの教材は「読者がTypeScriptをすぐに実務で利用できる最短ルート」として作られた教材になっています。

実務で使う機能を厳選して解説をしているので、効率的に「使える技術」を学ぶことができます。

今まで紹介してきた教材でJavaScriptの基礎文法を理解した上でサバイバルTypeScripには入ることがおすすめです。

React×TypeScript

現代のReact開発現場では当たり前のようにTypeScriptと共に開発が行われています。

そこで次は「React×TypeScript」が学べる教材を紹介していきます。

Reactが楽しくなるステップアップコース完全版 (Udemy)

React×TypeScriptでおすすめの教材は先ほども紹介した。「じゃけぇさん」のUdemy講座
Reactが楽しくなるステップアップコース完全版です。

こちらの講座は今まで学んできたことの総復習かつ実務現場でもよく使われる内容を網羅的に学ぶことができます。

具体的に下記の内容を学ぶことができます。

ルーティングの最適化
Reactで使われるスタイル(CSS)のあて方
props周り
Atomic Design
グローバルstateなどの応用的なstate管理
JSONPlaceholderで擬似的なAPIの操作
React×TypeScriptを使ったアプリ開発

自分はこの講座のおかげでそこまで苦戦せずに実務の開発に入ることができました。

初心者でも理解しやすい解説をされているので、挫折することな学習を進めていくことができる教材になっています。

Next.js

次に紹介するのは、Reactをベースに開発されたJavaScriptのフレームワークでもある「Next.js」です。

Next.jsも最近のフロントエンド開発では取り入れられている技術になっています。

自分の直近1年の開発でもフロント側は「Next.js×TypeScript」が大半でした。

公式チュートリアル

Next.jsの基礎学習の教材は、Next.js公式チュートリアルが一番わかりやすいかと思います。

公式チュートリアルでは「Next.jsとは」という解説から始まり、Next.jsで使う技術を網羅的に学ぶことができます。

また実際のアプリ開発を通して学ぶことができるので、現場でNext.jsをどのように使っていくのかがわかるような内容になっています。

React(v18)完全入門ガイド

こちらの講座ではReactをはじめとしてNext.jsまで学ぶことができます。

具体的にNext.jsの分野では下記を学ぶことができます。

Next.jsを使う理由
Netx.jsの基礎全般
SSR,SG,ISR
API Routes

図解を通してかなり詳しくまとめられているの「なぜ」が残らず学習を進めることができます。

また関数型プログラミングなどReactを学ぶ上で本質的な内容も丁寧に解説されているので、本質的な基礎を学びたい人にもおすすめの講座になってます。

API

最後にフロントとサーバーサイド連携で必須項目(SPA開発で必須項目)のAPIについて学んでいきます。

Web API The Good Part

まずはじめに紹介するのは、API学習の名著でもある「Web API The Good Part」です。

こちらの教材では下記の内容を学ぶことができます。

Web APIとは何か
エンドポイントの設計とリクエストの設計
レスポンスデータの設計
設計を変更しやすいAPI

APIについて基礎から実際の設計法までを幅広く学ぶことができます。

こちらについてはQiita記事にもまとめているのでぜひ参考にしてみてください。

総まとめ

最後に総まとめ的な立ち位置といて参考できる教材をまとめていきます。

【React+TypeScript】 Netflixのクローンを作るチュートリアル

こちらの教材はNetflixのクローンアプリを開発する過程でフロント開発を学ぶことができる教材になっています。

Firebase + React Hooks(TypeScript)によるWebアプリ開発

こちらの教材はTwitterのクローンアプリを開発しながらReactとFirebaseを学ぶことができます。

また認証関連や記事投稿などアプリ開発をする上で必須である知識が体系的に学べるので、総まとめとしてかなりおすすめの講座になっています。

Nextjs + Tailwind CSS + Django REST Framework で学ぶモダンReact開発

こちらの講座では、実際にAPI開発及びNextjs(フロント側)でのAPI結合と現場で頻出構成のアプリ開発の流れを学ぶことができます。

またスタイルには最近流行りのTailwindCSSが用いられているので、最新技術のキャッチアップもすることができます。

最後に

いかがだったでしょうか。

今回はフロント学習で自分が使ってよかった教材集をまとめました。

今回紹介した教材は「網羅的に学べかつ実務の基礎作り」を目的としています。

フロントエンドに関しては現場に入ってからも学ぶべきことは次々出てきますし、技術の移り変わりも激しいです。

そのため実際に開発現場に入ってからも最新の技術のキャッチアップをすることが大切です。

ほかにもいろいろ記事を出しているので合わせて読んでいただけると嬉しいです。