SHOEISHA iD

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

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

HTML/JavaScript開発作業を効率化する便利ツールの活用

Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt

HTML/JavaScript開発作業を効率化する便利ツールの活用 第1回


  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では主にHTML/JavaScript開発作業を効率化する様々なツールやライブラリを紹介します。初回となる今回はHTML/JavaScript開発で発生する様々な定形作業を自動化してくれるツール「Grunt」について、利用例を交えて紹介していきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 HTML/JavaScript開発に限らず、一般にプログラミングの作業ではコンパイルや自動テスト、デプロイなど、開発の本質にあまり関係のない定形作業が発生します。これらの定形作業を自動化できれば、プログラマは処理内容の検討やコーディングなどの本質的な作業に集中でき、作業効率のアップが期待できます。また定形作業を手動で行うことによるケアレスミスの低減も期待できます。

 プログラムのビルドに使われるMakeやJava環境で利用されるAntのように、定形作業を自動化するツールは様々な開発言語や環境で提供されています。本記事ではタスクをJavaScriptで記述するタスク実行環境Gruntを紹介します。Gruntを使うとHTML/JavaScript開発で必要となる、以下のような定形作業を自動化できます。

  • ファイル操作(移動、コピー、削除、名称変更、結合)
  • ネットワーク通信(FTP、SSHなど)
  • HTML、JavaScript、CSSなどのコード圧縮
  • 変換してJavaScriptを生成する、いわゆるaltJS言語のコンパイル
  • 変更監視(ファイル変更時にタスクを自動実行)

 本記事ではGruntの概要を紹介するとともに、実際のHTML/JavaScript開発を意識したサンプルを用いて定形作業を自動化する方法を説明していきます。

対象読者

  • 余計な作業はやらずにプログラミングに集中したい方
  • 自分の手動作業でミスが発生することを日夜恐れている方

必要な環境の準備

 Gruntの実行にはNode.js(バージョン0.8.0以上)が必要になります。公式サイトでインストーラーが配信されているので事前にインストールしてください。本記事ではWindows版のv0.12.0を利用します。

図1 Gruntの実行に必要なNode.js(公式サイトより)
図1 Gruntの実行に必要なNode.js(公式サイトより)

 最初にGruntを実行するgrunt-cli(コマンドラインインタフェース)をインストールします。Node.jsをインストール後、コマンドプロンプトでリスト1のように実行するとgrunt-cliがインストールされます。「-g」オプションを指定することで、(特定のプロジェクトやフォルダにではなく)システム自体にgrunt-cliがインストールされます。

リスト1 grunt-cliをインストールするコマンド
npm install -g grunt-cli

 インストール後リスト2のコマンドを実行し、バージョン番号が表示されれば正しくインストールされています。

リスト2 grunt-cliのバージョン表示
grunt -version

 今回は以下の環境で動作を確認しています。

  • Windows 7 64bit版
  • Node.js v0.12.0
  • grunt-cli v0.1.13
  • Grunt v0.4.5

Gruntの紹介

 GruntはJavaScriptで動作するタスク実行環境です。Adobe、jQuery、Twitterなど多くの開発プロジェクトで運用実績があります。

図2 公式Webサイトに名だたる運用実績がリストされている
図2 公式Webサイトに名だたる運用実績がリストされている

 Gruntのタスクはプラグインとして提供されています。Grunt公式プラグイン検索ページでプラグインを検索することができます。プラグインはGrunt開発チーム自身が開発しているもの(名前が「contrib-」から始まるもの)の他、世界中の有志が独自のプラグインを開発しています。

図3 プラグイン検索ページで自動化したいタスクのプラグインを探せる
図3 プラグイン検索ページで自動化したいタスクのプラグインを探せる

 プラグイン検索ページで見つけられるいくつかのGruntプラグインとその機能を表1に示します。

表1 主なGruntプラグイン
プラグイン名 機能
contrib-uglify JavaScriptの最小化
contrib-cssmin CSSの最小化
contrib-copy ファイルやフォルダのコピー
contrib-watch ファイル変更を監視してタスクを自動実行する
contrib-coffee CoffeeScriptをコンパイルしてJavaScriptを生成

次のページ
Gruntを使ってみよう

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
HTML/JavaScript開発作業を効率化する便利ツールの活用連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8556 2015/06/15 13:56

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング