MERNスタックの仕組みと、参考になるチュートリアルを提供する記事です。本当に重要な部分のみを扱いました。
MERNスタックとは
MongoDB, Express, React, Node.jsの4つを使ったソフトウェアハンドル。Webアプリ開発に用いられる。仮に、React.jsではなく、Angular.jsを使う場合、MEANスタックとなる。
MongoDB: ドキュメント志向のNo-SQLデータベース。データの作成、読み込み、更新、削除に使う。
Express: Node.jsのフレームワーク。例えば、Node.jsで一から別々のURLパスでユーザーからくるリクエストを個別に処理するのは面倒だが、Expressを使えばそれを簡易的に行える
React: Javascript製ライブラリ。単一ページWebアプリのUIを作成するUIコンポーネントを構築する。MVCモデルのVのみを担い、仮想DOMを実装することで素早いレンダリングが期待できる。仮想DOMについては説明すると長いので、ここでは省略。
なぜ仮想DOMという概念が俺達の魂を震えさせるのか
https://qiita.com/mizchi/items/4d25bc26def1719d52e6
Node.js: サーバーサイドでも動くJavascriptってカッコイイし楽だよね、と覚えておこう。（ぇ
公式を参照すると、以下のように記載がある。
Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。
スケーラブル = 拡張性のこと。乱暴なたとえだが、1万人のユーザーでも100万人のユーザーでも、DBとのリクエスト・レスポンスがスムーズであったり、レンダリングの速度に影響が少なかったりといった、システム負荷などの拡大・拡張に応じて、柔軟に対応できるかといったものを指す。
非同期型 = 具体的にはI/O処理を非同期で行っている。I/O処理とは、ファイルにデータを書き込む、ファイルのデータを読み込む処理のこと。
身近な例: GoogleMap
同期型：目的地を検索する時、検索欄に目的地を記入→検索→ページが再リロード→目的地をUIに表示
非同期型：目的地の周辺を拡大・縮小したり、周辺のその先を見たい時にドラッグして動かすが、その時ページ全体が再リロードされることなく、部分的にリロードされ表示させている。
同期型は再リロードされている時に他のことは出来ないが、非同期型は再リロードされている最中もドラッグして地図を動かせる。ユーザー的には、非同期型の方が嬉しい（はず）。
イベント駆動 = 対応しているイベントが発火したタイミングで初めて、実行される。ユーザが操作をしていないときは、常に待機状態でプログラムが待っている。
何が良いのか
乱暴だが、フルスタックエンジニアを名乗りたい人は、実はjavascriptが書ける時点で完結できてしまうよね。
本質的な部分で言うと、
１：保守性 = Javascriptで完結しているため、扱える人が多い=人依存にならない
２：拡張性 = データ構造の変化や、json形式が使えたり。柔軟に設計ができる
の２点。
実際の中身
View(ユーザーが見える部分)を担っているのがReact。
Express は特定のHTTP - GET, POST, DELETEなど - と、そのURLパターンに対して、どの関数が呼び出されるか、を指定するメソッドと、どのテンプレートエンジンが使用されるか、を指定するメソッドを提供する。
例）何らかのデータを送信したいと思い、送信ボタンをクリックした場合：
送信ボタンクリック
→Reactで送信に関する関数が実行
→Expressがその関数に対する処理を実行。MongoDBに実行させたい処理を送る
→MongoDBがExpressから来た処理を実行
→完了
といった具合（ざっくり）。完了したことをクライアントに通知させる部分まで担うのがほとんどだけど省略。
例）データを取得したいと思い、ボタンをクリックした場合：
取得ボタンクリック
→Reactで取得に関する関数が実行
→Expressがその関数に対する処理を実行。MongoDBに実行させたい処理を送る
→MongoDBが欲しいデータを取得して、Expressに送る
→Expressがそのデータをキャッチして、Reactに送る
→ReactがExpressから受け取ったデータをViewに反映させる
といった具合（ざっくり）。
MERNスタックを構築してみたい、という方へ
実際にどんなTutorialがあるか調べてみました。
Youtube
https://www.youtube.com/c/CleverProgrammer/videos
英語ですが。めちゃめちゃ動画あります。好きなものを見ると良いと思います。筆者はまだ触っていないです。
MERN Stack Front To Back: Full Stack React, Redux & Node.js
https://www.udemy.com/course/mern-stack-front-to-back/
英語です。有料のUdemyですが、こちらは実際に作ってみました。ReactもHooks使ったりとモダンに扱っていたため、筆者としてはオススメです。
まとめ
実際に作成しようとなった場合、ドキュメントが少ない、そもそも日本語で書かれたMERNのチュートリアルが見つからないと色々と不安な点はあると感じますが、今は翻訳も発展しているのでドンドン一次情報から調べていきましょう。
Reactは、2019年にHooksが使えるようになってから注目が更にされていますし、Node.jsも成長期は終えていますがバリバリの現役です。それぞれ扱えて損は全くないと思うので、是非使ってみましょう。
参考にした資料
What is MERN Stack?
https://www.educative.io/edpresso/what-is-mern-stack
Node.jsのMVCフレームワーク「Express」の基礎知識とインストール (1/3)
https://www.atmarkit.co.jp/ait/articles/1503/04/news047.html#011
初心者向け！3分で理解するNode.jsとは何か?
https://eng-entrance.com/what-is-nodejs