Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

ASP.NET C#

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

投稿日:2021年7月2日 更新日:

 

<目次>

(1) BundleConfig.csの設定および記述方法について
 (1-1) BundleConfig.csの設定および記述方法について
 (1-2) BundleConfig.csの書き方
 (1-3) (参考)BundleConfig.csの作り方

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

(1-1) BundleConfig.csとは?

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

(図111)

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

(図112)バンドルなし

(図113)バンドルあり

(1-2) 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"));
    }
  }
}
(図121)

基本的な方針として、「対象ファイル」(バンドルしたい対象)とその「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

 
目次にもどる

(1-3) (参考)BundleConfig.csの作り方

ASP.NET MVCのプロジェクトを作成する際に、もし「プロジェクトテンプレート」(予め簡単な画面が作られた状態でアプリを作れる機能)を使って作った場合は「BundleConfig.cs」は元々存在しているので、その場合は本手順の実施は不要です。
 
※↓こんな感じの画面が見える人は、恐らくApp_Start内にBundleConfig.csが既にあるはず
(図130)デフォルトの「プロジェクトテンプレート」で作成された画面
 
ただし、「空のMVCプロジェクト」から作っており、もしBundleConfig.csが無い場合でも通常のクラスと同様に新しく作ればOKです。
 
(作成手順)
 

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

(図131)
 

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

(図132)
 

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

 
BundleConfigを使うにはパッケージ「Microsoft.AspNet.Web.Optimization」が必要となりますので、NuGetパッケージマネージャーからダウンロードします。
 
●NuGetパッケージマネージャーを開く
 
方法1:「ツール」⇒「NuGetパッケージマネージャー」⇒「パッケージマネージャーコンソール」と選択します。
(図133)

 

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

(図134)

●Microsoft.AspNet.Web.Optimizationのインストール
「参照」タブから「Microsoft.AspNet.Web.Optimization」を検索し、インストールを押下します。
 
(図135)①
(図135)②
(図135)③

 

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

以上でBundleConfig.csの設定は完了ですが、実際にバンドルを操作するためには、他にもいくつか設定が必要な項目があります。それらの項目について詳しくは下記の記事をご参照ください。
 
 
以下は対応内容を箇条書きにした表です。具体的な内容は上記URLの記事をご覧ください。
 
(表)

(確認①)BundleConfig.csの追記orWeb.configの修正
(確認②)Global.asax.csへの登録
(確認③)web.configへの追記(名前空間)
(確認③)各ビューやレイアウト(_Layout.cshtml等)でのインポート

 

Adsense審査用広告コード


Adsense審査用広告コード


-ASP.NET, C#

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Entity Frameworkとは?概要や仕組みについて

  <目次> (1) Entity Frameworkとは?概要や仕組みについて  (1-1) Entity Frameworkとは?  (1-2) オブジェクトとテーブルが1:1対応しない …

C#のvarとは?型を調べる方法や制約事項についてもご紹介

<目次> (1) C#のvarとは?型を調べる方法や制約事項についてもご紹介  (1-1) C#のvarとは?  (1-2) サンプルプログラム:varの基本動作確認#1  (1-3) サンプルプログ …

.NETで「SystemInvalidOperationException」例外(ZombieCheck、Rollback)の調査記録

<目次> (1) .NETで「SystemInvalidOperationException」例外(ZombieCheck、Rollback)の調査記録  (1-1) エラーメッセージ  (1-2) …

Xamarin.FormsでHelloworldする手順+Buttonコントロール追加のサンプルコード紹介

<目次> (1) Xamarin.FormsでHelloworldする手順  (1-1) Xamarin.Formsプロジェクト構成の概要  (1-2) MainPage.xamlの修正  (1-3) …

C#でフォルダ内のファイルの一覧を取得する方法

<目次> (1) C#でフォルダ内のファイルの一覧を取得する方法  (1-1) 方法①構文  (1-2) 方法①サンプルプログラム  (1-3) 方法②構文  (1-4) 方法②サンプルプログラム ( …

  • English (United States)
  • 日本語
Top