YEOMANで効率よくサイトを作る際のメモ

最近はあれですかね？ node.js 知っておくと凄く効率よくサイト制作環境が作成出来たり色んなビルドを自動で出来るようになったりするんですかね？ちゃんと理解出来てるかというとすげー微妙なんですが、何となくふんわり分かったりちょっと試しにやってみたので次に0から何か作る時にすぐに使えるようにメモをしておこうと思いました。

今回は「YEOMAN BOWER Grunt」の3つのツールを使って、Webサイト（アプリケーション？でも良い）雛形の作成・パッケージ管理・ビルドタスクの管理を効率的に行い、いつでもすぐにサイトが作れる体勢を整えてみました。今後が楽しみですね。

使うツール

さっきも言いましたが、使うツールは以下の3つです。

• Yeoman – Modern workflows for modern webapps
  雛形を作成して他2つのツールの準備もやってくれます。

• BOWER: A package manager for the web
  jQueryとかnormalize.cssとかの各種ライブラリをパッケージ管理してくれるライブラリ。便利。

• Grunt: The JavaScript Task Runner
  sass、LESS等のメタCSSコンパイル、JSのminify化など、「こうなった時にこうする」的なタスクを登録できるツール。これを使えればCodekitいらず。

で、なにができるの？

新たにサイトを作りたいときに、 YEOMAN で雛形を作ります。そして、その雛形にはあらかじめ必要なパッケージ（jquery,normalize.css,modernizr等のライブラリ）と各種ビルドタスクが設定されているので、一度雛形を作成したらあとはサイトを作り込んでいくだけ、という感じです。sass等のコンパイル、jsのminify化等の各種コンパイルも出来るようになります。GUIツールで言うと Codekitみたいな事が出来る感じです。

Codekitは高価なツールでもありますし、購入に躊躇する方もいるかと思いますが、このツールであれば無料で（ある程度）同等のことが出来ますので、迷っていた方は一度こちらを試すのも検討してみてはどうでしょうか。

まずはインストール

一応、一番最初の手順から説明しようと思ったんですが node.js のパッケージ管理ツールである npm のインストールがよく分からなかったんで割愛します。とりあえず node.js は公式サイト（node.js）に行って「インストール」をクリックしましょう。あとは普通のアプリ同様インストールを進めていきます。

で、 npm もインストールされているとして、次は上記3つのツールをインストールしましょう。こんな便利なツールが色々と提供されている node.js って本当に凄いですね。何となく node.js ってサーバサイドJSってイメージだったんですが、どうやらWeb制作のツールとしての用途でも凄く活躍しているようです。そういうことって何でかイマイチ日本で話を聞かないのは何でなんでしょうね。

それはそれとして、ツールをインストールします。

$ npm install -g yo grunt-cli bower

このコマンドで、グローバルとして（そのマシンで誰でも使える感じで）インストールします。 次に、 サイトのディレクトリを作成し、そのディレクトリに移動して YEOMAN のコマンドで雛形を作成します。

$ mkdir directory_name
$ cd directory_name
$ yo webapp

これで雛形が作成出来ます。途中に「bootstrapは使いますか？」みたいな質問が出てくるので、必要であれば Y を入力しエンターを押しましょう。もしエラーで作成出来なければ、 webapp をインストールしてあげれば作成出来るようになると思います。

$ npm install generator-webapp

ビルドタスクの起動

雛形の作成が完了したので、次はビルドタスクを起動しましょう。ここまでできればファイルを監視してくれるのでcss、jsの各種ビルドを行ってくれます。

$ grunt server

完成

あとはサイトを作り込んでいくだけです。どうやらサーバも立ててくれるみたいで、いちいちVHの作成のなくなったので凄く嬉しいです。

ただまぁ、僕は僕仕様の制作環境というかオレオレCSSフレームワークとかを使ってたりしたので、今後はそこら辺を上手く調整しつつ良い感じの環境作成が出来るようになればなぁと思います。ここら辺はこれからの課題ですね。

思ったこと

よく思うんですが、やっぱり新しく覚えたことは何度も使ってできることできないことを見極めたりハマりどこを何となく理解したりしてやっと自分の物に出来るもんなんだなぁと思います。この世界にいるとどうしても「誰でも簡単に」とか「コピペで」とかで効率を上げること正義みたいになってる気がします。

もちろんそれ自体に問題があるとまで思ってる訳じゃないです。効率って大事だし自分で理解出来ることも限界がありますからね。ただまぁ、プロと名乗る人というか、フロントエンドというか、実際にWebブラウザに表示させるためのコードを記述している人は「誰でも簡単に」で満足しない方が良いんじゃないかと思うんですよね。いやまぁ僕が勝手に思ってるだけですけどね。

黒い画面が苦手な人はまだまだ多いと思いますし僕も大して得意じゃありません。GUIって凄いですよね。起こしたい行動を直感的に把握しつつ行動できるしその行動が反映された状態を目視でしつつ確認が出来るって一見当たり前のことのように思えますがとても凄いことだなぁとWeb制作のフロントエンド技術に親しんでいって感じました。えと、話が逸れかかってきたので戻します。そんなGUIに比べるとやっぱり敷居が高いし使いづらい印象の黒い画面ですが、そこを克服することで見えてくる領域の便利さに気づき、突っ込んでいく覚悟とかがある方が多分今後のWeb制作のフロントエンドとしては有利だろうし楽しめるんだろうなぁ、って感じです。いかがですかね、YEOMAN。

…単なるメモ書きのつもりだったのに何でこんなにダラダラ書いたんだろう。