Getting Started Yeoman - Speaker Deck

Slide 1

Slide 1 text

Getting Started Yeoman

Slide 2

Slide 2 text

はじめに今日は「入門」です。とりあえずYeomanを使うところを、デモ中心に見せれたらいいなと思います。

Slide 3

Slide 3 text

はじめに Nodeインストール済で npmコマンドが使える環境を前提とします。

Slide 4

Slide 4 text

What is Yeoman? 1. 〈英〉〔12～15世紀の〕召使い、従僕◆自由民の資格を持つ貴族の召使い。 2. 〈英〉〔15世紀の〕ヨーマン、独立自営農民、自由農民、自作農

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS

Slide 8

Slide 8 text

株式会社LIG 『「scaffold？何それ？」って言ったら笑われた』 http://liginc.co.jp/programmer/archives/555 scaffold？

Slide 9

Slide 9 text

scaffold？ Webアプリケーションのひな形となるソースコードを自動生成

Slide 10

Slide 10 text

やること > npm install -g yo grunt-cli bower > npm install -g generator-webapp > mkdir webapp && cd $_ > yo webapp > grunt serve

Slide 11

Slide 11 text

デモうまくできるといいな

Slide 12

Slide 12 text

generators... ● Web App (今デモったやつ) ● AngularJS ● Backbone ● Ember ● Polymer ● Jasmine ● Mocha ● Karma ● Chrome Apps Basic Boilerplate ● Chrome Extension Boilerplate

Slide 13

Slide 13 text

AngularJS style > npm install -g generator-angular > mkdir angular && cd $_ > yo angular > grunt serve

Slide 14

Slide 14 text

AngularJS style > yo angular:route myroute > yo angular:controller user > yo angular:view user > yo angular:directive myDirective > yo angular:service myService

Slide 15

Slide 15 text

デモうまくできるといいな

Slide 16

Slide 16 text

Backbone style > npm install -g generator-backbone > mkdir backbone && cd $_ > yo backbone > grunt serve

Slide 17

Slide 17 text

Backbone style > yo backbone:model blog > yo backbone:collection blog > yo backbone:router blog > yo backbone:view blog

Slide 18

Slide 18 text

デモ時間があったら

Slide 19

Slide 19 text

はまったとこ ● compassがエラー吐きまくる... ● compassとsassの相性が問題らしい ● compassとsassをgemでinstallしなおす ● とりあえず以下バージョンで動作確認済 ○ compass 0.12.2 ○ sass 3.2.12 ● http://javascript-memo2.seesaa.net/article/38459314 1.html

Slide 20

Slide 20 text

感想 ● とにかく簡単 ● AngularJSとかBackboneの知識が浅くてもコマンドさえ覚えちゃえばベースは作れそう ● Gruntfileを自動で作ってくれるのとてもありがたい ● 最初からGruntfileが機能モリモリで生成されるからある程度の知識がないと何やってるか全然分かんないと思う（まあ分かんなくても作れるけど） ● “volo”っていう似たツールも気になるところ

Slide 21

Slide 21 text

リンク ● yeoman official site ○ http://yeoman.io/ ● yeoman-generator ○ https://github.com/yeoman/generator