ウェブ標準モデル

ウェブの歴史については、多くの（より）詳細な説明があるので（後ほどリンクします）、ここではとても手短に説明します。（より詳細に関心がある方は、お好みの検索エンジンで「ウェブの歴史」を検索して、何が出てくるか見てみてください）。

1960 年代後半、米軍は ARPANET という通信網を開発しました。これは、パケット交換で動作し、 TCP/IP プロトコルスイートの最初の実装を特徴としているため、ウェブの前身と考えることができます。この2つの技術は、インターネットを構築するインフラの基礎を形成しています。

1980 年、ティム・バーナーズ=リー（以下、TimBL）は、異なるノード間のリンクという概念を取り入れた ENQUIRE というノートブックプログラムを書きました。聞き覚えはありませんか？

1989 年になると、 TimBL は Information Management: A Proposal とハイパーテキストを CERN で書きました。この 2 つの出版物は一緒になって、ウェブがどのように動作するかの背景を提供したのです。この 2 つの出版物は、ウェブがどのように機能するかの背景を示したもので、かなりの関心を呼び、 TimBL の上司はグローバルなハイパーテキストシステムを構築することを許可しました。

1990 年後半までに、 TimBL はウェブの最初のバージョンを実行するために必要なすべてのものを作成しました。 HTTP、HTML、WorldWideWebと呼ばれる最初のウェブブラウザー、 HTTP サーバー、そして見るためのいくつかのウェブページです。

それからの数年間で、ウェブは爆発的に普及し、複数のブラウザーがリリースされ、何千ものウェブサーバーが設定され、何百万ものウェブページが作成されるようになったのです。さて、これは起こったことをとても簡単にまとめたものですが、私たちは簡単な概要を皆さんに約束しました。

最後に重要なデータとして、 1994 年に TimBL が World Wide Web Consortium (W3C) という、さまざまな技術企業の代表が集まり、ウェブ技術の仕様書を作るために共同で作業する組織を得たことを紹介します。以下、CSS、JavaScript など他の技術が続くことで、現在のようなウェブの姿が見えてきたのです。

ウェブ標準は、私たちがウェブサイトを構築するために使用する技術です。これらの標準は、仕様書と呼ばれる長い技術文書として存在し、この技術がどのように動作すべきかを詳細に記述しています。これらの文書は、記述されている技術をどのように使用するかを学ぶにはとても役に立ちません（MDN Web Docs のようなサイトがあるのはこのためです）。その代わりに、ソフトウェア技術者がこれらの技術を（通常はウェブブラウザーで）実装するために使用するよう意図されています。

例えば、 HTML Living Standard では、 HTML （すべての HTML 要素とそれに関連する API、およびその他の周辺技術）を実装するためにどうすればよいかは正確に記述されています。

ウェブ標準は標準化団体によって作成さ れています。標準化団体は、さまざまな技術企業の人々からなるグループを招き、すべての用途を満たすために技術がどのように動作するのが最善であるかについて合意させる機関です。 W3C は最もよく知られたウェブ標準化団体ですが、他にも WHATWG （HTML 言語の標準を維持）、 ECMA （JavaScript のベースである ECMAScript の標準を公開）、 Khronos （WebGL などの三次元グラフィックに関する技術を公開）など、さまざまな団体に所属しています。

ウェブの基本原則は次のようなものです。

• 貢献するにも利用するにもオープンです。
• 特許で保護されておらず、単一の民間企業によって支配されていません。
• アクセシビリティと相互運用性を備えています。
• ウェブを壊しません。

この基盤は、ウェブが関与する固有の、そして期待できる業界であるということを意味しています。

TimBL と W3C が当初から合意していたウェブ標準の重要な側面の一つは、ウェブ（とウェブ技術）は投稿も使用も自由であるべきで、特許やライセンスに邪魔されるべきでないということです。したがって、誰でも無料でウェブサイトを構築するコードを書くことができ、誰でも仕様が書かれる標準作成プロセスに関わることができるのです。

ウェブ技術は、さまざまな企業が協力してオープンに作成されるため、一企業が独占的に制御することができないことを意味しており、これは実に良いことです。一企業が突然、ウェブ全体を有料にすると決めたり、新しいバージョンの HTML をリリースして、誰もがウェブサイトを作り続けるために購入しなければならないようにしたり、さらに悪いことに、もう興味がないと判断してウェブサービスを停止してしまうようなことは避けなければなりません。

これによって、ウェブは自由に利用できる公共のリソースであり続けることができるのです。

オープンなウェブ標準の周りで耳にするもう一つの言葉は「ウェブを壊さない」です。この考えは、導入される新しいウェブ技術は、過去に行われたものが下位互換性を持ち（つまり、古いウェブサイトも引き続き動作する）、上位互換性がある（将来の技術は、現在あるものと互換性がある）べきだというものです。ここで紹介する学習素材を読んでいくと、このことが、とても賢い設計と実装の作業によって可能になることが分かってきます。

W3C, WHATWG, TC39, Khronos Group

W3C の標準化プロセスは、奥が深く、学術的なものです。これで、さまざまな個人や企業が標準化プロセスにどのように関与しているかを理解していただけたことでしょう。

それぞれの成熟段階で、課題（例えば、相互運用性の問題、特許問題）を排除するように設計されています。

ウェブ開発者になりたいのであれば、習得すべき技術は数多くあります。この章では、それらを簡単に説明します。

HTML、CSS、JavaScript はウェブサイトを構築するために使用する三大技術です。

• HTML は構造化と意味づけを行います。
• CSS はスタイル設定とレイアウトを行います。
• JavaScript は動的な動作を制御します。

HTML

ハイパーテキストマークアップ言語、すなわち HTML は、内容に意味（セマンティクス）と構造を与えるために、内容を包む（マークアップする）さまざまな要素からなるマークアップ言語です。簡単な HTML は次のようになります。

<h1>これは最上位の見出しです</h1>

<p>これは文章の段落です。</p>

<img src="cat.jpg" alt="私の猫の写真" />

家づくりに例えるなら、 HTML は家の土台や壁のようなもので、構造を与え、家を支えているものです。

CSS

Cascading Style Sheets (CSS) は、 HTML にスタイルを適用するために使用されるルールベースの言語で、例えば、テキストや背景色を設定したり、境界線を加えたり、物をアニメーション化したり、ページを特定の方法でレイアウトしたりすることができます。簡単な例として、以下のコードでは HTML の段落を赤くすることができます。

p {
  color: red;
}

家に例えると、CSS は家をきれいに見せるために使用する塗料、壁紙、絨毯、絵画のようなものです。

JavaScript

JavaScript は、動的なスタイルの切り替えから、サーバーからの更新の取得、複雑な 3D グラフィックに至るまで、ウェブサイトに対話性を追加するために使用されるプログラミング言語です。以下の簡単な JavaScript は、段落への参照をメモリーに格納し、その中のテキストを変更します。

let pElem = document.querySelector("p");
pElem.textContent = "We changed the text!";

家に例えると、 JavaScript は炊飯器、テレビ、電子レンジ、ドライヤーなどです。家に便利な機能を与えるものです。

レイヤーの分割

技術レイヤーを以下の理由で分割することはよい考えです。

• コード管理と理解がしやすいこと。
• チームワークやロールの分割。
• パフォーマンス。

実際には、常に明確な区切りがあるわけではありません。これは、絶対的なものではなく、可能な限り目指すべき理想です。

• 例えば、 JavaScript を使用して、アプリケーションの状態変更やユーザーの選択などに応じて、 CSS スタイル設定を即座に動的に更新するケースが挙げられます。
• これは、 Element.style.x プロパティを変更することで行われることが多く、その結果、インライン CSS が HTML に注入されます。インライン CSS を避けるには、要素にクラスを追加/変更する方が良い戦略です。
• さらに深刻なのは、 JavaScript フレームワークで、 HTML-in-JavaScript や CSS-in-JavaScript などのさまざまなカスタム構文を使用している場合であり、これにより、多数の構文型が混合することになります。

ウェブページを作成するための「生」の技術（HTML、CSS、JavaScriptなど）を一通り学んだら、今度は作業を簡単にしたり効率化したりするための様々なツールに出会うようになります。例えば、以下のようなものが挙げられます。

• コードのデバッグに使用することができる、現代のブラウザー内にある開発者ツール。
• コードが意図したとおりに動作しているかどうかを示すテストを使用することができるテストツール。
• ある種のウェブサイトをすばやく効果的に構築することができる、 JavaScript 上に構築されたライブラリーやフレームワーク。
• 一連のルールを受け取り、コードを調べて、ルールに正しく従っていない箇所を強調する、いわゆる「リンター」。
• コードファイルから空白を取り除き、ファイルサイズを小さくして、サーバーからのダウンロードをすばやく行えるようにするミニファイアー。

HTML、CSS、JavaScriptは、フロントエンド（またはクライアントサイド）言語です。これは、ユーザーが使用できるウェブサイトのフロントエンドを生成するために、ブラウザーで使用されることを意味しています。

一方、バックエンド（サーバーサイド）言語と呼ばれるものもあります。これは、サーバー上で実行され、その結果をブラウザーに送って表示させる言語です。サーバーサイド言語の代表的な使用方法は、データベースからデータを取り出して、そのデータを含む HTML を生成し、その HTML をブラウザーに送信してユーザーに表示させることです。

サーバーサイドフレームワークの例としては、ASP.NET（C# で）、Django（Python で）、Laravel（PHP で）、Next.js（JavaScript で）などが挙げられます。

これまで、ウェブサイトを構築するために使用する技術について簡単に説明してきました。次に、これらの技術を最善の方法で使用するために、採用すべき最善の手法について説明します。

ウェブ開発をするとき、不確実性の主な原因は、それぞれのユーザーがウェブサイトを見るためにどのような技術の組み合わせを使用するかわからないということから発生します。

• ユーザー 1 は、画面の内側が狭い iPhone で見ているかもしれません。
• ユーザー 2 は、ワイド画面のモニターを取り付けた Windows のノートパソコンで見ているかもしれません。
• ユーザー 3 は目が不自由で、ウェブページを読み上げるためにスクリーンリーダーを使用しているかもしれません。
• ユーザー 4 は、最新のブラウザーが動作しない、非常に古いデスクトップ機を使用している可能性があります。

ユーザーが何を使用するか正確には分からないので、防御的にデザインする必要があります。つまり、上記のユーザー全員が同じ経験を得られるとは限りませんが、上記のユーザー全員が使用できるように、可能な限り柔軟なウェブサイトを作成する必要があります。つまり、可能な限りすべての人のためにウェブが動作するようにしようということです。

勉強していると、このような概念にいつかは出会います。

• プログレッシブエンハンスメントとは、すべてのユーザーに必要最低限の機能を提供し、それらに対応するブラウザーには、より良い使い勝手や他にも様々な機能強化を追加していくというものです。ブラウザーが新しい機能をより一貫して対応する傾向にあり、また、インターネット接続の高速化が進んでいるため、プログレッシブエンハンスメントは重要視されないことが多いです。しかし、例えば、装飾を減らしてモバイルでの使い勝手を向上させ、データ量を削減したり、あるいは、まだインターネット接続の使用量に応じて料金を支払っている可能性のある発展途上国のユーザー向けに、よりシンプルで低帯域幅の体験を提供したりするなど、現行の状況に即した例を考えるべきでしょう。
• ブラウザー間の互換性とは、ウェブページが可能な限り多くの機器で動作するように努めることです。これには、すべてのブラウザーが対応している技術を使用すること、対応しているブラウザーでは、より良い使い勝手を提供すること（プログレッシブエンハンスメント）、古いブラウザーではより単純だが利用できる操作形態に戻るようコードを書くこと（グレイスフルデグラデーション）、などが含まれます。また、特定のブラウザーで何かがうまくいかないかどうかを確認するために多くのテストを行い、その失敗を修正するためにさらに多くの作業を行うことも必要です。
• レスポンシブウェブデザインとは、機能やレイアウトを柔軟にして、さまざまなブラウザーでの表示に自動的に対応できるようにすることです。例えば、デスクトップの広い画面のブラウザーではある方法でレイアウトされたウェブサイトが、携帯電話のブラウザーではよりコンパクトな単一列のレイアウトで表示されるような方法です。今すぐブラウザーウィンドウの幅を調整して、試してみてください。
• パフォーマンスとは、ウェブサイトを可能な限りすばやく読み込むだけでなく、ユーザーがイライラして別の場所に行ってしまわないように、直感的で簡単に利用できるようにすることです。
• アクセシビリティとは、できるだけ多くの種類の人々がウェブサイトを利用できるようにすることを意味しています（関連する概念として、多様性と包括性、インクルーシブデザインがあります）。これには、視覚障碍者、聴覚障碍者、認知障碍者、身体障碍者などを記載します。また、障碍を持った人だけでなく、若者やお年寄り、異なる文化圏の人、モバイル端末を使用する人、ネットワーク接続が不安定であったり遅かったりする人なども含まれます。
• 国際化とは、自身の言語とは異なる文化を持つ人々が、ウェブサイトを利用できるようにすることです。ここには、技術的な配慮（右から左、あるいは縦書きの言語でも問題なく動作するようにレイアウトを変更するなど）と、人間的な配慮（その言語を第 2、第 3 の言語とする人々がテキストを理解しやすいように、平易で俗語を避ける言葉遣いを使用するなど）があります。
• プライバシーとセキュリティ。この 2 つの概念は関連のあるものですが、異なるものです。プライバシーとは、人々が個人的にビジネスを行うことを許可することであり、スパイ行為や必要以上のデータ収集を行わないことを指します。セキュリティとは、悪意のあるユーザーがあなたやあなたのユーザーから情報を盗むことができないように、安全な方法であなたのウェブサイトを構築することを指します。

• World Wide Web の歴史
• インターネットの仕組み

• 前のページ
• Overview: ウェブ標準
• 次のページ