目次
はじめに
ふだん Next.js などのモダンなフロントエンド技術を学習する時に、よく Youtube などの動画コンテンツを使うことが多いのですが、そういった発信は海外の Youtuber の方のものが充実していて、勉強になっています。
動画コンテンツであれば、英語能力のない私でも映像の中で実際にコードを書かれていくものを追っていくことで内容を把握するすることができます。
まあ、さすがにゼロから学習をはじめるには向いていない学習法かもしれませんが、フレームワークやライブラリのドキュメントなどを読んで概要をつかんでいるといい勉強法なのかなと思っています。
海外モダンフロントエンド Youtuber
私がふだんお世話になっている Youtuber の方が出しているコンテンツの種類は主に 3 種類に分類されると思っていて、大きく分けると ① 既存サービスのクローンなど実際にコーディングする系 ② この言語・フレームワーク・ライブラリはこんなことができるよというチュートリアル系 ③ 流行系 があると思っています。
なので、今回の記事ではその 3 種類に分けて紹介したいと思います。
① 既存サービスのクローンなど実際にコーディングする系
SonnySangha: NETFLIX や amazon といった有名サービスのクローンを Next.js で作りながら解説してくれていて、動画自体もエンタメ的でおもしろい感じに作ってくれています。
Kishan Sheth: Youtube とか NETFLIX のクローンを mernstack で作るところを見せてくれます。
ILW Yennefer: Twitter や Spotify のクローンが高いクオリティで再現されています。
JarrodWatts: 最近は web3 系などの開発動画を中心に作成されているようです。
LamaDev: React を使ったアプリケーションで、NoSQL でも SQL でも開発されていて勉強になります。
② この言語・フレームワーク・ライブラリはこんなことができるよというチュートリアル系
freecodecamp: Next.js に関する情報はあまり多くないのですが、Typescript、React、Node.js などの網羅的な情報をひとつの動画から学ぶことができます。(1 本 4 時間とかあってボリューミーですが、、)
TraversyMedia: ~Crush Course といった感じでライブラリやフレームワークの解説動画が勉強になります。最近だと Astro や Remix の動画なども出されていて、流れを掴む時に参考になります。
③ 流行系
leerob: vercel の中の方なので、Next.js の信用度の高い最新の情報を学ぶことができます。
t3dotgg: 元 twitch の開発者の人で今は ping の ceo をやっている方で、t3stack など Next.js でのトレンドなどをキャッチアップできます。
TomDoesTech: prisma、Remix、Apollo Client などの流行の情報を学べます。
corefunctionsinitiated: tRPC とか流行りのもので簡単なアプリケーションを作っているところを見せてくれます。
公式
フレームワークなどを提供している公式のチャンネルがあります。
vercel
prisma
PlanetScale
Supabase
その他
上記のチャンネル以外にも参考になるチャンネル。
CoderMediax
AniaKubów
AlexEagleson
Marius Espejo
javascriptmastery
Coding with Basir
DevATHTML
さいごに
ドキュメントや技術ブログの記事を読むのももちろんいいですが、動画コンテンツでは簡易的ではあるけれど、ふだん使っているようなサービスは Next.js ではこういう再現方法があるんだな。とか、もしこういう機能を作りたい時はこういう方法をとればいいんだなというのが通しで見ることができるので非常に助かっています。
海外の Youtuber を紹介しましたが、日本でもこういう動画を作ったら結構はやるんじゃないかな。と思っていますが、どうなんでしょう。
技術力が上がって時間もできたら自分もやってみたいかも、、