JS_Backend_入門

web development構造

環境構築・初期ファイル

1. Node.jsプロジェクトを初期化

まず、ターミナルで以下のコマンドを実行する。

初期化.コマンド

npm init -y
npm install express dotenv

• npm init -y：プロジェクトを初期化し、package.jsonを自動生成する。-yは初期設定の質問を省略するオプション。
• npm install：必要なパッケージをインストールする。インストールしたパッケージはpackage.jsonに依存関係として記録される。
• express：APIやWebサーバーを構築するためのフレームワーク。
• dotenv：.envに定義した環境変数をNode.jsから読み込むためのパッケージ。

2. 初期ファイル

一般的には、初期段階では、以下のような構成にする。

qitta.my-backend

my-backend/
├── .gitignore
├── .env
├── .env.example
├── package.json
├── package-lock.json
├── node_modules/
└── src/
    ├── app.js
    └── config/
        └── constants.js

① package.json
Node.jsプロジェクトの基本情報、依存パッケージなどを管理するファイル。
例えば、package.jsonに以下の設定を追加する。

{
  "name": "my-backend",
  "version": "1.0.0",
  "type": "module", //"type": "module"を設定すると、JavaScriptでimportやexportの構文を使用できる。
  "scripts": {
    "start": "node src/app.js"
  }
}

② .gitignore
言うまでもない

③ .env（環境変数）
開発環境や本番環境によって異なる設定値を管理するファイル。

④ src/config/constants.js

• .envとの主な違い：
  • .env：環境によって変化する設定値や機密情報を管理する。
  • constants.js：アプリケーション共通の固定値を管理する。

ファイルの説明

APIと連携するバックエンドを構築する際には、.env、app.js、database.js、constants.js、index.jsなどのファイルを使用する。

今回はこれら5つのファイルを用いたシンプルなバックエンドサーバーを例に、それぞれの役割や記述内容について解説する。

javascript.database.js

import mongoose from "mongoose" 

const connectDB = async () => {
    try {
        const connectionInstance = await mongoose.connect
        (process.env.MONGODB_URI); 
        console.log(`\n MongoDB connected !!! ${connectionInstance.connection.host}`);
    } catch (error) {
        console.log("MongoDB connection failed", error);
        process.exit(1);
    }
};

export default connectDB

説明：
mongoose.connect()はPromiseオブジェクトを返す。awaitによってPromiseがfulfilledになるまで待機し、その結果（value）がconnectionInstanceに代入される。

javascript.index.js

import dotenv from "dotenv"
import connectDB from "./config/database.js";


dotenv.config({
    path: './.env'
});

const startServer = async () => {
    try {
        await connectDB();

        app.on("error", (error) => {
            console.log("ERROR", error);
            throw error;

        });

        app.listen(process.env.PORT ||8000, () => {
            console.log(`Server is running on port :
                ${process.env.PORT}`);

        });
    } catch (error) {
        console.log("MongoDb connection failed!",err);
    }
}

startServer();

説明①：dotenv
dotenvはパッケージ/ライブラリ。dotenv.config();これを実行すると、process.env.PORTで、.envにアクセスすることができる。
dotenv.config({path: "./.env"});とは、dotenvで、./.envを読むこと。

javascript.env

PORT=8000
MONGODB_URI=mongodb://localhost:27017/mydb

説明②：app.listen()

javascript.index.js

app.listen(process.env.PORT || 8000, () => {
  console.log(`Server is running on port : ${process.env.PORT}`);
});

app.listen()は、Expressアプリケーションが提供するメソッドである。
バックエンドサーバーを起動し、指定したポートでクライアントからのHTTPリクエストを受け付けられる状態にする役割を持つ。

説明③：app.on()

javascript.index.js

app.on("error", (error) => {
  console.log("ERROR", error);
  throw error;
});

on()は、特定のevent (click, add-to-cartなど) が発生した際に、指定したcallback functionを実行するためのevent listener(イベントリスナー)メソッドである。

例えば、以下のコードでは、

app.on("error", (error) => {
    console.log("ERROR", error);
    throw error;
});

appがclickイベントを発行すると、登録されたcallback functionが実行される。
on("error", ...)errorイベントを監視する。
console.log()発生したerrorをコンソールに出力する。
throw errorエラーを再度投げる。
つまり、on()はイベントが発生したときに、実行するcallback functionを登録しておくためのメソッドである。