【新人教育 資料】第4章 UMLまでの道 〜クラス図を書いてみよう編〜

# 【新人教育 資料】第4章 UMLまでの道 〜クラス図を書いてみよう編〜
## あらすじ
新人がいっぱい入ってくる。新人のレベルもバラバラ。教育資料も古くなっているので、更新しましょう。
どうせなら、公開しちゃえばいいじゃん。という流れになり、新人教育用の資料を順次更新していくことにしました。

※後々、リクエストに応じて更新することが多いのでストックしておくことをおすすめします。

自分は[TEMONA株式会社](http://temona.co.jp/)でCTOをしていますが、頭でっかちに理論ばっかり学習するよりは、イメージがなんとなく掴めるように学習し、実践の中で知識を深めていく方が効率的に学習出来ると考えています。

※他の登壇やインタビュー記事は[Wantedly](https://www.wantedly.com/users/105935)から見てください。

教育スタイルとしては正しい事をきっちりかっちり教えるのではなく、未経験レベルの人がなんとなく掴めるように、資料を構成していきます。

以下のようなシリーズネタで進めます。

|No.|記事|
|:-----------|-----------|
|1|[【新人教育 資料】第1章 UMLまでの道 〜オブジェクト指向編〜](http://qiita.com/devopsCoordinator/items/7d460008177b318129ea) |
|2|[【新人教育 資料】第2章 UMLまでの道 〜クラス編〜](http://qiita.com/devopsCoordinator/items/3cde12abce689ff6906b) |
|3|[【新人教育 資料】第3章 UMLまでの道 〜図種類紹介とクラス図の解説編〜](http://qiita.com/devopsCoordinator/items/213e45694dfac0edcfbc) |
|4|[【新人教育 資料】第4章 UMLまでの道 〜クラス図を書いてみよう編〜](http://qiita.com/devopsCoordinator/items/8d2af381c1c469103459) |
|5|[【新人教育 資料】第5章 UMLまでの道 〜ユースケース図の説明&書いてみよう編〜](http://qiita.com/devopsCoordinator/items/bbd57df681844308fb5d) |
|6|[【新人教育 資料】第6章 UMLまでの道 〜ステートマシン図の説明&書いてみよう編〜](http://qiita.com/devopsCoordinator/items/289f77fc83813ba7cc76)|
|7|[【新人教育 資料】第7章 UMLまでの道 〜アクティビティ図の説明&書いてみよう編〜](http://qiita.com/devopsCoordinator/items/e4910ace92e66bece10f)|
|8|[【新人教育 資料】第8章 UMLまでの道 〜シーケンス図の説明&書いてみよう編〜](http://qiita.com/devopsCoordinator/items/4535c3cce207b114ad6c)|


箸休めには以下をどうぞ

[【新人教育 資料】ハードウェア編](http://qiita.com/devopsCoordinator/items/1aa4a76072a61b15c56f)

では、今回もはじめていきましょう！


## UMLを書くツール
自分としては、紙とペン(筆ぺん)が最強説ですが、今の時代はファイルで管理したいでしょって言われるので、ツールを紹介していきます。
 
### astah* community
言わずとしれたAstah。読み方はアスターです。GUIを使ったアプリケーションで書きたいって人はAtashがおすすめです。ただ、ver7.0以降は商用利用NGなので、下のバージョンを使うか有償版を使う必要があります。UML2.0を使ったモデリングをほぼ全てカバーしています。

### Plant UML
DSLでUMLが記載出来るという素晴らしいソフトウェア。DSLで記載したファイルをgit管理したり出来ます。様々なIDEやエディターなども対応しています。

- Intellij
- Sublime Text
- Atom
- Emacs
- Vim
- Eclipse

今回はAtomでPlant UML を使えるようにしてみましょう。

## Plant UMLを使えるようにする
Macを前提に話を進めていきます。

### brew のインストール(導入済みの人はSKIP)
以下のコマンドを実行してBrewをインストールしましょう。
Brewはパッケージ管理ツールです。

```
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/
```

### brew のupdate
brewで管理するパッケージ等が古くなっている可能性もあるので、アップデートしておきましょう。

```
$ brew update
```

### 必要なアプリケーションをインストール(必要な人だけ)

```
$ brew update
$ brew install gts
$ brew install graphviz
$ brew install caskroom/cask/brew-cask
$ brew cask install atom
```

### Atomのプラグインをインストール

```
$ apm install plantuml-viewer
$ apm install language-plantuml
```

## Atom でクラス図を書いて見ましょう。

### Atomの起動とplantuml-viewerの起動
#### Atomの起動
正常にインストールされていてば、MacのメニューよりLaunch Padを開いてみしょう。
Atomのアイコンを見つけて、起動してみてください。

#### plantuml-viewer
試しに、Atom上でplantumlが使えるようになっているか確認のために
簡単なクラスを書いてplantuml-viewerで表示させて見ましょう。

Atomのエディター上で以下のclass クラス名と記載してみましょう。

```file:test.pu
class 社員
class 会社
```

![PlantUML on Atomでクラス図を表示させてみる](https://qiita-image-store.s3.amazonaws.com/0/74153/a58d18ce-bf7c-7fc5-eb64-f1d55a798e5f.gif "PlantUML on Atomでクラス図を表示させてみる")

書き終わったら、「Control+Option+p」を押してみましょう。
右側のペインにクラスが表示されたら確認完了です。

※ plantumlのファイル拡張子は.puです。拡張子は他のものでもよいのですが、可愛いので.puをおすすめします。

### クラス
PlantUMLでクラスは以下のように表現します。

#### 属性、操作を省略する場合

```
class クラス名
```

#### 属性、操作を記載する場合

```
class クラス名 {
 属性A
 属性B
 操作1()
 操作2()
}
```

![PlantUML on Atomでクラスの属性と操作を記載する](https://qiita-image-store.s3.amazonaws.com/0/74153/c15b7952-4c90-0326-ba06-558a6046a9be.gif "PlantUML on Atomでクラスの属性と操作を記載する")

中括弧の中に、単にキーワードを羅列した場合は属性として、キーワードに()を後ろにつけると操作として、認識されます。

勝手に、属性区画と、操作区画が表示されます。便利ですね。

### 線の種類
PlantUMLでの線の表現は以下のようなものがあります。

|表記|線種類|関係|
|:-----------|-----------|------------|
|--|実線|関連|
|<--|矢印|実線|
|<｜--|白抜き矢印 実線|汎化|
|<｜.. |白抜き矢印 破線|実現|
|o--|白抜き菱形 実線|集約|
|*--|黒塗り菱形 実線|コンポジション|
|<..|矢印 破線|依存|
|.. |破線||

※Qiitaの仕様上、MarkDownでテーブル組の中で|(半角の縦線)が使えないため、上記の汎化、実現の表記は｜(全角の縦線)にしているのでコピペ注意

![PlantUML on Atomでクラスの線の種類](https://qiita-image-store.s3.amazonaws.com/0/74153/18bb2471-cf73-4588-ea1a-ca3a5db24e1d.gif "PlantUML on Atomでクラスの線の種類")


### 線の長さ
PlantUmlでは線の長さは「-」や「.」の個数を増やすと長くなります。

![PlantUML on Atomでクラス図の線の長さ](https://qiita-image-store.s3.amazonaws.com/0/74153/0d2640fe-b0bf-0e28-9ce5-c0ec7156f468.gif "PlantUML on Atomでクラス図の線の長さ")

### 配置(線の向き)
Plant UMLで配置(線の向き)は「-right-」、「.up.」のように線を表現する「-」、[.」の間に入れることで、記載出来ます。

|表記|配置|
|:-----------|-----------|
|-up-|上|
|-right-|右|
|-down-|下|
|-left-|右|

![PlantUML on Atomでクラス図の線の向き](https://qiita-image-store.s3.amazonaws.com/0/74153/639115b6-2538-3039-8d8e-3dc634efdd2c.gif "PlantUML on Atomでクラス図の線の向き")

### 可視性 ※説明していないので、分かる人だけ見てください
PlantUMLで可視性を表記した場合は、属性や操作の頭に可視性を表現する記号を付与しましょう。

```
class クラス名{
 -属性のprivate
 #属性のprotected
 ~属性のpackage private
 +属性のpublic
 -操作のprivate
 #操作のprotected
 ~操作のpackage private
 +操作のpublic
}
```

|表記|属性の表示|操作の表示|可視性|
|:-----------|-----------|-----------|-----------|
|-|![UML PlantUml 属性可視性のprivateの表示](https://qiita-image-store.s3.amazonaws.com/0/74153/801d963c-6771-b8b5-b17c-b6294ed725b8.png "UML PlantUml 属性可視性のprivateの表示")|![UML PlantUml 操作可視性のprivateの表示](https://qiita-image-store.s3.amazonaws.com/0/74153/244ff8c3-5149-cde0-7a1b-c38d284c6733.png "UML PlantUml 操作可視性のprivateの表示")|private|
|#|![UML PlantUml 属性可視性のprotectedの表示](https://qiita-image-store.s3.amazonaws.com/0/74153/67f00f60-006d-eb9d-5678-6778e4907611.png "UML PlantUml 属性可視性のprotectedの表示")|![UML PlantUml 操作可視性のprotectedの表示](https://qiita-image-store.s3.amazonaws.com/0/74153/16cd5e5a-861d-4e58-8382-a1ab84f4189e.png "UML PlantUml 操作可視性のprotectedの表示")|protected|
|~|![UML PlantUml 属性可視性のpackage privateの表示](https://qiita-image-store.s3.amazonaws.com/0/74153/84aad7e5-82b2-d824-c4c4-65e746c6a4c5.png "UML PlantUml 属性可視性のpackage privateの表示")|![UML PlantUml 操作可視性のpackage privateの表示](https://qiita-image-store.s3.amazonaws.com/0/74153/91e119f5-4943-7d50-023d-f69babe71ea1.png "UML PlantUml 操作可視性のpackage privateの表示")|package private|
|+|![UML PlantUml 属性可視性のpublicの表示](https://qiita-image-store.s3.amazonaws.com/0/74153/49aa5cf1-8f57-7ef9-3ef0-89a1856bf4cc.png "UML PlantUml 属性可視性のpublicの表示")|![UML PlantUml 操作可視性のpublicの表示](https://qiita-image-store.s3.amazonaws.com/0/74153/fd4025d8-58af-8a67-e9fc-f5e56b923ac8.png "UML PlantUml 操作可視性のpublicの表示")|public|

![atom_class_diagram_line_ visibility.gif](https://qiita-image-store.s3.amazonaws.com/0/74153/16f0b25b-7de3-d248-8b08-8fbd78010e1c.gif)

### 多重度
Plant UMLにてクラス図の関連に対し、多重度を設定するには以下のとおり。

```
クラスA "0..*" 関連線表記 "1" クラスB
```

ちなみに関連名を表示したい場合は以下のようにすれば出来る
```
クラスA "0..*" 関連線表記 "1" クラスB : 関連名 >
```

![UML PlantUml クラス図多重度と関連名の表示](https://qiita-image-store.s3.amazonaws.com/0/74153/1d08a36e-0fc8-d6db-f363-139e830eb0b1.gif "UML PlantUml クラス図多重度と関連名の表示")


## クラス図を書いてみよう
### 車とホイールのクラス図を書いてみましょう。
属性や操作も記載し、関連も書きましょう。

```
class 車 {
}

class ホイール {
}
```

### エンジンを追加しましょう。
どのクラスと関連があるでしょうか？

### ドライバーを追加しましょう。
どのクラスと関連があるでしょうか？


## あとがき
駆け足ではありますが、PlantUmlを使ってクラス図を書いてみました。いかがだったでしょうか？今回は抽象化クラスについての表現などは、難易度があがってしまうために省略しました。設計時の順序としては、クラスに何があるのか？クラス同士でどういう関係なのか？多重度は？クラスの属性や操作には何があるか？

後程、この投稿に、PlantUMLでのクラスの色の定義や別名（エイリアス）なども順次ブラッシュアップしていこうと思います。