Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,211 views

Published on

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

Published in: Technology
  • Be the first to comment

第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 エンジ ン~ 処理系                         速度 [ 秒 ]                            Ruby1.8   123   Ruby1.9   20.8   Python2.5   50.3   Python3.1   66.2   C   1.76   v8-2.1   1.88 Node.js は Google 開発の V8 エンジンを搭載。フィボナッチでは C 言語に迫 るパフォーマンスを見せる。
  7. 7. • WebSocket などを利用したリアルタイム処 理 ⇒  チャットアプリなど • 大量のクライアントが発生する処理 ⇒  ソーシャルゲームなど Node.js に向いている処理
  8. 8. • CPU 負荷の高い処理 (CPU 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. ご清聴感謝です。 ありがとうございました。

×