we技術の概要、ブラウザとCSS、HTML、JavaScript

機械学習技術人工知能技術自然言語処理技術セマンティックウェブ技術オントロジー技術検索技術データベース技術アルゴリズムデジタルトランスフォーメーション技術 Visualization & UX ワークフロー&サービス ITインフラ技術 Web技術 Javascript CSS 本ブログのナビ

Webブラウザ概要とHTML、CSS、Javascript

WEB+DB EXPRESS vol122より。前回はWebサーバーについて述べた。今回はブラウザとHTML、CSS、Javascriptについて述べる。

ブラウザは、前回のサーバーからのデータを受け取って処理するクライアント部となる。代表的なものとしてはChrome、Safari、Edge、Firefox等がある。ブラウザの実際の動作は以下に示すようなものとなる。

流れとしては

URLを解析する。
DNSサーバーに問い合わせ、ホスト名からIPアドレスを取得する。
HTTPリクエストを生成する。
取得したIPアドレス宛にHTTPリクエストを送る
WebサーバーからHTTPレスポンスを受け取る
HTTPレスポンスを解析する。
必要ならば追加のHTTP通信で関連コンテンツを取得する。
受け取ったコンテンツの解析結果をもとに表示する。

となる。以下にそれぞの処理の詳細を述べる。

まず(1)(2)のURLの解析とIPアドレスの取得について。ユーザーがブラウザを使ってアクセスするとき、アドレスバーに目的のURLを入力してアクセスする。URLの構造は以下のようになる。

<スキーム>:://<ホスト名><パス><クエリパラメータ>
例:
Example Domain
www.example.com

スキームはWebサーバーにアクセスするプロトコルを指定する。通常はHTTPやSSL/TLSをサポートしているHTTPSを指定する。

スキームの後に続くのがホスト名となる。ここには直接IPアドレスを指定することもできる。ホスト名が記載されていた場合は、ブラウザはDNSから名前引きを行いIPアドレスを取得する。最終的にはIPアドレスを指定してWebサーバーにリクエストを送ることとなる。

パスは取得したいリソースのWebサーバー上でのパスを指定する。パスの指定形式はUNIX系OSのファイルパスで使用されているものと同じ形式で/を区切り文字として指定する。

クエリパラメータはWebサーバーから取得するリソースにパラメータを指定したい時に使われる。?でパスと区切られた後、key=valueで指定されたパラメータを&で繋ぐことで複数指定できる。

次に(3)のHTTPのリクエストの送信について。HTTPリクエストの送信の処理は以下のようになる。

基本的な流れは

URLを解析し、プロトコル/ホスト名/リクエストターゲットに分ける。
ホスト名をDNSに問い合わせしてIPアドレスを取得する。
HTTPリクエストを生成する。必要に応じてヘッダフィールドを追加する。
取得したIPアドレス宛にHTTPリクエストを送信する
WebサーバーからHTTPレスポンスを受ける。

こうして受け取るHTTPレスポンスは、通常HTMLとなる。このHTMLデータを解析して表示する動作をレンダリングと呼び、それらを行うプログラムをレンダリングエンジンと呼ぶ。

ブラウザはそれぞれ異なるレンダリングエンジンを持ち、それぞれで処理方法は異なる。

どのレンダリングエンジンも概ね同じような結果が得られるが、その違いがブラウザごとの表示の違いとなる。

レンダリングの入力となるHTMLはHyperText Markup Languageの略となる。ハイパーテキストはテキストの紐付け(リンク)によって、世界中の様々な情報にアクセスするしくみであり、マークアップ言語は構造を記述するための言語となる。HTMLはテキストを扱うため、見出しや段落等の文章の抽象的な構造や、フォントの大きさや色などの見た目の指定することができる。HTMLのサンプルを以下に示す。

<html>
  <head><title>Hello World!!</title></head>
  <body>こんにちは世界!!</body>
</html>

HTMLの前身にはSGML(Standard Generalized Markup Language)という文書作成用のマークアップ言語があり、HTMLはこのSGLをもとに開発された。

HTMLはテキスト文書を扱うために構造化された言語であるため、そのままではコンピューターで扱うことはできない。一度解析をしてメモリ上に構造化されたデータとして格納される必要がある。よってブラウザで解析されたHTMLのデータに対してデータの読み込みや変更を行いたい場合には、何らかの形で操作方法を提供する必要がある。

DOM(Document Object Model)は、HTMLのようなマークアップ言語の文章をプログラミング言語から操作可能にするためのプログラミングインターフェースとなる。実際にJavascriptではDOMの仕様に沿った呼び出しをして、解析されたHTMLのデータを読み込んだり変更したりする。

例えば、以下のようなHTMLを考えた時

<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <div>こんにちは世界</div>
  </body>
</html>

これをDOMで表すと以下のような木構造のオブジェクトになる。

これをDOMツリーと呼び、DOMツリーの中のそれぞれの要素をノードと呼ぶ。一番上のノードは必ずDocumentと呼ばれるノード(Document Root)となる。すべてのノードはDocumnetから出発する。Document Rootを除くすべてのノードには親子関係がある。

DOMツリーの中に配置されたノードには、プログラミングインターフェースが提供されている。Javascriptではそのインターフェースにアクセスすることで、値を読み込んだり変更したりすることができる。React等のフロントエンドのフレームワークはこのDOM操作を効率よくするものとして開発された。

HTMLのバージョンは、HTML1から始まり2,3,4と進み、HTML4の後にXHTMLとなって、現在はHTML5が主流となっている。HTMLは元々文書の構造を定義するための言語であったがブラウザで表示されるための機能が追加され複雑になったため、それら見栄えの機能を分離するために策定されたものCSS(Cascading Style Sheets)となる。CSSはHTML4から本格的に導入された。CSSを実現するためにHTML4にはid、class、styleといった要素やstyleタグが追加された。またlinkタグを使って外部のCSSを読み込む機能も追加された。CSSの例を以下に示す。

body {
  background-color:#FFFFFF;
  text-align:center;
     }

CSSはHTMLの見栄えを変更することを目的に策定されたため、変数や定数、継承のようなプログラミングに近い機能はあまり提供されていない。そこでCSSにWebアプリケーション開発と親和性の高い機能を別の言語で実装し、CSSを出力する方法が開発された。このような言語をAltCSSと呼ぶ。代表的なAltCSSにLess/Sass/Stylus等がある。

CSSのバージョンはCSS1から始まり、CSS2と続き、現在はCSS3となる。CSS3ではアニメーション/要素の変形/グラデーション等の多彩な機能が盛り込まれている。

CSSの詳細は“CSSによるWebデザイン“に述べる。

ブラウザ上で動作する言語としてJavascriptがある。これはWeb初期のころに使われていたNetscape Navigatorというブラウザ上で動作する言語として実装されたもので、当時Javaが大きな注目を浴びていたためJavaScriptという名前がつけられた。名前は似ているがJavaとは全く異なった言語となる。

JavaScriptはECMAScriptとして仕様が標準化され、多くのプログラミング言語がクラスベースのオブジェクト指向型となっているのに対して、JavaScriptではプロトタイプベースのオブジェクト指向型となっている。クラスベースのオブジェクト指向はオブジェクトの構造を静的に定義しているのに対して、プロトタイプベースのオブジェクト指向は可変構造を持ち、後から変更可能となる。

またJavaScriptは最初から非同期処理を積極的にサポートし、並行処理が得意なことも特徴となる。JavaScripはブラウザ上で動かすことがほとんどだが、サーバー上で動かすNode.jsのような実装もある。

JavaScriptを実行するエンジンのことをJavaScriptエンジンと呼び、ブラウザによって採用しているエンジンが異なり、動作や実行速度に差が出る。以下にそれらを示す。

JavaScriptのバージョンとしてはECMAScript1から始まり、2,3,4,5と進んで現在主流となっているものはECMAScript6となる。

Javascriptではブラウザのバージョンにより動作したりしなかったりすることを防ぐため、別の言語で記述して、古いバージョンでも動作するJavaScriptを出力する方法が開発された。これをalternative JavaScript(通称AltJS)と呼ぶ。AltJSには、古くはCoffeScriptから始まり、近年ではTypeScriptがよく使われている。

近年JavaScriptを直接書かずに、AltJSを使ってJavaScriptを生成するケースが増え、実際にブラウザ上で動作させたJavaScriptに何らかのエラーが発生した時に、元のソースコードとの対応関係を示す仕組みとしてSource Mapと呼ばれるものが提供されている。

ブラウザ上でより高速に実行するため新しく登場したものがWasm(WebAssembly)と呼ばれるものとなる。Wasmは高速実行するために、ブラウザ上で直接実行するようなバイナリ形式を使用する。開発者はCやRustのような別言語でプログラムを書いてWasmを出力する。

Javascriptの詳細は”Javascriptによるフロントエンド開発“に述べる。