SlideShare a Scribd company logo
第1回勉強会
Node.jsとExpressで簡単検索サイト作成
内村 康一
私の略歴
大学卒業後都内IT商社で新規事業の企画
・・・2年
帰郷後鹿児島大学内の企業で特許管理業務
・・・3年
上京しJavascriptによるSNSゲーム開発
・・・1年
すみません、最近までITにほとんど関係ない仕事してました。
• サーバサイドのJavascriptフレームワークです。
Node.jsを簡単に言うと・・・
クライアント サーバ
Node.js
リクエスト
レスポンス
マルチスレッドの場合
(Apacheなど)
Node.jsのメリット1 ~シングルスレッド~
シングルスレッドの場合
(node.js)
1.全てのリクエストを一つのス
レッドで対応⇒複数スレッドによ
るリソース消費がない
2.待ち時間を他の処理で埋め
られるので効率的(ノンブロッキ
ングI/O)
1プロセスで数万アクセスの同時接
続をこなすことができる!
シングルスレッドの威力
処
理
速
度
並行処理数
Apache PHPの場合、同時並行処理数が400を超えると突然処理速度が遅くなる。
Node.jsのメリット2 ~超高速V8エンジン~
 1.88 v8-2.1
 1.76 C
 66.2 Python3.1
 50.3 Python2.5
 20.8 Ruby1.9
 123 Ruby1.8
 速度[[[[秒]]]]                      処理系                     
Node.jsはGoogle開発のV8エンジンを搭載。フィボナッチではC言語に迫るパフォー
マンスを見せる。
• WebSocketなどを利用したリアルタイム処理
⇒ チャットアプリなど
• 大量のクライアントが発生する処理
⇒ ソーシャルゲームなど
Node.jsに向いている処理
• CPU負荷の高い処理(CPUCPUCPUCPU Heavy)
• 画像など静的コンテンツの処理
⇒ nginxなどで対応
Node.jsを使わない方がいい処理
• ngCore : DeNAが開発するクロスプラットフォームゲームエン
ジン。Node.jsを基幹技術として採用。
• GREE Platform : GREEが提供するサーバーからクライアント
まで一貫してJavaScriptベースで開発可能なプラットフォーム。
• LinkedIn : パフォーマンスとスケーラビリティを理由として,
同社のモバイル用バックエンドインフラを Ruby on Rails から
Node.js にリプレース。
• アメーバピグ : ピーク時の アクティブユーザが20万人いる
にもかかわらず、20台のサーバでのみ運用を行なって いる。
Node.jsの採用例
• Node.js&express&ejsでやります。
• DBはMySQL、ORMはSequelizeでいきます。
今日の方針
Node.js &
Express
ejs
MySQL
APサーバ
DBサーバ
Sequelize
ブラウザ
HTTP
Node.js周りのあれこれ1
npm
Node Package Manager。Node用のパッケージを管理するツール。
Linuxのapt-getみたいな感じ。
使い方 npm install ○○ -option
例)npm install sequelize -g (sequelizeをグローバルにインストール)
express
NodeのWebアプリケーションフレームワーク。RubyでいうRuby on
rails みたいなもの。でもRoRより軽量で機能は限定的。
使い方 express ○○ -option
例) express hoge -e (ejsを使用してhogeプロジェクトを生成)
Node.js周りのあれこれ2
ejs
Nodeのテンプレートエンジン。他にもJadeなどが利用可能。
<%= message %>で変数messageをHTMLエスケープして表示。
<%- message %>で変数messageをHTMLエスケープせずに表示。
<% var i = 0 %>などJavascriptの記述をHTML内にできる。
sequelize
Nodeで使えるMySQLのORM。
npm install mysql と npm install sequlize で簡単インストール。
 Windowsの場合
http://nodejs.jp/nodejs.org
_ja/docs/v0.10/download/
の「Windows installer」をクリックして
msiファイルをダウンロードする。
まずはNodeとnpmのインストールから
 Macの場合
http://nodejs.jp/nodejs.org
_ja/docs/v0.10/download/
の「Mac OS X installer」をクリックして
pkgファイルをダウンロードする。
あとは「同意する」か「はい」を押しとけばOK。環境変数PATHの設定も忘れずに。
・ express
$ npm install express -g
$ express hoge -e (これでhogeフォルダが生成される)
以降hogeフォルダに移動して。
・ ejs
$ npm install ejs
・ mysql
$ npm install mysql
・ sequelize
$ npm install sequelize
npmでパッケージのインストール
expressで生成したフォルダ内のapp.jsを指定して
$ node app.js
と打ち込む。
「Express server listening on port 3000 in development
mode」と出るので、ブラウザのURLに
「localhost:3000」
これでOK。
Expressと表示されれば成功。
早速テスト起動
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
app.jsを見てみる1 ~モジュールのロード~
require(...)にパスが
書いてある場合
基本的にモジュールの読み込み(npmでインストールしたexpressなどのモジュール)
exports.list = function(req, res){
res.send("respond with a resource");
};
./routes/user.js
無名関数をlistという名前で外部公開する。
./routes/user.js内の関数やオブ
ジェクトにアクセスが可能になる
user.listでlistという名の関数にアクセス。
app.jsを見てみる2 ~Expressの設定~
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
ポート3000番を指定
ビューフォルダを指定
テンプレートエンジンをEJSに指定
アイコン設定
ログ設定
POST送信データを自動パース
HTTPメソッドのオーバーライド
ルーティングの有効化
BodyParserが重要。これがないとreq.body.hogeで値の取得が出来ない。あとクッキーを
使うときはCookieParser,セッションを使うときはsessionを有効にする。
app.get('/', routes.index);
---index.js---
exports.index = function(req, res){
res.render('index', { title: 'Express' });
};
app.get('/users', user.list);
---user.js---
exports.list = function(req, res){
res.send("respond with a resource");
};
app.jsを見てみる3 ~ルーティング~
リクエスト。フォームの値などクライアント
から送られてきたHTTPデータ。
レスポンス。サーバからクライアントに
投げるHTTPデータ。
index.ejs内の<%= title %>に反映
localhost:3000/usersにアクセスしたときに実行
私の場合ファイルを分けずapp.jsに全部書き込みます(面倒な
ので)。例えばルートにアクセスしたとき、index.ejsで"hello
world"と表示したいときは・・・。
app.get("/", function(req, res){
res.render("index.ejs", { msg : "hello world" });
});
でOK。後はindex.ejsの表示したい場所に
<p><%= msg %></p>
なんて記述してしまえば、hello worldを表示してくれます。
便利でしょ??
基本的な使い方1~テキスト表示~
フォームの入力値をPOSTで送る場合。例えば
<form method="POST" action="/hello" >
<input type="text" name="me" />
<input type="submit" value="送信" />
</form>
なんてとき、サーバ側では
app.post('/hello', function(req, res){
console.log(req.body.me);
});
これで取得できます。簡単でしょ??
基本的な使い方2~フォームデータ取得~
URLパラメータでデータを送る場合。例えば
http://localhost:3000/search?word="hoge"
なんてとき、サーバ側では
app.get('/search', function(req, res){
console.log(req.query.word);
});
これで取得できます。簡単でしょ??
基本的な使い方3~URLパラメータ取得~
IDなんかを取得するのも簡単ですよ~。
例えば「localhost:3000/user/12」で12番のユー
ザIDを取得したいときは。
app.get('/user/:id', function(req, res){
var id = req.param('id');
これで12番が取得できました。数字以外にも文
字列なんかも取得できますよ。これをもとに
DB検索すればいいですね。
基本的な使い方4~ID取得~
• 「npm install sequelize」でsequelizeをインストールし
て下さい。
• MySQLが動くXAMPPなどを用意して下さい。また
kagoshimaデータベースとusers テーブルを作成して
下さい。
• 予め以下のフィールドを作成して下さい。
 id | int auto_increment primary key
name | varchar(32)
sex | boolean
今日の本題 ~簡単なDB検索~
• var sequelize = new Sequelize('kagoshima',
'root', 'password', {
host: "localhost",port: 3306 });
 var User = sequelize.define('user', {
id: Sequelize.INTEGER,
name: Sequelize.STRING,
sex: Sequelize.BOOLEAN
});
app.jsの記述1~DB設定~
DB名
テーブル名(単数形)
app.get("/regist", function(req, res){
res.render("regist.ejs", {});
});
app.post('/regist', function(req, res){
var SourceCode = User.build({
name : req.body.name,
sex : req.body.sex
});
SourceCode.save().success(function (){
console.log('DB save success');
});
});
app.jsの記述2~DBへのデータ登録~
<html>
<body>
<form method="post"
action="/regist">
<input type="text"
name="name" />
<inputy type="radio"
name="sex" value="0">男
<inputy type="radio"
name="sex" value="1">女
</body>
</html>
regist.ejs
app.get('/user/:id', function(req, res){
var id = req.param('id');
User.find({ where: {id : id}} ).success(function (data){
res.render('index.ejs', { id : data.id, name :
data.name, sex: data.sex });
});
app.jsの記述3~データ検索~
Userテーブ
ル内を
IDが一致するデータを探して
一致したデータ
がオブジェクトで
格納される
これで「localhost:3000/user/30」なら30番に一致するデータのID、
名前、性別が抽出され、オブジェクトに格納される。後はそれを
EJSにレンダリングするだけ。
<html>
<body>
<p>ID:<%= id %></p>
<p>名前:<%= name %></p>
<p>性別:<%= sex %></p>
</body>
</html>
index.ejsの記述
ID : 20
名前 : 野戸 太郎
性別 : 0
• http://localhost:3000/registにアクセスして名
前と性別を登録。(IDは自動割り当て)
• http://localhost:3000/user/○○の○○に数
字を入力する。
• 該当するIDの名前と性別が表示される。
使い方
• 第2回鹿児島Node.jsの会勉強会
 日本Androidの会鹿児島支部勉強会と併催予
定。講師などは未定。
 もし希望があればセッション周りやDB検索の
もっと深いところなんか私が担当したいと思い
ます。
今後の予定
ご清聴感謝です。
ありがとうございました。

More Related Content

PDF
Hello, Node.js
PDF
サーバサイドNodeの使い道
PPTX
Node.jsではじめるサーバ構築
PDF
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
PDF
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
PDF
最近のフロントエンドツールの紹介
PDF
Node.jsでサーバプログラマ デビューしよう
PPTX
Node.js×mongo dbで3年間サービス運用してみた話
Hello, Node.js
サーバサイドNodeの使い道
Node.jsではじめるサーバ構築
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
最近のフロントエンドツールの紹介
Node.jsでサーバプログラマ デビューしよう
Node.js×mongo dbで3年間サービス運用してみた話

What's hot (20)

PDF
Node.js を選ぶとき 選ばないとき
PDF
Node js 入門
PPTX
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
PDF
データベース勉強会 In 広島 mongodb
PDF
音のなるIoTデバイス
PDF
WiredTigerストレージエンジン楽しい
PPT
Node.js で Web アプリ開発
PPTX
Node.jsに縁のない職場でnode.jsを使い始める戦術
PDF
Vue.js ハンズオン資料
PDF
Db tech showcase2015 how to replicate between clusters
PDF
はんなりPython #45
PDF
JSAI 2020 1J5-GS-2-01 TensorShader 高次元ニューラルネットワーク深層学習フレームワーク
PDF
Nodeにしましょう
PDF
Python Tip LT 20210805 nlog2n2
PDF
2021 1021 ssmjp_osc
PDF
Getting start with knockout.js
PDF
真Intermediate languageのキホン
PPTX
Non blocking and asynchronous
PPTX
Sails.jsのメリット・デメリット
PPTX
変数の重要度ってどうやったらわかるん?
Node.js を選ぶとき 選ばないとき
Node js 入門
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
データベース勉強会 In 広島 mongodb
音のなるIoTデバイス
WiredTigerストレージエンジン楽しい
Node.js で Web アプリ開発
Node.jsに縁のない職場でnode.jsを使い始める戦術
Vue.js ハンズオン資料
Db tech showcase2015 how to replicate between clusters
はんなりPython #45
JSAI 2020 1J5-GS-2-01 TensorShader 高次元ニューラルネットワーク深層学習フレームワーク
Nodeにしましょう
Python Tip LT 20210805 nlog2n2
2021 1021 ssmjp_osc
Getting start with knockout.js
真Intermediate languageのキホン
Non blocking and asynchronous
Sails.jsのメリット・デメリット
変数の重要度ってどうやったらわかるん?
Ad

Similar to 第1回鹿児島node.jsの会資料_内村 (20)

PPT
第1回鹿児島node.jsの会資料_内村
PPTX
Hokuriku.net 2013 01-26 node.js
PDF
第7回鹿児島Node.jsの会勉強会資料
PDF
Node.js Tutorial at Hiroshima
PPTX
how to create a web server with a raspberry pi
PDF
Node.js+MongoDB in SPA
PPTX
オタク×Node.js勉強会
PDF
大阪Node学園八時限目 「expressで作るWebアプリ」
PDF
後期第二回ネットワークチーム講座資料
PDF
densan2014-late01
PDF
120418 tokyo node5_lin_qonnodejs
PDF
PDF
Node.js基礎の基礎 - Miyazaki.js vol.2
PDF
Bp study39 nodejs
PDF
Nodejs beginner
PDF
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
PDF
Node.jsでブラウザメッセンジャー
PPTX
Getting started with node.js
PDF
東京Node学園#3 Domains & Isolates
PDF
JavaScript使いならきっととっつきやすいNode-REDについて
第1回鹿児島node.jsの会資料_内村
Hokuriku.net 2013 01-26 node.js
第7回鹿児島Node.jsの会勉強会資料
Node.js Tutorial at Hiroshima
how to create a web server with a raspberry pi
Node.js+MongoDB in SPA
オタク×Node.js勉強会
大阪Node学園八時限目 「expressで作るWebアプリ」
後期第二回ネットワークチーム講座資料
densan2014-late01
120418 tokyo node5_lin_qonnodejs
Node.js基礎の基礎 - Miyazaki.js vol.2
Bp study39 nodejs
Nodejs beginner
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
Node.jsでブラウザメッセンジャー
Getting started with node.js
東京Node学園#3 Domains & Isolates
JavaScript使いならきっととっつきやすいNode-REDについて
Ad

More from Koichi Uchimura (9)

PDF
痛すぽ事業計画書
PDF
えあすぽ
PDF
痛すぽ_プレゼン資料
PDF
第6回鹿児島node.jsの会2資料_内村
PDF
第6回鹿児島node.jsの会資料_内村
PDF
第5回鹿児島node.jsの会資料_内村
PDF
第4回鹿児島node.jsの会資料_内村
PDF
第3回鹿児島node.jsの会資料_内村
PDF
第2回鹿児島node.jsの会資料_内村
痛すぽ事業計画書
えあすぽ
痛すぽ_プレゼン資料
第6回鹿児島node.jsの会2資料_内村
第6回鹿児島node.jsの会資料_内村
第5回鹿児島node.jsの会資料_内村
第4回鹿児島node.jsの会資料_内村
第3回鹿児島node.jsの会資料_内村
第2回鹿児島node.jsの会資料_内村

第1回鹿児島node.jsの会資料_内村