はじめての人のためのWebアプリケーション基礎
これからあなたが開発する「Webアプリケーション」について、その基本的な仕組みを学びましょう。
Webアプリケーションとは？
「Webアプリケーション（Webアプリ）」とは何でしょうか。
いろいろな定義がありますが、非常におおざっぱには
「Webブラウザを介して利用するアプリケーション」である、と言うことができるでしょう。
検索エンジン、インターネットバンキング、e-ラーニング、ブログ・・・などなど、
現在では多くのアプリケーションがWebアプリとして提供されています。
さて、下の図はWebアプリの主な登場人物とその関係を表したものです。
最初に述べたように、ユーザーはWebブラウザを介して（Webページを介して）アプリケーション機能を使用します。
このうち、図の左側のWebブラウザ内で動作するプログラムを「Webアプリケーションクライアント（以降『クライアント』）」、
右側のサーバー（群）を「Webアプリケーションサーバー（以降『サーバー』）」と呼びます。
サーバーとクライアントの間はHTTP（エイチティーティーピー：HyperText Transfer Protocol）というプロトコル（メッセージのやり取り方法の取り決め）に従って通信し、ユーザーが入力した文字や検索結果、あるいは画像などをやり取りします。
サーバーとクライアント間の通信はHTTPにさえ従っていればよいので、それぞれ異なるプログラミング言語で開発することができます。
このうちクライアントの開発では、通常、HTML、CSS、JavaScriptという3つの言語を使用します。
Webアプリケーションクライアントを記述するための言語
それでは、クライアント開発で使用する3つの言語：HTML、CSS、JavaScriptについて学びましょう。
このページでは特にHTMLを中心に説明します。
(1) HTML (エイチティーエムエル：HyperText Markup Language)
HTMLは、Webページの「内容」を記述するための言語です。
ブラウザは初めにHTMLで記述された内容（以下「HTML文書」）をサーバーから受け取り、その中身に従って画面に文字や画像を表示したり、文字を大きくしたり、あるいは文字入力部品を配置したりします。
HTMLで書かれた内容（以下「HTML文書」または「HTMLファイル」）は、以下のような見た目になっています。
<head>
<title>hifiveトップページ</title>
</head>
<body>
<h1>ようこそhifiveのサイトへ！</h1>
<p>このページでは、Webアプリケーションの基礎を学びます。</p>
</body>
</html>
文書中の"<"から">"までの文字列（例：<html>）をタグと言います。タグは、それによって囲まれた部分に対して特別な意味を与えるものです。
意味はタグの種類ごとに決められています。
タグによる意味づけは、「<tag>」の形式で書かれた開始タグによって始まり、「</tag>」のように"</"で始まる形式の終了タグによって終わります（「タグを閉じる」とも言います）。
例えば「<title>hifiveトップページ</title>」と書かれた場合、ブラウザはtitleタグで囲まれた「hifiveトップページ」という文字列をこの文書のタイトルであると解釈し、ブラウザウィンドウのタブ部分に表示します。
また、開始タグ、終了タグ、およびその間に挟まれた内容のセットを「HTML要素」と呼びます。
タグは必ず包含関係にする
htmlタグやbodyタグを見るとわかるように、タグの中にはさらにタグを書くことができます（タグをネストさせる、と言います）。
ただしこの時、タグ同士は必ず包含関係になっていなければいけません。
×悪い例：<body> <h1> ようこそhifiveの </body> サイトへ！</h1>
このように、h1タグをbodyタグの中で開始したにも関わらずbodyの終了タグの後で</h1>で閉じることはできません。
属性の記述
タグには属性を記述することができます。
属性は以下のように、開始タグの中で属性名="値"という形式で記述します。タグ名の後は1文字以上空白を入れる必要があります。
1つのタグに対して複数の属性を記述できます。また、終了タグには記述できません。
HTML文書の動的な変更とDOM (ドム／ドキュメントオブジェクトモデル：Document Object Model)
ここまでで、HTMLの基本的な仕組みや文法を学びました。
次は、HTML文書を動的に、つまりプログラムから操作する仕組みである「DOM」について学びます。
HTML文書を木構造として扱う
先ほど、HTML文書ではタグ同士は必ず包含関係になるというルールを学びました。
このことから、HTML文書はタグをノードとする、木構造を持った文書だということがわかります。
例えば最初の例の場合、下のような木構造になります。
（HTML文書）
<head>
<title>hifiveトップページ</title>
</head>
<body>
<h1>ようこそ<em>hifive</em>のサイトへ！</h1>
<p>ここは本文です。</p>
</body>
</html>
（木構造で表した図）
このように、DOMではHTML文書を木構造で扱います。この木（ツリー）全体のことを「DOMツリー」や「ドキュメントツリー」と言います。
また、この木構造になんらかの変更を加えることを「DOM操作」、個々のノードを「DOM要素」と言うことがあります（このサイトでも良く使っています）。
一般に「DOM要素」と言う場合、HTML文書の<title>タグや<img>タグなどの（個々の）タグだと思えばよいでしょう。
普通の文字列の扱いは？
ここで、「ここは本文です。」のような、タグに囲まれた普通の文字列はどういう扱いになるのか？と思った方もいるでしょう。
実は、DOMではこのような普通の文字列自体も1つのノード（テキストノード）として扱います。
上の例で、テキストノードを含めて木構造を図にすると以下のようになります。
表示内容を変える＝DOMを操作して構造を変える
ブラウザはHTML文書に従って画面を表示します。
従って、画面の表示内容を変える＝この木構造を変化させるということなのです。
（厳密には、構造自体を変えるだけでなく、属性値を変えることによっても画面は変化します。詳細はこれから学習します。）
例として、以下のような画面にリストの行を1行追加する例を考えてみましょう。
（画面イメージ：リストが2行分表示されている）
上の画面に対応するHTML文書は、以下のようになっています。
<body>
<ul id="list">
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
</body>
</html>
このリストに「List Item 3」という行を追加するには、以下のようなプログラムを実行します。
（ここでは、JavaScript言語で記述した場合で示します。）
var liElement = document.createElement('li');
liElement.textContent = 'List Item 3';
//<ul>タグに、上で作成したDOM要素を追加する
var ulElement = document.getElementById('list');
ulElement.appendChild(liElement);
このコードを実行すると、HTML文書は以下のように変更されます。
<body>
<ul id="list">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li> ←li要素が増えた
</ul>
</body>
</html>
これによって画面は下のように書き換わり、リストの行が追加されます。
ここで、createElement()、getElementById()、appendChild()といった関数が登場しました。
各要素がどのような関数や属性（＝API）を持っているかは、DOMの仕様として決められています。
ただし、歴史的経緯により、特に古いInternet Explorerでは仕様で定められた関数に対応していない場合が多くあります。
また、DOMのAPIだけで画面を変えようとすると、コードが長くなり非効率な場合があります。
そのため実際の開発では、DOM操作を効率的に行うためにライブラリを使用することが一般的です。
ライブラリとしては、jQueryなどが有名です。
(2) CSS (シーエスエス：Cascading Style Sheets)
CSSは、ブラウザがHTML文書を解釈して画面に表示する際の「見た目」を記述する言語です。
基本的な役割は以下の2点です。
- レイアウト：DOM要素（タグ）をどの位置・大きさで配置するか 等
- 装飾：DOM要素内の文字列の大きさをどうするか、背景色を何色にするか 等
この他、最近では例えば、DOM要素を斜めに変形して表示させたり（CSS Transforms）アニメーションさせたり（CSS Animations）する機能も追加されています。
CSSの最も基本的な文法は以下の通りです。最初にセレクタを記述し、そのセレクタで指定される要素に対して適用するスタイル宣言を中カッコの中に記述します。
この、セレクタとスタイル宣言の組のことをルール（CSSルール）と言います。ルールは、CSSファイルの中に複数書くことができます。
(スタイル宣言);
(スタイル宣言); /* スタイル宣言は、セミコロンで区切ることで複数書ける */
}
具体的には、例えば以下のようなコードになります。
font-size: 16px;
color: red;
}
セレクタ：スタイルを適用する対象の選択
セレクタは、スタイルを適用するHTML要素を選択（指定）する条件式です。
例えば
<body>
<h1>タイトル</h1>
<div id="contents">本文</div>
</body>
</html>
というHTMLコードがあった時、<div id="contents">本文</div>というDOM要素を選択（指定）したい場合は#contentsというセレクタを記述します。
（このセレクタは、「contents」というid属性値を持つノードを選択対象にするという意味になります。）
セレクタでは、いろいろな条件で要素を選択することができます。
詳しくは⇒セレクタの解説ページを参照してください。
スタイル宣言：具体的な設定内容
スタイル宣言（以下「スタイル」）は、要素（タグ）に適用される設定内容（を記述したもの）です。
この宣言内容がHTML文書に適用されると、文字が大きく表示されたり文字色が赤くなったりします。
例えば以下のような設定項目があります。
| スタイルプロパティ名 | 意味（設定項目） |
|---|---|
| font-size | 文字の大きさ |
| color | 文字色 |
| z-index | DOM要素の重なり順 |
(3) JavaScript (ジャバスクリプト)
JavaScriptは、現在一般的に使われているWebブラウザの全てで実行できるプログラミング言語です。
Webアプリケーションクライアントでは、動的な画面の書き換えや通信・計算処理を行う役割を担っています。
ちなみに、JavaとJavaScriptは基本的には関係のない別々の言語です。
HTML, CSS, JavaScriptの役割分担
ここまでで学んだように、Webアプリケーションクライアントは、HTML, CSS, JavaScriptの3つの言語を使って記述します。
おさらいになりますが、
- HTMLは「内容」
- CSSは「見た目」
- JavaScriptは「処理」
をそれぞれ記述するもの、と覚えておきましょう。
その他、よく使われる技術用語
Ajax (エイジャックス：Asynchronous JavaScript+XML)
Ajaxは、画面遷移をせず、かつ、非同期的にサーバーと通信を行う仕組みです。
ここでの「非同期的」とは、サーバーと通信している間（リクエストを出して、結果が返ってくるまでの間）もユーザーの入力（マウスクリックやキーボード入力）や画面の書き換えができる、という意味です。
- Google MapやGMailなどで使われ、その使い勝手の良さを実現するキーテクノロジとして一躍注目を浴びました。
- 名前の最後に「XML」と入っているように、使われだした最初の頃はサーバーから返ってくるデータはXML文書の形式で表現されていることが多くありました。しかし現在では、よりJavaScriptとの親和性が高いJSONというフォーマットでデータが返ってくる場合も多くなっています。
JSON (ジェイソン：JavaScript Object Notation)
JSONは、JavaScriptのオブジェクト記述の文法をベースに作成されたデータ記述言語です。
- 文法はJavaScriptをベースにしているが、JavaScript以外の言語でも読み書きできます。
- 例えば、サーバがJavaで記述されていても大丈夫です。多くの言語向けに、JSONで表現されたデータを読み書きするライブラリが存在します。
- Ajaxの普及などに伴い、Webブラウザとサーバとの間でデータを（HTML文書でなく）「データ」としてやり取りしたい場面が増えました。そこで、JavaScriptで手軽に扱うことができ、またXML形式よりも一般にデータ量が少なくて済むという特性から、このJSON言語でデータを記述してやりとりされることが多くなりました。
参考：JSONの紹介