スキャフォールド機能を提供するYEOMANに入門するTweetこんにちは、@yoheiMuneです。2014の18日目の記事として、YEOMAN入門を書きたいと思います。https://flic.kr/p/UkudZ目次スキャフォールドって何?YEOMANが提供するスキャフォールド(scaffold)という機能は何でしょうか。自分は最初チンプンカンプンでした。足場を組む」という意味がわかります。使ってみることで、以下のようなことをしてくれるものだとわかりました。新しくアプリケーションを作る場合に、必要なフォルダーやファイルをいい感じに作ってくれるアプリケーション内に機能追加する場合に、必要なファイルの作成や設定をいい感じに作ってくれる例えばフロントエンドで言うと、次のようなことをしてくれます。新しくアプリケーションを作る際に、jsフォルダやimgフォルダやcssフォルダを作ってくれて、またindex.htmlやmain.jsやmain.cssといったファイルも作成してくれて、さらにindex.html内にmain.jsとmain.cssの読み込みまで記載してくれる。プロジェクト作成時に上記のような準備をするのは確かに面倒なので、それを全て請け負ってくれるスキャフォールドはなかなか便利そうです。YEOMANって何?そしてYEOMANは何かというと、上記のようなスキャフォールド機能をフロントエンド向けに提供してくれるツールです。Railsのrailsコマンドがありますが、YEOMANを使えばフロントでも便利なスキャフォールドが利用できます。YEOMANでスキャフォールドできるものはたくさんあるようです。Generatorsでは様々なジェネレーター(=スキャフォールドを実現する仕組み)が公開されていて、1100個以上もあります。このアドベントカレンダーでもalbatrosaryさんが以下のようなジェネレーターを紹介されています。generator-threejsgenerator-webappgenerator-backbonegenerator-angular今日はこの中から、YEOMANの入門でも使われているgenerator-webappを扱います。YEOMANを用いた開発の流れYEOMANを個別に用いるのではなく以下のツールを組み合わせることで、フロントエンドの開発を効率化することができます(とYEOMANのサイトが言ってますw)。http://yeoman.io/learning/YEOMANでプロジェクトの原型を作るBowerで必要なライブラリを導入するGruntで開発/コンパイルを行う確かにBowerを使ってjQueryのアドオンを追加したり、Gruntを使ってコンパイルしたり、Gruntを使って開発効率化すると、とても捗ります。次の章からは実際にYEOMANを使ってみたいと思います。YEOMANを使ってみるこの章ではYEOMANを使った開発を体験してみたいと思います。ここではgenerator-webapp、Bower、Gruntを利用します。YEOMANのインストールYEOMANはnpmを使って簡単にインストールすることができます。nodeやnpmが導入されていない場合には、事前にnodejsプロジェクトを参考にインストールしてください。YEOMANを以下のコマンドでインストールします。yoインストールが終わってyoというコマンドがターミナル上で使えれば導入完了です。Bowerのインストールパッケージ管理のBowerのインストールも行います。YEOMANと同じくnpmから簡単にインストールできます。bowerこちらも同じく、インストール後にbowerというコマンドが使えればOKです。次に今回利用するジェネレーター(generator-webapp)を導入します。これもnpmでインストールします。Boilerplate、jQuery、Modernizrなどが含まれています。次のステップでgenerator-webappsを用いる際に、何を利用するかを選択することができます。generator-webappを使って構成を作るそれではやっとYEOMANのスキャフォールド機能を使ってみたいと思います。プロジェクト用のフォルダを作成します。my-first-appそして、以下のコマンドを実行します。webapp実行するとまずはBootstrapとSassとModernizrのどれを使うかを聞かれるので、それに答えます。その後、jQueryなどのライブラリや、Gruntに必要なnpmモジュールがずらりとインストールされて、処理が終わります。処理が終わると以下のようなフォルダ構成が出来上がります。コマンド1つでこれだけのフォルダ構成を整えてくれるのはありがたいですね。それではさらにライブラリを追加してみましょう。jQueryのアドオンを追加してみる上記で作成したプロジェクトに任意のライブラリを追加することができます。ここではBowerを用いてjquery-pjaxを追加します。--saveこれを実行すると、bower_components/の下にjquery-pjaxがインストールされます。今までであれば対象のWebページまで行ってダウンロードボタンを押したり、Githubのレポジトリからダウンロードしたりと手間でしたが、Bowerを使うとコマンド1つで導入できるので便利です。それでは最後にGruntを用いて開発やコンパイルしてみましょう。Gruntを用いて開発やコンパイルをしてみる最後にGruntを用いて開発やコンパイルをしてみたいと思います。言ってもすでにGruntfile.jsがあり、また利用するnpmモジュールもインストール済みなので実行するだけです。開発を行うには以下のコマンドを実行します。serve上記コマンドを実行するとローカル環境に簡易サーバーが起動して、ブラウザからアクセスすることができます。watchタスクが動いていて、ソースコードを変更したら自動的にブラウザへ反映されます。プロダクション用にコンパイルするには以下のコマンドを実行します。gruntこれでdist/フォルダ以下にプロダクション版のコードが出来上がります。testで実行することができます。テストも一緒にあるのはありがたい。本ブログを書くにあたり以下のサイトを参照しました。ありがとうございます。今回の記事も含め、以下の記事を2014年アドベントカレンダーとして執筆しました。気になる記事がありましたら幸いです。スキャフォールド機能を提供するYEOMANに入門する最後に本日はYEOMANの紹介でした。上記で紹介したgenerator-webappはプロジェクトの最初で活躍するスキャフォールドですが、generator-angularはControllerやDirectiveなど実装途中で必要になったものを随時スキャフォールドで作ることもできます。Rubyなどで利用されているスキャフォールドをフロントでも利用できるのは楽しいですね。angular.jsで開発をする際にはぜひ使ってみたいと思います。スキャフォールドで作成したプロジェクトの中身を見ると勉強になることが多いです。上記で利用したGruntfile.jsでは、各タスクの必要時間が最後にサマリー表示されます。こんな機能あるのかと気になったものが多かったので、後日ブログで扱いたいと思います。2014の18日目の記事は終了です。次はmasakuraさんです。今後も本ブログでは、フロントエンドに関する情報を書きたいと思います。フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。フロントエンドの入社試験99問!難しいですよ〜w。スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。Chrome36βが出た。Imports、Object.observe、他。ご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。Munesada)です。世の中をさらに便利に面白くをモットーにWeb界隈で活動しています。Now機械学習/AI/自然言語処理のホットな"今"をお届けするキュレーションメディアです。