プログラム実行の流れとWeb技術

画面が表示されるまでに、何が起きている？

スマートフォンの画面をタップした瞬間、Webページがパッと表示されます。この当たり前の裏側では、言語の記述、翻訳、組み立てといった、たくさんの仕組みが連携しています。動画は、その中身を「Webを形作るマークアップ言語」と「プログラムが実行されるまでの流れ」の2本立てで見ていきます。

動画が最初に強調するのは、どの技術にも「なぜその機能が必要だったのか」という理由がある、という点です。理由から入れば、難しそうな略語の羅列も、バケツリレーのように合理的な分担に見えてきます。

マークアップ言語は「デジタルの赤ペン」

マークアップ言語とは、データの構造を記述するための言語です。最大の特徴は、文章の一部をタグという特定の文字列で囲うことで、文章の中に構造や意味を直接書き込める点にあります。

SGML・HTML・XML：3つの代表選手

動画の整理では、まずSGML（Standard Generalized Markup Language）が、HTMLやXMLの元になった言語です。ただし、とても厳密で複雑なため、Webサイトを手軽に作るには向いていませんでした。そこで、主にWebを記述するために生まれたのがHTML（HyperText Markup Language）です。

HTMLの「ハイパーテキスト」とは、複数の文章を相互に結びつける仕組みのことです。リンクをクリックすると別のページへ飛ぶ、あの機能ですね。私たちが普段見ているWebサイトのほとんどは、HTMLで書かれています。

ところが、会社どうしのシステムでデータをやり取りする場面では、HTMLは役に立ちません。たとえば銀行間で送金データを送るとき、必要なのは「文字を大きく」「リンクを貼る」といった表示の指示ではなく、「これが口座番号、これが金額」というデータそのものの意味です。HTMLは、あらかじめ決められたタグしか使えないので、データの意味を自分で定義できません。ここがHTMLの限界でした。

そこで登場したのがXML（Extensible Markup Language）です。Extensibleは「拡張可能」の意味で、ユーザー自身が新しいタグを作って、データの意味を定義できます。

	HTML	XML
主な用途	Webページの表示	システム間のデータ連携
タグ	決められたものだけ	自分で作れる
書くもの	見た目・構造・リンク	データの意味

（補足：動画では、HTMLもXMLもSGMLの流れをくむ言語として説明されます。W3Cの仕様書は、XMLを「SGMLのサブセット（制限した形）」と書いています。IPAのシラバスでも、HTMLの用語例にSGMLが挙がっています。なお、動画は「SGMLが複雑だったのでHTMLが生まれた」という流れで説明しますが、W3CのHTML 4.01仕様書は、HTML 4を「SGMLのアプリケーション」と書いています。つまりHTMLはSGMLの規則で定義された言語の一つで、XMLはSGMLを制限した形です。）

HTMLの仲間たち：CSS・DHTML・Ajax

初期のHTMLだけで作ったサイトは、文字と画像が並ぶだけの殺風景なものでした。今のサイトが美しく滑らかなのは、HTML自体に機能を詰め込んだからではなく、関連技術を組み合わせているからです。

• CSS（Cascading Style Sheets）：Webのレイアウトを決める規格。HTMLが「ここは見出し」と骨組みを作り、CSSが「その見出しは青色に」と装飾を担当します。
• DHTML（Dynamic HTML）：静的なWebページを動的に動かせるようにした技術の総称です。
• Ajax：JavaScriptのHTTP通信機能を使って、対話型のWebアプリケーションを作る非同期通信の仕組みです。

（補足：W3Cの仕様書によれば、CSSは文書の見せ方と内容を分離し、制作と保守を簡単にするためのものです。DHTMLは特定の規格名ではなく、HTMLの内容をCSSやJavaScriptで動的に変える技術を指す呼び方とされます。動画ではAjaxを「DHTMLの一種」と言いますが、位置づけは資料により異なります。）

非同期通信とは？

非同期とは、「何かと何かのタイミングを合わせない」ということです。昔のWebは、リンクをクリックするとサーバーから新しい情報が全部届くまで画面が真っ白になって待たされました。これが同期通信です。

（補足：MDN（Mozillaの解説）では、AjaxはAsynchronous JavaScript and XMLの略で、非同期のHTTPリクエストでページの必要な部分だけを更新する手法です。初期はXMLHttpRequestで実装され、今はfetch()が向いているとされます。）

覚えておきたい3つの用語：XHTML・HTML5・SSI

動画は、HTML関連で他に3つ挙げます。

用語	動画の説明	ひとこと
XHTML	XMLと連動できるようにした言語	HTMLとXMLのいいとこ取り
HTML5	スマホ対応・マルチメディア機能を強化した新しい規格	動画もサクサク
SSI	HTML中にコマンドを挿入し、アクセス時に実行する仕組み	サーバー側で処理

（補足：W3Cの仕様書では、XHTML 1.0は「HTML 4をXML 1.0のアプリケーションとして書き直したもの」で、2000年1月に勧告されました。2018年3月に新しい仕様へ置き換えられたとの注記があります。IPAのシラバスも「HTMLをXMLで再定義したマークアップ言語」と説明します。HTML5は2014年10月にW3C勧告となり、仕様書の目次にはvideo要素とaudio要素があります。現在はWHATWGが、番号を付けないHTML Living Standardとして更新を続けています。）

SSIはサーバーが差し込む

SSIは、サーバーサイドインクルードの略です。HTML文書の中にコマンドを書いておき、ユーザーがWebブラウザーでアクセスしたとき、そのコマンドを実行する仕組みです。実行するのは裏側のサーバーで、「ここに今日のニュースを差し込むコマンドがあるぞ」と実行してから、ブラウザーへ送ってくれます。

（補足：ApacheのSSIの解説では、コマンドはHTMLコメントの形で書かれ、サーバーがページをクライアントへ送る前に評価します。ヘッダーやフッターのような共通部品の差し込みに便利とされています。）

プログラムが動くまで：ソースからロードモジュールへ

ここで視点が変わります。HTMLもプログラム言語も、人間が読めるテキストです。ところがコンピューターは、物理的には電気信号しか理解できません。人間の書いたテキストが、実行可能な状態になるまでの流れを見ましょう。

まず、仕様書をもとに、テキストエディターなどでプログラム言語を使って書いたものがソースプログラムです。これはまだ人間のための状態で、そのままではコンピューターが理解できません。そこでコンパイラが機械語に翻訳します。機械語に翻訳されたプログラムがオブジェクトモジュールで、目的プログラムとも呼ばれます。

最後に、ロードモジュールを実行するには、プログラムを起動するためのプログラムであるローダーを使います。ローダーによってプログラムがメモリに読み込まれ、無事に実行されます。完成車を、実際に走る道路へ持っていってエンジンをかける役割です。

段階	担当	できるもの
書く	人間	ソースプログラム
翻訳	コンパイラ	オブジェクトモジュール
連結編集	リンカ	ロードモジュール
起動	ローダー	メモリ上で実行

（補足：IPAのシラバスは、言語処理ツールの用語例に、リンカ、ローダ、コンパイラ、原始プログラム（ソースプログラム）、目的プログラム、ロードモジュールを挙げています。なお動画の字幕には、オブジェクトモジュールの別名として「中間モジュール」と聞こえる語がありましたが、聞き取りが確かでなく、確認できなかったため載せていません。）

（補足：動画は、ライブラリを連結編集してから実行する、という基本の流れを説明しています。実際には、ライブラリの結合を実行時に行う動的リンクもあり、その場合は通常ローダーが担当するとされます。リンク時に全部を1つにまとめる方法は静的リンクと呼ばれます。出典は解説サイト（二次資料）です。）

まとめ

• マークアップ言語は、タグで囲って文章に構造や意味を持たせる言語。動画の整理では、SGMLが大元で、表示用のHTML、データ用のXMLに分かれました。
• HTMLが骨組み、CSSが装飾、JavaScriptが動き。Ajaxは非同期通信で、画面全体を読み直さずに必要な部分だけ更新します。
• XHTMLはHTMLをXMLの規則で書き直したもの、HTML5はマルチメディア機能を強化した規格、SSIはサーバー側でコマンドを実行して差し込む仕組みです。
• プログラムは、ソース → オブジェクトモジュール → ロードモジュール → メモリ上で実行、の順に進み、担当はコンパイラ、リンカ、ローダーです。

動画は最後に、AIが人間向けのソースプログラムを飛ばして直接ロードモジュールを作る時代や、量子コンピューターが普及して機械語の概念が変わる可能性にふれ、次にWebページを開くとき、裏でどの技術がバトンリレーをしているか想像してみてほしい、と締めくくります。これは試験の論点ではなく、考えるきっかけとして語られた問いかけです。