Download to read offline
More Related Content
![[MW01] ご注文は Linux + Docker ですか？ Windows だけじゃない App Service を使い切る](https://cdn.slidesharecdn.com/ss_thumbnails/mw01-170614050024-thumbnail.jpg?width=640&height=640&fit=bounds)
![[MW11] OSS on Azure で構築する ウェブアプリケーション](https://cdn.slidesharecdn.com/ss_thumbnails/mw11-170616020924-thumbnail.jpg?width=640&height=640&fit=bounds)
![[MR09] デスクトップ アプリをストアから配布するための A to Z](https://cdn.slidesharecdn.com/ss_thumbnails/mr09-170614045401-thumbnail.jpg?width=640&height=640&fit=bounds)
後期講座05
- 1.
- 2.
- 3. 今回の内容 今回は、 Node.js を用いてWeb アプリケーションを作成します。 Express.js という Web Application Framework (FW) を使います。 Framework とは、開発時に決まった枠組みに従ってコーディングすることで、 開発効率を向上させるためのツールです。 似たようなものにライブラリがありますが、呼び出すか、呼び出されるか…と いう点で異なります。 ライブラリは自分で書いたコードから呼び出されるものですが、フレームワー クは自分で書いたコードを読み込んで実行するものです。
- 4. Express.js Node.js で Webアプリケーション開発をする際によく用いられる FW です。 npm からインストールできます。 npm install express 今回は、このようにインストールして下さい (理由は後述) npm install –g express
- 5. 導入 npm install コマンドを実行する際に–g オプションを付加すると インストールしたモジュールがコマンドを提供している場合に、コマンドプロ ンプト (またはターミナル) から直接呼び出せるようになります。 ※ g は global の略で、グローバルへインストールするという意味になりま す。 express コマンドを使って、次の文を入力・実行して下さい。 express –sH Web アプリケーションの雛形が作成されます！
- 6. 使い方 さっそく、雛形を実行しましょう。 node app.js このように表示されたら、正常に実行されています。 Express serverlistening on port 3000 ブラウザで http://localhost:3000/ を開いてみてください。
- 7.
- 8. チュートリアル – View テンプレート言語を用いて動的に生成されるHTML の雛形 (テンプレート) を 記述します。 テンプレートはテンプレートエンジンによって、 HTML に変換されます。 今回は、 Twitter でも使われている Hogan.js というテンプレートエンジンを使 います。テンプレート言語は Mustache です。 {{title}} このように {{, }} で囲まれた箇所が動的に置換されます。
- 9. チュートリアル - View views/index.hjsを開いて、 {{title}} の箇所を増やしてみましょう。 変更が反映されない場合は、サーバを再起動します。
- 10. チュートリアル – Routing Express.jsは、柔軟なルーティングを提供します。 http://localhost:3000/ と http://localhost:3000/users/ を開いた時に帰ってくる結果 (HTML) は異なります。 この URL へアクセスされた場合はこの処理をする… に記述できます。 といったことがシンプル
- 11. チュートリアル – Routing routes/index.jsを開いて res.render('index', { title: 'Express' }); この箇所を res.render('index', { title: „My HomePage' }); このように変更してみましょう。
- 12. チュートリアル – Session Webは基本的に Stateless (ステートレス) です。 状態を持たないため、複数のリクエストを全く関係のない別々のものとして扱 います。 しかし、会員専用サイトや、ネットショップ (EC サイト) などを作る上では、 Stateful (ステートフル) である必要があります。 状態の保持して、前回のリクエストと今回のリクエストが同じユーザからのも のであることを判別しなければいけません。 そこで使われるのが Session です。
- 13. チュートリアル – Session Sessionを実現するためによく使われる技術には Cookie があります。 ※ここで言う Cookie とは、ブラウザが食べるものです。 Cookie は小さな文字列のデータをブラウザに保持させて、リクエストの度にリ クエストヘッダ (Cookie) に含めてサーバへ送ります。 サーバ側では、 Cookie ヘッダを参照することで、どのユーザからのリクエス トであるか判別します。 と、難しい話をしましたが、 Express.js を使うとこれらの内部の細かい処理を 知らなくても、状態を保持するステートフルな Web アプリケーションが書け ます。
- 14. チュートリアル – Session app.jsを開いて app.get('/users', user.list); の次の行 (35 行目付近) に app.get("/users/:name", user.one); これを追記します。 routes/user.js を開いて res.send(“respond with a resource”); の前の行に if (req.session.name) { res.send("I know you! You are " + req.session.name + "."); return; } これを追記します。
- 15. チュートリアル - Session 最後に、routes/user.js の行末に exports.one = function(req, res){ req.session.name = req.params.name; res.send("Your name is " + req.params.name + "."); }; これを追記して終わりです。 サーバを再起動して、 http://localhost:3000/users/ http://localhost:3000/users/test/ http://localhost:3000/users/ の順で開いて、挙動を確認してみて下さい。
- 16. 応用 実際に Web アプリケーションでSession を扱う際は、 DB に Session 情報を入れる などして、データの永続化 (アプリケーションが終了してもデータを保持し続ける こと) を行う必要があります。 SQLite を使うと、別途 DB サーバを起動する必要が無いため簡単に導入できます。 導入 npm install connect-sqlite3 --save --save オプションを付加することで、 package.json にモジュールの依存関係が保 存されます。 次回から npm install ですべてのモジュールをインストールできるようになります。
- 17. 応用 app.js を開きます。 上部でモジュールを読み込んでいる部分 (requireを呼び出している部分) に 1 行追 記します。 var SQLiteStore = require('connect-sqlite3')(express); app.use(express.session()); この箇所を app.use(express.session({ store: new SQLiteStore })); このように書き換えます。
- 18. 応用 サーバを再起動しても名前を覚えていたら、成功です！ Express はシンプルですが強力な FWで、使いこなすと実用的な Web アプリ ケーションを開発することができます。 今回のサンプルコードはこちらです。 https://github.com/ww24/densan.info-networkcourse/tree/master/nodejs/05