Study 学び

 
学び

ウワサの便利ツール「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】のコアツールの総称になります。

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

フロントエンド、バックエンド共に使える! ひな形作成ツール: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の公式サイトから、3つのコアツールをインストールできます。ぜひ、のぞいてみてくださいね~♪

この記事を書いた人


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

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