オタク×Node.js勉強会

Copyright (C) 2018 Toranoana Inc. All Rights Reserved.
オタク×Node.js勉強会
（Node.js入門）
虎の穴開発室
柳沢衛

目次
1. はじめに
2. Node.jsのインストール
3. Node.jsとは
4. Node.jsでの開発
5. Node.jsのJavaScript
6. npmについて
7. Node.jsを使ってみる
8. webページの作り方
9. お題
10.勉強方法について
1

1. はじめに
2

自己紹介
• 柳沢衛
• 今期見ているアニメ
- 宇宙よりも遠い場所
- りゅうおうのおしごと
- ヴァイオレット・エヴァーガーデン
• 今はまっていること
- はつゆきさくら
- この大空に、翼をひろげて
3

勉強会の目的
虎の穴での開発はRuby（Ruby on Rails）が中心で
すが、Node.jsでもサービスを作りたい。
社内で勉強会を開催しよう！
せっかくなので社外にも共有しよう！！
4

勉強会の対象者
• JavaScriptに触ったことがある方
• サーバサイドの開発に興味がある方
• 手軽にwebサービスを作ってみたい方
• Node.jsを勉強てみたい方
• オタクな方
5

勉強会のゴール
ちょっとしたwebサービスを作れるようになる
6

2. Node.jsのインストール
7

Windows・Mac
• 公式からダウンロード（8.9.4 LTS版）
- https://nodejs.org/ja/download/
node –v でバージョンが出れば成功
8

3. Node.jsとは
9

特徴①：サーバサイドJavaScript
• Google V8 JavaScript Engine
- JIT Virtual Machine型のJavaScript実行エンジン
- C++で記載されたOSS
- 名前の由来はV型8気筒エンジン
10

特徴②：シングルスレッド
• C10K問題の解消（クライアント１万台問題）
- マルチスレッドは同時アクセス数が増えると性能低下
> スレッド毎に必要なスタックメモリ
> コンテキストスイッチによる処理速度の低下
11

特徴③：ノンブロッキングI/O
• I/O処理を待たずに次の処理を行う
店レンジ
1 2
これ温めてください少々お待ちください
店レンジ
1 2
温め中
店レンジ
1 2
お待たせしましたおせぇよ（怒）
店レンジ
1 2
これ温めてください少々お待ちください
店レンジ
1
2
お次お並びのお客様
どうぞ！
店レンジ
1
お待たせしました
お、この店員できる！
客２は既に買い物
を終えて退店
ブロッキングI/O ノンブロッキングI/O
12

メリットデメリット
• メリット
- フロントもサーバも一貫してJavaScriptで書ける
- ライブラリが豊富
- 非常に軽量
- 小さな処理を素早く処理するのが得意
• デメリット
- 同期処理が苦手
- 重い処理をすると全体のパフォーマンスが低下
13

使用事例
• PayPal
- Spring（Java）からNode.jsへ乗り換え
> https://www.infoq.com/jp/news/2014/01/paypal-java-javascript
• Linked
- Ruby on RailsからNode.jsへ乗り換え
> https://www.infoq.com/jp/news/2012/10/Ruby-on-Rails-Node-js-LinkedIn
• Uber
> https://fa-works.com/blog/how-uber-scales-their-real-time-market-platform
• サイバーエージェント
> https://developers.cyberagent.co.jp/blog/archives/562/
• Netflix
> https://thenewstack.io/netflix-uses-node-js-power-user-interface/
14

web以外にできること
• デスクトップアプリケーション（Electron）
- VisualStudioCode
- Atom
- Slack
• フロントエンドの開発環境構築
- gulp
- Webpack
• 組み込み
- IoT
- ラズパイ
• サーバレスアプリケーション
- API Gateway + AWS Lambda + Node.js
15

4. Node.jsでの開発
16

webフレームワーク
• Express
- ほぼデファクトな軽量フレームワーク
• Koa
- Expressの開発チームが開発（非同期系の処理に配慮）
• Sails
- Ruby on Rails Likeなフレームワーク
• Meteor
- サーバもクライアントもコードが共有できる、フルスタック
フレームワーク
17

開発環境について
• エディター
- VisualStudioCode（MS製）
- Atom
- Brackets（Adobe製）
- Sublime
• 統合開発環境（IDE)
- Eclipse
- WebStorm
• WEB IDE
- AWS Cloud9
- Eclipse che
18

5.Node.jsのJavaScriptについて
19

ES2017(ES8)対応
• 現在の最新版（v9.6.1）では100%対応
- 対応状況はこちら http://node.green/
20

CoffeeScript
• coffee-scriptパッケージを入れるとビルド無しで使用
可能
• 実行結果
$coffee main.coffee
Hello 0
Hello 1
Hello 2
Hello 3
Hello 4
Hello 5
21

6. npmについて
22

npmとは
• ライブラリやパッケージを管理するツール
言語コマンド名
Python pip
PHP composer
Ruby gem
23

npmの使い方（事前準備）
• Package.jsonの作成
$ mkdir npmtest
$ cd npmtest
$ npm init
〜〜中略（全部EnterでOK）〜〜
$ ls
package.json
package.jsonが作成されている
24

パッケージのインストール
• 指定したパッケージをインストール
• 依存パッケージを全てインストール
$ npm install coffee-script
～（中略）～
$ls
node_modules package-lock.json package.json
インストールされた
パッケージが入ってる
$ npm install
globalにインストールしたい場合は
npm install –g coffee-script
25

package.jsonの中身
"name": "npm-test", // アプリケーションの名前
"version": "1.0.0", // アプリケーションのバージョン
"description": "", // アプリケーションの説明
"main": "index.js", // エンドポイントのファイル
"scripts": { // エイリアスコマンド
"test": "echo "Error: no test specified"&&exit 1"
},
"author": "", // 作者名
"license": "ISC", // ライセンス
"dependencies": { // 依存しているライブラリ群
"coffee-script": "^1.12.7"
}
npm run test で実行
パッケージのバージョンパッケージ名
26

よく使うnpm
パッケージ名用途
express webフレームワーク
passport 認証ライブラリ
jade テンプレートエンジン
bluebird Promise拡張
gulp タスクランナー
eslint 静的検証ツール
sequelize ORM
27

7. Node.jsを使ってみる
28

ワークスペースの準備
• 下記URLをクローン
• クローンができない方はこちらにアクセス
- https://github.com/toranoana/nodejs-study
$ git clone https://github.com/toranoana/nodejs-study.git
ここからダウンロード
29

アニメ情報取得ツール
• アニメ情報取得API
- http://api.moemoe.tokyo/anime/v1/master/2018/1
※ 今期のアニメ一覧がJSONで取得できます
アニメ情報をオブジェクト
の配列で返す
一つのアニメ情報
30

ソースコード
31
var http = require('http');
var url = 'http://api.moemoe.tokyo/anime/v1/master/2018/1';
http.get(url, function(res) {
var body = '';
res.setEncoding('utf8');
res.on('data', function(chunk) {
body += chunk;
});
res.on('end', function() {
console.log(JSON.parse(body));
});
});
• getAnimeData.js

Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 32
実行結果
$ node getAnimeData.js
[ { title_short2: '',
twitter_account: 'milkyholmes',
public_url: 'https://sp.bushiroad.com/special_tv/',
title_short1: 'ミルキィホームズ',
sex: 0,
twitter_hash_tag: 'milkyholmes',
id: 673,
sequel: 5,
created_at: '2018-01-07 20:29:38.0',
city_name: '',
cours_id: 17,
title: '探偵オペラミルキィホームズアルセーヌ華麗なる欲望',
city_code: 0,
title_short3: '',
updated_at: '2018-01-07 20:29:38.0' },
…
…
… ]

8. webページの作り方
33

テンプレートエンジン
• Jade（Pug)
- haml形式で記述
• EJS
- JavaのJSPやRubyのERBに似ている
• Mustache.js
- 多言語で開発されているので一度覚えると流用できる
• Handlebars
- Mustache互換
• Hogan
- Twitterが開発
今回はEJSを使用！
34

• ワークスペースの移動
• EJSのインストール
35
EJSを使用したwebページ作成（準備）
$ cd learn
$ pwd
/・・・・・・/nodejs-study/learn
$ ls
learn-ejs.js learn-template.ejs
$ npm install ejs

ソースコード（サーバサイド）
36
• learn-ejs.js11行目辺りを下記に修正
server.on('request', function(req, res) {
// template.ejsをUTF8で読み込む
var template = fs.readFileSync('./learn-template.ejs', 'utf-8');
// templateに変数の値を埋め込む
var page = ejs.render(template, data);
res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
res.write(page);
res.end();
});

ソースコード（テンプレート）
37
<%# ヘッダー %>
<h1><%= header %></h1>
<%# アニメ数分ループ %>
<% for (anime of animes) { %>
<div class="div_block">
<div class="div_header">
<%= anime.title %>
</div>
<img src="<%= anime.image %>" />
<p>
制作会社：<%= anime.production %>
</p>
</div>
<% } %>
• learn-template.ejsの14行目辺りに追加

Copyright (C) 2018 Toranoana Inc. All Rights Reserved. 38
実行結果
• コマンドを実行
• ブラウザで http://localhost:3000 にアクセス
$ node learn-ejs.js
Server runnning at http://127.0.0.1:3000/
※ 終了は ctrl + z

9. お題（20分）
• お題1（難易度：★☆☆）
- Web APIで取得したデータをブラウザに表示する
• お題2（難易度：★★★）
- Web APIで取得したデータを見栄えよくブラウザに表示する
39
http://api.moemoe.tokyo/anime/v1/master/2018/1?ogp=1

10. 勉強方法
• 書籍
- JS+Node.jsによるWebクローラー/ネットエージェント開発
テクニック
- サーバサイドJavaScript Node.js入門
• web
- JavaScript Promiseの本
> http://azu.github.io/promises-book/
- express実践入門
> https://gist.github.com/mitsuruog/fc48397a8e80f051a14
5
• Udemy
- Node.js + Expressで作るWebアプリケーション実践講座
> https://www.udemy.com/web-application-with-nodejs-
express/
40

おしまい
41

オタク×Node.js勉強会

More Related Content

What's hot (20)

Similar to オタク×Node.js勉強会 (20)

More from 虎の穴開発室 (20)