Design デザイン・UI

 
レスポンシブデザイン・UI

ウワサの便利ツール「Yeoman」とは

Yeoman

マルチデバイス対応が欠かせなくなってきた最近のWEBサイト。

制作側は複雑なJavaScriptや多くのjQueryを使いサイト制作をしていると思います。
さらには、これらを利用した時にサイトが重くなる事を解消するため、HTML/CSSやJavaScriptをGzip圧縮したり、多くの画像をCSS Spriteを使いリクエスト数を削減、更新の度にCSSの初期化、テンプレートの作成、JavaScriptをきれいに書く為につかったCoffee Scriptコンパイル化・・・などかなり多くの事をやる必要が出てきています。

正直めんどくさい!!整理整頓が苦手な私には非常にめんどくさい!!!

そんな時に役に立ってくれるのが、今回ご紹介する 【Yeoman】 です。
少し高度なツールになりますが、使ってみると今まで手作業でやっていたファイル管理などがすごく楽になります。

総合開発ツールのYeomanとは

Google社が作成した総合開発ツールです。Yeomanの読み方はそのまま「ヨーマン」と呼びます。(hey!Yo man!みたいな感じです。)
Yeomanを使うには、コマンドライン(ターミナルやコマンドプロンプトなど)でYeomanインストール時に聞かれる質問に答え、必要なものをインストールして、WEBサイトに必要なひな形を作成します。 さらに、Gruntやbowerなどのツールと親和性が高いため、タスク実行・ライブラリ管理も簡単に行うことができます。 ちなみに、Yeomanは【Yo】【Grunt】【bower】のコアツールの総称になります。
今回は、この3つのコアツールについて簡単にご説明します。

yeoman_2

ひな形作成ツール:Yo

Yoはyeoman-generatorとよばれるWEBサイトひな形作成ツールになります。フロントエンド、バックエンド両方で使えるツールで、Node.jsをベースに作られています。
Node.jsは最近いろいろなツールを利用するさいに使うので、この機会にダウンロードしておくのがいいと思います。
Node.js→http://nodejs.org
Yoは、ターミナル、コマンドプロンプトからコマンドでインスールできます。
npm install -g yo

タスクランナー:Grunt

Gruntは、レスポンシブデザインなど複数のJavaScriptを使う場合、複数のjQueryを使う場合などに非常に有効です。
レスポンシブデザインでサイトを作る場合、たくさんのJavaScriptをminify化していくと思いますが、あのjsとこのjsをつないで新規作成してminify化して・・という、更新の度にめんどくさい状態になると思います。そのめんどくさい複数の処理を自動でやってくれるのがGruntになります。
Gruntのインストールは、下記のコマンドになります。
npm install -g grunt-cli

パッケージマネージャー:bower

bowerは、WEB開発向けパッケージマネージャーです。imgやCSS、JavaScriptといったリソースを簡単にインストールする事ができ、バージョン管理などもおこなえる便利なツールになります。
パッケージマネージャーを使う事で、今まで手動であのファイルはここでー、このファイルはあそこでーといったファイル分けをとてもやりやすくなります。
このbowerもNode.jsのインストールが必要です。
bowerのインストールは、下記のコマンドになります。
npm install -g bower

Yeomanを使えばWEB開発高速化が実現できる!

今回は、本当にさわりの部分だけ説明しましたが、Yeomanを使う事でいままで手動でやっていたいろんな事が一気に自動化する事ができるようになるので、まだそんなに複雑にWEB作ってないしいいかなーと思っている人も使っておいて損はないと思います。
さらに、Yeomanではいろんなgeneratorもアップされているので、いろんな使い方ができると思います。
今回ご紹介したYeomanの公式サイトから、3つのコアツールをインストールする事ができますので、ちょっと気になった方は是非利用してみてはいかがでしょうか。

Yeoman

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事