HTML、CSS、JavaScriptを言葉の意味から再考する

本稿は[We Love HTML5 Advent Calendar 2015 - Adventar](http://www.adventar.org/calendars/1100)の4日目の記事です。

----

HTML5に携わるフロントエンドエンジニアにおける必須言語「HTML」、「CSS」、「JavaScript」。
その名前の由来をご存知ですか？

## HTML
HTML: HyperText Markup Language

ハイパーテキストをマークアップする言語。です。
これ以上日本語に訳せません。
というのも、
[hypertext](http://eow.alc.co.jp/search?q=hypertext)は「ハイパーテキスト」、
[markup](http://eow.alc.co.jp/search?q=markup)は「値上げ、利幅」という見当違いな説明しかないからです。

諦めずに掘り下げてみましょう。

### HyperText

「ハイパーテキスト」は[テッド・ネルソン](https://ja.wikipedia.org/wiki/%E3%83%86%E3%83%83%E3%83%89%E3%83%BB%E3%83%8D%E3%83%AB%E3%82%BD%E3%83%B3)氏による造語です。
「ハイパー」と「テキスト」をそれぞれ調べると、

> **hyper-**
【接頭】
上回る、超えた
過度の、行き過ぎた
《数学》4次元以上の
《コ》リンクされた

― [hyper-の意味・用例｜英辞郎 on the WEB：アルク](http://eow.alc.co.jp/search?q=hyper)

> **text**
> 【自動】
〔携帯電話で〕メールを書く［打つ］文例
【他動】
〔携帯電話でメールを〕書く、打つ、作成する文例
〔携帯電話で〕メールを書いて［打って・作成して］～に送信する文例文例文例文例
【名】
文章、本文、原本
〔学習用の〕教科書、テキスト◆【同】textbook
《コ》テキスト、文字列◆【略】TXT
携帯電話のメール◆【同】text messages

― [textの意味・用例｜英辞郎 on the WEB：アルク](http://eow.alc.co.jp/search?q=text)

とあります。雰囲気としては「普通を超えた文章」といった感じですね。

Wikipediaによる説明でも同じようなことが書いてあります。

> 「テキストを超える」という意味から"hyper-"（～を超えた） "text"（文書）と名付けられた。

― [ハイパーテキスト - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%8F%E3%82%A4%E3%83%91%E3%83%BC%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88)

「ハイパーテキスト」について詳しくはWikipediaを参照頂くとして、要は文書同士を結びつける「ハイパーリンク」、つまり``<a>``タグが最大の発明だったということですね（若干語弊があるかも？）。


### Markup

> 「マークアップ」という用語は、英語圏で伝統的な出版の作業過程である原稿の「マーキング・アップ」という作業から派生した。「marking up」とは、原稿用紙の余白に印刷に関する指示の記号を書き加えることである。「マークアップ・マン」や校正者と呼ばれる専門家が、文章の各部分にどんなスタイル、書体、サイズを適用すべきかなどを記して組版の担当者に原稿を渡すという作業が、何世紀にもわたって行われていた。（校正記号についての詳細は「校正」の項目にある。）

― [マークアップ言語 - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E8%A8%80%E8%AA%9E#.E8.AA.9E.E6.BA.90)


その他、マークアップ言語としては

- [XML](https://ja.wikipedia.org/wiki/Extensible_Markup_Language) (Extensible Markup Language)
- [SGML](https://ja.wikipedia.org/wiki/Standard_Generalized_Markup_Language) (Standard Generalized Markup Language)
- [MathML](https://ja.wikipedia.org/wiki/Mathematical_Markup_Language) (Mathematical Markup Language)

など多数あります。主には、XMLの規格をベースとした派生言語が多数存在する、という現状です。

ただ、XMLベースではない[TeX](https://ja.wikipedia.org/wiki/TeX)も[マークアップ言語に含まれる](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E8%A8%80%E8%AA%9E#TeX)ようです。

また、恐らく「Markup」を由来とする「[Markdown](https://ja.wikipedia.org/wiki/Markdown)」という軽量マークアップ言語も存在しています。

### 結局HTMLとは

「hypertext」は「高次文書」
「markup」「綴り上げる」
と訳し

「高次文書綴り上げ言語」という日本語を付ければどうでしょうか。

## CSS
CSS: Cascading Style Sheets

「スタイルシート」は馴染みがあると思いますが、
「カスケーディング」って何だ？と思われるでしょう。
僕も最近まで知りませんでした。

カスケードの意味は次のように説明されています。

> ユーザーエージェント（多くの場合ウェブブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる（カスケードする）ことができる

― [Cascading Style Sheets - Wikipedia](https://ja.wikipedia.org/wiki/Cascading_Style_Sheets)

カスケーディングについてわかりやすい説明がありました。

[CSS3 のカスケーディングについてのおさらい - IT戦記](http://d.hatena.ne.jp/amachang/20080407/1207594307)

こちらの文献によると、優先度・詳細度がCSSの肝だと述べられています。

CSSの優先度については以下のTipsが役に立ちます。

[webに触れるなら知っておきたいCSSの優先度 - Qiita](http://qiita.com/Tomo_Yanagi/items/f95e92e5df26becb4eb3)

一方「スタイルシート」についてはこう説明されています。

> スタイルシート言語（英語: style sheet language）とは、構造化文書の見た目を記述するコンピュータ言語。

― [スタイルシート - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88)

### 結局CSSとは

カスケーディングは「直列」、
スタイルシートは「表示を制御するしくみ」とざっくり訳し、

「直列表示制御表」でいかがでしょうか。

## JavaScript
JavaScript:
  Java → ジャヴァ言語
  Script → スクリプト言語

何を言っているか解りませんね。
というのも、このネーミングに深い意味はなく、

> JavaScriptはネットスケープコミュニケーションズのブレンダン・アイクによって開発され、Netscape Navigator 2.0で実装された。開発当初はLiveScriptと呼ばれていたが、1995年にサン・マイクロシステムズ（現・オラクル）が開発したプログラミング言語Javaが当時大きな注目を浴びており、ネットスケープとサン・マイクロシステムズが業務提携していた事もあったため、JavaScriptという名前に変更された。

― [JavaScript - Wikipedia](https://ja.wikipedia.org/wiki/JavaScript#.E6.A6.82.E8.A6.81)

とあります。

一方scriptの意味は

> 《コ》スクリプト◆定型手続き、定型書式をあらかじめ登録しておき、後での繰り返し操作を省く。

（[scriptの意味・用例｜英辞郎 on the WEB：アルク](http://eow.alc.co.jp/search?q=script)）

とあります。

言語には「スクリプト言語」というカテゴリーがあり、

> 比較的単純なプログラムを記述するための、簡易的なプログラミング言語全般

― [スクリプト言語 - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E8%A8%80%E8%AA%9E)

とあります。

比較的単純、といっても、JavaScriptも複雑ですよね。（言語仕様としてはシンプルですが…。）


### 結局JavaScriptとは

Web用の簡易的プログラミング言語。


## まとめ
HTML (HyperText Markup Language): 高次文書綴り上げ言語。
CSS (Cascading Style Sheets): 直列表示制御表。
JavaScript: 当初Java言語にあやかった簡易的プログラミング言語。