マーメイド#9 クラス図１

**ひとりマーメイド9日目**
**クラス図１**

## 概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事ではクラス図の記法を紹介します！

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/032c7e37aa361bea5312

## クラス図ってなんですか！

前回の記事ではシーケンス図の基本構文を紹介しました！

今日はクラス図を見ていきます。クラス図とは一言で言うとオブジェクト指向の設計図です。クラス、メンバ、メソッドおよびこれらの関係を表すことができます。

```:mermaid
classDiagram
    Animal <|-- Bird
    Animal <|-- Fish
    Animal <|-- Penguin
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +born()
    class Bird{
        +String beakColor
        +fly()
    }
    class Fish{
        -int sizeInFeet
        +swim()
        -Eat()
    }
    class Penguin{
        +bool is_Linux
        +run()
        +swim()
    }
```

```mermaid
classDiagram
    Animal <|-- Bird
    Animal <|-- Fish
    Animal <|-- Penguin
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +born()
    class Bird{
        +String beakColor
        +fly()
    }
    class Fish{
        -int sizeInFeet
        +swim()
        -Eat()
    }
    class Penguin{
        +bool is_Linux
        +run()
        +swim()
    }
```

## クラス図の見方
クラス図には3つの段があります。上段にはクラスの名前、中段にはメンバ、下段にはメソッドが入ります。
```mermaid
classDiagram
    class User{
        +String id
        +String name
        +post()
        +like()
    }
```


## クラスの定義

`class`でクラス名を定義して、その下に属性とメソッドを記述します。属性とメソッドの違いは`()`の有無です。

クラスの定義には2種類の記法があります。

**記法１**
`クラス名:`に続いてメンバ,メソッドを記述します。
```+mermaid
classDiagram
    class User
    User: +String id
    User: +String name
    User: +post()
    User: +like()
```

```mermaid
classDiagram
    class User
    User:+String id
    User: +String name
    User: +post()
    User: +like()
```

**記法2**
クラスごとに`{}`で囲って属性とメソッドをまとめて記述します。筆者はこっち派です。
```+mermaid
classDiagram
    class User{
        +String id
        +String name
        +post()
        +like()
    }
```

```mermaid
classDiagram
    class Use{
        +String id
        +String name
        +post()
        +like()
    }
```

## 引数と返り値
メソッドの引数と返り値の型を記述することができます。返り値の前にはスペースが必要です。
`METHOD(引数) 返り値の型`

```:mermaid
classDiagram
    class User{
        +String id
        +String name
        +post(message) bool
        +like(post) bool
    }
```

```mermaid
classDiagram
    class User{
        +String id
        +String name
        +post(message) bool
        +like(post) bool
    }
```

~~これ考えた人絶対タイプスクリプターだ~~

## ジェネリック型
`~TYPE~`で`List<int>`のようなジェネリック型を記述できます。`List<List<int>>`のような多重ジェネリックは非対応です。

```:mermaid
classDiagram
    class User{
        +String id
        +List~String~ message
        +post(List~String~ message) bool
        +like(post) List~String~
    }
```

```mermaid
classDiagram
    class User{
        +String id
        +List~String~ message
        +post(List~String~ message) bool
        +like(post) List~String~
    }
```

~~やっぱりタイプスクリプターだろ~~

## アクセス修飾子
メンバ, メソッドにアクセス修飾子をつけることができます。

* `+`Public
* `-`Private
* `#`Protected
* `~`Package

```:mermaid
classDiagram
    class User{
        +String PublicData
        -String PrivateData
        #String ProtectedData
        ~String PackagedData

        +PublicMethod()
        -PrivateMethod()
        #ProtectedMethod()
        ~PackagedMethod()
    }
```

```mermaid
classDiagram
    class User{
        +String PublicData
        -String PrivateData
        #String ProtectedData
        ~String PackagedData
        +PublicMethod()
        -PrivateMethod()
        #ProtectedMethod()
        ~PackagedMethod()
    }
```
## 下線,斜体
メンバとメソッドを強調表示することができます。
* `*`斜体
* `$`下線

```:mermaid
classDiagram
    class User
    User: +String id*
    User: +String name$
    User: +post()*
    User: +like()$
```

```mermaid
classDiagram
    class User
    User: +String id*
    User: +String name$
    User: +post()*
    User: +like()$
```

## 関係の定義
矢印でクラス同士の関係を示すことができます。
`--|>` `<|--`どちらでもokです。

```:mermaid
classDiagram
    classA --|> classB
    classC <|-- classD
```

```mermaid
classDiagram
    classA --|> classB
    classC <|-- classD
```

デフォルトでは矢印の向きは決まっていません。記述内で宣言した順番でクラスが配置され、それらを線で結ぶという順番で描画が進みます。

## 矢印の種類
矢印の種類を変えることができます。

* **継承**
```:mermaid
classDiagram
    classA --|> classB
```
```mermaid
classDiagram
    classA --|> classB
```

* **コンポジット**
```:mermaid
classDiagram
    classA --* classB
```
```mermaid
classDiagram
    classA --* classB
```

* **集約**
```:mermaid
classDiagram
    classA --o classB
```
```mermaid
classDiagram
    classA --o classB
```

* **汎化**
```:mermaid
classDiagram
    classA --> classB
```
```mermaid
classDiagram
    classA --> classB
```

* **関連**(実線

```:mermaid
classDiagram
    classA -- classB
```
```mermaid
classDiagram
    classA -- classB
```

* **依存**
```:mermaid
classDiagram
    classA ..> classB
```
```mermaid
classDiagram
    classA ..> classB
```
* **実現**
```:mermaid
classDiagram
    classA ..|> classB
```
```mermaid
classDiagram
    classA ..|> classB
```

* **関連(点線)**
```:mermaid
classDiagram
    classA .. classB
```
```mermaid
classDiagram
    classA .. classB
```

全8種類です。
```mermaid
classDiagram
    classA --|> classB: 継承
    classC --* classD: コンポジット
    classE --o classF: 集約
    classG --> clasH: 汎化
    classI -- classJ: 関連（実線）
    classK ..> classL: 依存
    classM ..|> classN: 実現
    classO .. classP: 関連（点線）
```

## まとめ

クラス図の記述について紹介しました！

↓↓次回の記事はこちら！

https://qiita.com/hirokiwa/items/2bfd3644dc3747419196

## 参考

https://mermaid-js.github.io/mermaid/#/