その他の言語
HTMLやXMLなどのマークアップ言語、スタイルシート、UMLの図、JSONやYAMLというデータ記述の言語を理解できるようになります。
ねらい
プログラム言語のほかにコンピュータで使われる言語を学びます。このレッスンを終えると、マークアップ言語とスタイルシートの役割分担、UMLの代表的な図の使いどころ、JSONやYAMLというデータ記述の記法を説明できるようになります。
ストーリー
あなたがいま見ているこの学習ページも、裏側では複数の「言語」の分業でできています。文章の構造を記すHTML、見た目を整えるCSS、サーバとやり取りするデータを記すJSON。どれもプログラムの手順を書く言語ではなく、「構造やデータを記述する」言語です。それぞれの役割を整理していきましょう。
マークアップ言語:文書の構造をタグで記す
文章に「ここは見出し」「ここは段落」といった意味の印を付けることをマークアップといい、そのための言語をマークアップ言語といいます。印は開始タグと終了タグで範囲を挟んで表します。
HTML
ウェブページの作成に使われるマークアップ言語がHTMLです。文書の構造を定義する仕組みとしてDTD(文書型定義)があり、HTMLのもとになった標準一般化マーク付け言語がSGMLです。
XML
XMLは、タグを独自に定義できるマークアップ言語で、主にシステム間のデータ交換に使われます。関連する仕様として、プログラムから文書を木構造として操作するDOM、文書を先頭から順に読み進めて処理するSAX、文書の構造を定義するXML Schema、XMLベースのメッセージ交換の仕組みであるSOAP、図形を記述するSVGがあります。また、HTMLをXMLの規則で定義し直したものがXHTMLです。
スタイルシート
文書の構造と表示形式を分離するための仕様がスタイルシートです。HTMLの見た目を整えるCSSと、XML向けのXSLが代表です。構造はマークアップ言語、見た目はスタイルシートという分業によって、同じ内容を画面や印刷など違う形で表示したり、デザインだけを差し替えたりしやすくなります。
UML:設計を図で表す言語
オブジェクト指向設計の内容を図で表すための表記法がUMLです。目的に応じて多くの図が定義されています。代表的なものを押さえましょう。
| 図 | 表すもの |
|---|---|
| クラス図 | クラスの属性・操作と、クラスどうしの関係という静的な構造 |
| オブジェクト図 | ある時点でのオブジェクトどうしの関係 |
| シーケンス図 | オブジェクト間のメッセージのやり取りを時間の流れに沿って表す |
| アクティビティ図 | 処理の流れや業務の手順 |
| ステートマシン図 | 状態の移り変わり |
| コンポーネント図、パッケージ図、配置図 | 部品のまとまりや、ソフトウェアをどの機器に配置するかという構成 |
クラスの関係には、関連する相手側での役割を表すロール名を添えることがあります。図の名前と「何を表す図か」の対応が、試験でも実務でも問われます。
JSONとYAML:データを記述する記法
システム間でデータを受け渡すときの、軽量なデータ記述の記法がJSON(JavaScript Object Notation)です。名前と値の組を波かっこで囲む単純な形式で、ウェブのAPIのデータ交換で広く使われています。XMLよりも記述が簡潔なため、現在のウェブサービスの多くがJSONを採用しています。
YAMLも同じくデータを記述する記法で、字下げで階層を表すため人間が読み書きしやすく、設定ファイルの記述によく使われます。
例題
次の問いに答えてください。
問1 HTMLで記述した文書の構造と表示形式を分離するために使われる仕様は何ですか。
問2 名前と値の組を波かっこで囲む形式で、ウェブのAPIのデータ交換に広く使われている軽量なデータ記述の記法は何ですか。
解答と解説
問1の答えはCSS(スタイルシート)です。構造をHTMLが受け持ち、見た目をCSSが受け持つという分業によって、内容とデザインを別々に管理できます。
問2の答えはJSONです。XMLと同じくデータ交換に使えますが、記述が簡潔なため広く普及しています。設定ファイルでよく使われる字下げ形式の記法はYAMLです。
応用
本試験を意識した問題を解いてみましょう。
問 UMLの図のうち、対象の状態の移り変わりを表す図はどれでしょうか。次の中から選んでください。
- クラス図
- シーケンス図
- ステートマシン図
- アクティビティ図
解答と解説
答えは3のステートマシン図です。「注文受付中から発送済みへ」のような状態の遷移を表します。1のクラス図はクラスの属性・操作と関係という静的な構造を表す図で、状態の変化は表しません。2のシーケンス図はオブジェクト間のメッセージのやり取りを時間の流れに沿って表す図です。4のアクティビティ図は処理や業務の手順の流れを表す図で、状態そのものの移り変わりを主題にはしません。
分からなかった点・気になった点
読み込み中です。