Yeomanではじめる爆速webアプリ開発

Yeoman ではじめる爆速Webアプリ開発 Sencha UG 勉強会 #19@大阪 2014.4.18 Bathtimeﬁsh 村岡正和

HTML5-WEST.jp代表 / html5j マークアップ部部長 / HTML5 Experts.jp メンバー GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員などむらおかまさかず村岡正和 HTML5-WEST.jp Webアプリケーション開発 IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング @bathtimeﬁsh

監修しました。実例ごとの実装例がたくさん書いてあります。ウェブサイト制作やCMSの運用時に便利です。好評販売中！！

Firefox OSの薄い本書きました。 http://goo.gl/mA8ebW 好評発売中！開発に、「もえあがる」のはつきものだ第一話がいあハックス（Gaia開発環境の構築とデバッグ）著

今日のおはなし

HTML5でイマドキっぽい WebサイトやWebアプリをつくるときにいろいろメンドイことがあって、

メンドイことがいい感じに自動的になったりしたらめんどくなくていいんだけどナンかいいのない？

それ、Yeomanでできるよ。

Web制作の準備はいろいろめんどくさい

コード書く前の準備いろいろ • ディレクトリ構成 js/ styles/ images/ ... • 制作用Webサーバー • いいかんじのライブラリとかプラグインさがすの • いい感じのHTML5ページのテンプレート • 支援ツール altJS, js/css圧縮, Test ... etc...

このオッサンが全部用意します。

Yeoman

http://yeoman.io/

Yeoman s service デキるオッサンいざというときの際立った働き

こんな人にモロ刺さります。 • 制作テンプレ持ってない。つーか作るのメンドイ • 最初っからレスポンシブのテンプレがいい。 • 最適化・軽量化に細かいこだわりはない。いい感じにやってほしい • JSライブラリさがすのだるい • Sass最高ヒャッハー！ • つーかWeb制作めんどくさい • つーか仕事めんどくさい。生きるのもめんどいこんなの

セットアップ

黒い画面で、

npm install -g yo

...と、そのまえに入れておくもの。 node.js ruby (optional) compass (optional) ※ compass はgemで、node.jsは nodebrewが個人的にオススメ http://compass-style.org/ https://github.com/hokaccha/nodebrew

npm install -g generator-webapp

webappの作成

yo webapp

yo webapp --coﬀee CoﬀeeScriptを使う場合

サーバーの起動

grunt server

リリース前のビルド

grunt build

実際にやってみる

Yeomanを構成するツール yo grunt bower scaﬀolding preview, build, test package management

Yo •Yeomanのプロジェクトを生成する $ yo webapp angular, backbone, ember, chromeapp... 様々なフレームワークのscaﬀoldingが可能。 HTML5 Boilerplate, Gruntﬁle.js, component.json, node_modulesの自動配置。

Bower •JSライブラリのパッケージマネージャ $ bower install underscore install, search, list, update... JSライブラリ、jQueryプラグインなどを検索してapp/ componentsに自動インストール。既存ライブラリの管理に便利。

Grunt •JSベースの作業自動化ツール $ grunt server server, build, test, clean... 様々な作業を自動化、ローカルWebサーバー起動、ファイル更新監視、リリースビルド、テストetc... 制作時の中核的ツール。はっきりいって神！

実際につかってみるとわかるけど、裏ではGruntが相当がんばっている！コーディング中にお世話になるのはほとんどGrunt

Gruntﬁle.js 詳しくは公式で学びましょう http://gruntjs.com/

あと実は最初、、、 Bower要らないと思ってましたサーセン！トリも食ってみるとウマかったです

component を検索してみよう http://sindresorhus.com/bower-components/

bower install underscore.number --save grunt bowerInstall bower install したライブラリを依存ライブラリとともに webページに追加してくれる webappでのJSライブラリの追加

まずはこれだけ覚えよう！ $ yo webapp $ grunt server はじめる前のじゅもんリリースのじゅもん $ grunt build or $ grunt server:dist まずは Designing in the Browserを快適に楽しんでみるといいよ！

いろんなgeneratorをつかってみよう！ http://yeoman.io/ofﬁcial-generators.html

応用編

1. YeomanでAMD Asynchronous Module Deﬁnition

RequireJS入りwebapp https://github.com/popox/generator-webapp-rjs

RequireJSをインクルードしてwebappを生成すると、 JSはモジュール化されたファイル構成で出力される。 •main.js •app.js モジュールの読み込み、依存関係を記述する（require）モジュール本体（deﬁne） AMDについては以下を読むといい http://requirejs.org/docs/why.html http://requirejs.org/docs/whyamd.html

RequireJSをとはつまり、 C言語の import とか Rubyの require みたいに JavaScriptで外部JavaScriptファイルの読み込みを実現するライブラリ

main.js モジュールのパスを指定モジュールの依存関係を定義モジュールを利用した処理を記述

app.js モジュールの処理を記述

http://www.slideshare.net/bathtimeﬁsh/amd-basic-and-practice

Webページごとに別々のモジュール構成を持つJS を書くと、開発時には動いてるが、build後に動かなくなる。 ※ webappでAMDを使う場合の注意点 grunt buildではr.jsを使ったJSファイルのマージ、圧縮が行われる。このときデフォルトの設定だとページごとのJSがひとつのファイルにマージ＆圧縮されてモジュール構成が破壊されるため。

ちゃんと動く設定例書きました。 https://github.com/bathtimeﬁsh/yeoman-webapp-rjs-multipage-example http://bathtimeﬁsh.hatenablog.com/entry/2013/11/03/185340 参考記事

2.モジュール化した Coﬀeeをグローバルにコンパイルする

YeomanはCoffeeScriptを自動的にコンパイルする。便利なんだけど、CoffeeScriptはデフォルトで即時関数化するので複数のCoffeeファイル間でグローバル空間を利用するようなプログラムはコンパイル後に動かなくなる。 ※ RequireJSとか使ってうまいことやらない場合のお話です。

Coﬀee -> JSはいつもこんなかんじこれはこれでいいことだけど複数Coﬀeeファイル間でオブジェクトをグローバルで共有してラフに楽をしたい場合とかちょっとアレ。

Gruntﬁle.js coﬀee:dist ブロックにオプションを追加する参考: https://github.com/gruntjs/grunt-contrib-coffee#readme optionsについてはgrunt-contrib-coffeeを参照 https://github.com/gruntjs/grunt-contrib-coffee

3.REST API サーバーを同時に開発する

Yeomanはプレビュー用localhostサーバーを立てる。便利なんだけど、JSONベースのREST APIサーバーを同時に開発する場合は別サーバーを立てないといけない。その場合クロスオリジンになるのでそのまんまだとajax通信ができなくて不便。

やり方長いのでブログに書きました。 http://goo.gl/SojUc

そしたら、 @kamiyamさんがもっと便利なの書いてくれた http://bit.ly/13r1xj5 ぜったいこっちをつかうべき！

こうが、、、 Web Browser Yoman Preview Server (localhost:9000) API Server (localhost:3000) ✘ajax request

こうなるイメージ Web Browser Yeoman Preview Server (localhost:9000) API Server (localhost:3000) Proxy Server (localhost:8000) ajax request

Yo, Grunt, Bower, (node.js) の相互依存性が低いので工夫次第でいくらでも便利にカスタマイズできる。:) これかなり重要！！

http://yeoman.io/generators.html#writing-your-ﬁrst-generator カスタムGeneratorを作成する

とりあえずつくってみてます。頓挫中 orz

むしゃくしゃしたのでやった https://github.com/bathtimeﬁsh/generator-webapp-typescript TypeScript 1.0 リリース記念

ビール飲みながらつくった。 HTMLをモジュール化してAjaxで取得できるWebApp サンプル https://github.com/bathtimeﬁsh/webapp-handlebars-ajax

御社制作ワークフローのためのgenerator開発いたします。企業のみなさまへ、通常見積もり価格 3割増のところを、今ならなんと20%引き！！ Call Now!!

generator hackation やりたいです。

まとめ

Yeomanを使うと、 Webアプリ開発効率がアップすると思います。

ぜひ使ってみてください！

coding

Thanks.

Yeomanではじめる爆速webアプリ開発

by Masakazu Muraoka, Owner at BathTimeFish on Apr 21, 2014

Statistics

Views

Actions

0 Embeds 0

Accessibility

Categories

Upload Details

Usage Rights

Report content

Yeomanではじめる爆速webアプリ開発 Presentation Transcript