どうも、まさとらん（@0310lan）です！
今回は、実践的なWeb開発をじっくり動画を見ながら学習することができる良質な海外YouTubeのチュートリアルコースを厳選してご紹介します！
主に、JavaScriptをメインにしたNode.jsやReact / React Nativeなどを徹底的に学べるコースを選んでいますが、最近のトレンドに沿ったWebサイトのデザイン＆開発手法についても一通り学べるようになっています。
動画を見ながら、どのようにコードが構築されていくのかを観察しながら自分なりのプログラミング手法を見つけていくのも楽しいと思います。
■Webサイトのデザインからプログラミングまで学ぶ！
【 12 in 12 Design to Code Challenge 】
レスポンシブなWebサイトや「ランディングページ」「ポートフォリオ」など、全12回の動画でさまざまなWebサイトのデザインやプログラミング手法を学習できるコースです。
いずれもシンプルなWebサイトでありつつ最近のトレンドも詰め込まれているのが特徴で、動画を見ながらいろんなスタイルのWebサイトを作れるので、きっと楽しくなるはずです！
動画では、まず最初に「Photoshop」などのデザイン系ツールを使ってWebサイトのモックアップを作ることから始めます。
他のツールを使っている方でも参考になる点は多く、どのような手順でデザインしていくのかを学ぶことができます。
デザインが完了したら、次はHTML / CSS / JavaScriptによるプログラミングの開始です！
特別なライブラリや環境を使うわけではないので、純粋なWebプログラミングを学びたい方にもオススメの内容です。
作成したモックアップを流用する方法や、レスポンシブな設計手法とか効果的なCSSスタイルの記述方法などは必見。
この動画コースを完了すれば以下のようなWebサイトが作れるようになります！
- レスポンシブなWebサイト
- ランディングページ
- 映像系のWebサイト
- 求人用の掲示板サイト
- ポートフォリオサイト
- ショップサイト
etc...
HTML / CSSの基本的なプログラミングができるようになった人の次へのステップとしても重宝するコースです！
＜参考＞
■Node.jsを使ったサーバーサイドをじっくり学ぶ！
【 REST API Tutorial 】
こちらは、Node.js / Express / MongoDBを活用したサーバー側のプログラミング手法を、全17回の動画でゼロから丁寧に学習することができるコースになります。
一般的なWebサービスには欠かせないRESTによる設計モデルの知識や、データベースの読み書きなどを実際にコードを触りながら学習できるように構成されているのが特徴です！
動画の前半では「REST APIとは？」から始まる事前知識を図解で解説しており、Node.jsやMongoDBなどのインストール手順も詳しく教えてくれます。
基本的なPOST / GETによるデータの読み書きや、ルーティング手法、JSONの扱い方など基本的な知識は一通りマスターできるように構成されています。
また、動画の後半ではExpressやReactなどを使って簡単なWebアプリを開発していきます！
前半で学習した基本的な知識をフル活用して組み立てていくので、それまでの学習成果を再確認することもできるでしょう。
また、途中にPostmanを使ったAPIのテスト手法についても触れられているのが特徴で、便利なサービスを活用することで効率化を図っています。こちらも一見の価値あり。
この動画コースを完了すると、以下のような知識が身につきます！
- REST APIについて
- Node、Express、MongoDBのインストール手順＆使い方
- GET / POST / PUT / DELETEの使い方
- POST GETを使ったデータの読み書き
- ルーティング手法
- JSONの扱い方
- Expressによる簡単なWebアプリの作り方
- エラーハンドリング
- Postmanを使ったAPIテストの手法
- MongoDBと連携したデータベースのハンドリング
- Reactによる簡単なWebアプリの作り方
etc...
この動画コースを理解するだけで、簡単なWebサービスなら個人で開発できるスキルが身につきます！
＜参考＞
■「React ＆ Redux」によるWeb開発を徹底的に学ぶ！
【 React JS Tutorials 】
こちらはReactの基本的なチュートリアルを試したい人にオススメの動画となっており、ReactによるWeb開発を全23回の動画で基礎からしっかりと学べるコースになっています。
簡単なWebサイトを作りながら、Reactコンポーネントの仕組みや構造について実際に手を動かしながら1つずつ丁寧に学べる構成になっているのが特徴です。
実際のWeb開発でも役立つコンポーネントの効果的な再利用法や、ルーティング手法、非同期操作によるデータ処理、メモリリークの解決法、Fluxパターンによるアプリ設計なども図解入りで詳しく学べます。
また、動画後半ではReduxフレームワークによるSPAの開発手法についてもしっかりと学習できるようになっており、「Actions → Reducers → Store」の仕組みを持ったスケーラビリティの高いWebアプリ開発手法が身につきますよ！
＜参考＞
■「React Native」によるスマホアプリ開発手法を学ぶ！
【 React Native Tutorial 】
「React Native」を使ってiOS / Android用のスマホアプリの開発手法を学習できるように、サンプルのデモアプリを1つ作りながら全37回の動画で基礎からしっかりと学習できるコースです。
サンプルと言ってもしっかりと作り込まれた「オークション」アプリになっており、リアルタイムに入札などを行う仕組みも実装されているので非常に参考になります。
便利なツールの活用法も紹介されていて、例えば画面UIに関しては「NativeBase」を上手く利用しています。
単純な記述でiOS / Androidに対応したネイティブに近いデザインの描画が可能なので、短時間で見た目の良いアプリを作るには最適だと感じました。
さらに「Feathers」というサービスを組み込むことで、リアルタイムにデータのやり取りをおこなえるようにプログラミングしていくので、「オークション」の性質にはピッタリのツールと言えるでしょう。
また、動画の前半ではオークションの仕組みを構築し、そのあとは1つずつ機能を追加していくカタチで進んでいくので見ているだけでも楽しいです！
最初はシンプルなアプリが、「ログイン機能」「お気に入りボタン」「タブバー」「アニメーション」…など、どんどん高機能になっていくのを楽しみながら勉強できるのがポイントだと思います。
＜参考＞
■「Twitter」を作りながらWebサービスの開発手法を学ぶ！
【 Build a Twitter Clone 】
Twitterのように「ツイート」「リツイート」「お気に入り」などができる簡単なSNSアプリをゼロから開発し、全26回の動画でWebサービスの仕組みを学習できるコースです。
Node.js + Express.js + MongoDB(Mongoose)の組み合わせでベースとなる環境を整えるところから始まり、「ツイート」などの機能を1つずつ実装していく過程をすべて体験していくことができます。
また、GraphQLによるAPIの取り扱いを簡単にする「Apollo」のサービスを活用した手法も学習することができるのも特徴的でしょう。
Twitterのようにリアルタイム更新する方法やログイン機能など、Webサービスに必要な機能はだいたい学べる貴重なコースになっています。
ちなみに「Twitter」ではなく、人気の配車サービス「Uber」と同じような機能を持ったサービスの開発コースもあります！
【 Car/Taxi Booking App 】
全13回の動画で、マップと位置情報を使ってユーザーとマッチングさせる機能をゼロから作り込んでいく楽しいコースになっているので、ご興味ある方はぜひ参考にしてみてください！
＜参考＞
■おまけ
最後に、JavaScript初級者向けに基本から応用技までを学習できるように、小さなWebアプリを作りながら学べるコースをご紹介しておきます！
【 JavaScript30 】
全30回の動画コースになっており、1回の動画につき1つのWebアプリを作っていきます。
作成するWebアプリは以下のような感じです！
- ドラムキット
- アナログ時計
- イメージギャラリー
- 検索ボックス
- タスク管理
- スケッチアプリ
- HTML5動画プレイヤー
- スピーチシンセ
これらのミニアプリをゼロから開発していくことで、JavaScriptの基本的な使い方はもちろんですが、Ajax・REST API・Web Audio API・音声認識・ゲームプログラミング…など、幅広い知識も一緒に習得することが可能です。
その他、JavaScriptのフレームワークやNode.jsなどに関する基本的なチュートリアルコースも以下の記事で詳しく解説していますので、ぜひ参考にしてみてください！
paiza.hatenablog.com
＜参考＞
■JavaScript講座は完全無料！動画でプログラミングが学べるレッスン
paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニング」を公開しています。
今回記事の中で使用しているJavaScriptが学べる入門講座をはじめとして、Python、Java、C言語、PHP、Ruby、SQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください！
特に、今まで有料だった「JavaScript入門編」・「ゲームエンジニア入門編」は、【全編無料】となりましたので、ぜひごらんください！
■まとめ
今回は、実践的なWeb開発を学べる動画ばかりを厳選してご紹介してみました。
ある程度、基本的なプログラミングを覚えたあとに次は何をしようかな？…と悩んだ時に、今回ご紹介したような動画を見ると非常に効果的だと思います。
いずれの動画も基礎知識をしっかりと学べるような構成になっているので、動画を見終わってから自分なりのオリジナルサービスを開発していくきっかけにもなるはず！
ぜひ、みなさんもお気に入りのコースを視聴して、楽しいWeb開発を始めてみましょう！
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
