SlideShare uma empresa Scribd logo
1 de 30
第 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 エンジ
ン~
処理系       
           
   
 速度 [ 秒 ]       
            
    
  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 言語に迫
るパフォーマンスを見せる。
• WebSocket などを利用したリアルタイム処
理
⇒  チャットアプリなど
• 大量のクライアントが発生する処理
⇒  ソーシャルゲームなど
Node.js に向いている処理
• CPU 負荷の高い処理 (CPU 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 検
索のもっと深いところなんか私が担当し
たいと思います。
今後の予定
ご清聴感謝です。
ありがとうございました。

Mais conteúdo relacionado

Mais procurados

カジュアルにMongo dbのbackup機能説明
カジュアルにMongo dbのbackup機能説明カジュアルにMongo dbのbackup機能説明
カジュアルにMongo dbのbackup機能説明Masakazu Matsushita
 
Introduction to MongoDB
Introduction to MongoDBIntroduction to MongoDB
Introduction to MongoDBmoai kids
 
Casual Compression on MongoDB
Casual Compression on MongoDBCasual Compression on MongoDB
Casual Compression on MongoDBmoai kids
 
MongoDBのはじめての運用テキスト
MongoDBのはじめての運用テキストMongoDBのはじめての運用テキスト
MongoDBのはじめての運用テキストAkihiro Kuwano
 
DB tech showcase: 噂のMongoDBその用途は?
DB tech showcase: 噂のMongoDBその用途は?DB tech showcase: 噂のMongoDBその用途は?
DB tech showcase: 噂のMongoDBその用途は?Hiroaki Kubota
 
Db tech showcase2015 how to replicate between clusters
Db tech showcase2015 how to replicate between clustersDb tech showcase2015 how to replicate between clusters
Db tech showcase2015 how to replicate between clustersHiroaki Kubota
 
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!Tetsutaro Watanabe
 
ストリーム処理エンジン「Zero」の開発と運用
ストリーム処理エンジン「Zero」の開発と運用ストリーム処理エンジン「Zero」の開発と運用
ストリーム処理エンジン「Zero」の開発と運用Eiichi Sato
 
MongoDB〜その性質と利用場面〜
MongoDB〜その性質と利用場面〜MongoDB〜その性質と利用場面〜
MongoDB〜その性質と利用場面〜Naruhiko Ogasawara
 
Mongo db勉強会の補足
Mongo db勉強会の補足Mongo db勉強会の補足
Mongo db勉強会の補足CROOZ, inc.
 
MongoDBざっくり解説
MongoDBざっくり解説MongoDBざっくり解説
MongoDBざっくり解説知教 本間
 
第1回 一撃サーバー構築シェルスクリプト勉強会
第1回 一撃サーバー構築シェルスクリプト勉強会第1回 一撃サーバー構築シェルスクリプト勉強会
第1回 一撃サーバー構築シェルスクリプト勉強会Yasutaka Hamada
 
click するとどうなるのか
click するとどうなるのかclick するとどうなるのか
click するとどうなるのかAtsushi Yasuda
 
WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)stmkza
 
Playで作るwebsocketサーバ
Playで作るwebsocketサーバPlayで作るwebsocketサーバ
Playで作るwebsocketサーバke-m kamekoopa
 
MySQL Casual Talks Vol.3 LT
MySQL Casual Talks Vol.3 LTMySQL Casual Talks Vol.3 LT
MySQL Casual Talks Vol.3 LTTomohiro Ikeda
 
HTTPと Webクローリングについて
HTTPと WebクローリングについてHTTPと Webクローリングについて
HTTPと WebクローリングについてTomoya Kawanishi
 

Mais procurados (20)

カジュアルにMongo dbのbackup機能説明
カジュアルにMongo dbのbackup機能説明カジュアルにMongo dbのbackup機能説明
カジュアルにMongo dbのbackup機能説明
 
Introduction to MongoDB
Introduction to MongoDBIntroduction to MongoDB
Introduction to MongoDB
 
Casual Compression on MongoDB
Casual Compression on MongoDBCasual Compression on MongoDB
Casual Compression on MongoDB
 
MongoDBのはじめての運用テキスト
MongoDBのはじめての運用テキストMongoDBのはじめての運用テキスト
MongoDBのはじめての運用テキスト
 
DB tech showcase: 噂のMongoDBその用途は?
DB tech showcase: 噂のMongoDBその用途は?DB tech showcase: 噂のMongoDBその用途は?
DB tech showcase: 噂のMongoDBその用途は?
 
Db tech showcase2015 how to replicate between clusters
Db tech showcase2015 how to replicate between clustersDb tech showcase2015 how to replicate between clusters
Db tech showcase2015 how to replicate between clusters
 
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
 
ストリーム処理エンジン「Zero」の開発と運用
ストリーム処理エンジン「Zero」の開発と運用ストリーム処理エンジン「Zero」の開発と運用
ストリーム処理エンジン「Zero」の開発と運用
 
MongoDB〜その性質と利用場面〜
MongoDB〜その性質と利用場面〜MongoDB〜その性質と利用場面〜
MongoDB〜その性質と利用場面〜
 
Mongo db勉強会の補足
Mongo db勉強会の補足Mongo db勉強会の補足
Mongo db勉強会の補足
 
MongoDBざっくり解説
MongoDBざっくり解説MongoDBざっくり解説
MongoDBざっくり解説
 
第1回 一撃サーバー構築シェルスクリプト勉強会
第1回 一撃サーバー構築シェルスクリプト勉強会第1回 一撃サーバー構築シェルスクリプト勉強会
第1回 一撃サーバー構築シェルスクリプト勉強会
 
click するとどうなるのか
click するとどうなるのかclick するとどうなるのか
click するとどうなるのか
 
WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)
 
Playで作るwebsocketサーバ
Playで作るwebsocketサーバPlayで作るwebsocketサーバ
Playで作るwebsocketサーバ
 
MongoDB
MongoDBMongoDB
MongoDB
 
Zabbix study5lt
Zabbix study5ltZabbix study5lt
Zabbix study5lt
 
MySQL Casual Talks Vol.3 LT
MySQL Casual Talks Vol.3 LTMySQL Casual Talks Vol.3 LT
MySQL Casual Talks Vol.3 LT
 
NanoStrand
NanoStrandNanoStrand
NanoStrand
 
HTTPと Webクローリングについて
HTTPと WebクローリングについてHTTPと Webクローリングについて
HTTPと Webクローリングについて
 

Destaque

技術トレンディセミナー JavaScriptフレームワーク活用
技術トレンディセミナー JavaScriptフレームワーク活用技術トレンディセミナー JavaScriptフレームワーク活用
技術トレンディセミナー JavaScriptフレームワーク活用terada
 
JavaScript時代のJava #kansumiB7 #kansumi
JavaScript時代のJava #kansumiB7 #kansumiJavaScript時代のJava #kansumiB7 #kansumi
JavaScript時代のJava #kansumiB7 #kansumiYusuke Yamamoto
 
再入門!RESTとSpringMVC
再入門!RESTとSpringMVC再入門!RESTとSpringMVC
再入門!RESTとSpringMVCterahide
 
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!Jun-ichi Sakamoto
 
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部Masahiro Wakame
 
初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScriptYuta Matsumura
 

Destaque (8)

技術トレンディセミナー JavaScriptフレームワーク活用
技術トレンディセミナー JavaScriptフレームワーク活用技術トレンディセミナー JavaScriptフレームワーク活用
技術トレンディセミナー JavaScriptフレームワーク活用
 
jQuery 対応ライブラリと TypeScript
jQuery 対応ライブラリと TypeScriptjQuery 対応ライブラリと TypeScript
jQuery 対応ライブラリと TypeScript
 
JavaScript時代のJava #kansumiB7 #kansumi
JavaScript時代のJava #kansumiB7 #kansumiJavaScript時代のJava #kansumiB7 #kansumi
JavaScript時代のJava #kansumiB7 #kansumi
 
再入門!RESTとSpringMVC
再入門!RESTとSpringMVC再入門!RESTとSpringMVC
再入門!RESTとSpringMVC
 
Om
OmOm
Om
 
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
 
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
 
初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript初心者 × AngularJS × TypeScript
初心者 × AngularJS × TypeScript
 

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

13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejsTakayoshi Tanaka
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...Naoya Ito
 
大阪Node学園八時限目 「expressで作るWebアプリ」
大阪Node学園八時限目 「expressで作るWebアプリ」大阪Node学園八時限目 「expressで作るWebアプリ」
大阪Node学園八時限目 「expressで作るWebアプリ」Shunsuke Watanabe
 
WebRTC meetup Tokyo 1
WebRTC meetup  Tokyo 1WebRTC meetup  Tokyo 1
WebRTC meetup Tokyo 1mganeko
 
Node.js Tutorial at Hiroshima
Node.js Tutorial at HiroshimaNode.js Tutorial at Hiroshima
Node.js Tutorial at HiroshimaYoshihiro Iwanaga
 
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作るnode+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作るKiyoshi SATOH
 
2013OSC関西@京都_CloudStackとCloudFoundaryがまるわかり!
2013OSC関西@京都_CloudStackとCloudFoundaryがまるわかり!2013OSC関西@京都_CloudStackとCloudFoundaryがまるわかり!
2013OSC関西@京都_CloudStackとCloudFoundaryがまるわかり!Midori Oge
 
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用純生 野田
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門miso- soup3
 
Tremaで構築!中小企業の社内LAN #Tremaday 120419
Tremaで構築!中小企業の社内LAN #Tremaday 120419Tremaで構築!中小企業の社内LAN #Tremaday 120419
Tremaで構築!中小企業の社内LAN #Tremaday 120419エイシュン コンドウ
 
Erlangご紹介 websocket編
Erlangご紹介 websocket編Erlangご紹介 websocket編
Erlangご紹介 websocket編Masatoshi Itoh
 
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみようSlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみようShigeo Ueda
 
社内向けTech Talk資料~Fluentdの基本紹介~
社内向けTech Talk資料~Fluentdの基本紹介~ 社内向けTech Talk資料~Fluentdの基本紹介~
社内向けTech Talk資料~Fluentdの基本紹介~ Daisuke Ikeda
 

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

13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
 
大阪Node学園八時限目 「expressで作るWebアプリ」
大阪Node学園八時限目 「expressで作るWebアプリ」大阪Node学園八時限目 「expressで作るWebアプリ」
大阪Node学園八時限目 「expressで作るWebアプリ」
 
WebRTC meetup Tokyo 1
WebRTC meetup  Tokyo 1WebRTC meetup  Tokyo 1
WebRTC meetup Tokyo 1
 
Node.js Tutorial at Hiroshima
Node.js Tutorial at HiroshimaNode.js Tutorial at Hiroshima
Node.js Tutorial at Hiroshima
 
node+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作るnode+socket.io+enchant.jsでチャットゲーを作る
node+socket.io+enchant.jsでチャットゲーを作る
 
densan2014-late01
densan2014-late01densan2014-late01
densan2014-late01
 
2013OSC関西@京都_CloudStackとCloudFoundaryがまるわかり!
2013OSC関西@京都_CloudStackとCloudFoundaryがまるわかり!2013OSC関西@京都_CloudStackとCloudFoundaryがまるわかり!
2013OSC関西@京都_CloudStackとCloudFoundaryがまるわかり!
 
UnicastWS vol.1
UnicastWS vol.1UnicastWS vol.1
UnicastWS vol.1
 
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用
YAPC::Kansai 2017 - macOSネイティブアプリ作成におけるPerlの活用
 
つぶLT20121215
つぶLT20121215つぶLT20121215
つぶLT20121215
 
後期02
後期02後期02
後期02
 
web server
web serverweb server
web server
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
Tremaで構築!中小企業の社内LAN #Tremaday 120419
Tremaで構築!中小企業の社内LAN #Tremaday 120419Tremaで構築!中小企業の社内LAN #Tremaday 120419
Tremaで構築!中小企業の社内LAN #Tremaday 120419
 
Erlangご紹介 websocket編
Erlangご紹介 websocket編Erlangご紹介 websocket編
Erlangご紹介 websocket編
 
20120721_ishkawa
20120721_ishkawa20120721_ishkawa
20120721_ishkawa
 
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみようSlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう
SlackのIncomingWebhooksとOutgoingWebhooksを使って電子工作と連携させてみよう
 
社内向けTech Talk資料~Fluentdの基本紹介~
社内向けTech Talk資料~Fluentdの基本紹介~ 社内向けTech Talk資料~Fluentdの基本紹介~
社内向けTech Talk資料~Fluentdの基本紹介~
 
Ansible2.0と実用例
Ansible2.0と実用例Ansible2.0と実用例
Ansible2.0と実用例
 

Mais de Koichi Uchimura

痛すぽ事業計画書
痛すぽ事業計画書痛すぽ事業計画書
痛すぽ事業計画書Koichi Uchimura
 
第7回鹿児島Node.jsの会勉強会資料
第7回鹿児島Node.jsの会勉強会資料第7回鹿児島Node.jsの会勉強会資料
第7回鹿児島Node.jsの会勉強会資料Koichi Uchimura
 
痛すぽ_プレゼン資料
痛すぽ_プレゼン資料痛すぽ_プレゼン資料
痛すぽ_プレゼン資料Koichi Uchimura
 
第6回鹿児島node.jsの会2資料_内村
第6回鹿児島node.jsの会2資料_内村第6回鹿児島node.jsの会2資料_内村
第6回鹿児島node.jsの会2資料_内村Koichi Uchimura
 
第6回鹿児島node.jsの会資料_内村
第6回鹿児島node.jsの会資料_内村第6回鹿児島node.jsの会資料_内村
第6回鹿児島node.jsの会資料_内村Koichi Uchimura
 
第5回鹿児島node.jsの会資料_内村
第5回鹿児島node.jsの会資料_内村第5回鹿児島node.jsの会資料_内村
第5回鹿児島node.jsの会資料_内村Koichi Uchimura
 
第4回鹿児島node.jsの会資料_内村
第4回鹿児島node.jsの会資料_内村第4回鹿児島node.jsの会資料_内村
第4回鹿児島node.jsの会資料_内村Koichi Uchimura
 
第3回鹿児島node.jsの会資料_内村
第3回鹿児島node.jsの会資料_内村第3回鹿児島node.jsの会資料_内村
第3回鹿児島node.jsの会資料_内村Koichi Uchimura
 
第2回鹿児島node.jsの会資料_内村
第2回鹿児島node.jsの会資料_内村第2回鹿児島node.jsの会資料_内村
第2回鹿児島node.jsの会資料_内村Koichi Uchimura
 
第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村Koichi Uchimura
 

Mais de Koichi Uchimura (11)

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

Último

[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 

Último (9)

[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 

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

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