LoginSignup
1
0

More than 3 years have passed since last update.

MERNスタックを学べる動画をまとめてみた(外国語の動画です)

Posted at

MERNスタック is 何?

MongoDB, Express, React.js, Node.jsの4つを使った開発環境のアーキテクチャのことです。主に、Webアプリ開発に用いられます。

MongoDBとは

ドキュメント志向のNo-SQLデータベース。データの保存などに使う。DBは、データベースの意。データがJSON形式みたいな感じなので非常にJavaScriptと相性が良い。

ExpressJSとは

Node.jsのフレームワーク。Node.jsの機能と一緒に使う事で、バックエンドの構築が出来る。

ReactJS

単一ページWebアプリのUIを作成するUIコンポーネントを構築出来る。アプリケーションのView部分を担っている。

NodeJSとは

サーバサイドJavaScriptエンジン のことです。

MERNスタックの良いところは?

ずばり!!
全部JaveScriptで書けることです!JavaScriptはフロントだけでしか使えへんやろ・・・。と思われがちですが、なんでも行けちゃうんです。もし、HTML,CSS,JavaScriptという静的なサイトしか作ったことがないという人は、新しく言語を学ばずともWebアプリケーションを開発することができるのでオススメです!!

MERNスタックを学べる動画一覧(英語のみ)

Youtubeの動画か再生リストになっていて一年以内(2019年の8月以降)に投稿されているものをまとめました。

JavaScriptの勉強している人は分かると思いますが、アロー関数とか非同期処理(async await)とか、Hooksの書き方をしている教材がすくないですよね・・・。でも、こちらに挙げているものは、どれも最新の記法で書かれているのでコードを眺めるだけでもけっこう勉強になります!

CODERS NEVER QUIT
インスタのクローンアプリが作れます。
動画本数:53本 1動画:10分前後 合計:9時間

John Ahn
Youtubeのクローンアプリが作れます。
合計:4時間30分

John Ahn
映画の紹介サイトが作れます。
合計:1時間30分

John Ahn
ECサイトが作れます。
合計:5時間

Coding Garden with CJ
旅行のログを投稿するサイト。Live形式です。
合計:4時間

Programming with Jaiti
ログイン認証アプリが作れます。
まだ完成するところまでの動画はupされていませんが分かりやすいですね。

おススメ勉強法

外国語だったとしてもコードの書き方は同じなので基本的な書き方さえ知っていれば分かります。しかし、この動画をみて学ぶのはファイル構成だったり、使用するライブラリの使い方、モダンな書き方を一から見て、自分で次に何かプロダクトを作るときに再利用することができるようにすることです。そのためにお勧めしたいのが・・・

コメントアウト勉強法です!

その名の通り、コメントアウトしまくります。どのタイミングでコメントアウトするかは人それぞれなんですが、一番良いのは再生リストになってるやつは一つの動画が終わるたびにコメントアウトするとよいですね。長い動画だと30分か、一つの機能を実装する度にすると良いと思います!

メリットとしては、コードを写経するだけだと見返したとしても何も覚えてなかったりしますが、これをすると自分の言葉でそのコードを表現する必要があるので、アウトプット要素が含まれます。本当のアウトプットは自分のプロダクトを作るときだとは思いますが、インプットと同時に簡単なアウトプットをしておくことで次にコードを見る時や他の人のコードを理解する時にも役に立ちます!ぜひお試しください!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0