mern stackで開発する
とりあえず何か作りたいなと思ったので，GPTにおすすめされたmern stackで開発することにしました．
mern stackとは
そもそもmern stackとは何なのかも知らないのでまとめてみました．
MongoDB, Express, React, Node.jsの頭文字を取ったものです．
- MongoDB: データベース
- SQLのようなリレーショナルデータベースではなく，NoSQLデータベース
- 表形式ではなく，JSON形式でデータを保存
- Express: サーバーサイドフレームワーク
- React: フロントエンドフレームワーク
- Node.js: サーバーサイドランタイム
簡単に書くとこんな感じです．
mern stackのメリット
- 一貫性のある開発環境
- フルスタック開発が可能
- サーバーサイドとクライアントサイドのコードを共有できる
- 全てJavaScriptで書ける
開発に取り掛かる
ゼロから作るのは大変なので，boilerplateを使って開発を進めます．
ボイラープレートとは，開発の初期段階で必要な設定やファイルをまとめたものです．（簡単にいうとテンプレートです）
今回はcreate-mern-appを使いました．
他にも有名なmern stackのboilerplateとしては以下があります．
-
create-mern-app
- スターが116
- 2024年に更新されている
- 今回はこれを使うことにした
-
mern-starter
- スターが5.1kもある
- 2019年から更新されていない
-
boilerplate-mern-stack
- スターが516
- 2020年から更新されていない
とりあえず，スターが多く，最近も更新されているcreate-mern-appを使ってみることにしました．
create-mern-appページに行き，READMEの下にあるMERN Boilerplateをダウンロードします．
ダウンロードしたら，解凍してVSCodeで開きます．
開発環境の構築
動かすには，Node.jsとMongoDBが必要です．
以下はmacOSの場合に限って説明します．
インストールしたらパスを通すのを忘れないようにしましょう
細かいインストール方法は公式サイトまたは他の記事を参考にしてください
Homebrewのインストール
HomebrewはmacOS用のパッケージ管理システムです．
Homebrewを使うと，パッケージのインストールやアップデートが簡単にできます．
以下のサイトに行って，コマンドをコピーしてターミナルに貼り付けて実行します．
Node.jsのインストール
nodebrewを使ってNode.jsをインストールするのがおすすめです．
brew install nodebrew
以下のコマンドでインストールできます．
nodebrew setup
nodebrew install-binary stable
以下のコマンドでバージョンが表示されればインストール成功です．
npm -v
MongoDBのインストール
Homebrewを使ってMongoDBをインストールします．
brew tap mongodb/brew
brew install mongodb-community
nodeモジュールのインストール
プロジェクトのディレクトリに移動して，以下のコマンドを実行します．
npm install
開発環境の起動
mongodbの立ち上げ（mac）
brew services start mongodb-community
npmサーバーの立ち上げ
npm run dev
これで，http://localhost:8080にアクセスすると，以下の画面が表示されます．
また，ターミナル上で以下のようなログが表示されればデータベースとも連携されています．
********** Successfully Connected To The MongoDB **********
触ってみる
試しにsignupして見ようとすると動かない！
どうやら，.envファイルのNEXT_PUBLIC_API_URLが適切に設定されていないようです．
そもそもmernなのになんでnuxtがあるんだろう??
とりあえず，NEXT_PUBLIC_API_URLをNEXT_PUBLIC_API_URL=http://localhost:8080/api/v1/authに変更すると，signupができるようになりました．
mongodbにしっかり登録されているかをみてみましょう．
以下のコマンドでmongodbに接続します．
mongosh
以下のコマンドでデータベースを選択します．
use migrate-test
以下のコマンドでユーザーを確認します．
db.users.find()
それっぽいjsonが表示されれば成功です．
まとめ
とりあえず，mern stackでboilerplateを動かしてみました．
ここからどう作っていくかがセンスが問われるところですね．