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

・マルチデバイス対応は、細かい作業が多くてめんどくさい！
・しかし、Googleが作業軽減のための総合開発ツールを作成した。
・Yeomanを使うと、手動でしていたさまざまな作業が、一気に自動化！

ここ数年、WEBサイト制作では、マルチデバイス対応が欠かせなくなってきましたね～。
制作側は、複雑なJavaScriptや多くのjQueryを使って、サイト制作をしていると思います。

さらに！　これらを利用した時にサイトが重らないように、
HTML/CSSやJavaScriptをGzip圧縮したり、 多くの画像をCSS Spriteを使ってリクエスト数を削減したり、
更新の度にCSSの初期化、テンプレートの作成、JavaScriptをきれいに書くためにCoffee Scriptコンパイル化をしたり……。
かなり多くの作業が必要ですよね～。

正直、めんどくさい！！

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

そんな時に役に立ってくれるのが、今回ご紹介する 【Yeoman】 です。

少し高度なツールにですが、使ってみると今まで手作業でやっていたファイル管理などが、ものすご～く楽になります！

Webデザイナーになると、今日決めた！
AIが敵わない仕事はデザイナーだといいます。デジタル時代の生き方なら、まずはWebデザイナーから

夢の総合開発ツール！？　「Yeoman」の、ここがスゴイ！

Google社が作成した、作業軽減のための、素晴らしき総合開発ツールです！

Yeomanの読み方はそのまま「ヨーマン」と呼びます。（hey!Yo man!　みたいな感じです。）

Yeomanを使うには、コマンドライン(ターミナルやコマンドプロンプトなど)でYeomanインストール時に聞かれる質問に答え、必要なものをインストールして、WEBサイトに必要なひな形を作成します。

さらに、Gruntやbowerなどのツールと親和性が高いため、タスク実行・ライブラリ管理も簡単に行うことができます。

ちなみに、Yeomanは【Yo】【Grunt】【bower】のコアツールの総称になります。

今回は、この３つのコアツールについて簡単にご説明します。

フロントエンド、バックエンド共に使える！　ひな形作成ツール：Yo

Yoはyeoman-generatorとよばれるWEBサイトひな形作成ツールになります。

フロントエンド、バックエンド両方で使えるツールで、Node.jsをベースに作られています。

Node.jsは最近いろいろなツールを利用する際に使うので、この機会にダウンロードしておくのがいいと思います。
Node.js→https://nodejs.org

Yoは、ターミナル、コマンドプロンプトからコマンドでインストールできます。

npm install -g yo

複数のJavaScriptを自動でつないでくれる！　タスクランナー：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

Webデザイナーになると、今日決めた！
AIが敵わない仕事はデザイナーだといいます。デジタル時代の生き方なら、まずはWebデザイナーから

まとめ・Yeomanを使えば、WEB開発はさらなる高速化が可能に！

今回は、本当にさわりの部分だけ説明しましたが、Yeomanを使うと、今まで手動でやっていたさまざまな作業が、一気に自動化できます！「まだ、そんなに複雑にWEBは作ってないし、別にいいかなー？」と思っているあなた！　使っておいて絶対に損はありませんよ～！

さらに、Yeomanではいろんなgeneratorもアップされているので、使い方の幅が広がります。

今回ご紹介したYeomanの公式サイトから、３つのコアツールをインストールできます。ぜひ、のぞいてみてくださいね～♪

この記事を書いた人

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