Node.js Hands-on at 78th Web Touch Meeting in Hiroshima.

1. Node.js 基礎
iwanaga
第78回 Web Touch Meeting
in HIROSHIMA

2. 今⽇日のゴール
1. Node.js の基礎を理理解
2. ⾮非同期 I/O を体で覚える
3. Node.js を仕事や趣味に導⼊入
開発の現場ではどういうコードを書いているの？
知っているだけで終わらせない。
Node.js の根幹「イベントループ」を習得。
他の⼈人に Node.js の凄さを語れるようになろう。

3. ⾃自⼰己紹介
⼤大学〜～⼤大学院。素粒粒⼦子物理理学。
地震速報
広島に６年年間いました
仕事
ウェブアプリ (フルスタック)
執筆
「Arduinoで始める
Web技術者のための IoT ⼊入⾨門」
www.atmarkit.co.jp/ait/kw/arduino_js.html
@y_iwanaga_

4. Node.js の魅⼒力力
⼊入出⼒力力の無駄を簡単に撲滅
同じコンピュータリソース (= 予算) で
より多くの処理理を捌くことができる

5. ⼊入出⼒力力なくしてシステムなし！
ネットワーク：HTTP, DNS
DB：検索索、書き込み
ディスク：ローカルファイル
でも、I/O 処理理は時間がかかる

6. I/O の待ち時間
https://software.intel.com/sites/products/collateral/hpc/vtune/performance_analysis_guide.pdf
http://mechanical-sympathy.blogspot.jp/2013/02/cpu-cache-flushing-fallacy.html
I/O CPU クロック 時間
L3 Cache 38 12 ns
RAM 250 65 ns
Disk 41,000,000 10,000,000 ns
Network 240,000,000 60,000,000 ns
I/O 完了了を待つのは勿体ない

7. ⼊入出⼒力力の処理理パターン
同期 ⾮非同期

8. ⼊入出⼒力力の処理理パターン
同期
・ I/O 待ちの間、他の処理理をブロック
・ 複数の同時 I/O を実現するには
・ multi thread：メモリ消費量量が多い
・ select：処理理速度度は I/O の数と共に劣劣化
⾮非同期

9. ・ I/O 待ちの間も処理理を続⾏行行
・ Single thread で複数の I/O をさばける
・ 処理理速度度は I/O の数が増えても安定
同期 ⾮非同期
⼊入出⼒力力の処理理パターン

10. 処理理性能を⽐比較

11. Node.js の Design Goals
1. Event Driven Async I/O
2. 全ての I/O を Stream に
API の内側でバッファしない。メモリを節約。
I/O の完了了は全て event で受け取る
3. シンプルな API
ブラウザの click イベントと同じインターフェース

12. どうやって実現しているの？
V8 Engine
http://docs.libuv.org/en/v1.x/design.html

13. Node.jsの基礎
同期・⾮非同期 I/O パターン
ファイル読み出しで実演

14. 本⽇日使うコード
https://github.com/
iwanaga/nodejs-hands-on

15. 同期読み出し
2. 同期 I/O
3. ファイルの中⾝身を表⽰示
1. fs モジュール をインポート

16. ⾮非同期読み出し

17. ⾮非同期読み出し
・・・１
・・・２

18. ⾮非同期読み出し
← 後
← 先に実⾏行行

19. 実⾏行行順序はどうやって決まる？
event loop

20. event loop
ファイル読み出し
メインコンテキストを実⾏行行した後

21. event loop
終わるまでファイル読み出し

22. event loop
ファイル読み込み完了了。
コールバック関数を実⾏行行！

23. ⾮非同期読み出し
← 後
← 先に実⾏行行

24. Node.jsの基礎
Event Loop を使いこなす

25. イベントを操る
EventEmitter
fs.readStream, net, http.Server は
EventEmitter を継承。
1. on メソッド イベント名とハンドラを紐紐づける
2. emit メソッド イベントを発⽕火
最低限 押さえておくべきこと

26. EventEmitter を使ってみよう

27. EventEmitter を使ってみよう

28. EventEmitter を使ってみよう

29. EventEmitter を使ってみよう

30. Node.jsの基礎
npm の基礎知識識

31. npm
・ XML を扱いたい
・ MySQL を利利⽤用したい
・ Web Framework を活⽤用したい
Node.js に実装されていない機能を使うとき
etc…

32. npm
package.json でモジュールを管理理
・ 利利⽤用するモジュール
・ バージョン
ハンズオン前半で実際に触ります
デプロイ先で依存関係を簡単に再現できる

33. 座学の最後に
https://nodejs.org/api/
ブックマークしときましょう。
今後、何度度も⾒見見ることになります。

34. ハンズオン 前半
1. Node.jsインストール
2. http サーバを実装
3. npm を使う

35. ハンズオン 前半
1. Node.jsインストール
2. http サーバを実装
3. npm を使う

36. オススメは nvm
インストール、バージョン変更更が簡単
・ プロジェクトによってバージョンが違うとき
・ バイナリが⽤用意されていないとき

37. nvm を使ってインストール
1. “nvm github” で検索索！
2. Install script
curl https://raw.githubusercontent.com/creationix/nvm/v0.25.0/install.sh | bash
source ~/.nvm/nvm.sh
nvm install 0.12.2
nvm alias default 0.12.2
node -v
3. Usage

38. ハンズオン 前半
1. Node.jsインストール
2. http サーバを実装
3. npm を使う

39. まず
https://nodejs.org/api/
⼀一覧の真ん中にある HTTP をクリック

40. http.Server

41. http.Server

42. http.Server

43. リクエストを出してみよう
curl http://localhost:3000/index.html
curl http://localhost:3000/ -d '{a: 1}'

44. ハンズオン 前半
1. Node.jsインストール
2. http サーバを実装
3. npm を使う

45. 管理理ファイルを作る
コマンドラインで npm init ↩️
項⽬目 説明 例例
name アプリの名前 node-hands-on
version アプリのバージョン 0.0.1
description 説明 hands-on codes
entry point 実⾏行行ファイル index.js
test
command
テスト実⾏行行コマンド
(npm test で実⾏行行できるようになる)
grunt test
author 開発者の名前 iwanaga
→ package.json が出来る

46. package.json

47. モジュールインストール
npm install lodash --save
1. lodash をダウンロード
2. node_̲modules ディレクトリにインストール
3. 依存モジュールとして package.json に追記

48. package.json

49. 使い⽅方は
ビルトインモジュールと同じ。

50. メモ
node_̲modules ディレクトリを
リポジトリにコミットしない
・ デプロイ先で npm install を実⾏行行すれば
同じバージョンの全モジュールをインストールしてくれる。
・ C++ をバインドしたモジュールがある。
デプロイ先でコンパイルする⽅方が確実。

51. ハンズオン 後半
Node.js を仕事や趣味で活⽤用する

52. 短い時間で⽬目的の機能を実装し、
メンテナンスしやすいコードを維持したい！

53. それを実現するには、かなりの経験が必要でした。
しかし、時代は劇的に良良くなりました！
Node.js を⽤用いたWeb 開発の
ベストプラクティスの結晶
generator-angular-fullstack

54. angular-fullstack
YEOMAN
MongoDB
Express
AngularJS
Node.js
SocketIO

55. 説明より先にやってみる
npm install –g yo
npm install –g bower
npm install –g grunt-cli
npm install –g generator-angular-fullstack
yo angular-fullstack HandsOnApp

56. 質問に答えていきます
? What would you like to write scripts with?
›❯ JavaScript
? What would you like to write markup with?
›❯ HTML
? What would you like to write stylesheets with?
›❯ CSS

57. 質問に答えていきます
? What Angular router would you like to use?
›❯ uiRouter
? Would you like to include Bootstrap?
n
? Would you scaffold out
an authentication boilerplate?
n

58. 質問に答えていきます
? Would you like to use mongoDB with Mongoose
for data modeling?
y
? Would you like to use socket.io?
Y
→ サーバとクライアントのコードを⾃自動⽣生成。
依存モジュールをインストール

59. サーバ起動
grunt serve:dist
クライアント⽤用の
コードをビルド
・画像、JavaScript、CSS を minify
・構成ファイルをもとに
script タグと link タグを⾃自動挿⼊入
・AngularJS は CDN からロードさせる
・上記の結果を dist に配置
サーバ起動
・リクエストを dist 配下にルーティング
・node server/app.js を実⾏行行

60. 次にやること
⽣生成されたコードを⾒見見ながら、
全体像を掴みます。

61. ディレクトリ構成
server
client
dist
e2e
Node.js で動くウェブサーバのコード群
ブラウザにサーブする HTML, JavaScript, CSS
End To End テストのためのコード
build:dist or serve:dist 実⾏行行時に作られる。
production 環境⽤用のアセットを配置。

62. server
app.js
routes.js
サーバ起動ファイル。
モジュールのインポートに専念念。
HTTP リクエストのルーティング定義。
基本的に触らない。
YEOMAN が全て⾃自動的に更更新してくれます。
→ 詳細を知りたい⼈人は、Express の API ドキュメントを

63. server
api
⼤大前提：動的なデータは全て API で取得します
resourceName
index.js
resourceName.controller.js
resourceName.model.js
resourceName.socket.js
resourceName.spec.js

64. server 側の開発
yo angular-fullstack:endpoint resourceName
Model を修正
(必要に応じて Controller, Socket を修正)
(spec を修正。grunt test:server でテスト実⾏行行)

65. client
bower_components
index.html
・ この２つも基本的に触らない。
・ grunt:build や bower install で
全て⾃自動的に更更新されます。
必要な script, CSS をロードするだけ
bower でインストールした
コードが配置される

66. client
app
AngularJS のベストプラクティスが詰まっています！
uiName uiName.js
uiName.controller.js
uiName.controller.spec.js
uiName.html
uiName.css
compenents

67. client 側の開発
yo angular-fullstack:route uiName
Controller, HTML を修正
(必要に応じて uiName.js を修正)
(spec を修正。grunt test:client でテスト実⾏行行)

68. もう⼀一つオススメ。
bower install angular-material
https://material.angularjs.org/

69. ハンズオン 後半
TODO アプリを作ってみよう

70. 完成イメージ

71. server 側

72. コード⽣生成
yo angular-fullstack todo
yo angular-fullstack:endpoint todo

73. server 作り込み
server/api/todo/todo.model.js

74. client 側

75. コード⽣生成
yo angular-fullstack:route todo
yo angular-fullstack:service todoService
bower install angular-material --save

76. client 側
client/app/todo/todo.html

77. client 側
client/app/todoService/todoService.js

78. client 側
client/app/todo/todo.controller.js

79. client 側
client/app/todo/todo.js

80. dev でも SocketIO を serve する
server/app.js

81. angular-material
client/app/app.js

82. 起動してみましょう
grunt serve
・ 複数のタブで
作成／変更更をリアルタイムに同期。
WebSocket を活⽤用しています。
・ DB に保存しているので、
リロードしても元通り。

83. いかがでしたか？
わずかなコーディングで、
リアルタイム＆双⽅方向通信のウェブアプリが
出来ました。
今後も是⾮非、Node.js を活⽤用していって下さい