クラス図の作成

第3節までに説明してきた構造化プログラミングにおける方法論は構造化設計(Structured Design) と呼ばれます。

これに対して、クラス構造を使ったオブジェクト指向プログラミングにおける方法論は、数多く存在しますが、総じてオブジェクト指向設計(Object Oriented Design) と呼ばれます。

グラディ・ブーチが1980年代にこの呼称を初めて使ったと言われており、ブーチはオブジェクト指向設計における多くの方法論の確立に関わっていました。 その内の1つに、クラス図(Class Diagram) があります[14]。クラス図は、統一モデリング言語(Unified Modeling Language: UML) と呼ばれるオブジェクト指向モデリング言語に含まれる、階層化されたクラス間の関係性を表現するための手法です。

クラス図を使うことで、クラス構造を階層的にかつ視覚的にわかりやすく記述することができ、設計に役立てることができます。

UMLを使ったプログラムのモデリングは、紙と鉛筆があれば可能ですが、デジタルデータとして永続化するために一般的にモデリングツールを使って行われることが多いです。UMLモデリングツールは、astah*、Graphviz、PlantUMLなどのエディタソフトウェア、GenMyModelや、draw.ioなどオンラインサービス、それぞれの形態で数多く存在します。

今回は、無料かつアカウント登録不要であるUMLetinoと呼ばれる、オンラインUMLモデリングサービスを使ったクラス図の作成方法を以下に示します。

UMLetinoにアクセスすると、図51の画面が表示されます。画面の左端ペインがメニューバー、中央の領域がクラス要素の配置編集画面、右端上側ペインがクラス要素のリスト、そして右端下側ペインが要素編集エディタです。

今回は、Userクラスを元に作成手順を示してみましょう。Userクラスは、第4週の図18を参考にします。

クラス要素を追加するためには、図52のようにクラス要素のリストから追加したい要素を選択し、ダブルクリックしてください。図53のように、配置編集画面に選択した要素が追加されます。

クラス要素は、配置編集画面にてドラッグすることで位置を編集できます。また、クラス要素のふちにマウスカーソルを合わせてドラッグすると、要素のサイズを変更できます。

もし、追加した要素を削除したい場合は、配置編集画面にて削除したいクラス要素を右クリックするとメニューが表示されるのでDeleteを選択してください。あるいは、クラス要素を選択した状態で、Backspaceキーを押してください。

クラス要素の表示内容を変更するためには、配置編集画面にて編集したいクラス要素を選択すると、図54のように要素編集エディタにクラス要素の設定テキストが表示されます。

初期値であるSimpleClassクラスをUserクラスに変更してみましょう。これまでクラス図の読み方を説明してきましたが、図11のように3つの区画から構成されます。

これら3つの区画は図55のように、-ハイフンにて区切ることで表現できます。クラス名、フィールド、そしてメソッドはハイフンで区切られた行に上から順に記述することで表現できます。

図55にUserクラスの、クラス名、フィールド、そしてメソッドを定義する場合の設定テキストを示します。

図55の設定テキストを編集すると、その結果が図56のように配置編集画面に反映されます。

また、継承(実線白抜き三角矢印)や関連(実線矢印)を表すためには、これまでと同じように、クラス要素のリストから該当する線を選択した状態で、ダブルクリックしてください。

すると、配置編集画面に配置されるので、ドラッグして編集してください。

作成したクラス図は、編集データ(XMLファイル)や画像データ(PNGファイル)としてダウンロードすることができます。図57のように、メニューのなかからFile Exportをクリックしてください。 図58のように保存ダイアログが表示されます。

図58の保存ダイアログにて、テキストボックスにファイル名を設定して、Save Image Fileをクリックしてください。PNGファイルのダウンロードが始まります。

[14]: A. Shalloway, and J.R. Trott, ``- デザインパターンとともに学ぶ - オブジェクト指向のこころ'', 丸善出版 (2014)