Stacks.js を利用した開発を行う際、プロジェクトのディレクトリ構成と主要な設定ファイルの役割を理解することが重要です。以下に、標準的な構成要素とその設定方法について解説します。

ディレクトリ構成概要

プロジェクトのルートディレクトリには、ソースコード、設定ファイル、ビルド成果物などが階層的に配置されます。

stacks/
├── .github/
│   └── workflows/          # CI/CD 設定
├── .vscode/
│   └── settings.json       # エディタ設定
├── dist/                   # ビルド出力先
├── node_modules/           # 依存パッケージ
├── src/
│   ├── components/         # UI コンポーネント
│   ├── config/             # 環境設定
│   ├── hooks/              # カスタム Hooks
│   ├── pages/              # ページ構成要素
│   ├── services/           # API 通信層
│   ├── store/              # 状態管理
│   ├── styles/             # スタイル定義
│   ├── utils/              #  utility 関数
│   └── index.js            # エントリーポイント
├── .babelrc                # Babel 設定
├── .eslintrc.js            # Lint 設定
├── .gitignore              # Git 除外設定
├── package.json            # パッケージ定義
├── README.md               # ドキュメント
└── webpack.config.js       # バンドル設定

主要ディレクトリの役割

• .github/workflows/: 継続的インテグレーション用のワークフロー定義。
• .vscode/: 開発環境固有の設定ファイル。
• dist/: 本番用コードなど、ビルド後に生成されるファイル。
• node_modules/: npm を介してインストールされた依存ライブラリ。
• src/: 開発者が編集するソースコードの本体。
  • components/: 再利用可能な React コンポーネント。
  • config/: 環境変数や定数定義。
  • hooks/: ロジックを共有するためのカスタム Hooks。
  • pages/: ルーティングに対応する画面コンポーネント。
  • services/: 外部 API との通信処理。
  • store/: Redux 等によるグローバル状態管理。
  • styles/: CSS や SCSS などのスタイルシート。
  • utils/: 汎用 helper 関数。
  • index.js: アプリケーション起動の入口。
• .babelrc: 最新構文をダウンコンパイルするためのトランスパイラ設定。
• .eslintrc.js: コードの品質とスタイルを統一するためのルール。
• package.json: プロジェクトのメタデータとスクリプト定義。
• webpack.config.js: モジュールバンドルおよび開発サーバーの設定。

エントリーポイントの実装

アプリケーションの初期化は src/index.js で実行されます。DOM 要素に対して React ツリーを描画する処理を記述します。

import React from 'react';
import ReactDOM from 'react-dom';
import MainLayout from './components/MainLayout';

const mountNode = document.getElementById('app-root');

ReactDOM.render(<MainLayout />, mountNode);

このファイルでは、必要なライブラリを読み込み、指定された DOM ノードへルートコンポーネントをマウントします。

設定ファイルの詳解

package.json

プロジェクトの依存関係と実行スクリプトを管理します。

{
  "name": "stacks-app",
  "version": "1.0.1",
  "scripts": {
    "dev": "webpack serve --config webpack.config.js --mode development",
    "prod": "webpack --config webpack.config.js --mode production"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.2"
  }
}

• scripts: dev で開発サーバーを起動し、prod で本番用ビルドを実行します。
• dependencies: 実行時に必要なライブラリ。
• devDependencies: ビルドや開発ツールのみ必要なライブラリ。

webpack.config.js

ソースコードのバンドル設定と開発用サーバーの挙動を定義します。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 8080
  }
};

• entry: バンドル処理の起点となるファイル。
• output: 生成されるファイルのパスと名称（例：app.js）。
• module.rules: ファイル拡張子に応じたローダーの適用設定。
• devServer: 開発サーバーのポート番号（例：8080）や圧縮設定。