【Yeoman】Web制作のテンプレート生成を利用して、制作作業への取り掛かりを爆速に!(前半)

今回はYeomanというツールについてご紹介したいと思います。
長くなりそうなので、前半後半にわけます!

Screen Shot 2015-01-26 at 17.51.37

Yeomanってなーんだ。

Yeomanとは…

The web’s scaffolding tool for modern webapps

と公式サイトで言ってます。
近頃のWebアプリをつくるために、準備(土台作り)をしてくれるツールといった感じです。
Yeomanは「Grunt」「Bower」「Yo」の3つから成り立っています。

Web制作者であれば「Grunt」は耳にしたことがあるかもしれません。タスクランナー(定期的に監視してSassをコンパイルするなど)として有名ですね。

「Bower」はライブラリ管理ツールです。Webアプリとなれば結構馴染みがある方もいらっしゃるかもしれませんが、Web制作ではあまり接点がないかもしれませんね。JSのライブラリ依存などを管理・解決してくれます。

「Yo」は今回の大本となるテンプレート生成ツールです。様々なひな形が用意されており、予め用意する必要のあるものが決まっている場合などは、すべて自動化することが可能です。

Yeomanを使えばこんな簡単に制作開始

まずは導入の前に、どんなふうなことができるかを見てみましょう。

※ Yeomanは黒い画面(ターミナル)を使います。導入や使い方は後半でまとめます。

Screen-Shot-2015-01-26-at-03.58.31

作成するディレクトリの中で、Yeomanを使い、テンプレートを作ります。

Screen-Shot-2015-01-26-at-03.59.00

がらららーと色んなモノが表示され準備作業が自動で行われます。

Screen-Shot-2015-01-26-at-17.45.57

できました。favicon.icoなども既にサンプルがはいっていて、jQueryのライブラリや、Webアイコンを使うためのライブラリなども既に導入されています。

まとめ

今回は簡単にご紹介しました。
テンプレートは有志たちによりたくさん種類があり、プロジェクトに合わせてすぐ準備が完了します。

これまで、

  • jQueryを使おう
  • fontAwesomeを導入しよう
  • Sassもいれておかなきゃ
  • Modernize.jsもいれて対応させなきゃ…

といった準備が一発です。
一度自分用のテンプレート確立できれば、制作の準備が爆速になりますね!

フォローして続編をチェック

@universionsをフォロー