メモ - srcとdistディレクトの役割

1. src（ソース）ディレクトリ

• 開発者が直接編集するコード置き場
• 人間が読みやすい形式で書かれている
• コンパイル/ビルド前の元となるコード置き場

// src/App.jsx
import React from 'react';
import './styles.scss';

export function App() {
  const message = "Hello World";
  return <h1>{message}</h1>;
}

2. dist（配布）ディレクトリ

• ブラウザで実行される最終的なファイル置き場
• コンパイル・最適化済みのコード

// dist/app.min.js
"use strict";!function(){var e="Hello World";document.getElementById("app").innerHTML="<h1>"+e+"</h1>"}();

3. 変換の流れ：

src/ （開発者が編集） 
　　　　↓
ビルドプロセス（コンパイル・最適化）
　　　　↓
dist/ （ブラウザで実行）

簡単に言えば：

• src = 開発者の作業場
• dist = 完成品の展示場所

人間の作業に例えると：

• src = レシピと材料（料理の作り方）
• dist = 出来上がった料理（お客様に提供するもの）

このように、srcは開発用、distは配信用という明確な役割の違いがあります。

参照

• webpackのコンパイル
  • 時間が出来次第、上記のbabel設定なども深ぼる
• webpackの設定方法
• 各ディレクトリの解説
• nextjs×vercel デプロイ