srcとdistフォルダーの役割

JavaScript、jQuery、jQuery プラグインなどのプログラミングにおいて、src と dist フォルダーはプロジェクトのソースコードと配布用ファイルの整理に重要な役割を果たします。

src フォルダー

• 開発環境での使用
  src フォルダー内のコードは、開発環境で直接使用されます。これは、コードの開発、テスト、およびデバッグのプロセスに役立ちます。
• ソースコードの保管場所
  src フォルダーは、プロジェクトのオリジナルのソースコードを保管する場所です。これは、開発者が編集やデバッグを行うための未加工のコードです。

dist フォルダー

• 配布用ファイルの保管場所
  dist フォルダーは、プロジェクトの最終的な配布用ファイルを保管する場所です。これは、ユーザーや他の開発者が使用する準備が整った、最適化されたコードです。

具体的な例

• jQuery プラグイン
  
  • src フォルダー: plugin.js (プラグインのソースコード)
  • dist フォルダー: jquery.plugin.min.js (最小化されたプラグインファイル)
• JavaScript プロジェクト
  
  • src フォルダー: script.js (未加工の JavaScript コード)

// src/script.js (Original JavaScript code)
console.log("Hello, world!");

// dist/script.min.js (Minified JavaScript code)
console.log("Hello,world!");

解説

• dist/script.min.js
  
  • 圧縮された JavaScript コードです。
  • ファイルサイズが小さくなり、読み込み速度が向上します。
  • 本番環境での使用に適しています。
• src/script.js
  
  • 開発者が編集やデバッグを行うための未加工のコードです。

jQuery プラグインの例

// src/jquery.myplugin.js (Original plugin code)
(function($) {
  $.fn.myPlugin = function() {
    // Plugin logic
  };
})(jQuery);

// dist/jquery.myplugin.min.js (Minified plugin code)
(function($){$.fn.myPlugin=function(){/*Plugin logic*/};})(jQuery);

• dist/jquery.myplugin.min.js
  
  • 圧縮された jQuery プラグインのコードです。
  • ユーザーが使用する最終的なファイルです。
• src/jquery.myplugin.js
  
  • オリジナルの jQuery プラグインのソースコードです。
  • 開発者がプラグインの機能を開発、テスト、デバッグするためのコードです。

単一フォルダー構造

• デメリット
  
  • ソースコードとビルド後のファイルが混在するため、管理が難しくなる可能性
  • ビルドプロセスが複雑化する場合がある
• メリット
  
  • シンプルなプロジェクト構造
  • 初心者にとって理解しやすい

ビルドツールによる自動化

• デメリット
  
  • 初期設定が必要
  • ビルドツールの学習曲線がある
• メリット
  
  • 自動化されたビルドプロセス
  • 複雑なビルドタスクの簡素化

単一フォルダー構造

project/
  index.html
  script.js
  style.css

ビルドツールによる自動化 (Webpack の例)

project/
  src/
    index.js
    style.scss
  dist/
  webpack.config.js

Webpack の設定ファイル (webpack.config.js)

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      // ...
    ]
  }
};

Webpack の実行

npx webpack