ウェブとウェブ標準

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

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 をリリースして、誰もがウェブサイトを作り続けるために購入しなければならないようにしたり、さらに悪いことに、もう興味がないと判断してウェブサービスを停止してしまうようなことは避けなければなりません。

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

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

ウェブ業界は、仕事を探している人にとって、参入しやすいとても魅力的な市場です。最近公開された数字によると、現在世界には約 1900 万人のウェブ開発者がおり、この数字は今後 10 年で 2 倍以上になると想定されています。そして同時に、この業界ではスキルが不足しています。ですから、ウェブ開発を学ぶには絶好の機会だと言えるでしょう。

しかし、楽しいことばかりではありません。ウェブサイトの構築は、以前よりも複雑な課題となっています。使用するさまざまな技術、知っておくべき技術や最善の手法、実装するために必要とされる典型的なパターンをすべて勉強するためには、ある程度の時間をかける必要があるでしょう。そして、ウェブプラットフォームに現れる新しいツールや機能に対応できるよう、常に最新の知識を身につけ、練習を重ね、自分の技術を磨いていくことが必要です。

唯一変わらないのは、変化することです。

難しそうですか？心配しないでください。私たちは、始めるために必要なすべてを提供することを目指しており、より簡単に取り組むことができるようになります。ウェブの絶え間ない変化と不確実性を受け入れれば、自分自身を楽しみ始めることができます。ウェブコミュニティの一員として、あなたを助ける連絡先や役に立つ素材がウェブ全体に存在し、それがもたらす創造性の可能性を楽しめるようになるでしょう。

あなたは今、デジタルクリエイティブの世界にいます。その経験を生かし、生計を立てる可能性を楽しんでください。

フロントエンドのウェブ開発者を目指すのであれば、学ぶべき技術はいくつもあります。この節では、それらについて簡単に記述します。これらのうちのいくつかがどのように連携して動作するかのより詳しい説明については、ウェブのしくみの記事をお読みください。

あなたはおそらく、今この瞬間もウェブブラウザーの中でこの言葉を読んでいるでしょう（プリントアウトした場合や、スクリーンリーダーなどの支援技術を使用して読み上げている場合は除きます）。ウェブブラウザーとは、人々がウェブを利用するために使用するソフトウェアのことで、Firefox、Chrome、Opera、Safari、Edge などがあります。

ハイパーテキスト転送プロトコル、または HTTP は、ウェブブラウザーをウェブサーバー（ウェブサイトが格納される場所）と通信させるためのメッセージプロトコルです。良くあるやり取りは次のようなものです。

「やあ、ウェブサーバー。 bbc.co.uk を表示するのに必要案ファイルをくれる？」

「分かったよ、ウェブブラウザー。ほら、どうぞ。」

[ファイルをダウンロードしてウェブページを描画する]

HTTP メッセージ（リクエストとレスポンスと呼ばれる）の実際の構文は、それほど人間が読めるようなものではありませんが、これで基本的な考え方がわかります。

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

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

  html

  <h1>これは最上位の見出しです</h1>
  
  <p>これは文章の段落です。</p>
  
  <img src="cat.jpg" alt="A picture of my cat" />
  

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

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

  css

  p {
    color: red;
  }
  

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

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

  js

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

  家に例えると、 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 の歴史
• インターネットの仕組み