SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Scott Guthrie氏 Blog翻訳

バンドルおよびミニファイ・サポートの追加(ASP.NET 4.5シリーズ)

連載:ScottGu's Blog翻訳

ASP.NET内でのバンドルおよびミニファイの使用

 ASP.NETの次期リリースでは、バンドルとミニファイをプロジェクト内で活用でき、上記のシナリオのようなパフォーマンス改善の確認が、簡単にできるようになります。そうすることで、ASP.NETは動的にバンドル/ミニファイを実行するランタイムサポートを追加するので、ビルドプロセスで、独自ツールを実行する手間が省けます(パフォーマンスを良くするために結果をキャッシュします)。これによりクリーンな開発体験ができ、これらの新機能を非常に簡単に活用できます。

 では、4つのJavaScriptと6つのCSSファイルを持つ簡単なプロジェクトがあると仮定します。

.cssファイルのバンドルとミニファイ

 例えば、ページ上の上記の『Styles』フォルダにあるすべてのスタイルシートを参照したいとします。現時点では、すべてを参照するには複数のCSSを追加しなければなりません。これは、6つの別々のHTTPリクエストとして解釈されます。

 バンドル/ミニファイの新機能により、フォルダ(今回のケースでは『styles』)パスに『/css』を追加したものへ、ただURLリクエストを送ることで、Stylesフォルダにすべての.cssファイルをバンドルおよびミニファイできます。以下がその例です。

 これにより、ASP.NETはディレクトリをすべてスキャンし、その中の.cssファイルをバンドルおよびミニファイし、ブラウザへすべてのCSSコンテンツを1つのHTTPレスポンスで送り返します。

 これを動作させるために、他のツールやプレ・プロセッサーなどを実行させる必要はありません。実行時にパフォーマンスが悪化することなく、クリーンにCSSをそれぞれの論理.cssファイルに分けることができ、クリーンな開発体験が継続して行えます。Visual Studioデザイナにも、この新しいバンドル/ミニファイのロジックが含まれているので、VS内でもWYSWIYGデザイナ体験が引き続き可能です。

JavaScriptファイルのバンドルとミニファイ

 上記のCSSのアプローチと同じく、すべてのJavaScript を1つのレスポンスにバンドルおよびミニファイしたい場合は、フォルダ(今回のケースでは『scripts』)パスに『/js』を追加したものへ、URLリクエストを送ります。

 これにより、ASP.NETがディレクトリをスキャンし、その中の.jsファイルをバンドルおよびミニファイし、すべてのJavaScriptコンテンツを1つのHTTPレスポンスでブラウザへ送り返します。繰り返しですが、独自のツールやビルドステップはこれを行うのに必要ありません。また、これはすべてのブラウザで動作します。

バンドル内でのファイルの順番

 デフォルトでは、ASP.NETがファイルをバンドルすると、最初はソリューションエクスプローラで表示されているように、アルファベット順にソートします。そして、jQuery、MooTools、Dojoなど、有名なライブラリや独自の拡張が他のものより先にロードされるように、自動的に並べ替えられます。上記に表示されているScriptsフォルダを統合したバンドルのデフォルトの順番は以下のとおりです。

  • Jquery-1.6.2.js
  • Jquery-ui.js
  • Jquery.tools.js
  • a.js

 デフォルトでは、CSSファイルもアルファベット順にソートされた後に、並べ替えられ、(もしあれば)reset.cssおよびnormalize.cssは、他のファイルよりも前にきます。上記のStylesフォルダのバンドルされた時のデフォルトの順番は、以下のとおりです。

  • reset.css
  • content.css
  • forms.css
  • globals.css
  • menu.css
  • styles.css

 ソートは完全にカスタマイズ可能で、簡単に好きな順に変更できます。初期設定の順番は、そのまま使用してうまくいくようになっています。

制限のないディレクトリおよびサブディレクトリの数

 上記の例では、アプリケーションに対して、 『Scripts』および『Styles』フォルダが1つずつになっています。この形は特定のアプリケーション(例えば、1ページのアプリケーションなど)では動作します。しかし、通常アプリケーションには、複数のCSS/JSのバンドルが必要になってきます。例えば、すべてのページが使用するコアのJSやCSSファイルがある『common』バンドルと、そして全体では使用しない特定のページやセクション用のファイルなどです。

 バンドル/ミニファイのサポートは、プロジェクトにあるディレクトリやサブディレクトリの数に制限なく使用できるので、コードの構造化が簡単にでき、バンドル/ミニファイを最大限に活用できます。

次のページ
バンドル/ミニファイの拡張性

この記事は参考になりましたか?

Scott Guthrie氏 Blog翻訳連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト Chica(チカ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Scott Guthrie(Scott Guthrie)

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/6307 2011/12/15 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー