はじめに
本記事では、Webアプリを作るための基礎知識を習得することを目的とした学習記事です。主に、
- windows上でExcelVBA等、プログラミングの基礎知識は持っているものの
- Linuxなどサーバは全く扱ったことがなくバックエンドサーバが全くのブラックボックスで
- Webブラウザの挙動がよくわからず、何を使ってどこをどう見れば理解していることになるのか不安
という人を対象にしています。
まず、Webサーバを実装してHTTP通信の実体を確認していきます。
開発環境の構築
Windows PCにWebサーバを導入します。Webサーバを作るので処理系をインストール。
nodejs
nodejsはJavascriptの処理系です。
- nodejs公式からwindows用のパッケージをダウンロード
- 展開して実行
- コマンドプロンプトを開いてnodeと入力
- 終了は.exit
Visutal Studio Code(VSCode)
VSCodeは各種プログラミング言語の統合開発環境です。便利なアドインがたくさんあります。オススメのアドインは次の通りです。
- Bracket Pair Colorizer2
- Debugger for Chrome
- (Emacs Keymap)
- Git graph
- indent-rainbow
- Japanese-language-pack
nodejsによるHTTP通信
まずは公式ドキュメントから始めましょう。書籍を買うのはその後です(基本)。
ポートlisten
コンピュータには、通信するための資源として「通信ポート」がOSから提供されています。公式のサンプルコードは3000番を使用しています。
(1) VSCodeで新しいワークスペースを開く; ファイル>名前を付けてワークスペースを保存> httpserverで保存
(2) ファイルを編集する; ファイル>新規ファイル
consthttp=require('http');consthostname='127.0.0.1';constport=3000;constserver=http.createServer((req,res)=>{res.statusCode=200;// HTTPステータスコード(1)res.setHeader('Content-Type','text/plain');// MIME-type(2)res.end('Hello World');});server.listen(port,hostname,()=>{console.log(`Server running at http://${hostname}:${port}/`);});(3) 保存する; ファイル>名前を付けて保存
(4) nodejsプログラムの実行; 実行>デバッグの開始>Node.js
(5) WebブラウザからWebサーバへアクセス; Chromeを起動>http://localhost:3000と入力> Hellow worldと表示される
(6) nodejsプログラムの停止; 右端の四角を押下
(7) WebブラウザからWebサーバへアクセスして拒否される; Chromeに切り替えてリロード > 
サーバサイドデバッグ
nodejsプログラムには、VSCode上で実行を一時停止するブレークポイントが設定できます。
(1) ブレークポイントの設定
(2) Webブラウザでアクセスしたブレークポイントで停止
(3) ブレークポイントからステップ実行/再開
クライアントサイドデバッグ
Webブラウザは二種類の通信をしています。Webサーバに要求したリクエスト通信と、応答するレスポンス通信です。WebブラウザChromeでは メニューボタン > その他メニュー > デベロッパーツール > Network を選んでおきます。
(1) HTTPリクエストの実体確認; Webブラウザにhttp://localhost:3000と入力 > リクエスト通信(localhost)を選択 > Headersタブを選択 > General > Request URL に注目
- Headers > Response Headers > view source
- Headers > Request Headers > view source
このview sourceのアンカーをクリックすると、パース前の、通信内容が確認できます。
(2) HTTPレスポンスの実体確認; Responseタブを選択
(3) HTTPステータスコード
- おなじみの200, 404, 500などあります。詳しくはRFCを参照のこと
- Webサーバに接続に成功して、レスポンス通信が受け取れたら200と思ってください
- 接続に成功しても、サーバ側でエラーが生じた場合は400番台や500番台のステータスコードが返ってきます
- 接続に失敗したら、そもそもHTTP通信が始められなかったということです
実習: Webサーバ実装
サーバサイドのnodejsプログラムを順次書き換えていくことで、HTTPの通信実態を理解します。
HTTPヘッダにおけるMIME-typeとHTTPボディの関係とWebブラウザの解釈
MIME-type: text/plain
HTTP通信は、基本テキストデータを送受信しています。
(1) res.write()
consthttp=require('http');consthostname='127.0.0.1';constport=3000;constserver=http.createServer((req,res)=>{res.statusCode=200;// HTTPステータスコード(1)res.setHeader('Content-Type','text/plain');// MIME-type(2)res.write('Hello World');res.end();});server.listen(port,hostname,()=>{console.log(`Server running at http://${hostname}:${port}/`);});(2) 繰り返し
consthttp=require('http');consthostname='127.0.0.1';constport=3000;constserver=http.createServer((req,res)=>{res.statusCode=200;// HTTPステータスコード(1)res.setHeader('Content-Type','text/plain');// MIME-type(2)for(vari=0;i<5;i++)res.write('Hello World');res.end();});server.listen(port,hostname,()=>{console.log(`Server running at http://${hostname}:${port}/`);});(3) writeしたからといって直ちに通信しているわけではない(重要)
- res.write行にブレークポイントを仕掛けておく
- http://localhost:3000/でアクセス
- ブレークポイントで止まったら、ステップ実行
- res.end()で初めてレスポンス通信が開始
MIME-type: text/html
(1) テキストデータがhtmlの場合、Webブラウザは構造化テキストを解釈してレンダリング
(2) HTTPヘッダでMIME-typeがtext/plainなのにHTTPボディがHTMLなら...?
HTTPレスポンスにファイルシステムから読み込んだ内容で通信
(1) サーバサイドでのモジュール組込方法(1); require
(2) 非同期アクセスなのでエラー
(3) ファイルシステムへ同期アクセス
まとめ(講座一時間)
- 生粋のwindowsプログラマ向けにJavascriptでWebサーバ実装
- nodejs/VSCodeをインストール
- ポートlisten
- サーバサイドデバッグ
- クライアントサイドデバッグ
- 改修実習では、自力でnodejsサーバプログラムをアイデアを出して改修可能になった
- MIME-type: text/plain
- MIME-type: text/html
- HTTPヘッダにおけるMIME-typeとHTTPボディの関係
- レスポンス通信は直ちに発生するわけではない
- サーバサイドでのモジュール組込方法(1); require
- ファイルシステムへのアクセス(非同期/同期)
- 次回の内容はHTTP/GET, POSTでのパラメータ解析です