第1回勉強会
Node.jsとExpressで簡単検索サイト作成
内村 康一
私の略歴
大学卒業後都内IT商社で新規事業の企画
・・・2年
帰郷後鹿児島大学内の企業で特許管理業務
・・・3年
上京しJavascriptによるSNSゲーム開発
・・・1年
すみません、最近までITにほとんど関係ない仕事してました。
• サーバサイドのJavascriptフレームワークです。
Node.jsを簡単に言うと・・・
クライアント サーバ
Node.js
リクエスト
レスポンス
マルチスレッドの場合
(Apacheなど)
Node.jsのメリット1 ~シングルスレッド~
シングルスレッドの場合
(node.js)
1.全てのリクエストを一つのス
レッドで対応⇒複数スレッドによ
るリソース消費がない
2.待ち時間を他の処...
シングルスレッドの威力
処
理
速
度
並行処理数
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
 速度[[[[秒]]]]    ...
• WebSocketなどを利用したリアルタイム処理
⇒ チャットアプリなど
• 大量のクライアントが発生する処理
⇒ ソーシャルゲームなど
Node.jsに向いている処理
• CPU負荷の高い処理(CPUCPUCPUCPU Heavy)
• 画像など静的コンテンツの処理
⇒ nginxなどで対応
Node.jsを使わない方がいい処理
• ngCore : DeNAが開発するクロスプラットフォームゲームエン
ジン。Node.jsを基幹技術として採用。
• GREE Platform : GREEが提供するサーバーからクライアント
まで一貫してJavaScriptベースで開発可...
• Node.js&express&ejsでやります。
• DBはMySQL、ORMはSequelizeでいきます。
今日の方針
Node.js &
Express
ejs
MySQL
APサーバ
DBサーバ
Sequelize
ブラウザ
HT...
Node.js周りのあれこれ1
npm
Node Package Manager。Node用のパッケージを管理するツール。
Linuxのapt-getみたいな感じ。
使い方 npm install ○○ -option
例)npm instal...
Node.js周りのあれこれ2
ejs
Nodeのテンプレートエンジン。他にもJadeなどが利用可能。
<%= message %>で変数messageをHTMLエスケープして表示。
<%- message %>で変数messageをHTMLエ...
 Windowsの場合
http://nodejs.jp/nodejs.org
_ja/docs/v0.10/download/
の「Windows installer」をクリックして
msiファイルをダウンロードする。
まずはNodeとnpm...
・ express
$ npm install express -g
$ express hoge -e (これでhogeフォルダが生成される)
以降hogeフォルダに移動して。
・ ejs
$ npm install ejs
・ mysql
...
expressで生成したフォルダ内のapp.jsを指定して
$ node app.js
と打ち込む。
「Express server listening on port 3000 in development
mode」と出るので、ブラウザのU...
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')...
app.jsを見てみる2 ~Expressの設定~
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.se...
app.get('/', routes.index);
---index.js---
exports.index = function(req, res){
res.render('index', { title: 'Express' });
...
私の場合ファイルを分けずapp.jsに全部書き込みます(面倒な
ので)。例えばルートにアクセスしたとき、index.ejsで"hello
world"と表示したいときは・・・。
app.get("/", function(req, res){
...
フォームの入力値をPOSTで送る場合。例えば
<form method="POST" action="/hello" >
<input type="text" name="me" />
<input type="submit" value="送...
URLパラメータでデータを送る場合。例えば
http://localhost:3000/search?word="hoge"
なんてとき、サーバ側では
app.get('/search', function(req, res){
console...
IDなんかを取得するのも簡単ですよ~。
例えば「localhost:3000/user/12」で12番のユー
ザIDを取得したいときは。
app.get('/user/:id', function(req, res){
var id = req...
• 「npm install sequelize」でsequelizeをインストールし
て下さい。
• MySQLが動くXAMPPなどを用意して下さい。また
kagoshimaデータベースとusers テーブルを作成して
下さい。
• 予め以下...
• var sequelize = new Sequelize('kagoshima',
'root', 'password', {
host: "localhost",port: 3306 });
 var User = sequelize....
app.get("/regist", function(req, res){
res.render("regist.ejs", {});
});
app.post('/regist', function(req, res){
var Sourc...
app.get('/user/:id', function(req, res){
var id = req.param('id');
User.find({ where: {id : id}} ).success(function (data)...
<html>
<body>
<p>ID:<%= id %></p>
<p>名前:<%= name %></p>
<p>性別:<%= sex %></p>
</body>
</html>
index.ejsの記述
ID : 20
名前 : 野戸 ...
• http://localhost:3000/registにアクセスして名
前と性別を登録。(IDは自動割り当て)
• http://localhost:3000/user/○○の○○に数
字を入力する。
• 該当するIDの名前と性別が表示さ...
• 第2回鹿児島Node.jsの会勉強会
 日本Androidの会鹿児島支部勉強会と併催予
定。講師などは未定。
 もし希望があればセッション周りやDB検索の
もっと深いところなんか私が担当したいと思い
ます。
今後の予定
ご清聴感謝です。
ありがとうございました。
Upcoming SlideShare
Loading in …5
×

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

1,220 views
1,145 views

Published on

node.jsの簡単かつシンプルな資料です。やっつけともいいます。

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,220
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. 第1回勉強会 Node.jsとExpressで簡単検索サイト作成 内村 康一
  2. 2. 私の略歴 大学卒業後都内IT商社で新規事業の企画 ・・・2年 帰郷後鹿児島大学内の企業で特許管理業務 ・・・3年 上京しJavascriptによるSNSゲーム開発 ・・・1年 すみません、最近までITにほとんど関係ない仕事してました。
  3. 3. • サーバサイドのJavascriptフレームワークです。 Node.jsを簡単に言うと・・・ クライアント サーバ Node.js リクエスト レスポンス
  4. 4. マルチスレッドの場合 (Apacheなど) Node.jsのメリット1 ~シングルスレッド~ シングルスレッドの場合 (node.js) 1.全てのリクエストを一つのス レッドで対応⇒複数スレッドによ るリソース消費がない 2.待ち時間を他の処理で埋め られるので効率的(ノンブロッキ ングI/O) 1プロセスで数万アクセスの同時接 続をこなすことができる!
  5. 5. シングルスレッドの威力 処 理 速 度 並行処理数 Apache PHPの場合、同時並行処理数が400を超えると突然処理速度が遅くなる。
  6. 6. 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言語に迫るパフォー マンスを見せる。
  7. 7. • WebSocketなどを利用したリアルタイム処理 ⇒ チャットアプリなど • 大量のクライアントが発生する処理 ⇒ ソーシャルゲームなど Node.jsに向いている処理
  8. 8. • CPU負荷の高い処理(CPUCPUCPUCPU Heavy) • 画像など静的コンテンツの処理 ⇒ nginxなどで対応 Node.jsを使わない方がいい処理
  9. 9. • ngCore : DeNAが開発するクロスプラットフォームゲームエン ジン。Node.jsを基幹技術として採用。 • GREE Platform : GREEが提供するサーバーからクライアント まで一貫してJavaScriptベースで開発可能なプラットフォーム。 • LinkedIn : パフォーマンスとスケーラビリティを理由として, 同社のモバイル用バックエンドインフラを Ruby on Rails から Node.js にリプレース。 • アメーバピグ : ピーク時の アクティブユーザが20万人いる にもかかわらず、20台のサーバでのみ運用を行なって いる。 Node.jsの採用例
  10. 10. • Node.js&express&ejsでやります。 • DBはMySQL、ORMはSequelizeでいきます。 今日の方針 Node.js & Express ejs MySQL APサーバ DBサーバ Sequelize ブラウザ HTTP
  11. 11. 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プロジェクトを生成)
  12. 12. 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 で簡単インストール。
  13. 13.  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の設定も忘れずに。
  14. 14. ・ express $ npm install express -g $ express hoge -e (これでhogeフォルダが生成される) 以降hogeフォルダに移動して。 ・ ejs $ npm install ejs ・ mysql $ npm install mysql ・ sequelize $ npm install sequelize npmでパッケージのインストール
  15. 15. expressで生成したフォルダ内のapp.jsを指定して $ node app.js と打ち込む。 「Express server listening on port 3000 in development mode」と出るので、ブラウザのURLに 「localhost:3000」 これでOK。 Expressと表示されれば成功。 早速テスト起動
  16. 16. 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という名の関数にアクセス。
  17. 17. 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を有効にする。
  18. 18. 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にアクセスしたときに実行
  19. 19. 私の場合ファイルを分けず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~テキスト表示~
  20. 20. フォームの入力値を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~フォームデータ取得~
  21. 21. URLパラメータでデータを送る場合。例えば http://localhost:3000/search?word="hoge" なんてとき、サーバ側では app.get('/search', function(req, res){ console.log(req.query.word); }); これで取得できます。簡単でしょ?? 基本的な使い方3~URLパラメータ取得~
  22. 22. IDなんかを取得するのも簡単ですよ~。 例えば「localhost:3000/user/12」で12番のユー ザIDを取得したいときは。 app.get('/user/:id', function(req, res){ var id = req.param('id'); これで12番が取得できました。数字以外にも文 字列なんかも取得できますよ。これをもとに DB検索すればいいですね。 基本的な使い方4~ID取得~
  23. 23. • 「npm install sequelize」でsequelizeをインストールし て下さい。 • MySQLが動くXAMPPなどを用意して下さい。また kagoshimaデータベースとusers テーブルを作成して 下さい。 • 予め以下のフィールドを作成して下さい。  id | int auto_increment primary key name | varchar(32) sex | boolean 今日の本題 ~簡単なDB検索~
  24. 24. • 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名 テーブル名(単数形)
  25. 25. 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
  26. 26. 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にレンダリングするだけ。
  27. 27. <html> <body> <p>ID:<%= id %></p> <p>名前:<%= name %></p> <p>性別:<%= sex %></p> </body> </html> index.ejsの記述 ID : 20 名前 : 野戸 太郎 性別 : 0
  28. 28. • http://localhost:3000/registにアクセスして名 前と性別を登録。(IDは自動割り当て) • http://localhost:3000/user/○○の○○に数 字を入力する。 • 該当するIDの名前と性別が表示される。 使い方
  29. 29. • 第2回鹿児島Node.jsの会勉強会  日本Androidの会鹿児島支部勉強会と併催予 定。講師などは未定。  もし希望があればセッション周りやDB検索の もっと深いところなんか私が担当したいと思い ます。 今後の予定
  30. 30. ご清聴感謝です。 ありがとうございました。

×