技術スタック
MERN スタックに触れる前に、技術スタックとは何かを理解する必要があります。技術スタックとは、Webアプリケーション、モバイルアプリケーション、または同様のアプリケーションを構築するために選択し、使用する一連の技術のことです。優れた技術スタックは、シームレスなユーザーエクスペリエンスを提供するだけでなく、スケーラブルでコスト効率に優れていなければなりません。典型的な技術スタックには、フロントエンド、バックエンド、データベースが含まれ、フル技術スタックとして知られています。
通常、基本的なフロントエンドまたはユーザーインターフェイスの技術は変わらず、HTML、CSS、JavaScript です。プロジェクトの要件に応じて、React や Angular など、これらの UI 技術を基盤としたライブラリやフレームワークを使用できます。（注：React はウェブ上でライブラリとフレームワークの両方として呼ばれることがあります。）技術的にはライブラリですが、それを取り巻く広大なエコシステムのため、フレームワークのように感じられます。議論は Twitter/X に任せます。）
バックエンドは、アプリケーションロジックが存在するサーバーで構成されます。JavaScript、Java、Python のようなプログラミング言語でアプリケーションロジックを書くことも、Django、Spring、Express.js のようなフレームワークを使用することもできます。プログラムを実行するには、Node.js や JRE（Java Runtime Environment）のようなランタイムが必要です。
データベースは、アプリケーションに関連する全てのデータが保存されるストレージハブです。表構造（リレーショナルデータベースシステムを使用）でデータを保存するか、ドキュメント構造、グラフ構造などの非リレーショナル（NoSQL とも呼ばれる）を使用するかを選択でき、それに応じてデータベースを選択します。データベースの例としては、MongoDB、Oracle、MySQL などがあります。
MERN スタックとは？
技術スタックには、開発者がプロジェクトの要件に応じてテクノロジーを選択できるカスタムスタックと、あらかじめテクノロジーが決定されている事前構築されたスタックがあります。
MERN は、JavaScript 技術に基づいた、事前構築済みの技術スタックです。MERN は MongoDB、 Express、 React、 Nodeの 頭文字を取った略語で、スタックを構成する 4 つの主要テクノロジーにちなんでいます。
- MongoDB：ドキュメントデータベース
- Express(.js)：Node.js Webフレームワーク
- React(.js)：クライアントサイド JavaScript フレームワーク
- Node(.js)：最先端の JavaScript Webサーバー(ランタイム)
Express と Node がミドル（アプリケーション）ティアを構成しています。Express.js はサーバーサイドの Web フレームワークで、Node.js は人気のある強力な JavaScript サーバープラットフォームです。どちらを選択しても、ME(RVA)N は JavaScript と JSON を扱うのに理想的なアプローチです。
MERN スタックはどのように機能しますか？
MERN アーキテクチャでは、JavaScript と JSON を使用して、3層アーキテクチャ（フロントエンド、バックエンド、データベース）を容易に構築できます。
React.jsフロントエンド
MERN スタックの最上位層は React.js で、HTML で動的なクライアントサイドアプリケーションを作成するための宣言型 JavaScript フレームワークです。React を使用することで、シンプルなコンポーネントで複雑なインターフェースを構築し、バックエンドサーバーのデータに接続し、HTML としてレンダリングできます。
React の長所は、最小限のコードと手間でステートフルなデータ駆動型のインターフェースを処理することです。また、フォーム、エラー処理、イベント、リストなどの優れたサポートなど、最新の Webフレームワークに期待される機能を全て備えています。
Express.js と Node.js のサーバー層
次のレベルは、Node.js サーバー上で動作するサーバーサイドフレームワークである Express.js です。Express.js は「Node.jsのための、高速で、独裁的で、ミニマリストな Webフレームワーク」と宣伝されており、まさにそのとおりのフレームワークです。Express.js は、URL ルーティング（受信した URL をサーバーの機能にマッチさせる）や、HTTP リクエストおよびレスポンスの処理において強力なモデルを提供します。
React.js のフロントエンドから XML HTTP リクエスト（XHR）、GET、POST を行うことで、アプリケーションを動かす Express.js 関数に接続できます。これらの関数は、MongoDB の Node.js ドライバを使用して、MongoDB データベースのデータにアクセスして更新します。
MongoDB データベース層
アプリケーションが何らかのデータ（ユーザープロファイル、コンテンツ、コメント、アップロード、イベントなど）を保存する場合、React、Express、Node.js と同じくらい簡単に操作できるデータベースが必要になります。
そこで MongoDB が役に立ちます。React.js フロントエンドで作成された JSON ドキュメントは、Express.js サーバーに送信され、そこで処理されます（有効なデータであると仮定した場合）。その後、MongoDB に直接保存され、後で取得できるようになります。クラウド環境で構築する場合は、MongoDB Atlas を検討することをお勧めします。MERN スタックをセルフサービスでセットアップしたいとお考えなら、是非続きをお読みください！
MERN スタックを使用した簡単なリクエスト/レスポンスの例
一般的な HTTP リクエスト（クライアントからの）は、データベース操作である Create、Read、Update、Delete（CRUD）に対応する 4 つの操作、POST、GET、PUT、DELETE のいずれかを実行します。これらのリクエストに対応するために、Express.js はリクエストオブジェクトとレスポンスオブジェクトを提供します。リクエストオブジェクトにはエンドユーザーから提供されたデータが格納され、レスポンスオブジェクトにはデータベースから取得されたデータが格納されます。
MongoDB Node.js ドライバを使用することで、簡単なステップで MongoDB デプロイメントをアプリケーションに接続できます。
MERN スタックの最も重要な特徴の 1 つは、全ての技術が同じフォーマットでデータを保存することです。
フロントエンド層の React は JavaScript オブジェクトとしてデータを保存し、バックエンド（アプリケーション）層は JavaScript コードを使用し、データ層の MongoDB は BSON（Binary JavaScript ON）形式でデータを保存します。Express は、.json() メソッドを使用して JS と JSON の間でデータを変換します。
Node.js では、バックエンド（サーバーサイド）のアプリケーションロジックを JavaScript で記述することができます。Node.js はコアとなる http モジュールを提供します。同じものを Express で記述することで、よりクリーンなコード体験を提供します。Express は、必要なデータを正しいエンドポイントから取得するための強力なルーティング機能も提供します。これにより、開発者はルーティング用の明示的なコードを記述する必要がありません。
さらに、コードがエンドツーエンドで同じ言語（JavaScript）で書かれているため、各レイヤー間の変換にかかる時間を大幅に節約できます。
例えば、顧客（クライアント）がオンラインポータルを通じて自分の携帯番号を更新したいとします。この場合、React.js を使って構築されたフロントエンドには、ユーザーが携帯番号を入力できるフォームが用意されています。React は "useState "フックを使って、顧客が入力した携帯番号をリクエストパラメータに設定します。
Express.js のコードは、HTTP PUT リクエストから携帯番号を受け取り、それをアプリケーションのデータモデルスキーマにマッピングします。例えば、findByIdAndUpdate() のような対応するメソッドを適用して更新操作を実行します。その後、成功または失敗のメッセージを含むレスポンスが HTTP レスポンスオブジェクトを通じて送信されます。
完全な例は MERN スタックのチュートリアルのページでご覧いただけます。
MERN スタック開発とフルスタック開発の比較
MERN スタックはフルスタックの一種で、テクノロジーレイヤーがあらかじめ定義されています。フルスタック開発者は複数の技術に精通する必要があるため、学習曲線が高いのに対し、MERN スタック開発者は対応する技術のみを習得すれば十分です。以下の主な違いのリストは、プロジェクトの要件に応じて、カスタムフルスタックと MERN スタックのどちらを選択するかに役立ちます。