この記事の内容について
Web系エンジニアになるための必須知識の1つである「Web技術の仕組み」について、初学者でもわかりやすいと定評のある書籍「イラスト図解式 この一冊で全部わかるWeb技術の基本」の要点を自分なりにまとめて、理解力の向上に努めていきます。
私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。
Web技術の基本 (1) 〜 (7)
Web技術の基本(1) 〜Web技術とは〜
Web技術の基本(2) 〜Webとネットワーク技術〜
Web技術の基本(3) 〜HTTPでやりとりする仕組み〜
Web技術の基本(5) 〜Webアプリケーションの基本〜
Web技術の基本(6) Webのセキュリティと認証
1. Webとは
以下のようなことができるシステム
- インターネットで自分の調べたいことを探してみる
- 自分の文書、画像、動画などを世界中の人々と共有する
World Wide Web
Web上の文書は以下の2つで構成される
- ハイパーテキスト
- ハイパーリンク
2. 様々なWebの要素
Webサイト
1つのドメインにある複数のWebサイトの集まり
ユーザーインターフェイス
コンピューターの機能とユーザーのやりとりを橋渡しするための機能
プログラム用API(アプリケーションプログラミングインターフェイス)
ソフトウェア同士のやり取りを橋渡しする機能
3. HTMLとWebブラウザ
HTML(Hyper Text Markup Language)
ハイパーテキストを記述するための言語
HTMLは文章の表示方法やハイパーリンクを、タグと呼ばれるマークによって表現する。
<!DOCTYPE html>
<html>
<head>
<title>〇〇のWebページ</title>
</head>
<body>
<h1>〇〇のWebページへようこそ</h1>
はじめまして。<u>〇〇</u>です。<br>
</body>
</html>
Webブラウザ
ハイパーテキストは人間が読むには適していない・・・
→ ハイパーテキストを解釈し、人間が読みやすいものにし表示するためのプログラムを「Webブラウザ」と呼ぶ！！
一般的なWebブラウザとしては以下のようなものがある。
・ Internet Explorer
・ Firefox
・ Chrome
4. WebサーバーとHTTP
Webサーバーとは
Webブラウザからコンテンツの要求を受け取り、必要なコンテンツをネットワークを通してWebブラウザに送信する役割を持つ。コンテンツはWebサーバーに配信されることで「Webページ」とも呼ばれる。
一般的なプログラムは以下の2つがある
・ Apache(アパッチ)
・ IIS(Internet Information Service)
HTTP(Hyper Text Transfer Protocol)とは
WebブラウザとWebサーバーでのハイパーテキスト(コンテンツ)のやりとりの仕組みを世界共通のルールとして定めたもの。(どのWebサーバーやWebブラウザを使っていてもHTTPという共通のルールでやりとりできる！！)
HTTPでは以下のようなことが定義されている
・ ハイパーテキストの要求手順
・ ハイパーテキストの送信手順
・ 要求されたコンテンツを持っていなかった場合の応答方法
・ Webサイトが移転したことをWebブラウザに伝える方法 など
5. Webページが表示される流れ
URL(Uniform Resouce Locator)を使ったWebサーバーへのアクセス
○URLに膨らまれているものは以下の3つ
- やり取りの手順(http / https)
- どのWebサーバーに(www.〜.jp)
- なんのコンテンツを(index.html)
Webページが表示されるまで
- WebブラウザがHTMLの内容を解釈し、タグなどから人間が見やすい形に整形し表示
- 画像など他のファイルが必要になった場合、そのファイルの転送をWebサーバーに要求し、表示画面にはめ込む
- 以上の流れを繰り返し、必要な情報が揃えばWebページを表示する
6. 静的ページと動的ページ
静的ページとは
何度アクセスしても毎回同じものが表示されるWebページ
例： 企業や団体の紹介ページなど
動的ページとは
アクセスした時の状況に応じて異なる内容が表示されるWebページ
例: 検索サイトの結果表示、掲示板サイトや会員サイト
7. 動的ページの仕組み
GCI (Common Gateway Interface)
WebサーバーがWebブラウザからの要求に応じてプログラムを起動させるための仕組み
以下のような流れで動的ページを返す
- WebブラウザはGCIが用意された場所を示すURLにアクセス
- WebサーバーはGCIによってプログラムを起動
- プログラムは送られきたデータや自身が持っているデータからHTMLを生成し、Webブラウザに送信
サーバーサイド・スクリプト
GCIから呼び出されるプログラムを指し、一般的には文字列の扱いに長けた「スクリプト言語」と呼ばれる言語で記述される。(Perl / Ruby / Python / PHP / JavaScriptなど)
クライアントサイド・スクリプト
HTMLに埋め込まれ、Webブラウザによって読み込まれる際に実行されるもの(主にJavaScript)
8. Webの設計思想
RESTful(レストフル)なシステム
「RESTの原則」 を守って設計されたWebシステム (APIの相互運用が円滑になる)
現在では、多くのWebアプリケーションがRESTfulとなるように設計されている。
RESTの原則
- 統一インターフェイス
→ あらかじめ定義、共有された方法で情報がやりとりされる - アドレス可能性
→ すべての情報が一意なURLの構文で示される - 接続性
→ やりとりされる情報にはリンクを含めることができる - ステートレス性
→ やりとりは1回ごとに完結し、前のやりとりの結果に影響を受けない
要点の整理 (穴埋め形式)
Q1 インターネットが普及した現在では、最新のニュースや自分の調べたいことなどの文書を探してみたり、SNSよって自分の文書や画像、動画を世界中の人に簡単に公開できる。こういった文書の公開、閲覧のためのシステムを( ア )と呼ぶ。
Q2 Web上の文書は( イ )と呼ばれる言語で構成され、( イ )は1つのWebページの中に別のWebページへの参照( ウ )を埋め込むことができ、1つのWebページを複数のWebページと関連づけることで、全体で大きな情報の集合体となることができる。
Q3 1つのドメインにある複数のWebページの集まりを( エ )と呼ぶ。
Q4 コンピューターの機能とユーザーのやりとりを橋渡しする機能を( オ )と呼ぶ。また、( オ )に対し、ソフトウェア同士の機能を橋渡しする機能を( カ )と呼ぶ。
Q5 ハイパーテキストを記述するための言語を( キ )といい、( キ )では文書の表示方法やハイパーリンクを、( ク )と呼ばれるマークによって表現する。
Q6 ハイパーテキストは文書にタグで意味付けしたものであり、人間がそのまま読むには適していない。そこでハイパーテキストを解釈して、人間が読みやすいように作り変えて表示するためのプログラムを( ケ )と呼ぶ。
一般的に使われている( ケ )として、( A )、 ( B )、 ( C )などがある。
Q7 ( コ )はWebブラウザからコンテンツの要求があると、必要なコンテンツをネットワークを通してWebブラウザに送信する役割を持つ。
一般的に( D )や( E )といったプログラムがよく利用される。
Q8 ハイパーテキストを送信するためのやりとりの手順と、やりとりするメッセージの書式などを世界共通の仕様として定めたものを( サ )という。
Q9 Webサーバーに「どのやりとりの手順で」「どのWebサーバーに」「なんのコンテンツを」といった情報が含まれており、取得したいWebページをWebブラウザに指定するために使用するものを( シ )という。
Q10 何度アクセスしても毎回同じものが表示されるWebページを( ス )といい、アクセスした時の状況に応じて異なる内容が表示されるWebページを( セ )という。
Q11 サーバー側でスクリプトを実行するものを( ソ )といい、Webブラウザ側でスクリプトを実行するものを( タ )という。特に文字列に長けた言語のことを( チ )と呼ぶ。
Q12 RESTの原則を守って設計されたWebシステムのことを( ツ )なシステムという。
Q13 RESTの原則として、あらかじめ定義、共有された方法で情報がやりとりされる( テ )、すべての情報が一意なURLの構文で示される( ト )、やりとりされる情報にはリンクを含めることができる( ナ )、やりとりは1回ごとに完結し、前のやりとりの結果に影響を受けない( 二 )の4つがある。
解答
ア Web / イ ハイパーテキスト / ウ ハイパーリンク / エ Webサイト / オ ユーザーインターフェイス
カ API / キ HTML / ク タグ / ケ Webブラウザ / コ Webサーバー
サ HTTP / シ URL / ス 静的ページ / セ 動的ページ / ソ サーバーサイド・スクリプト
タ クライアントサイド・スクリプト / チ スクリプト言語 / ツ Restful
テ 統一インターフェイス / ト アドレス可能性 / ナ 接続性 / 二 ステートレス性
A Internet Explorer / B Firefox / C Chrome (順不同)
D Apache / E IIS (順不同)