はじめに

本記事は「プロになるためのWeb技術入門なぜあなたはWebシステムを開発できないのか」を読み、個人的に気になった部分をメモしたものです。

Webアプリケーションとは

インターネット上で利用できるアプリケーションのこと。インターネットに繋がったPCがあればいつでも利用可能。
サーバ上で処理が行われ、HTMLで画面に表示される。Webブラウザ上に表示され操作も行える。
デスクトップアプリケーションと異なり、インストールが不要。

アプリの具体例

デスクトップアプリ	Webアプリ
Word・Excel	Amazon・Youtube

Webの発展

インターネットとは

世界中のコンピュータを相互に接続して、互いに通信できるようにしたネットワークのこと。
インターネットを使用することで、メール・画像・動画などを遠く離れた場所にも送ることができる。

WWW(ワールドワイドウェブ)

インターネット上に公開されているファイルをリンクさせる仕組みのこと。

インターネット上のHTMLファイルなどは「Hyper Link(ハイパーリンク)」によって、瞬時に相互参照できる。これにより、ネットワーク上で資料の閲覧を簡単に行えるようになった。

Webサーバ・Webクライアント

Webアプリケーションは「Webサーバ」と「Webクライアント」によって実現されている。

Webサーバにネットワークへ公開するHTML形式のファイルを蓄積する。
WebクライアントがWebサーバに対して要求「リクエスト」を行うと、Webサーバが応答「レスポンス」を返す。
こうすることでWebサーバに蓄積されていたファイルなどを、Webクライアントが取得・閲覧することができる。

Webサーバ・Webクライアントの具体例

Webサーバ	Webクライアント
Apache・IIS	GoogleChrome・Safari

URLとは

インターネット上のコンテンツを一意に指定するための仕組み

Webサーバから欲しいコンテンツを取得するためには、Webクライアントは具体的な要求を行わなければならない。
URLによってコンテンツを一意に指定できるため、欲しいコンテンツを取得できる。
URLは「スキーム」「ホスト名」「パス名」の３つで構成されている。

スキーム
- リソースを取得するための方法を表す。
- 例)http、https
  　　
ホスト名
- リソースが存在するホスト(コンピュータ)名を表す。
- 例)www.amazon.co.jp
パス名
- ホスト上のリソースの位置を表す。
- 例)kindle-dbs/〜

HTTP

通信プロトコルの１つ。WebサーバとWebクライアントが通信を行い、情報をやり取りするための約束事のことを指す。

HTTPプロトコルの特徴

HTMLの転送に適している。
シンプルで実装が簡単。
拡張性がある。

CGI

Webサーバがクライアントからリクエストを受け取り、Webサーバ上のプログラムに渡す。
プログラムがリクエストを元にHTMLを作成し、Webサーバに返す。そのHTMLをクライアントに返すことで、あらかじめ用意されていて変化のないコンテンツ(静的コンテンツ)だけでなく、条件によって異なるコンテンツ(動的コンテンツ)を生成できるようになった。
また、ブラウザからの入力に応じた処理を行うアプリケーションの作成も可能になった。

CGIにより、「掲示板サイト」「ショッピングサイト」などが実現可能になりWebアプリケーションが普及した。

Webアプリケーションフレームワーク

アプリケーションを効率的に開発するための土台のようなもの。

HTTPについて

HTTPとは通信プロトコルの一種。WebサーバとWebクライアントが通信を行い、情報をやり取りするための約束事のことを指す。「情報の伝達方法」「情報の意味付け」を規定している。

IPアドレス

インターネットに接続されたコンピュータに割り当てられている数値。インターネット上の住所のようなもの。
IPアドレスを使用して、インターネット上にある通信相手のコンピュータを識別する。

例）192.168.1.0

TCP/IP

IPアドレスによって特定したコンピュータに、情報を届ける際に使用されるプロトコル。
ブラウザから受け取った情報をパケットという単位に分割して送信する。受信側で受け取ったパケットを復元してサーバなどに渡す。
パケットに分割して送信するため、仮に送信に失敗した場合、対象のパケットだけをもう一度送信してくれる。
こうすることで、情報が確実に受信元に送信される。

情報を分割して送信することで、送信に失敗しても分割したパケットだけ送信し直せばいいため効率化につながる。

グローバルIPアドレス・プライベートIPアドレス

グローバルIPアドレス

インターネット上で唯一のIPアドレスのこと。

全世界で使用されるアドレスのため、重複しているIPアドレスは使用できない。

プライベートIPアドレス

特定の範囲のネットワーク内で割り当てられるIPアドレスのこと。

インターネットを利用しない環境（家庭内やオフィス）でも、ネットワークを構築するためには各機器にIPアドレスが必要になる。
このようなインターネットの繋がらないネットワーク内 （プライベートネットワーク） の機器には他で使われているIPアドレスを使用しても良い。

DNS

ドメイン名をIPアドレスに変換する仕組み。

ドメイン名とIPアドレスの対応表を持ったDNSサーバをインターネット上に配置する。

DNSサーバに対してWebクライアントから問い合わせを行うことで、ドメイン名に紐付けられたIPアドレスを返してもらえる。

DNSサーバの構造

DNSはドメイン名に対応したDNSサーバを複数用意して、情報を分散して管理している。
各サーバは階層に分かれていて、一番上にあるDNSサーバは 「ルートサーバ」 と呼ばれる。その下に 「トップレベルドメイン」 という『jp,com,net,org』などの最上位ドメインが登録されているDNSサーバがある。
ルートサーバから順に下位サーバへやり取りが行われ、最終的にドメイン名と紐づくIPアドレスが返される。

ポート番号

プログラムを識別するための番号。
IPアドレスが「住所」だとすれば、ポート番号は「部屋番号」となる。
どのコンピュータと通信するかはIPアドレスで識別され、該当するコンピュータ内のどのプログラムを使用するかはポート番号によって識別される。

GETリクエスト・POSTリクエスト

Webアプリケーションに情報を渡す方法として、 GETとPOST の2種類を使用したやり方がある。

GETリクエスト

URLの後ろに「？」が続き、その部分を クエリ文字列 と呼ぶ。
クエリ文字列は「パラメータ=値」で表し、Webサーバに送信される。
URLにパラメータが含まれるため、情報が、第三者に漏洩する危険性が高い。
URLの長さに制限があるWebサーバ・クライアントの場合、多くの情報を扱えない。

POSTリクエスト

GETリクエストと異なり、クエリ文字列が無い。
「パラメータ＝値」は、URLではなくメッセージボディに含まれる。
URLにパラメータが含まれないため、漏洩の危険性が低くなる。
メッセージボディは文字数制限が無いので、多くの情報を扱える。

GET・POSTの使い分け

パラメータを保存(ブックマークなど)したり、人と共有したい場合はGETを使用する。
機密情報、大量の情報を扱う場合はPOSTを使用する。

リダイレクト

はじめに要求したURLとは異なるURLに誘導すること。

ステートフル・ステートレス

ステートフル

以前の状態を保持する。
- 前回の状態を内部で保持して、処理などに反映する。
- 内部の状態に左右されるため、同じ入力に対して毎回同じ出力が行われるとは限らない。
FTPやSMTPが該当する。

ステートレス

以前の状態を保持しない。
- ステートフルと異なり、内部に状態を保持せずに入力から出力を決める。
- 内部の状態に左右されないため、入力に対して毎回同じ出力が行われる。
アクセスのための認証が不要かつ、実装が簡単。
HTTPが該当する。

Cookie(クッキー)

Webブラウザに状態を持たせる技術。
ユーザが入力した情報などを、Webブラウザに保存することでログインの手間を省けたり、ECサイト利用時の利便性向上にもつながる。

【Cookieの問題点】

セキュリティ面
CookieはHTTPのリクエストヘッダやレスポンスヘッダに含まれる。
そのため、ツールなどを使用すれば覗き見することが可能。

個人情報や金銭に関わる情報も漏洩する危険性がある。

Session（セッション）

安全に多くの情報を保持するために発案された仕組み。

セッションIDと呼ばれる一意な識別子を使用して、やり取りを行う。
セッションIDはWebサーバが発行し、Cookieに格納してWebクライアント・サーバ間で受け渡しすることが可能。
以降はCookieに格納されたIDを確認して状態を復元したりする。
CookieにセッションIDのみを格納すればいいため、情報量の制限がなく安全性も高まる。

Webアプリの構成要素

Webアプリケーションは、Webサーバ・アプリケーションサーバ（APサーバ）・データベースサーバ（DBサーバ） の3種類のサーバで構成される。
このような構成を 「三層構成」 と呼ぶ。

サーバを機能別に分けることにより、サーバの増設や処理の分散がしやすくなり、柔軟性の高いシステム構成が実現できる。また、障害が発生時のリスクも分散できる。

各サーバの役割

Webサーバ

静的コンテンツのみで構成されるページクライアントに返す。
クライアントからのリクエストをすべて引き受け、リクエストの内容によって処理すべきAPサーバに転送する。
APサーバで処理された動的コンテンツもクライアントに返す。

APサーバ

動的コンテンツを生成して、Webサーバに返す。
DBを扱う必要のあるリクエストを受け取った場合は、DBサーバと連携する。
セッション管理機能・トランザクション管理機能なども提供する。

DBサーバ

コンピュータ上で扱うデータを一元的に保存し、管理する。
保存したデータには、生成・読み取り・更新・削除 の操作を行うことができる。この4つの操作をあわせて 「CRUD」 と呼ぶ。
操作を行ったデータはAPサーバに返す。
｢SQL｣ を使用することで様々な条件を指定して、操作することも可能。

操作名	英字表記	操作内容
生成	Create	新しい情報をDBに登録する
読み取り	Read	登録されている情報を取得する
更新	Update	登録されている情報を更新する
削除	Delete	登録されている情報を削除する

効率的にアプリを開発する仕組み

フォワードとは

ブラウザからのリクエストを、サーバの内部だけで遷移処理する。
そのため、リダイレクトと異なり一度のHTTPリクエストで遷移することが可能で、応答速度が速い。

リダイレクト の場合は、サーバがブラウザに対してURLのリクエストを指示するため、HTTPリクエストが複数回発生する。

リクエストスコープとは

フォワード元とフォワード先の間で情報を共有する仕組み。情報の有効範囲の１つ。
画面遷移の前後で引き継ぐ情報を受け渡しできる。

クライアントからリクエストが届き、サーバがレスポンスを返すまでの間に有効。リクエスト処理が終了すると保持していた情報は消える。

セッションタイムアウト

最終アクセスから一定時間が経ったセッション情報を自動的に削除する機能。

セッションはアクセスが続く限りサーバ側で保持されるため、セッションが増えるとメモリ不足に陥る。

セッションスコープとリクエストスコープの違い

セッションスコープ

ユーザ情報の保持のために使われる
有効範囲は、セッション開始から終了まで又はタイムアウトまで
開始と終了はWebアプリ側で制御するため、終了を忘れるとタイムアウトまで情報が保持される。

リクエストスコープ

画面遷移前後での情報保持のために使われる
有効範囲は、リクエストを受けてからレスポンスを返すまで
開始と終了はAPサーバが制御し、レスポンスを返すと情報は削除される。

アーキテクチャ

ソフトウェアを設計する際の、設計方式のこと。

Webアプリケーションのアーキテクチャには「MVCモデル」がある。　　　

MVCモデル

アプリケーションを 「モデル(Model)」「View(ビュー)」「コントローラ(Controller)」 の3つの役割に分けて作る方式のこと。

モデル(Model)の役割

アプリケーションの「処理」部分とそれに関する情報の保持を担当する。

ビュー(View)の役割

処理結果の画面表示を担当する。
モデルからの処理結果を元に、ユーザが見やすいよう画面を生成する。

コントローラ(Controller)の役割

画面からの情報の入力、モデル・ビューの呼び出しを担当する。
全体の流れを制御する役割がある。

Webアプリにおけるレイヤパターン

「レイヤ」とは「階層」のこと。
レイヤパターンとはシステムを階層化して、上位レイヤ・下位レイヤのように分け、上位レイヤが下位レイヤの機能を利用するようにする。
このように分けることで、各レイヤの責務が明確になる。
各レイヤは依存する直接の下位レイヤ以外を知る必要がない。

Webアプリケーションにレイヤパターンを適用する場合、下記3つのパターンに分けられることが一般的である。

プレゼンテーション層

ユーザとのインタフェースを担当する。
ブラウザからの入力を受け取り、下位レイヤにあたるビジネスロジック層に渡す。
処理結果を表示したり、画面遷移を制御する。

ビジネスロジック層

アプリケーションが実現すべき処理を実行する。
プレゼンテーション層から受け取った情報をもとに処理を行い、プレゼンテーション層に返す。
データベースを扱う必要がある場合、下位レイヤのデータアクセス層とも連携する。

データアクセス層

ビジネスロジック層とデータベースの仲介を担当する。
データベースにアクセスする手順は複雑だが、複雑な処理を意識せずにデータベースを扱うことができるようにする役割をもつ。

フレームワークを使用するメリット・デメリット

メリット

設計・開発工数の削減
- 先人が考え出した設計を再利用できるため。
- 実装についても、共通的な部分は作成されているため、コードを新規作成しなくて良い。
品質の向上
- 既にある設計等を利用することで、人的ミスを減らせる。
- フレームワーク自体も常に機能改善が行われているため、高い品質が保たれている。
テスト工程の削減
- 上記で述べたように、新規作成するコードが減るため、その分のテストを行わなくても良い。
- フレームワークも品質が保たれているため、フレームワークに対するテストも行わなくても良い。

デメリット

学習コストの増大
- 当然だがフレームワークの学習が必要になり、フレームワークに合わせた設計・テスト手法を確立する必要がある。
- 学んだフレームワークが廃れる可能性もある。
設計の自由度の低下
- フレームワークには想定利用範囲が決まっているため、想定を超えた範囲を実現しようとすると非常に難易度が高くなる。
- 自由度と引き換えに生産性・品質を獲得していると意識する。
長期的な技術力の低下
- フレームワークの内部はブラックスボックス化しており、内部で何が起こっているか確認できない。
- フレームワークを使用することで、裏側の技術を習得できない恐れがある。

情報セキュリティについて

情報セキュリティで守るべきことは下記の3つである。

情報の流出を防ぐこと(機密性)
- 情報流出は最も問題になりやすいセキュリティリスク。
- 流出被害に遭った利用者だけでなく、システム運営を行う企業にも損害が発生する。
情報の改ざんを防ぐこと(完全性)
- 管理されている情報が改ざんされると、利用者・企業の両方に損害が発生する。
適切な権限者が適切な情報を利用できること(可用性)
- セキュリティの問題が起これば、提供されているサービスなどにアクセスできなくなる。
- サービスを提供する企業側の信頼問題や、賠償問題に発展する恐れがある。
- 利用者側でもシステムが使えないと、業務が行えず損害が発生する。

代表的な攻撃手法

Webアプリケーションに対する攻撃手法は複数あるが、代表的なものを2つ記載する。

「SQLインジェクション」
データベースに発行されるSQLを開発者が意図しない形に変更し、情報を取得・改ざんする攻撃手法。
インターネットを経由して世界中から攻撃できることや、被害者が気づきにくいという点が恐れられている。

【対策法】

入力値のチェック
- 最も有効な方法。その名の通り、入力する文字や記号に条件をつけて厳密にチェックする。
- フレームワークには自動的に入力チェックを行うバリデーション機能が提供されている事が多い。
プリペアド・ステートメントの利用
- 条件により変化する部分をプレースホルダ(あとから変更できるもの)として、SQLを事前に準備してあとからパラメータを割り当てる方法。
- SQLの解釈を先に行うため、あとから条件の変更や構造の変更ができなくなる。

「クロスサイトスクリプティング(XSS)」
HTMLの中に悪意のある動作をするJavaScriptを埋め込んで攻撃する方法。
JavaScriptはHTMLの中に埋め込みことが可能であり、Webブラウザで実行できる。
悪意のある動作を行うスクリプトが実行された場合、情報流出や改ざん、Cookieの盗難などの問題が発生する。

【対策法】

サニタイジングの実施
- ｢消毒｣という意味。悪意のある文字列を、削除したり無害化する処理のこと。

おわりに

今回の書籍を通してWebアプリケーションを開発する上で必要となる、インターネットやサーバ周りの基礎的な知識を学ぶことができました。
今まではプログラミングの学習ばかりしていましたが、今後はWebアプリの土台となる知識も身に着けて行きたいと感じました。

参考書籍

プロになるためのWeb技術入門なぜあなたはWebシステムを開発できないのか