あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方：Gruntで始めるWeb開発爆速自動化入門（終）（1/3 ページ）

JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツールなどを紹介していく連載。今回は、プロジェクトひな型生成の「Yo」とパッケージマネージャー「Bower」、そして「Grunt」の3つで構成される「Yeoman」の概要と基本的な使い方を紹介。

[中村修太，クラスメソッド]

For Scaffold Yeoman Life

今回の主な内容

• 3つのツールを統合したワークフローを提供する「Yeoman」
  • 【1】プロジェクトひな型生成「Yo」
  • 【2】依存性管理／パッケージマネージャー「Bower」
  • 【3】ビルドツール／タスクランナー「Grunt」
• Bowerの基本的な使い方
• Bowerでよく使うコマンド5選
  • 【1】install
  • 【2】list
  • 【3】info
  • 【4】search／lookup
  • 【5】uninstall
  • 他のコマンドは公式サイトで
• Yeomanを使ってみよう
  • Yeomanのセットアップ
  • Yoがひな型を生成するための定義を記述したNode.jsモジュール「ジェネレーター」
  • 独自ジェネレーターも作れる
  • ジェネレーターを使用してAngularJSを使ったひな型を生成
  • ブラウザーで実行結果を確認
• Web開発でも自動化の恩恵にあずかろう

連載目次

　前回記事「Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには」では、Gruntを使っていろいろな手法でタスクを定義する手法や、独自プラグインを作成してnpmで公開する方法について解説しました。

　今回は少し角度を変えて、Gruntを自身の機能として利用しており、快適な開発ワークフローを提供してくれるツール、「Yeoman」について解説します。

3つのツールを統合したワークフローを提供する「Yeoman」

　Yeomanとは、公式サイトいわく、「The web's scaffolding tool for modern webapps」とのことです。

Yeoman

　訳すと、「今風のWebアプリのための土台／基盤を作ってくれるツール」といったところでしょうか。「scaffolding」はRuby on Railsの主要機能として有名になった言葉で、コマンドを打つだけで、Webアプリの主要な機能を生成してくれるというものです。

　同様に、Yeomanを使うと、近ごろ複雑化しつつあるさまざまなフロントエンドプロジェクトのひな型を、対話形式のコマンドで簡単に生成できます。

　またYeomanは、「Grunt」「Bower」「Yo」の、3つの要素から構成されています。「Yo」とはプロジェクトのひな型生成ツール、「Bower」はフロントエンドライブラリの依存性管理ツール、「Grunt」は本連載ですでに紹介しているビルドツールです。これら3つのツールを統合して、一連のワークフローを提供するのがYeomanです。

　ここからは、Yeomanを構成する各種ツールについて解説していきましょう。

【1】プロジェクトひな型生成「Yo」

　「Yo」とは、プロジェクトのひな型生成ツールのことです。テンプレートを指定し、さまざまなプロジェクトのひな型（Yeomanでは「generator」と呼ばれます）を生成できます。

　Yoは「npm（node package manager）」を使用してインストールを行い、Node.jsで動作します。そして、さまざまなプロジェクトのひな型を生成できます。

　Yoモジュール自体はNode.js上で動作しますが、フロントエンド専用のひな型生成ツールというわけではありません。PHPやJava、Scalaなど、バックエンド側のひな型を生成できるジェネレーターも公開されています。

• ジェネレーター一覧（公式提供）
• ジェネレーター一覧（コミュニティ提供）

　Yoモジュールは、この後使ってみるので、そこで詳しく解説します。

【2】依存性管理／パッケージマネージャー「Bower」

　例えば、Webアプリを新しく作成する際、フロントエンドの実装を始めるときに「まずはjQueryをダウンロードして、今回のアプリはこの画像処理ライブラリを使うからそれもダウンロード。あ、このライブラリはunderscore.jsに依存してるからそれも用意しないと……」といった作業を毎回行うのは非常に手間になります。

　こんなときに便利なのが、ここで紹介するBower（バウアー）です。BowerとはTwitter社が開発したフロントエンド用のパッケージマネージャーです。パッケージマネージャーといえば、Node.jsでいう「npm」、Javaでいう「Maven」やScalaでいう「sbt」みたいなものですね。

Bower

　Bowerを使うことでJavaScriptライブラリ（と付随するCSSなど）を簡単にインストールでき、依存関係やバージョンの管理を任せることが可能になります。

　Bowerでは「bower.json」というプロジェクトの設定ファイルを作成して依存するリソースを記述します。その設定ファイルに従って、bowerコマンドを実行することで、ライブラリの取得や更新が可能です。

【3】ビルドツール／タスクランナー「Grunt」

　生成されたひな型とBowerでインストールしたライブラリに対してタスクを実行する役割は、本連載で解説しているGruntを用いて行います。

　なお、Gruntの設定ファイル（Gruntfile.js）はYeomanによって生成されることが多いです。その際には必要なタスクがあらかじめ記述してあり、すぐに実行できるようになっています。

　次に、Bowerを実際に使って動きを確認してみましょう。