3-1言語の変遷と分類
水曜の閉店後、店長がレジ締めの手を止めて言いました。「通販のページに、その日の焼き上がりを毎朝出せないかな。食パンが何本、クロワッサンが何個って」。いまは、ミナトが朝7時に手で書き換えています。焼き上がりの数は厨房のタブレットに入力されているので、それをページへ自動で流せばよいはずです。ところが調べ始めると、出てくる言語の名前が多すぎました。C、Java、Python、JavaScript、PHP、そしてHTML、CSS、JSON。ミナトは相棒に打ち込みます。「どれで作ればいいの。そもそも、これ全部プログラムの言語なの？」
相棒は、名前を一つずつ説明する前に、言語が生まれてきた順に並べることを勧めました。どの言語も、その前の言語で困ったことを解決するために作られているからです。いちばん下にあるのは、コンピュータのCPUがそのまま実行できる、0と1の並びで書かれた命令です。これを機械語といいます。CPUにとっては唯一読める言葉ですが、人が0と1の列を読み書きするのは苦行です。
そこで、機械語の命令一つ一つに「足す」「移す」といった意味の分かる短い記号を当て、その記号で書けるようにしたのがアセンブリ言語（アセンブラ言語）です。記号と機械語の命令は1対1に対応していて、書いたものはアセンブラというプログラムで機械語へ翻訳してから実行します。命令の単位はCPUと同じ細かさのままなので、CPUの種類が変われば書き直しになります。機械語とアセンブリ言語を合わせて、低水準言語と呼ぶことがあります。
ここから基本情報！試験のために作られたアセンブラ言語
アセンブリ言語には、試験のために作られたものもあります。CASL（2001年からの版はCASL II）は、基本情報技術者試験のために定められたアセンブラ言語で、COMET IIという仮想のコンピュータの上で動く前提になっています。実在のCPUに縛られずに、レジスタやメモリの番地を使った処理の考え方を問えるようにしたものです。2023年4月からは、科目Bのプログラムは擬似言語だけで出題されるようになりました。ITパスポートと基本情報のどちらのシラバスにも、用語例としては載っていない語です。
基本情報の範囲ここまで
CPUの命令の細かさから離れ、計算の式や「この条件なら」「これを繰り返す」といった手順を、人に分かりやすい形で書けるようにしたのが高水準言語（高級言語）です。書いたプログラムは、コンパイラやインタプリタと呼ばれるプログラムが機械語へ翻訳して実行します。翻訳を任せるので、同じプログラムを別の種類のCPUでも動かしやすくなります。C、Java、Pythonは、どれも高水準言語です。
高水準言語は、プログラムをどういう考え方で組み立てるかで分けられます。処理の手順を上から順に書き、手順のまとまりを呼び出しながら進めるのが手続型言語です。データとそれを扱う処理をひとまとめにした「もの」（オブジェクト）を組み合わせて作るのがオブジェクト指向言語です。こむぎ堂のページづくりでいえば、「焼き上がりの数を読む、並べる、書き出す」と手順で考えるか、「食パン」「クロワッサン」という品物が自分の数を覚えていると考えるかの違いです。
ここから基本情報！翻訳のしかたで分ける
考え方とは別に、翻訳のしかたでも言語を分けられます。CやC++の多くの処理系は、プログラム全体を実行の前にまとめて機械語へ翻訳します（コンパイル）。これに対し、書いた命令をインタプリタが1行ずつ読み、解釈しながらその場で実行していく使い方を前提にした言語をスクリプト言語といいます。翻訳の待ち時間がなく、書いてすぐ動かして試せるので、短いプログラムや、ほかのソフトウェアを操る小さな処理に向いています。
ただし、いまの処理系では、スクリプト言語でも実行の途中で機械語へ翻訳して速くする工夫が入っていることが多く、区別はかつてほどはっきりしていません。試験では「コンパイルせずに、インタプリタで逐次解釈して実行する」という典型の形で覚えておけば足ります。
基本情報の範囲ここまで
こうして並べると、ミナトが挙げた名前のうち、C、Java、Python、JavaScript、PHPは処理の手順を書くプログラム言語でした。HTML、CSS、JSONは、文書の形や見た目、データの形を書くための言語で、計算の手順は書きません。
3-2手続型言語
木曜の朝、こむぎ堂の帳簿をみている税理士の事務所から電話がありました。「うちの会計システム、中身は40年前からある言語で動いているんですよ」。ミナトは驚きました。古い言語が、いまも現役なのです。
手続型言語の中には、生まれた時代も目的も違うものが並んでいます。いちばん古い部類に入るのがFortranで、1950年代にIBMで開発された、最初期の高水準言語の一つです。名前はFormula Translation（数式の翻訳）から来ていて、数式をそのまま書くような形で科学技術計算のプログラムを書けます。天気予報や流体のシミュレーションなど、大量の数値計算を行う分野では、いまも使われています。
Cは、OSのUNIXを書くために使われたことで広まった言語です。メモリの番地を直接扱うポインタなど、アセンブリ言語に近い細かな操作ができ、実行も速いので、OSや、家電・自動車に組み込まれた機器の制御プログラムに多く使われています。その反面、メモリの扱いを誤ると、プログラムが止まったり、外から悪用される弱点になったりします。
統計の計算とグラフ作りを得意とするのがRです。データの平均やばらつきを求める、回帰分析をする、結果を図にする、といった機能が最初からそろっていて、研究やデータ分析の現場で使われています。たとえば、月曜から水曜の食パンの売上本数が12、15、9本なら、mean(c(12, 15, 9)) の1行で平均の12本が求まります。いくつもの書き方ができる言語ですが、シラバスでは手続型言語の例に挙がっています。
ここから基本情報！事務処理と教育のための言語
税理士の事務所の会計システムで使われていたのは、おそらくCOBOLです。Common Business Oriented Languageの略で、給与計算や会計といった事務処理のために、1950年代の終わりに作られました。英語の文に近い書き方をし、金額のような10進数の計算を正確に扱えるのが特徴です。銀行や保険、官公庁の基幹システムには、長く使われてきたCOBOLのプログラムがいまも多く残っています。
Fortranは科学技術計算、COBOLは事務処理と、分野ごとに言語が分かれていた時代に、その両方を1つで扱おうとしてIBMが開発したのがPL/I（Programming Language One）です。多くの機能を取り込んだ大きな言語でした。いまの基本情報のシラバスには、用語例として載っていない語です。
教育のために作られた言語もあります。Pascalは、順次・選択・繰返しの3つの構造だけで処理を組み立てる構造化プログラミングを教えるために作られた言語で、データの型を厳しく確かめる書き方を身につけられます。BASIC（Beginner's All-purpose Symbolic Instruction Code）は、1960年代に初心者向けの教育用として作られた言語で、文法が簡単なことから、初期のパソコンの多くに最初から入っていました。
基本情報の範囲ここまで
税理士の事務所が古い言語を使い続けているのは、怠けているからではありません。何十年も正しく動いてきた会計のプログラムを別の言語で書き直すと、費用がかかるうえに、新しい誤りを持ち込むおそれがあるからです。言語は、新しいものほどよいとは限りません。
3-3オブジェクト指向言語と共通言語基盤
相棒が「品物ごとに考える書き方もあるよ」と言いました。食パンは自分の値段と残りの数を覚えていて、「1本売れた」と言われたら残りを1つ減らす。クロワッサンも同じ形で、数と値段だけが違う。ミナトは、厨房の品物札がそのままプログラムになったようだと思いました。
この考え方では、品物に共通する形をまず決めます。「品物には名前・値段・残りの数があり、『売れた』という処理ができる」という型がクラスで、その型から作った「食パン」「クロワッサン」の一つ一つがオブジェクトです。クラスの中に書いた処理をメソッドと呼びます。ある品物の残りの数を変えたいときは、数を直接書き換えるのではなく、その品物のメソッドを呼びます。
この仕組みを持つ代表的な言語がC++で、Cにクラスや継承（あるクラスの性質を引き継いで別のクラスを作る仕組み）などのオブジェクト指向の機能を足して作られました。Cと同じようにメモリを細かく扱えて速いので、ゲームや、速さが求められるアプリケーションで多く使われています。
Javaは、「一度書けば、どこでも動く」を目指して作られたオブジェクト指向言語です。Javaのプログラムは特定のCPU向けの機械語ではなく、Java仮想マシン（JVM）という、実行環境の上で動く形に翻訳されます。JVMさえ用意すれば、Windowsでも、Linuxのサーバでも、同じプログラムが動きます。企業の業務システムや、Androidのアプリケーションで広く使われてきました。
ここから基本情報！仮想マシンと共通の基盤
Javaのコンパイラが出力する、JVMの上で実行することを前提にした中間のコードをバイトコードといいます。CPUの種類に依存しない形なので、同じバイトコードを、それぞれの機械のJVMが自分のCPUの命令に置き換えながら実行します。シラバスに用語例としては無い語ですが、Javaが機種を選ばずに動く理由そのものです。
同じ発想を、1つの言語ではなく複数の言語で共有できるようにした標準が共通言語基盤（CLI：Common Language Infrastructure）です。言語ごとのプログラムを共通の中間言語に翻訳し、共通の実行環境で動かすための仕様を定めていて、JIS X 3016（ISO/IEC 23271）として規格になっています。この仕組みを実装した代表がMicrosoftの.NETで、C#で書いたプログラムとVisual Basicで書いたプログラムを、1つのアプリケーションの中で組み合わせられます。
基本情報の範囲ここまで
ここから基本情報！クラスを中心にしない言語と、数値計算のための言語
新しい言語の中には、クラスを中心にしないものもあります。Goは、Googleが開発し、オープンソースで公開している言語です。コンパイルが速く、たくさんの処理を同時に進める並行処理を簡単に書ける仕組みが言語に組み込まれているので、多くの利用者を同時にさばくサーバのプログラムで使われています。シラバスではオブジェクト指向言語の例に挙がっていますが、クラスの継承は持たず、データの型にメソッドを結び付ける形で同じことを実現します。
Juliaは、数値計算や科学技術計算を、Pythonのように手軽に書けて、しかもCに近い速さで動かすことを目指して作られた言語です。変数の型を宣言しなくても動く動的型付けの言語で、実行の直前に機械語へ翻訳して速さを出します。Goと同じくシラバスではオブジェクト指向言語の例に並びますが、クラスではなく、渡されたデータの型の組み合わせで呼び出す処理を選ぶ仕組みを中心にしています。
基本情報の範囲ここまで
3-4スクリプト言語
金曜、ミナトは焼き上がりの一覧に「残りわずか」のボタンを付けてみました。押すと、残りが3個以下の品物だけが表示されます。ページを読み込み直さなくても、表示がその場で切り替わりました。動かしているのは、ブラウザの中で動く短いプログラムです。
ブラウザの中で動いて、Webページに動きを加えるための言語がJavaScriptです。ボタンを押したら表示を切り替える、入力欄に書いた電話番号の形を送る前に確かめる、といった処理を、ページを読み込み直さずに行えます。書いた命令をブラウザが読み込んでそのまま実行するので、事前にまとめて翻訳する手間がありません。いまではブラウザの外、サーバの側で動かす使い方も広がっています。
ここから基本情報！規格と、サーバ側で動く言語
ブラウザごとにJavaScriptの書き方が違っていては、こむぎ堂のボタンがあるブラウザでだけ動かない、ということが起きます。そこで、言語の文法と動きを標準として定めたのがECMAScriptです。標準化団体のEcma InternationalがECMA-262として定めていて、各ブラウザのJavaScriptはこの規格に沿って作られています。
ボタンの処理がブラウザの中で動くのに対し、注文を受け付けたり、データベースから焼き上がりの数を読み出してページを組み立てたりする処理は、サーバの側で動きます。サーバ側でよく使われてきたスクリプト言語がいくつかあります。Perlは文字列の処理と正規表現（文字の並びの型を表す書き方）を得意とする古くからの言語で、ログの集計や、Webの初期の掲示板などで多く使われました。PHPは、HTMLの中に処理を書き込んで、サーバでページを組み立ててからブラウザへ返す使い方に向いた言語で、ブログやWebサイトを作るソフトウェアに広く使われています。
Rubyは、まつもとゆきひろ氏が開発したオブジェクト指向のスクリプト言語で、数値や文字列も含めてすべてをオブジェクトとして扱います。Webアプリケーションを作るためのフレームワーク（Ruby on Rails）とともに広まりました。日本で生まれたプログラム言語として初めてJISになり（JIS X 3017）、その後ISO/IEC 30170として国際規格にもなっています。
基本情報の範囲ここまで
ミナトが最後に選んだのはPythonでした。文法が簡単で読みやすく、字下げそのものを文法として使うので、誰が書いても似た形のプログラムになります。表の計算、Webからのデータ取得、機械学習やデータ分析など、使い道ごとのライブラリ（すぐに呼び出して使える処理の集まり）が豊富にそろっていて、厨房のタブレットから焼き上がりの数を読み、ページ用の形に書き出す処理も、短く書けます。
3-5HTMLとマークアップ
通販のページのファイルを開いたミナトは、文章の間に山かっこで囲まれた記号がびっしり並んでいるのを見ました。「今日の焼き上がり」という文字の前後にも、何かが付いています。消してみると、見出しだった文字がただの文になりました。
山かっこの記号は、文章のどこが見出しで、どこが段落で、どこが一覧かという、文書の構造を示す印です。文書の中に印を付けて構造や意味を表す言語をマークアップ言語といい、その印をタグと呼びます。タグは <h2> のように、山かっこ（< と >）で要素の名前を囲んで書きます。
Webページを書くためのマークアップ言語がHTML（Hyper Text Markup Language）です。見出し、段落、一覧、表、画像などをタグで示し、ほかのページへのリンク（ハイパーリンク）を埋め込めます。ブラウザはHTMLのタグを読んで、見出しは大きな字で、一覧は行頭に印を付けて、というように画面を組み立てます。こむぎ堂のページは、次のように書かれていました。
| 書いてあること | 意味 |
|---|---|
<h2>今日の焼き上がり</h2> | 「今日の焼き上がり」は見出し |
<ul> | ここから一覧 |
<li>食パン 残り8本</li> | 一覧の1項目 |
<li>クロワッサン 残り3個</li> | 一覧の1項目 |
</ul> | 一覧はここまで |
HTMLにはもとになった言語があります。文書の論理的な構造をタグで記述するための国際規格がSGML（Standard Generalized Markup Language：標準一般化マーク付け言語）で、HTMLもXMLも、SGMLの考え方から生まれました。SGMLは、文書ごとに使えるタグの種類を決められる汎用の仕組みで、その一つの使い方として作られたのがHTMLです。
ここから基本情報！要素の始まりと終わり、文書の型
表の1行目の <h2> のように、要素の始まりを示すタグを開始タグ、</h2> のように、名前の前に斜線を付けて要素の終わりを示すタグを終了タグといいます。開始タグから終了タグまでが1つの要素で、その間に文字や別の要素を入れます。表の <li> の要素は、<ul> の要素の中に入れ子になっています。改行を表す <br> のように、中身を持たず終了タグを書かない要素もあります。
どの要素を使ってよいか、要素の中に何をどの順で入れてよいか、要素にどんな属性を付けられるかといった文書の構造の決まりを定義する仕組みがDTD（Document Type Definition：文書型定義）です。SGMLやXMLの文書は、DTDを示しておくと、決まりどおりに書かれているかをプログラムで確かめられます。以前のHTMLは、版ごとにSGMLのDTDで定義されていました。いまのHTMLの先頭にある <!DOCTYPE html> は文書の種類を宣言する名残で、DTDの中身は参照していません。
基本情報の範囲ここまで
3-6XMLとデータ記述言語
土曜、製粉所から「来月から、注文は表計算のファイルではなくXMLで送ってほしい」という連絡が来ました。同じ日、厨房のタブレットの説明書には「焼き上がりのデータはJSONで書き出せます」とあります。どちらも、店の外とデータをやり取りするための書き方です。
XML（Extensible Markup Language）は、使うタグを利用者が自分で決められるマークアップ言語です。HTMLのタグは見出しや段落のように決まっていますが、XMLなら <品名>強力粉</品名><数量>25</数量> のように、データの意味そのものをタグの名前にできます。開始タグと終了タグを必ず対にする、要素を正しく入れ子にする、といった書き方の決まりが厳しく、そのぶんプログラムで確実に読み取れるので、異なる会社やシステムの間でデータを交換する形式として広く使われています。
ここから基本情報！XMLを定義する、読む、送る、描く
製粉所とこむぎ堂が「数量は整数で書く」「品名は必ず1つ入れる」と取り決めるには、文書の構造を定義しておく必要があります。DTDでも定義できますが、DTDではデータの型までは細かく指定できません。そこで、文書の構造に加えて、要素や属性のデータ型（整数、日付など）まで定義でき、しかも定義そのものをXMLの文法で書く仕組みがXML Schemaです。数量の欄に「二十五」と書かれた注文は、決まりに合わないものとして機械的にはじけます。
受け取ったXMLをプログラムで読む方法は、大きく2つあります。1つは、文書全体を読み込んで、要素の親子関係を木構造として組み立て、プログラムから要素をたどったり、追加・削除・変更したりできるようにするDOM（Document Object Model）です。ブラウザがHTMLを扱うときもDOMを使い、前の節の「残りわずか」のボタンも、JavaScriptでDOMの要素を書き換えて表示を切り替えています。
もう1つがSAX（Simple API for XML）で、文書を先頭から順に読みながら、「要素が始まった」「要素が終わった」といったタイミングごとに処理を呼び出すイベント駆動の読み方です。文書全体をメモリに持たないので、何万件もの注文が入った大きなファイルでも少ないメモリで処理できます。その代わり、読み終えた部分に戻ったり、木の形で書き換えたりすることはできません。
XMLは、システム同士がメッセージを送り合う形式にも使われます。XMLで書いたメッセージをHTTPなどで送り、ネットワーク上の別のシステムの機能を呼び出すための通信の決まりがSOAPです。製粉所の在庫を問い合わせる、といったWebサービスのやり取りで使われてきました。XMLは絵を描くのにも使えます。SVG（Scalable Vector Graphics）は、図形を点や線、曲線の座標と色の数値で表し、それをXMLで書く画像の形式です。形を数値で持っているので、拡大しても輪郭がぼやけません。このテキストの挿絵も、SVGで作っています。
基本情報の範囲ここまで
タブレットが書き出すJSON（JavaScript Object Notation）は、JavaScriptの書き方をもとにした、データを記述するための軽い形式です。「名前と値」の組を波かっこで囲み、複数の値は角かっこで並べます。焼き上がりは {"品名": "食パン", "残り": 8} のように書けます。タグで挟むXMLより短く、人にも読みやすく、JavaScriptやPythonなど多くの言語で簡単に読み書きできるので、異なる言語で書かれたプログラムの間でデータを受け渡すのに広く使われています。こむぎ堂でも、Pythonで書き出したJSONを、ページの側のJavaScriptが読む形にしました。
ここから基本情報！字下げで階層を表す形式
かっこを使わず、字下げ（インデント）で階層を表すデータの形式がYAMLです。「品名: 食パン」「残り: 8」のように1行に1つずつ書き、下の階層は行頭を下げて示します。人が手で書き直しやすいので、ソフトウェアの設定ファイルによく使われます。JSONで表せるデータはYAMLでも表せ、互いに変換できます。
基本情報の範囲ここまで
3-7XHTMLとスタイルシート
焼き上がりの一覧が出るようになると、店長から注文が付きました。「文字を小麦色にして、残りが少ない品物は目立たせてほしい」。ミナトはHTMLの一つ一つの行に色の指定を書き足し始め、10行目で手が止まりました。品物が増えるたびに、これを続けるのでしょうか。
文書の構造と、その見た目（文字の色や大きさ、配置）を分けて書くための仕組みがスタイルシートです。HTMLには「これは見出し」「これは一覧」という構造だけを書き、見た目は別の場所でまとめて指定します。Webページの見た目を指定するスタイルシートの言語がCSS（Cascading Style Sheets：段階スタイルシート）です。
CSSでは、li { color: #8a5a2b; } のように、どの要素に（ここでは一覧の項目すべてに）、どんな見た目を付けるかを書きます。この1行で、一覧の項目が何十行あっても全部の色が変わります。ページの見た目を変えたくなったら、HTMLには手を付けず、CSSだけを書き直せば済みます。Cascading（段階的な）という名前は、ブラウザの標準の見た目、サイト全体の指定、そのページだけの指定のように、何段にも重なった指定を、決まった優先順位で組み合わせて最終的な見た目を決めることから来ています。
ここから基本情報！XMLの決まりで書くHTML
HTMLは、終了タグを省いても、タグの大文字と小文字が混ざっていても、ブラウザがおおむね読み取ってくれます。それを、XMLの厳しい決まりに沿って定義し直したマークアップ言語がXHTMLです。要素名は小文字で書き、開始タグと終了タグを必ず対にし、改行のような中身のない要素も <br /> と閉じて書きます。XMLとして正しい文書になるので、XMLを扱うプログラムでそのまま読めます。
XHTMLの要素や属性を、文字、表、フォームといった機能ごとのまとまり（モジュール）に分け、機器や用途に合わせて必要なモジュールだけを組み合わせて使えるようにした仕組みがXHTML Modularizationです。そのモジュールを使い、携帯電話のような、画面が小さく処理能力も限られる機器向けに、最低限の要素だけを選んで定めた仕様がXHTML Basicです。
CSSがおもにHTMLの見た目を指定するのに対し、XML文書のためのスタイルシートの言語がXSL（Extensible Stylesheet Language：拡張可能なスタイルシート言語）です。XML文書を別の形に変換する部分（XSLT）と、印刷などのためのレイアウトを指定する部分（XSL-FO）を含みます。製粉所から届いたXMLの注文書を、XSLTでHTMLに変換すれば、ブラウザで読める注文の一覧になります。
基本情報の範囲ここまで
店長の注文は、CSSに数行を足すだけで片づきました。残りが少ない品物には、HTMLの側で「残りわずか」という印を付け、CSSの側でその印の付いた項目を太い枠で囲みます。色だけで目立たせると、色の見分けにくい人には伝わらないので、「残りわずか」の文字も一緒に出すことにしました。
3-8UMLの構造図
ページは動きました。次は、ページから注文まで受け付けたい。店長がそう言うと、ミナトは考え込みました。客、注文、品物、発送。登場するものが一気に増えて、頭の中だけでは整理できません。相棒は「作る前に、図に描いてみよう。描き方には世界共通の決まりがあるから」と言いました。
システムの設計を図で表すための共通の表記法がUML（Unified Modeling Language：統一モデリング言語）です。もとはオブジェクト指向の設計の描き方を統一するために作られ、いまは標準化団体のOMGが仕様を定めています。プログラム言語ではなく、図の描き方の決まりで、決まりを共有していれば、別の会社の人とも同じ図を同じ意味で読めます。いまのUML 2.5では14種類の図が定められていて、システムが「何でできているか」を表す構造図と、「どう動くか」を表す振る舞い図に分かれます。
ここから基本情報！クラス図とオブジェクト図
構造図の中心がクラス図です。システムに登場するクラスと、クラス同士の関係を描きます。クラスは3段に区切った長方形で表し、上の段にクラスの名前、中の段にそのクラスが持つデータの項目、下の段にそのクラスができる処理を書きます。中の段のデータ項目を属性、下の段の処理を操作といいます。属性はプログラムでいえば変数、操作はメソッドに当たります。
| クラス名 | 属性 | 操作 |
|---|---|---|
| 客 | 名前、電話番号、住所 | 注文する() |
| 注文 | 注文番号、受付日時、合計額 | 合計を計算する()、取り消す() |
| 品物 | 品名、値段、残り | 売れた() |
クラスとクラスの間は線（関連）で結び、線の端には、相手が何個つながるか（多重度）を書きます。1人の客が0件以上の注文をするなら、客の側に「1」、注文の側に「0..*」と書きます。さらに、その関連の中で、端のクラスがどんな役割を果たしているかを示す名前をロール名といいます。客と注文を結ぶ線の客の側に「注文者」と書けば、この関係の中で客は注文をする人だと読めます。同じ客のクラスが、配達の関連では「受取人」になることもあります。
クラス図が型を描くのに対し、ある時点で実際に存在しているオブジェクトと、その属性の具体的な値、オブジェクト同士のつながりを描くのがオブジェクト図です。「c1:客」「o1:注文」のように、オブジェクトの名前とクラスの名前をコロンで並べ、下線を引いて書きます。土曜の朝10時の時点で、客c1が注文o1とo2をしていて、o1の合計額は1,240円、というように、ある瞬間を写し取った図になります。
基本情報の範囲ここまで
クラスの数が増えてくると、次に知りたくなるのは、プログラムの部品をどうまとめ、どの機械に置くかです。注文の受け付けは店のサーバで動かすのか、ネットの借りたサーバで動かすのか。決めることは、設計図の描き方を変えながら増えていきます。
ここから基本情報！部品・まとまり・置き場所を描く図
クラス図とオブジェクト図のほかにも、システムの組み立てを別の切り口で描く構造図があります。どれも「何を箱にして、箱同士の何を線で表すか」が違います。
| 図 | 描くもの | こむぎ堂なら |
|---|---|---|
| コンポーネント図 | ソフトウェアの部品（コンポーネント）同士の依存関係と、部品が提供する・必要とするインタフェース | 「注文受付」の部品が、「在庫管理」の部品の「残りを調べる」機能を使う |
| パッケージ図 | クラスなどの要素を関連する単位（パッケージ）にまとめ、パッケージ同士の依存関係 | 「通販」「厨房」「会計」の3つのまとまりに分け、「通販」が「厨房」に依存する |
| 配置図 | サーバや端末などの実行環境（ノード）と、その上にどのソフトウェアを置くか | 借りたサーバに注文受付、厨房のタブレットに焼き上がり入力を置く |
| コンポジット構造図 | 1つのクラスなどの内部にある部分（パーツ）と、それらを結ぶポートやコネクタ | 「注文」の中に「明細」と「支払い」の部分があり、どうつながるか |
コンポーネント図とパッケージ図は、どちらも箱と依存の矢印で描くので似て見えます。コンポーネント図の箱は実際に組み込んで動かす部品で、パッケージ図の箱は整理のためのまとまり（フォルダのようなもの）です。配置図だけは、ソフトウェアではなく機械の側を主役に描きます。
基本情報の範囲ここまで
3-9UMLの振る舞い図
構造の図を描き終えたミナトに、店長が尋ねました。「で、お客さんが注文ボタンを押してから、厨房に届くまでに何が起きるの」。部品の並びは分かっても、その順番は図のどこにも描かれていませんでした。
システムが時間の流れの中でどう動くかを描くのが、UMLの振る舞い図です。処理の手順、ものの状態の移り変わり、部品同士のやり取りの順番など、構造図には出てこない「いつ、何が起きるか」を表します。設計の間違いは、構造よりも順番の中に隠れていることが少なくありません。在庫を確かめる前に注文を確定してしまう、といった誤りは、振る舞いを描いて初めて目に見えます。
ここから基本情報！処理の流れと、状態の移り変わり
仕事や処理の流れを、開始から終了まで描くのがアクティビティ図です。黒丸で始まり、角の丸い四角で一つ一つの処理を、ひし形で条件による分かれ道を表します。流れ図と似ていますが、太い線で流れを枝分かれさせて、複数の処理を同時に進める並行処理も描けます。こむぎ堂の朝なら、「生地をこねる」と「オーブンを予熱する」を並行に進め、両方が終わったところで太い線で合流して「焼く」へ進む、と描けます。
1つのオブジェクトが取りうる状態と、どんな出来事（イベント）でどの状態へ移るかを描くのがステートマシン図です。注文なら、「受付済」から「焼成中」へ、焼き上がったら「発送待ち」へ、発送したら「発送済」へと移ります。「受付済」の状態で取り消しのイベントが起きれば「取消」へ移りますが、「発送済」からは取り消せない、という決まりも矢印の有無で表せます。UML 1ではステートチャート図と呼ばれていた図で、一般的な呼び方の状態遷移図と呼ぶこともあります。
基本情報の範囲ここまで
店長の問いに答えるには、もう一つ描くものが要ります。注文のボタンが押されてから、ページ、サーバ、厨房のあいだで、どの順に、誰が誰へ何を伝えるかです。
ここから基本情報！やり取りを描く4つの図
オブジェクト同士のメッセージのやり取りを描く図を、まとめて相互作用図と呼びます。その代表がシーケンス図で、横に並べた登場者から下へ点線（ライフライン）を伸ばし、その間を行き来するメッセージを矢印で、時間の順に上から下へ描きます。返事は点線の矢印で描きます。下から読み上げることはないので、「在庫を確かめる」の矢印が「注文を確定する」より下にあれば、順番の誤りがひと目で分かります。
同じやり取りを、時間の順よりも、誰と誰がつながっているかに目を向けて描くのがコミュニケーション図です。登場者を自由に配置して線で結び、線の脇にメッセージを「1: 注文する」「2: 在庫を確認する」と番号付きで書きます。順番は番号で読み取ります。UML 1ではコラボレーション図と呼ばれていました。
やり取りがいくつもあるときに、その全体の流れを見渡すのが相互作用概要図です。「注文を受ける」「支払いを受ける」「発送する」といった、それぞれシーケンス図で描いたやり取りの断片を1つの箱として、アクティビティ図と同じ形の分岐や矢印でつなぎます。支払いに失敗したら注文を取り消す流れへ進む、といった全体の筋道が1枚で分かります。
最後のタイミング図は、複数のオブジェクトの状態や値が、時間とともにどう変わるかを、共通の横の時間軸の上に描きます。電子回路の信号の変化を描くタイミングチャートと同じ見た目です。オーブンが「予熱中」から「焼成中」へ移ってから何分後に、タブレットの表示が「焼き上がり」に変わるか、といった時間の長さが大事な動きを確かめるのに向いています。
基本情報の範囲ここまで
翌週の月曜、朝7時。ミナトが手で書き換えなくても、通販のページに「今日の焼き上がり」が並びました。厨房のタブレットに入った数をPythonのプログラムがJSONに書き出し、ページの側のJavaScriptがそれを読んでHTMLの一覧に組み立て、CSSが小麦色に染めています。店長はページを見ながら、焼きたてのクロワッサンを棚に並べました。「残りわずか、の札も付いているね」
水曜の夜にミナトを悩ませた名前の山は、役割ごとに分けてみれば、多すぎる数ではありませんでした。手順を書く言語がPythonとJavaScriptの2つ、文書の構造を書くHTML、見た目を書くCSS、データの形を書くJSON。どれか一つで全部を作ろうとしていたから、選べなかったのです。そして注文の受け付けは、まだ図の上にあります。描いた順番のとおりにプログラムを書けば動くはずですが、店長の次の言葉がミナトの気がかりになっていました。「注文が一度に100件来たら、そのサーバは持つのかな」