未経験からフロントエンドエンジニアへ転職するうえで役に立った動画教材

はじめに

私は未経験から独学でプログラミング学習を開始し、2023年4月からフロントエンドエンジニアとしてのキャリアをスタートすることになりました。

プログラミング学習を行う上で、問題になる1つとして、「なにを学べばいいのかわからない」といった問題があるかと思います。
また、教材を探す時間もとてももったいなく感じており、見つけても「これほんまにいい教材なんかなー」など、迷いながら進めることになっていたのももったいないなと感じていました。

そこで、本記事では私が実際に取り組んできた動画教材でいいなと思ったものをピックアップしてまとめようと思います。

これからフロントエンドエンジニアを目指される方に少しでも参考になれば幸いです。

プロフィール

新卒で理学療法士として病院に勤務していました。
2022年2月末ごろよりプログラミング学習を開始し、同年12月にエンジニアとして内定をいただきました。
エンジニア転職が達成できたので2023年3月に退職し、4月からWeb系の自社＆受託開発会社にて、大阪でフロントエンドエンジニアとしてキャリアをスタートします。

主にフロントエンドを学んできており、React、Next.js、TypeScriptを中心に学習をしており、実務でも同様のスキル＋AWSやGraphQLなどを触ることになるみたいです。
その他としては、Supabaseを使ってポートフォリオとしてWebアプリケーションを作ったりしました🙆🏻‍♂️

この記事書いて思ったけど、自分動画教材やりすぎちゃう？？

もっと最短で学んでこればよかったー

ってちょっと反省😇

とともにやったことは決して無駄にはなってないはず！

　　　　　　　　　　　　　　　と正当化。

スキル別おすすめ動画教材

注意
2023年3月現在で、極力今は使われていない書き方をしているものなどの情報は排除するように教材を選択しましたが、情報が古くなっているものもあると思います。
それぞれ、書き方などが現在も主流で使われているものか確認してください。

また、紹介している教材すべてをしようとしなくて大丈夫です。
自分がわかりやすいなーと思ったものを使ってください。

JavaScript

Youtube

• JavaScript入門・完全版コース／プログラミング初心者向け、コスパ最強講座 / セイト
  セイト先生の講座は何よりユニーク。初心者にとって、「ここってこの名前にしないといけないのか？意味のある名前なのか？」みたいな、変数名とか関数名がややこしい問題みたいなのがあると思うんですが、ユニークな名前を使って講座を進めてくれるので、「っあ、ここはなんでもいいんや」と理解しやすい。実際のWebアプリを作りながら進められるので自分のスキルに落とし込みやすいです。

• 【基礎から学ぶ JavaScript 入門 #1】フロントエンド開発でJavaScriptが必要な理由を解説！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】 / しまぶー
  Yahoo出身のしまぶーさん。丁寧に説明してくれてわかりやすい。網羅的に講座を用意してくれているのでとてもありがたいですね。論理的な思考力が高いんだろうなーとわかる説明で細かい点についても説明してくれています。イケメン。

• 【ES6】変数・定数・関数の「正しい」宣言方法【分かりすぎて怖いJavaScript入門】 / トラハック
  王道トラゼミ。トラハックさんは未経験からエンジニアに転職された方で、スキルや知識量に圧倒されます。
  JavaScript関連動画も多く未経験から学ばれる方は一度覗いてみて損はなし。
  オンラインコミュニティもあるようなのでしっかり学ばれたい方は入会してみてもいいかも？

• JavaScriptの「基礎」が1時間で分かる「超」入門講座【初心者向け】 / 山浦清透
  JavaScriptの基礎を約1時間で丁寧に解説してくれています。
  講師の山浦さんも未経験からエンジニア転職をされている方だけあって、未経験の方にも非常にわかりやすい説明をしてくれています。
  非同期処理に関する講座など関連動画もいろいろあってどれもわかりやすい！
  キャラクターも良く、熱量も高くて講座に入り込んで集中しながら取り組めます🙌

• 【モダンJavaScript #1】新章開幕！最も独学が難しい分野を徹底解説していきます！【フロントエンドエンジニア講座】 / しまぶー
  こちらはReactやVueなどのライブラリやフレームワークを学ぶ上での基礎をしっかり学ばせてくれる講座になります。
  これからReactやVueなどを学ぼうとされている方におすすめ。イケメン。

Udemy

• 【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編） / CodeMafia
  Udemyではこの講座しか受けたことはありませんが、網羅的に解説されており、講座時間なんと約25時間！！！
  ボリュームがすごくて、なかなか気合い入れてやらないと途中で気持ちが折れちゃいそうなので、割と覚悟がいるかも。
  CSSについてもかなり詳しく触れられています。アニメーション系の解説が多い印象。

React

Youtube

• #01 新・日本一わかりやすいReact入門【基礎編】Reactの基礎知識 / トラハック
  トラハックさんのReact講座。安心のトラゼミの講座であり、Reactがなぜいいのかなどについても解説してくれています。
  チャットアプリの作成をしながらReactを学習していくことができるので、手を動かしながらスキルを身につけていくことができます。
  動画のはじめにどんなことを学ぶのかと、これからの学習のロードマップを示してくれているので、気になる方はチェックしてみてください🙆🏻‍♂️
  関連講座も多いので、トラハックさんの動画がわかりやすいな～と感じられた方はそちらも要チェック！

• 【React入門】完全初心者OK！１から簡単なTodoアプリを作ってReactの１歩を踏み出してみよう ~Reactチュートリアル~ / Shin Code
  個人的にここわかりにくかったんだよな～ってところが解決することが多いShinさんの講座。Todoアプリを作りながら進めていけるので、ポートフォリオを作ろうとされている方などは、今後実践でも応用が利く内容になっているのではないでしょうか。
  関連講座もおすすめです👍

Udemy

• モダンJavaScriptの基礎から始める挫折しないためのReact入門 / じゃけぇ
  React講座と言ったらこれ！と言っても過言ではないくらい、多くの方がおすすめしており、内容も充実しています。
  全3シリーズを通して学ぶことで、Reactの基礎から応用、最新情報まで幅広く身に着けることができます。
  Todoアプリなど、成果物を作りながら進めていけるのもありがたい。
  間に入る息抜きコーナーが好き。ほっこり。

• React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得 / はむさん
  はむさんの講座はユニークかつユーモアがあって楽しく取り組むことができます。
  個人的に挫折しにくい楽しさがあるように感じています。
  講座の中ではReduxを使って状態管理を行いながらWebアプリを作っていくのですが、作るアプリも結構レベルの高いものになっているので、ポートフォリオにも活かしやすい印象です。
  オンライン学習サイトに登録すると、受けたい講座を月額約1000円で受け放題になるので、Udemyよりもお得に講座を受けられます！！
  しっかり時間を取れる方は登録して間違いないかと🙆‍♂️

• 2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript / CodeMafia
  JavaScriptの復習からReactの基礎からTypeScript、Redux、Next.jsに触れることができる、超ハイコスパ講座です。
  講座時間もたっぷり25時間！！
  時間がしっかりとれて、ガッツリ取り組みたい方におすすめ。
  ボリュームがある分、個人的に講座受ける前に覚悟決めて取り組んでました笑
  完成前のコードと完成後のコードを用意してくれているので、ハンズオンがとてもやりやすい。
  （タイプミスなど、どこが間違っているのかを確認できる）

Next.js

Youtube

• 【Next jsで学ぶReact講座 #1】Reactを学ぶにはNext.jsから入ると効率が良い理由。Next.jsのセットアップからVercelへのデプロイまで！ / しまぶー
  こちらはReactの講座なんですが、基本はNext.jsと一緒に講座を進めて行くのでNext.js編として紹介。
  React、Next.jsの基礎はもちろん、Next.jsの何がいいのか、どう便利なのかなどについても説明してくれます。
  Next.js特有の機能についても丁寧に解説してくれています。
  今からNext.jsを学ばれる方はこちらのシリーズがおすすめ🙌

• 【日本一わかりやすいNext.js入門】#1 講座の概要 / トラハック
  こちらはトラハックさんのNext.js講座。
  初学者にとってとっかかりにくい、英語の公式チュートリアルをハンズオンで進めてくれます。
  全12講座用意されていて、Next.jsのいいところについてもしっかり解説してくれているので、このシリーズを学ぶだけでNext.jsについて基本的なことは概ね理解することができます。
  関連動画もおすすめです🙆‍♂️

Udemy

• 【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座 / Shin Code
  公式ドキュメントに沿った内容で、ブログアプリを作りながらNext.jsについて学ぶことができます。
  本格的なブログアプリを作成しながら進めて行くことができるので、ポートフォリオ作成を考えている方は参考になるかもしれません。
  Next.jsについて網羅的に解説してくれており、解説もわかりやすい。

• Next.js 13 app directory による次世代Web開発 / Kazu T+
  現在ではまだまだリソースが少ないNext.jsのapp directoryを使った開発手法について解説してくれています。
  まだapp directoryはまだβ版なので今後、さらに変更が加えられる可能性もありますが、興味のある方は学んでみてはいかがでしょうか。
  Kazu T+さんの他の動画もおすすめがたくさんあるので、是非チェックしてみてください！
  とても丁寧で知識量の多さにビックリします。
  開発スピードが速いので、適宜止めながら進めて行ってました。
  なので、講義の目安時間よりも多めに時間は見積もっておいた方が良いと思います🙌

TypeScript

Youtube

• 【お知らせ】新講座開講 - これからTypeScriptを始める全ての人たちへ【日本一わかりやすいTypeScript入門】 / トラハック
  トラハックさんのTypeScript講座。全11講座用意されており、どの講座から始めてもいいように設計されています。
  TSの基礎について全般的に解説されており、どの講座もわかりやすく、取り組みやすい🙆‍♂️
  なぜTSを勉強するのか、みたいなところもちゃんと話してくれているので、モチベーション維持もしやすいです。
  TSの関連動画もあるのでちぇけら

Udemy

• 【世界で7万人が受講】Understanding TypeScript 日本語版 / Yota Hamada, Maximilian Schwarzmüller
  個人的にUdemyのTS講座はこれでいいんじゃないかと思うほど、濃くてわかりやすいです🔥
  英語を翻訳した講座になっているため、言い回しや解説が独特なものがちょくちょくありますが、全般的にとても分かりやすいです👏
  TypeScriptを網羅的に解説してくれており、かなり細かい部分についても触れてくれています。
  最終的にドラッグ&ドロップができるプロジェクト管理アプリの作成ができます。

• 最速で学ぶTypeScript / Kazu T+
  こちらはUdemyでも無料で受けられる講座になっており、私が個人的に好きなKazu T+さんの講座です。
  無料と言えど、TSの基礎は十分学べる講座になっており、2時間弱の講座になっているので、はじめて学ぶ方やサクっと学んでみたい方におすすめです🙌

状態管理

状態管理についてはReduxやRecoil、Zustand、Jotaiなど様々なライブラリがあり、リソースにムラがあり、Reduxはやはり多いのですが、その他はまだまだ少ないです。
ZustandやJotaiについて学習したいのですが、今はまだほとんどないので、今後の情報に注目しておきましょう。
もしおすすめなどあればコメント等で教えていただけると嬉しいです🙇‍♂️

1. Redux

• 日本一わかりやすいReact-Redux入門#1...講座の概要【ECアプリを作ろう】 / トラハック
  トラハックさんのRedux講座。
  入門編10講座、実践編15講座とたっぷりなボリューム。
  内容も濃く、ECサイトの作成を目指します。
  MUIやFirebaseについても触れているので、ポートフォリオを作成するうえでも参考になると思います🙆‍♂️

• 【Redux入門】初学者でも理解できるReduxの仕組みを解説します！(Redux Toolkitを使用) / Shin Code
  Reduxの基礎をわかりやすく解説。今まで理解できてなかった部分が理解できた！っていうのが多いのがShinさんの講座。
  Redux関連動画もあるので気になる方はチェックしてみてください👀
  Youtubeではエッセンス部分をサクっと解説してくれているので、より深く学びたい方はUdemy版をチェック

• 【Redux完全入門】絶対に理解させるReduxアルゴリズム徹底解説入門パック / Shin Code
  上記のUdemy版はこちら

2. Recoil

• 【Recoil入門】１からReactの状態管理ライブラリのRecoilを学んでみよう / Shin Code
  Recoilに関する動画教材が少ない中、Shinさんが解説されています。
  ReduxとRecoilの違いについても解説されており、Recoilの基礎について学ぶことができます。

3. Zustand

Zustandに関する動画が極端に少なく、日本語の動画教材に関するリソースはほとんどないんじゃないかなと思います。
今まで紹介してきたUdemy講師のKazu T+さんが良く使用されており、動画教材の中でスタックの一部として使用されているので、気になる教材があったらデモ動画などで使用スタックを確認してみてください。

CSSフレームワーク

CSSフレームワークもたくさんの種類があり、すべてを紹介することができませんが、ここでは私が個人的によく使うものやこれから使われるであろうものなどを紹介していきます。

1. Mantine UI

これからCSSフレームワークを学ぶのであればMantine UIか！？
Reactとの相性が抜群でバリデーションやフォームなどもめちゃくちゃ簡単に実装できます🫢
コンポーネントの種類も豊富でカスタマイズもしやすく融通が利きやすいフレームワークです。
UIのスタイルを視覚的に確認しながら調整できるところもポイント高いですね🙆‍♂️
私自身もまだまだ使いこさせてないですが、今後しっかり使えるようにしていきたいCSSフレームワークです。

• Mantine UI (React コンポーネントライブラリ) The Complete Guide / Kazu T+

2. Tailwind CSS

Tailwind CSSはめちゃくちゃ簡単にスタイリングができるフレームワークです🔥
htmlで使うタグのclass（className）に指定されたスタイルを記載するだけで、様々なスタイリングが可能です。
開発スピードがかなり上がる印象で、こちらもしっかり使えるようになりたい1つです。

• 【Tailwind CSS #1】最近流行りのTailwind CSSを学ぼう / しまぶー
  【Youtube】全5講座。とりあえず学んでみたい方はこちらで間違いなし！

• 【Tailwindcss3.0】利用者急増中！作って学ぶ爆速で理解したい人向けのTailwindcss完全入門パック / Shin Code
  【Udemy】3.5時間でしっかりTailwind CSSを解説。レスポンシブ対応のWebサイトを作りながら進めて行きます。

3. MUI (旧 Material UI)

• 超簡単にMaterialUIをReactにインストールする方法 -MaterialUI入門- / Shin Code
  MUIについて解説してくれている動画。基本的な使い方については十分学べる良教材。
  CSSフレームワークはそれ専用の動画教材などが少ないので、動画教材で興味を持ったら公式ドキュメントやQiita、Zennなどの記事を見てみるといいと思います🙌

4. Chakra UI

• Chakra UIの歩き方 & Tips集 / terrierscript
  こちらは動画教材ではないのですが（反則）、私が個人的に好きなのでChakra UIについてご紹介。
  スタイリングが爆速でできて、直感的にスタイルが当てやすい印象です。MUI＋Tailwind CSSみたいなイメージ。
  気になる方は触ってみてください🙆‍♂️

BaaS

フロントエンドエンジニアを目指している方にとってポートフォリオ作成時のバックエンド機能の実装について悩まれている方も少なくないかと思います🤔
そんな私自身もバックエンドスキルが皆無だったので、BaaS（バックエンドの機能を補完してくれるサービス）を使ってポートフォリオを作成しました🙌
BaaSについて興味のある方は是非チェックしてみてください。

なお、現在であればAWS Amplifyなども選択肢に入ってくるのかと思いますが、私自身講座を受けたことやしっかり学習したことがないのでここでは取り扱っていません。

1. Firebase

• 最短・最速で学ぶ Firebase Hosting + React Todoアプリ実装編 (React Hooks) / @Daiz Academy
  Udemu講座ですが無料で始めることができ、1時間程度でサクっと学ぶことができるので、とりあえずFirebaseを学んでみたい！という方におすすめです。

注意
Firebase（に限らずですが）はUIが良く変更されるため、講座内のUIと違う部分も多いかもしれません。
講師によっては変更点について注釈や変更をしてくれているものもありますが、ないものもあるので注意してください。

• Firebase + React Hooks(TypeScript)によるWebアプリ開発 / Kazu T+
  React、TypeScript、Redux Tool Kit、Firebaseを使って、Twitterのクローンアプリを作りながら、Firebaseの認証関係やFireStore、Storage、Hostingなど、基礎全般について学ぶことができます。

2. Supabase

• NextjsとSupabaseによる高性能Web開発 / Kazu T+
  Todoアプリを作りながらSupabaseについて学習していきます。
  応用編もあり、Supabaseの基本的な機能についてはこの2本で概ね学習することができます。
  僕はこの講座でSupabaseにハマってしまって、ポートフォリオもSupabaseで作成しました🔥
  Supabaeはv2がリリースされましたが、そちらのリソースはまだまだ少ないので今後の動向に注目しています👀

GraphQL

• 【GraphQL入門】RESTに代わるモダンAPIのGraphQLでニュースアプリAPIを構築しながら基礎を学ぶ入門講座 / Shin Code
  GraphQLとはなんぞやを簡潔にわかりやすく解説してくれています。
  難しい解説も多い中、初学者にとってわかりやすい説明で、スッと入ってくる解説が素敵。
  GraphQLの基礎を学びたい方はこちらがおすすめ。
  とりあえずサクっと学んでみたいという方はYoutube版もあるのでそちらから進めてみてはいかがでしょうか🙌

【Udemy版】

【Youtube版】

• [Hasura基礎編] Nextjs+Hasura+Apollo Clientで学ぶモダンGraphQL Web開発 / Kazu T+
  GraphQLについて、HasuraとApollo Clientを使って学ぶことができます。
  かなり細かい点まで紹介してくれているのに加えて、テストについても触れることができます。
  GraphQLってこんな感じで使うんやーっていうのがわかりやすい講座です🙆‍♂️
  応用編もあり、応用編ではApollo Clientの代わりにReact Query（TanStack Query）を使用しています。
  GraphQLに興味がある方は是非！

テスト

• [テスト編] Nextjs + React-testing-libraryでモダンReactソフトウェアテスト / Kazu T+
  React-testing-libraryを使ったテスト手法についての講座。4.5時間でしっかり学ぶことができます🙆‍♂️
  Next.js、Tailwind CSS、TypeScript、Jestなどについても触れられます。
  テストについても開発を通して学習していくものかと思うので、実際の開発の中で覚えて行くのがいいでしょう。

Git

• Git： もう怖くないGit！チーム開発で必要なGitを完全マスター / 山浦 清透
  Gitを学ぶのであればこの講座で間違いないでしょう！山浦さんのGit講座。
  Git / GitHubについて基本的な操作について学習できます。
  Gitは実際に個人開発やチーム開発で使っていくうちに覚えて行くものだと思っているので、基本的な使い方が理解できたら、あとは実際に使っていくのみ！
  だと思います🙆‍♂️

まとめ

ここまで読んでいただきありがとうございます！！

フロントエンドエンジニアを目指されている方にとって、何を学習すればいいのかや、どんな教材が良いのか、といった問題はとても大きく、時間を溶かしてしまう要因のひとつかと思います。

本記事で少しでもそんな方の悩みを解決できればうれしい限りです✨

紹介した講座以外にももちろんいい講座はたくさんあると思います。
こんな講座もいいよ！っていうおすすめがあれば是非コメントや個人的に教えていただけると幸いです🙇‍♂️

また、LinuxやDockerについても学習しておくといいと思います🙆‍♂️
私の場合、しっかり動画で学んだわけでなく、記事や本などで学習したので今回は紹介しませんでした。
山浦さんの関連教材は評価も高く、わかりやすいと評判なので覗いてみるといいかもしれません👀

はじめにも話した通り、紹介したすべての講座を実施しなくて大丈夫です🙌
自分に合った講師、講座を選んでみて、そのシリーズを通して学習していってください。

とりあえず、いろいろ悩まずにとにかくやってみる！と良いと思います💪

動画教材で学んだあとは簡単なWebアプリを作ってみたり、記事にまとめてみたりとアウトプットを意識されるとより定着率が高まると思いますし、自分のスキル・知識アップが実感できると思います🙆‍♂️

是非、目的に合わせて学習を進めてください！

それでは🙌