ember.jsの導入となるべく簡単に噛み砕いた大まかな概念の説明。

1. Ember.js導入
ぱろっく

2. 自己紹介
• ぱろっくです
• 最近はWeb屋さんみたいなことしてます

3. 今日やること
• Ember.js入門

4. Ember.jsとは
• JavascriptのWEBフレームワーク
• RESTfulなページがつくれます

5. とりあえずやってみよう
• 環境はubuntu14.04を想定しています。
• Macの人はubuntu の後に導入するので待っ
ててください。

6. 手順
• パソコンを起動する。

7. 手順
• ubuntuを起動する。
• ターミナルを開く。

8. 手順
• ubuntuを起動する。
• ターミナルを開く。
• sudo apt-get install git

9. 手順
• ubuntuを起動する。
• ターミナルを開く。
• sudo apt-get install git
• sudo apt-get install nodejs

10. 手順
• ubuntuを起動する。
• ターミナルを開く。
• sudo apt-get install git
• sudo apt-get install nodejs
• sudo update-alternatives --install
/usr/bin/node node /usr/bin/nodejs 10

11. 手順
• sudo apt-get install npm

12. 手順
• sudo apt-get install npm
• npm install ember-cli

13. 手順
• sudo apt-get install npm
• npm install ember-cli
• これでember.jsが使えるようになりました。

14. 手順
• 適当にtestとかいう作業用のディレクトリを作
成してください。

15. 手順
• 適当にtestとかいう作業用のディレクトリを作
成してください。
• そこのディレクトリに移動してください。

16. 手順
• 適当にtestとかいう作業用のディレクトリを作
成してください。
• そこのディレクトリに移動してください。
• ember new test-app

17. 手順
• 適当にtestとかいう作業用のディレクトリを作
成してください。
• そこのディレクトリに移動してください。
• ember new test-app
• これでアプリケーションができました。

18. 手順
• ember server (sでも可)
• ブラウザでlocalhost:4200にアクセス
• 無事起動できたことが確認できると思います

19. 手順（Mac用）
• brew install nodebrew

20. 手順（Mac用）
• brew install nodebrew
• export
PATH=$HOME/.nodebrew/current/bin:$PATH

21. 手順（Mac用）
• brew install nodebrew
• export
PATH=$HOME/.nodebrew/current/bin:$PATH
• nodebrew install-binary v0.12.4

22. 手順（Mac用）
• brew install nodebrew
• export
PATH=$HOME/.nodebrew/current/bin:$PATH
• nodebrew install-binary v0.12.4
• nodebrew use v0.12.4

23. 手順（Mac用）
• brew install nodebrew
• export
PATH=$HOME/.nodebrew/current/bin:$PATH
• nodebrew install-binary v0.12.4
• nodebrew use v0.12.4
• npm install –g npm

24. 手順（Mac用）
• brew install nodebrew
• export
PATH=$HOME/.nodebrew/current/bin:$PATH
• nodebrew install-binary v0.12.4
• nodebrew use v0.12.4
• npm install –g npm
以上でnode npmは入りました。

25. 手順（Mac用）
• npm install -g ember-cli
• ディレクトリ適当に作って移動
• ember new test-app
• ember server
• ブラウザでlocalhost:4200にアクセス
• 以上です

26. ember.jsの仕組み

27. ember.jsの仕組み
• 日本語の文献がない！
• あってもめっちゃくちゃ古い！

28. ember.jsの仕組み
• 日本語の文献がない！
• あってもめっちゃくちゃ古い！
• ということで公式の英語ページから図をお借
りしてたぶんあっているだろうという説明をし
ていく

29. 大まかな概念
1.要求されたアドレスに合ったページをrouter.js
が探してきてくれる

30. 大まかな概念
1.要求されたアドレスに合ったページをrouterが
探してきてくれる
2.route handlerってやつが必要なデータとかを
Modelとかからデータを持ってくる

31. 大まかな概念
1.要求されたアドレスに合ったページをrouterが
探してきてくれる
2.route handlerってやつが必要なデータとかを
Modelとかからデータを持ってくる
3.templateで書かれたhbsファイル（htmlファイ
ルみたいなもの）が表示される

32. 大まかな概念
1.要求されたアドレスに合ったページをrouterが
探してきてくれる
2.route handlerってやつが必要なデータとかを
Modelとかからデータを持ってくる
3.templateで書かれたhbsファイル（htmlファイ
ルみたいなもの）が表示される
※hbs（handlebars）は別の技術なので今日は詳
しくは解説しません。

33. ディレクトリ
|--app
|--bower_components
|--config
|--dist
|--node_modules
|--public
|--tests
|--tmp
|--vendor

34. ディレクトリ
|--app
|--bower_components
|--config
|--dist
|--node_modules
|--public
|--tests
|--tmp
|--vendor

35. appの中のディレクトリ
controllers/
index.html
router.js
styles/
components/
helpers/
models/
routes/
templates/

36. templates
• hbsファイルが置いてある。
• application.hbsがすべてのページに出力され
るもので、ヘッダーとフッダーのような固定し
たいものはここに書く。

37. templates
• hbsファイルが置いてある。
• application.hbsがすべてのページに出力され
るもので、ヘッダーとフッダーのような固定し
たいものはここに書く。
• では複数のページを作ってみましょう。

38. 新しいページを作ろう
• ember generate route index
• ↑でindexというページを勝手に作成してくれ
るはず。
• lsなどでindex.hbsが増えているのを確認して
みよう。

39. 新しいページを作ろう
• ember generate route index
• ↑でindexというページを勝手に作成してくれ
るはず。
• lsなどでindex.hbsが増えているのを確認して
みよう。
• index.hbsになにか適当に書き加えよう。
（htmlと書き方全く一緒でok）

40. 余談
• hbsのリファレンス：http://handlebarsjs.com/

41. 新しいページを作ろう
• ember generate route about
• ↑さっきのとは別のページをもう一つ作成す
る。

42. 新しいページを作ろう
• ember generate route about
• ↑さっきのとは別のページをもう一つ作成す
る。
• ember serverで動かす。

43. 新しいページを作ろう
• ember generate route about
• ↑さっきのとは別のページをもう一つ作成す
る。
• ember serverで動かす。
• localhost:4200/aboutにアクセス

44. あとは実演

45. Ember.js便利ですね！
• お疲れ様でした〜。