連載
» 2014年07月02日 18時00分 UPDATE

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

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

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

For Scaffold Yeoman Life

「Gruntで始める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を実際に使って動きを確認してみましょう。

       1|2|3 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。