Yeoman

はじめに

Yeomanは、モダンなWeb開発のための強力なツールであり、プロジェクトのスキャフォールディングを効率化します。2012年に登場したYeomanは、プロジェクトのテンプレートを自動生成し、開発環境を迅速に構築するためのCLIツールとGenerators（ジェネレーター）を提供しています。

このハンドブックでは、Yeomanの基本から応用までを解説し、関連ツールチェイン（Grunt、Bowerなど）を活用した具体的なプロジェクト例も示します。これを通じて、Yeomanの使い方をより深く理解し、実践できるようになることを目指します。

Yeomanの基本

Yeomanとは

Yeomanは以下の3つの主要コンポーネントで構成されています。

Yeoman CLI - プロジェクト生成を制御するコマンドラインツール。
Yo環境 - Generatorsの実行環境。
Generators - 特定のプロジェクトテンプレートを生成するモジュール。

これらを組み合わせることで、開発者は反復的な作業を削減し、プロジェクトの基盤を迅速に構築できます。

Generatorsの活用

Generatorのインストールと実行

Yeomanでは、npmを介してGeneratorsをインストールします。以下はVisual Studio Code拡張を生成するGeneratorの例です。

# Generatorのインストール
yo install generator-code

# Generatorの実行
yo code

インストール後、yo codeを実行することで、インタラクティブなプロンプトが表示され、設定に応じたプロジェクトが自動生成されます。

プロジェクト例：GruntとBowerを使ったWebアプリケーション

プロジェクト概要

この章では、GruntとBowerを組み合わせた単純なWebアプリケーションをYeomanで生成し、ビルドからデプロイまでの流れを解説します。

プロジェクト生成

以下のコマンドを実行し、Webアプリケーションのベースを生成します。

# WebアプリケーションGeneratorのインストール
yo install generator-webapp

# プロジェクトの生成
yo webapp

実行後、以下のようなディレクトリ構造が生成されます。

my-webapp/
├── app/
│   ├── index.html
│   ├── scripts/
│   └── styles/
├── Gruntfile.js
├── package.json
└── bower.json

Gruntによるタスク自動化

Gruntは、タスクランナーとしてビルドプロセスを自動化します。Gruntfile.jsには以下のようなタスクが定義されています。

Sassのコンパイル
JavaScriptの圧縮
ファイル変更の監視

以下のコマンドでタスクを実行します。

# 開発用サーバーの起動
grunt serve

# 本番ビルド
grunt build

Bowerによる依存関係管理

Bowerを使用して、フロントエンドライブラリを管理します。以下は例です。

# jQueryのインストール
bower install jquery --save

インストール後、プロジェクトにbower_componentsディレクトリが作成され、依存関係が保存されます。index.htmlに以下を追記することで、ライブラリを利用できます。

<script src="bower_components/jquery/dist/jquery.min.js"></script>

開発からデプロイまで

開発: grunt serveでローカルサーバーを立ち上げ、リアルタイムプレビューを行います。
テスト: 必要に応じて、Gruntでテストタスクを実行します。
ビルド: grunt buildで最適化された本番コードを生成します。
デプロイ: ビルド成果物をデプロイ先のサーバーにアップロードします。

Generatorsの作成

Generatorの基本構造

GeneratorはNode.jsで実装され、以下のディレクトリ構造を持ちます。

my-generator/
├── generators/
│   └── app/
│       ├── index.js
│       └── templates/
├── package.json
└── README.md

index.jsはGeneratorのエントリーポイントであり、以下のように実装されます。

const Generator = require('yeoman-generator');

module.exports = class extends Generator {
  prompting() {
    return this.prompt([
      {
        type: 'input',
        name: 'projectName',
        message: 'Your project name',
        default: this.appname // デフォルトは現在のフォルダ名
      }
    ]).then(answers => {
      this.answers = answers;
    });
  }

  writing() {
    this.fs.copyTpl(
      this.templatePath('index.html'),
      this.destinationPath('index.html'),
      { title: this.answers.projectName }
    );
  }
};

テンプレートファイル（例: index.html）はtemplates/ディレクトリに配置します。

Generatorの公開

作成したGeneratorはnpmを使用して公開します。

npm publish

公開後、他のユーザーはyo install <generator-name>でインストールして使用できます。

おわりに

このハンドブックでは、Yeomanの基本概念から具体的なプロジェクト例、Generatorの作成方法までを解説しました。Yeomanは開発者の生産性を大幅に向上させるツールであり、モダンな開発フローに欠かせません。本書を通じて、Yeomanを活用した効率的な開発に挑戦してください。

下位階層のページ

Yeoman/Yeoman WordPress Generator