BundleConfig.csの設定および記述方法について

＜目次＞

(１) BundleConfig.csの設定および記述方法について
　 (１-１) BundleConfig.csの設定および記述方法について
　 (１-２) BundleConfig.csの書き方
　 (１-３) （参考）BundleConfig.csの作り方

(１) BundleConfig.csの設定および記述方法について

(１-１) BundleConfig.csとは？

「BundleConfig」はASP.NET MVCにおいて、クライアントが「JavaScript」や「css（スタイルシート）」などをサーバからダウンロードする際のネットワークトラフィックを最小限に抑えるために、複数のJavaScriptやcssをダウンロードして束ねる（Bundle）事により、HTTPリクエストの数を減少させて、ページの表示速度を向上させるための機能です。この設定を記述する定義ファイル（C#プログラム）が「BundleConfig.cs」です。

（図１１１）

以下は実際にBundle.configありの場合と無しの場合について、ネットワークトラフィックを比較した結果です。

（図１１２）バンドルなし

（図１１３）バンドルあり

＞目次にもどる

(１-２) BundleConfig.csの書き方

以下のサンプルを基にBundleConfigの書き方をご紹介いたします。

（「BundleConfig.cs」のサンプルPG）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace BookLibrarySystem
{
  public class BundleConfig
  {
    public static void RegisterBundles(BundleCollection bundles)
    {
      //# css(カスタムcss、bootstrap)を「~/Content/css」に紐づけ
      bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/Site.css",
            "~/Content/bootstrap-pulse.css"));

      //# modernizr(ユーザのブラウザ機能検知)を「~/Scripts/modernizr-*」に紐づけ
      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
            "~/Scripts/modernizr-*"));

      //# jQueryを「~/bundles/jquery」に紐づけ
      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js"));

      //# bootstrap.jsを「~/bundles/bootstrap」に紐づけ
      bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
           "~/Scripts/bootstrap.js"));
    }
  }
}

（図１２１）

基本的な方針として、「対象ファイル」（バンドルしたい対象）とその「URL（のセット）」を紐づけた上で、アプリケーションに登録します。登録にはBundleCollectionクラスのAddメソッドを使います。

（構文）

Add(【Bundle型のオブジェクト】)

そして、Addメソッドの引数であるBundle型のオブジェクトはJavaScriptのバンドルの場合は「ScriptBundle」メソッドを、cssのバンドルの場合は「StyleBundle」メソッドをそれぞれ使用します。「仮想パス」というのは、バンドルを実際に呼び出す際に使用する仮想の名前です。

（構文）

//# JavaScriptの場合
ScriptBundle(【String型の仮想パス】)
//# cssの場合
StyleBundle(【String型の仮想パス】)

更に、上記のScriptBundle、StyleBundleクラスの「Include」メソッドを使って、実際にバンドルする対象のファイルを列挙していきます。

（構文）

Include(【String[]型の配列】)

（例）

public static void RegisterBundles(BundleCollection bundles)
{
Bundle test = new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css","~/Content/bootstrap_pulse.css");
bundles.Add(test);
//～中略～
}

また、Includeメソッドで指定するバンドル対象は、ワイルドカードを指定して複数指定する事も可能です。

//# ワイルドカード例①
jquery-{version}.js
//# ヒットする結果例①
jquery-3.4.1.js
jquery-3.4.2.min.js
//# 以下も同様の意味になります
jquery-*.js

＞目次にもどる

(１-３) （参考）BundleConfig.csの作り方

ASP.NET MVCのプロジェクトを作成する際に、もし「プロジェクトテンプレート」（予め簡単な画面が作られた状態でアプリを作れる機能）を使って作った場合は「BundleConfig.cs」は元々存在しているので、その場合は本手順の実施は不要です。

※↓こんな感じの画面が見える人は、恐らくApp_Start内にBundleConfig.csが既にあるはず

（図１３０）デフォルトの「プロジェクトテンプレート」で作成された画面

ただし、「空のMVCプロジェクト」から作っており、もしBundleConfig.csが無い場合でも通常のクラスと同様に新しく作ればOKです。

（作成手順）

・①App_Startフォルダを「右クリック」⇒「追加」⇒「クラス」と選択

（図１３１）

・②クラス名を「BundleConfig.cs」にして「追加」を押下

（図１３２）

・③前提パッケージのインストール

BundleConfigを使うにはパッケージ「Microsoft.AspNet.Web.Optimization」が必要となりますので、NuGetパッケージマネージャーからダウンロードします。

●NuGetパッケージマネージャーを開く

方法１：「ツール」⇒「NuGetパッケージマネージャー」⇒「パッケージマネージャーコンソール」と選択します。

（図１３３）

方法２：サンプルPGを貼り付けると、「Microsoft.AspNet.Web.Optimization」が必要が箇所でエラーになるので、それを右クリックする事でもNuGetを開けます。

（図１３４）

●Microsoft.AspNet.Web.Optimizationのインストール

「参照」タブから「Microsoft.AspNet.Web.Optimization」を検索し、インストールを押下します。

（図１３５）①

↓

（図１３５）②

↓

（図１３５）③

●コードの追記

あとは(１-２)で記載しているサンプルのようにBundleConfigの内容を記述すればOKです（※バンドル対象のファイル名は各自のものに置き換えをお願いします）

（図１２１）

以上でBundleConfig.csの設定は完了ですが、実際にバンドルを操作するためには、他にもいくつか設定が必要な項目があります。それらの項目について詳しくは下記の記事をご参照ください。

⇒（解説）BundleConfigが読み込まれない場合に確認するべきポイント

以下は対応内容を箇条書きにした表です。具体的な内容は上記URLの記事をご覧ください。

（表）

（確認①）BundleConfig.csの追記orWeb.configの修正

（確認②）Global.asax.csへの登録

（確認③）web.configへの追記（名前空間）

（確認③）各ビューやレイアウト（_Layout.cshtml等）でのインポート

＞目次にもどる