【おすすめ技術書の要約】Webを支える技術

「会社の先輩から『Webを支える技術』って本を勧められた」

「『Webを支える技術』は2010年に書かれていて内容が古いって聞くけど、どうなんだろう?」

そうお考えの方は、このブログを少しお読みください。

僕は、未経験からwebエンジニアを目指して、プログラミングを学習開始して2ヶ月後に『Webを支える技術』を読みました。

結果的に、 Webの構造について仕組みから理解することができ、とても良かったです。
プログラミング学習や、ひいてはWebアプリケーション制作を効率的に進めるのに役立っています。

Web技術は日進月歩ですが、「Webを支える根幹の技術」は今も昔も変わらずです。そのため、『Webを支える技術』も内容はあまり古びておらず、現在でも十分に価値のある内容なのです。

「URI? HTTP? HTML? なにそれ?」という方は、ぜひともおすすめできる書籍ですよ。

本記事では、『Webを支える技術』の要約を主題としながらも、僕が学習しているRuby on Railsやブログ運営との関わりや気づきなどを補足として追記していきます。

補足ですが、Kindle版がおすすめです。リフロー型のレイアウトで、スマホやタブレット、PCでも最適な表示方法で読むことができますよ。

なお、『Webを支える技術』で理解が難しい箇所は好評価の『イラスト図解式 この一冊で全部わかるWeb技術の基本』でイラストを交えながら基礎・基本から理解しました。

目次

【おすすめ技術書の要約】Webを支える技術

はじめに

Webの特徴はシンプルさである

昔も今もプロトコルはHTTPであり、表示しているのはHTMLである
Webが生まれて20年近く、技術は常に新しくなってきたが、基本的なアーキテクチャ(構造)は同じだ
これはアーキテクチャの完成度がとても高いためである

Web

ブラウザはWebを閲覧するソフトウェアである

Webの3つの用途

  1. Webサイト:Googleなど
  2. ユーザーインターフェース(人間向けのインターフェース:テレビやプリンタなどのデバイスの設定画面など
  3. API(プログラム向けのインターフェース):Amazonの商品情報など

Webを支える3つの技術

  1. URI:リソース識別子で、世界中のあらゆる情報を指し示せる
  2. HTML:情報を表現するための文書フォーマット
  3. HTTP:アプリケーションのプロトコル(規約=ルール)で情報を取得したり送信したりできる

情報システムから見たWebの2つの側面

1.ハイパーメディア

テキストや画像、音声、映像などさまざまなメディアをハイパーリンク( Hyper Link)で結び付けて構成したシステムのこと
ハイパーリンクは、ハイパーメディアにおいて情報同士を結びつけている

2.分散システム

複数のコンピュータを組み合わせて処理を分散させる形式
Webは、世界中に配置されたサーバに世界中のブラウザがアクセスする分散システムである。

REST

RESTとは

Webのアーキテクチャスタイルのこと

Webのアーキテクチャスタイルとは、「Webを支えるアーキテクチャ技術であるURI、HTML、HTTPなどをどのように設計すべきか」という指針

リソース

Web上に存在する、名前を持ったありとあらゆる情報
東京の天気予報やフェイスブックの写真など
全てのリソースには名前があり、それ一意のURIを持つ

RESTのアーキテクチャ構成

クライアント/サーバー

Webは、HTTPというプロトコルでクライアント(自分のPC)とサーバが通信するクライアント/サーバのアーキテクチャスタイルを採用している
クライアントはサーバーへリクエストを送り、サーバーはそれに対してレスポンスを返す

 ステートレスサーバー

サーバーがクライアントのアプリケーション状態(ログイン状態)を管理しないこと
サーバがアプリケーション状態を持たないことの利点は、サーバ側の実装を簡略化できること
ステートレスではない(ステートフルな)WebサービスやWeb APIが多々存在する。HTTPをステートフルにする代表格はCookieを使ったセッション管理など

キャッシュ

リソースの鮮度に基づいて、一度取得したリソースをクライアント側で使いまわす方式
クライアントとサーバーの通信回数と量を減らせる

統一インターフェース

URIで指し示したリソースに対する操作を、統一した限定的なインタフェースで行うアーキテクチャスタイルのこと
HTTP1.1では、GETやPOST、PUTなど8個のメソッドだけしか定義されていない

階層化システム

システム全体を分離(=階層化)して管理すること
サーバとクライアントの間にロードバランサ( Load Balancer)を設置して負荷分散をしたり、プロキシ( Proxy)を設置してアクセスを制限したりできる
プロキシサーバーとはWebサイトへのアクセスを代理して行うサーバーのこと

コードオンデマンド

プログラムコードをサーバからダウンロードし、クライアント側でそれを実行するアーキテクチャスタイル
JavaScriptやFlashなど

URI

URIとは

リソースを統一的に識別するID」のこと

URIの設計

クールなURIは変わらない
リンクが切れてしまうことは、ハイパーメディアシステムが機能しないことを意味ししている。

URIを変わりにくくするには

  1. プログラミング言語に依存した拡張子やパスを含めない
  2. メソッド名やセッションIDを含めない
  3. リソースを表現する名刺にする

URIを変更したい時

できる限りリダイレクトするようにする

補足
リダイレクトはドメインで一括設定もできるし、個別のURLごとにも設定できます。ワードプレス のブログ記事でphpファイルに追記することで実施しました。

HTTP

HTTPとは

データ転送のためのプロトコルであり、対象はコンピュータであるかえる全てのデータ
HTTPはRESTの重要な特徴である統一インタフェース、ステートレスサーバ、キャッシュなどを実現している、Webの基盤となるプロトコル

4つの階層型プロトコル

ネットワークインターフェース層(最下層)

物理的なケーブルなどに相当する部分

インターネット層(下から2番目)

ネットワークでデータを実際にやりとりする部分。データの基本的な通信単位を「パケット」としている。IPでは、自分のネットワークインタフェースでデータを送りだすことだけを保証している

トランスポート層(上から2番目)

IPが保証しなかったデータの転送を保証するのがトランスポート層の役割。TCPでは接続先の相手に対してコネクションを張り、データの抜け漏れをチェックしてデータの到達を保証している

アプリケーション層(最上層)

具体的なインターネットアプリケーション、たとえばメールやDNS、そしてHTTPを実現する層。ほとんどのプログラミング言語はHTTPを実装したライブラリを持っている

補足
OSI参照モデルのプロトコル構成はより細かく定義しており、本書とは切り分けが若干異なる。(物理層→データリンク層→ネットワーク層→トランスポート層→セッション層→プレゼンテーション層→アプリケーション層)

具体的な仕組み(クライアントサーバー)

クライアント(Webブラウザ)が情報を提供するサーバ(Webサーバ)に接続し、各種のリクエスト( Request、要求)を出してレスポンス( Response、返答)を受け取る

補足
HTTPリクエストの概念は、Railsの[redirect_to]や[render]メソッドの理解に役立ちます。[redirect_to]はHTTPリクエストを発生させviewが遷移するのに対し、[render]はHTTPリクエストを発生させません。

クライアントで行われる6つのこと

  1. リクエストメッセージの構築
  2. リクエストメッセージの送信
  3. (レスポンスが返るまで待機)
  4. レスポンスメッセージの受信
  5. レスポンスメッセージの解析
  6. クライアントの目的を達成するために必要な処理

サーバーで行われる6つのこと

  1. (リクエストの待機)
  2. リクエストメッセージの受信
  3. リクエストメッセージの解析
  4. 適切なアプリケーションプログラムへの処理の委譲
  5. アプリケーションプログラムから結果を取得
  6. レスポンスメッセージの構築 レスポンスメッセージの送信

HTTPのステートレス性

ステートレスとは「サーバがクライアントのアプリケーション状態(セッション状態)を保存しない
システムにログインしてからログアウトするまでの一連の操作をまとめて「セッション」と呼び、この一連の操作の間の状態がセッション状態である
ステートレスなアーキテクチャでは、サーバがクライアントのアプリケーション状態を覚える代わりに、クライアントが自らのアプリケーション状態を覚え、すべてのリクエストを自己記述的メッセージで送信している

補足
Railsを使ったアプリケーションの場合のWEB(Rails)サーバーはMVCによって役割が分けられています。ブラウザーから届いたURLを[routes.rb]ファイルからコントローラーの対応するアクションを呼び出します。DBからのデータ操作が必要な場合はモデルを介してDBとやり取りをしてデータを取得します。次に、モデルを介して取得したデータを変数にセットして、ビューを呼び出します。ビューは変数を介して渡されたデータをHTML文書に作成して、コントローラーへ返します。ビューによって作成されたHTML文書を受け取ったコントローラーは、そのデータをリクエストを送信してきた利用者へ返します。(参考:RailsにおけるMVC(モデル/ビュー/コントローラ)

HTTPメソッド

8つのHTTPメソッド

  • GET:リソースの取得。Webページの取得、画像の取得などがブラウザを通して行われる。
  • POST:子リソースの作成、リソースデータの追加、そのほかの処理
  • PUT:リソースの更新、作成
  • DELETE:リソースの削除
  • HEAD:リソースヘッダの取得
  • OPTIONS:リソースがサポートしているメソッドの取得
補足
ほとんど使われていないTRACEやCONNECTは省略しています

HTTPメソッドとCRUD

  • Create:POST/PUT
  • Read:GET
  • Update:PUT
  • Delete:DELETE

HTTPの安全性

通信エラーが発生した時リクエストをどのように回復するかという点においてHTTPの仕様では、プロトコルのステートレス性を保ちながら、この問題を解決するための工夫がなされている

  • GET/HEAD:べき等かつ安全
  • PUT/DELETE:べき等だが安全でない
  • POST:べき等でも安全でもない

 

べき等とは「ある操作を何回行っても結果が同じこと」

安全とは「操作対象のリソースの状態を変化させないこと」

クライアントはPOSTを複数回送るのは気をつけなければならない

ステータスコード

ステータスコードとは

サーバーからのレスポンスメッセージの一部で、クライアントとサーバーの通信状態を表している
先頭の数字で分類することで、クライアントはとりあえず先頭の数字を見ればサーバがどのようなレスポンスを返したのかを理解でき、クライアント側でどのように処理するべきかの大枠を知ることができる

5種類のステータスコード

  • 1xx:処理中
  • 2xx:成功
  • 3xx:リダイレクト
  • 4xx:クライアントエラー
  • 5xx:サーバーエラー
補足
サーバーサイドエンジニアにとって5xxは必ず相手にすべき敵ですね。問題を切り分けて考え、効率的に最適解を見つられるよう鍛錬します

HTTPヘッダー

HTTPヘッダとは

メッセージのボディに対する付加的な情報、いわゆるメタデータを表現している
クライアントやサーバはヘッダを見てメッセージに対する挙動を決定する

HTTPヘッダ主な種類

  • 日時
  • メディアタイプ:textやimgなど
  • 文字エンコーディング:jaやenなど

認証

  • Basic認証:ユーザ名とパスワードによる認証方式で、簡単にデコード可能
  • Digest認証:Basic認証よりもセキュアな認証方式で、ハッシュ関数を用いてハッシュ値を用いる

キャッシュ

キャッシュとは、サーバから取得したリソースをローカルストレージ(ハードディスクなど)に蓄積し、再利用する手法のこと

持続的接続

クライアントはレスポンスを待たずに同じサーバにリクエストを送信できます。これを「パイプライン化」(Pipelining)と呼ぶ

HTML

HTMLとは

HyperTextMarkupLanguageの略
マークアップ言語とは、タグで文書の構造を表現するコンピュータ言語の1つ
HTMLはシンプルな仕様のXMLをベースに開発されている

補足
Railsでは、HTMLをベースとしたRubyコードを記述できる、ErbやSlim、Hamlといったテンプレートエンジンを用いている。これらを高級言語と良い、アセットパイプラインの仕組みを使って初期段階でコンパイルされる。
※コンパイルとは、プログラミング言語で記述されたソースコードをコンピューターが実行可能な形式(オブジェクトコード)に変換する作業のこと

HTMLの構造

  • 要素:開始タグ、内容、終了タグからなる。タグには要素名が入る
  • 木構造:要素を入れ子にして表現し親要素→子要素となる
  • 空要素:内容を持たない要素
  • 属性:属性名と属性値の組。文書内で一意な「id属性」や、要素の意味を指定する「class属性」がある。
  • コメント:プログラムで認識しないコメントがある。

HTMLの構成要素

ヘッダとは

文書のメタ(付加的な)データが入る

ヘッダの構成要素

  • title:文書のタイトル
  • link:ほかのリソースへのリンク
  • script:JavaScriptなどのクライアントサイドプログラム
  • meta:そのほかのデータ

ボディとは

文書の内容そのものが入る

ボディの構成要素

  • ブロックレベル要素:文書の段落や見出しなど、ある程度大きなかたまりを表現する。h1やdiv、pなど。
  • インライン要素:ブロックレベル要素の中に入る要素で、強調や改行、画像埋め込みなどを表現する。strongやa、br、imgなど。

リンク

a要素 アンカー

ほかのWebページにリンクする

link要素

Webページ同士の関係を指定する

フォーム

  • GET:キーワード検索などユーザーからの入力によってURIを生成する
  • POST:リソースの作成など、ユーザーの入力をターゲットURIに送信する

microformats

microformatsとは

様々なHTMLに対するリソースを表現するための拡張技術

Atom

Atomとは

XMLフォーマットで、RSSの仕様の1つ。主にブログの新着情報を伝えるフィードの目的で利用されていたが、検索エンジンや写真管理など様々なWebサービスのWeb APIとして利用できる

JSON

JSONとは

JavaScriptの記法で、軽量で単純なデータフォーマット
HTMLやAtomはXMLをベースにした構造化文書のためのマークアップ言語のため、データを記述するためには表記が冗長過ぎる問題がある
ハッシュや配列といったプログラミング言語から扱いやすいデータ構造を記述

JSONの6つのデータ型

  1. オブジェクト
  2. 配列
  3. 文字列
  4. 数値
  5. ブーリアン
  6. null

Webサービスの設計

リソース設計

どのようにリソースを分割し、URIで名前を付け、相互にリンクを持たせるかが重要

Webを支える技術要約まとめ

本記事では『Webを支える技術』の要約と補足としてRailsとの関連について記述しました

HTTPやURI、HTMLは今も昔も変わらないとてもシンプルな技術だからこそ、Webはこれまで発展してきたのですね
microformatsやAtom、JSONの章は難しく、現状では理解しきれないことも多くありました
業務を遂行していく中で関連づけて習得して行きたいです

それでは!!

イラスト多めでイメージ感を掴むのに最適↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です