Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ASP.NET 5+AngularJSでトレンドなSPAアプリを開発しよう!

あらゆるソフトウェア開発者のサポートを目指す開発ツール「Visual Studio 2015」特集 第4回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/08/17 14:00
目次

定型的なタスクを自動化する「Grunt」

 Gruntは、JavaScriptで動作するタスクランナーです。フロントエンド開発では、さまざまに定型的な作業が発生します。例えば、TypeScriptファイルのコンパイル、JSLintなどによる品質チェック、JavaScriptファイルの圧縮/連結などです。これらの作業一つ一つは単純ですが、開発の最中に何度も繰り返さなければならないとなれば、その手間はばかになりませんし、作業ミスのもとにもなります。そこでGruntを利用することで、こうしたタスクを自動化できるわけです(注1)。他の言語を知っている人であれば、Ant(Java)、makeのようなものと考えると、理解しやすいでしょう。

 本稿では、アプリで利用するJavaScriptファイル一式を圧縮し、/wwwroot/scriptsフォルダーにapp.jsとして配置するまでを、Gruntを使って自動化してみます。

注1

 同じくタスクランナーとしてGulpを選択することもできます。ASP.NET 5 Web Applicationプロジェクトでは、デフォルトでGulpが有効になっています。

[1]Grunt/Gruntプラグインをインストールする

 Gruntと、そのプラグインは、npm(Node Package Manager)からインストールできます。npmは、JavaScriptの実行環境であるNode.jsで動作するパッケージ管理ツールです。フロントエンド開発では、Grunt/Gulpのような開発ツールをインストールするために利用することになるでしょう。

 npmを利用するには、プロジェクトルート(本稿サンプルでは/AngularSpa)を右クリックし、表示されたコンテキストメニューから[追加]-[新しい項目...]を選択します。[新しい項目の追加]ダイアログが表示されたら、「NPM 構成ファイル」を選択してください。ファイル名は「package.json」で固定です。

 package.jsonの骨組みが表示されるので、以下のように編集してみましょう。

リスト1 package.json
{
  "version": "1.0.0",
  "name": "Sample",
  "private": true,
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-uglify": "~0.9.1"
  }
}

 devDependencies配下には、現在のアプリで開発用途として利用するパッケージを「パッケージ名: バージョン番号」の形式で列挙します。バージョン番号先頭の「~」は、パッケージのマイナーバージョンアップがあった場合に、そちらをインストールすることを表します。この例であれば、以下のパッケージをインストールします。

本稿でインストールするパッケージ
パッケージ 概要
grunt Grunt本体
grunt-contrib-uglify JavaScript圧縮のためのGruntプラグイン

 Gruntそれ自体は、ごくシンプルなランナーなので、個別のタスク定義にはプラグインを導入するのが一般的です。

 package.jsonを編集する際には、利用できるパッケージ/バージョン番号がインテリセンスで候補表示されますので、編集もごく手軽に行えます。

利用可能なパッケージ名/バージョンを候補表示
利用可能なパッケージ名/バージョンを候補表示

[2]パッケージをインストールする

 列挙したパッケージは、package.jsonを保存したタイミングでプロジェクトに自動的にインストールされます。ソリューションエクスプローラーから/依存関係/NPMフォルダーを展開すると、登録済みのパッケージが表示されます。

 もしもパッケージの横に「インストールされていません」と表示されている場合には、/NPMフォルダーを右クリックし、コンテキストメニューから[複数のパッケージの復元]を選択してください。

インストール済みのパッケージを確認
インストール済みのパッケージを確認

[3]Gruntの構成ファイルを準備する

 Gruntでは、gruntfile.jsで実行すべきタスクを定義します。/AngularSpaフォルダーを右クリックし、表示されたコンテキストメニューから[追加]-[新しい項目...]を選択します。[新しい項目の追加]ダイアログが表示されたら、「Grunt 構成ファイル」を選択してください。ファイル名は「gruntfile.js」で固定とします。

リスト2 gruntfile.js
// gruntfile.jsの外枠
module.exports = function (grunt) {
  // (1)Gruntの設定(初期化)
  grunt.initConfig({
    // uglify-myTargetタスクを定義
    uglify: {
      myTarget: {
        files: {
          'wwwroot/scripts/app.js':	// 圧縮後のファイル
          [
            'Scripts/**/*.js'	// 圧縮対象のファイル
          ]
        }
      }
    }
  });

  // (2)プラグインのロード
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // (3)タスクの登録
  grunt.registerTask('default', [ 'uglify' ]);
};

 gruntfile.jsは、大きく以下のブロックから構成されます。

  • (1)タスクの設定(uglify/watch)
  • (2)プラグインのロード
  • (3)タスクを登録

 この例であれば、uglify-myTargetタスクとして、/Scriptsフォルダー配下のすべての.jsファイルを圧縮/連結し、/wwwroot/scriptsフォルダー配下のapp.jsにまとめるための作業を定義しています((1))。uglifyはgrunt-contrib-uglifyで決められたタスク名で、myTargetは開発者が自由に決められるサブタスク名です。(2)は、uglifyタスクを利用するために、grunt-contrib-uglifyプラグインをロードしています。

 (3)は、defaultタスクとしてuglifyタスクを登録しています。本稿では利用しませんが、無条件に実行したいタスクは、defaultタスクとして登録しておくことで、gruntコマンドからまとめて実行できるようになるので便利です。

 そのほか、gruntfile.jsの詳しい構文については、別稿『Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt』も併せて参照してください。

/wwwrootフォルダー

 ASP.NET 5で、新規にプロジェクトを作成すると、ガラリと構成が変化していることに気づくかもしれません。

ASP.NET 5プロジェクトテンプレート(Empty)の初期状態
ASP.NET 5プロジェクトテンプレート(Empty)の初期状態

 トップフォルダーの/Solution Itemsはソリューション項目、/srcがプロジェクトの本体です。さらに、プロジェクトフォルダー(ここでは/AngularSpaフォルダー)配下にある/wwwrootフォルダーに注目です。名前からも想像できるように、ここにはエンドユーザーがアクセスできるHTMLファイル、JavaScriptライブラリ/スタイルシート、画像リソースだけを配置します。ASP.NET 5では、/wwwrootフォルダーによって、アプリ内部で利用するソースコードと、開示すべきリソースとを、明確に区別しているのです。コントローラー/データモデルなどのソースコードは、/wwwrootフォルダー以外に配置します。

[4]タスクを実行する

 Visual Studioでは、Grunt/Gulpで定義されたタスクを管理/実行するために、専用のタスクランナーエクスプローラーが準備されています。gruntfile.jsを保存したら、登録済みのタスク(実タスクuglifyと、別名定義されたdefaultタスク)が表示されていることを確認してみましょう。

定義済みのタスクを確認(タスクランナーエクスプローラー)
定義済みのタスクを確認(タスクランナーエクスプローラー)

 タスクを実行するには、目的のタスクを右クリックして、表示されたコンテキストメニューから[実行]を選択してください。また、特定のタイミングでタスクを実行するには、同じく目的のタスク(例えばuglify)を右クリックして、[バインディング]-[ビルド後]を選択します。これによって、ビルドが成功したタイミングでuglifyタスクが実行されることになります。そのほか、「プロジェクトを開く」「ビルド前」「クリーン」などのタイミングを選択できます。

 /Scriptsフォルダー配下に適当な.jsファイルを配置して、タスクを実行することで、/wwwroot/scripts/app.jsが生成されていることを確認してみましょう。

左:圧縮前の.jsファイル、右:圧縮後の.jsファイル
左:圧縮前の.jsファイル、右:圧縮後の.jsファイル

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト(ウイングスプロジェクト)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:あらゆるソフトウェア開発者のサポートを目指す開発ツール「Visual Studio 2015」特集
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5