【風来のシレンに学ぶ】フローチャートの描き方

:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#punch-一緒に二次元業界を盛り上げていきませんか)まで。
:::

## 🍃 この記事のターゲット

- フローチャートの描き方（記号の意味など）を知りたい人
- mermaidでのフローチャートの描き方を知りたい人
- 風来のシレン6 とぐろ島の神髄をクリアしたい人 ← :thinking: 

## 🍃 概要

みなさんは風来のシレンというゲームをご存じでしょうか。
すみません、質問を間違えました。フローチャートの描き方をご存じでしょうか？

僕は工業系の専門学校に通っていたのでよく目にしたしよく書いていたのですが、社会人になってからはめっきり目にする機会が減ってしまいました :cry: 

直感的に必要な過程を示せて個人的には好きなのですが、そもそもフローチャートをなんとなくしか知らない人が多いのでは？ :thinking: と

そこで、僕が最近ハマり過ぎて生活リズムを破壊されたゲーム「風来のシレン6」の難関ダンジョンの簡単な攻略チャートを交えて、フローチャートの描き方を説明させていただきます（？）

## 🍃 フローチャートの全体図

説明する前に、僕がしたためた簡単なフローチャートをお見せします。

<details open><summary>とぐろ島の神髄攻略チャート</summary>

```mermaid
graph TB
  Start([攻略開始])-->A{ねだやしの巻物解放済}
  A-->|No| Failed([あきらめる])
  A-->|Yes| B{2F ～ 4F\n食料は十分か}
  B---|No| IfB{{ニギライズ}}---|満腹度144～148が目安\n200が理想| ElseB
  B---|Yes| ElseB{{10Fまでに巡回して合成用の装備を確保}}
  ElseB--> C{19F ～ 23F\n魔よ or 魔反印があるか}
  C---|No| IfC[22Fまで即降り推奨]--> D{22F ～ 24F\nゲイズよけ印があるか}
  C-->|Yes| D
  D---|No| IfD[25Fまで気合で即降り]-->E{25F ～ 29F\nトドよけ印があるか}
  D-->|Yes| E
  E---|Yes| IfE[風が吹くまでトド狩り]--> F[30F ～\nここまでの稼ぎ状況から\n攻略方針を決める]
  E-->|No| F
  F--- G{印の拾得状況}
  G---|ハラ or 桃| IfG>ドスコイ維持チャート\n（ほぼ常にドスコイ状態を維持しながら突き進む）]
  IfG--- H{{40F ～\n 戦車をねだやす。マゼモンでの合成や\nタベラレルー狩りでの稼ぎを行う\n（ここで必要な合成をあらかた済ませると良い）}}
  G---|サトリ| ElseIfG>限界稼ぎチャート\n（毎フロア風が吹くまで粘る\nプレイヤーのHPが先になくなる。\n12時間コース）]--- H
  G---|特にない| ElseG>ノーマルチャート\n（適宜ドスコイと通常シレンを切り替えながら稼いでいく）]--- H
  H--> I{47F ～ 54F\n錆よけ or 毒消しの腕輪がある}
  I---|両方ある| IfI[通常通り巡回（白紙の巻物を温存）]--> J{55F ～ 59F\nトドよけ印があるか}
  I---|片方のみ| ElseIfI[オドロチドロ or 鬼サソリのうち、対策がない方をねだやす]--> J
  I---|どちらもない| ElseI[オドロチドロ or 鬼サソリのうち、嫌いな方をねだやす\n55Fまで気合で即降り]--> J
  J-->|No| K[60F ～ 64F\n地獄。即降り]
  J---|Yes| IfJ[風が吹くまでトド狩り]--> K
  K--> L{66F ～ 79F\n魔よけ/魔反 or 弾きよけがあるか}
  L---|両方ある| IfL{ミラクルチキンと殴り合えるか}
    IfL---|Yes| IfM[白紙の巻物を温存]--> N{80F～\n竜特防印があるか}
    IfL---|No| ElseM[ねだやす]--> N
  L---|片方のみ| ElseIfL[がいこつまてん or シハンのうち、対策がない方をねだやす]--> N
  L---|どちらもない| ElseL[がいこつまてん or シハンのうち、嫌いな方をねだやす\n80Fまで気合で即降り]--> N
  N---|Yes| IfN[冥王をねだやす]--> End([クリア！！！])
  N---|No| ElseN[アークドラゴンをねだやす]--> End
  GetItem(未識別アイテム拾得)--> WhatItem{アイテムの種類}
  WhatItem---|草 or 杖| Identification[\漢識別/]
  WhatItem---|壺 or 巻物| Careful[\階段上で漢識別/]
  WhatItem---|それ以外| Shop[基本は店で値段識別]
```
</details>

普通にフローチャートを描くだけだとただの風来のシレンすきすきおじさんになってしまうので、[mermaid](https://mermaid.js.org/syntax/flowchart)で書いてみました。一応このフローチャートのコードも貼っておきます。

<details><summary>このチャートのmermaidコード</summary>

```md
graph TB
  Start([攻略開始])-->A{ねだやしの巻物解放済}
  A-->|No| Failed([あきらめる])
  A-->|Yes| B{2F ～ 4F\n食料は十分か}
  B---|No| IfB{{ニギライズ}}---|満腹度144～148が目安\n200が理想| ElseB
  B---|Yes| ElseB{{10Fまでに巡回して合成用の装備を確保}}
  ElseB--> C{19F ～ 23F\n魔よ or 魔反印があるか}
  C---|No| IfC[22Fまで即降り推奨]--> D{22F ～ 24F\nゲイズよけ印があるか}
  C-->|Yes| D
  D---|No| IfD[25Fまで気合で即降り]-->E{25F ～ 29F\nトドよけ印があるか}
  D-->|Yes| E
  E---|Yes| IfE[風が吹くまでトド狩り]--> F[30F ～\nここまでの稼ぎ状況から\n攻略方針を決める]
  E-->|No| F
  F--- G{印の拾得状況}
  G---|ハラ or 桃| IfG>ドスコイ維持チャート\n（ほぼ常にドスコイ状態を維持しながら突き進む）]
  IfG--- H{{40F ～\n 戦車をねだやす。マゼモンでの合成や\nタベラレルー狩りでの稼ぎを行う\n（ここで必要な合成をあらかた済ませると良い）}}
  G---|サトリ| ElseIfG>限界稼ぎチャート\n（毎フロア風が吹くまで粘る\nプレイヤーのHPが先になくなる。\n12時間コース）]--- H
  G---|特にない| ElseG>ノーマルチャート\n（適宜ドスコイと通常シレンを切り替えながら稼いでいく）]--- H
  H--> I{47F ～ 54F\n錆よけ or 毒消しの腕輪がある}
  I---|両方ある| IfI[通常通り巡回（白紙の巻物を温存）]--> J{55F ～ 59F\nトドよけ印があるか}
  I---|片方のみ| ElseIfI[オドロチドロ or 鬼サソリのうち、対策がない方をねだやす]--> J
  I---|どちらもない| ElseI[オドロチドロ or 鬼サソリのうち、嫌いな方をねだやす\n55Fまで気合で即降り]--> J
  J-->|No| K[60F ～ 64F\n地獄。即降り]
  J---|Yes| IfJ[風が吹くまでトド狩り]--> K
  K--> L{66F ～ 79F\n魔よけ/魔反 or 弾きよけがあるか}
  L---|両方ある| IfL{ミラクルチキンと殴り合えるか}
    IfL---|Yes| IfM[白紙の巻物を温存]--> N{80F～\n竜特防印があるか}
    IfL---|No| ElseM[ねだやす]--> N
  L---|片方のみ| ElseIfL[がいこつまてん or シハンのうち、対策がない方をねだやす]--> N
  L---|どちらもない| ElseL[がいこつまてん or シハンのうち、嫌いな方をねだやす\n80Fまで気合で即降り]--> N
  N---|Yes| IfN[冥王をねだやす]--> End([クリア！！！])
  N---|No| ElseN[アークドラゴンをねだやす]--> End
  GetItem(未識別アイテム拾得)--> WhatItem{アイテムの種類}
  WhatItem---|草 or 杖| Identification[\漢識別/]
  WhatItem---|壺 or 巻物| Careful[\階段上で漢識別/]
  WhatItem---|それ以外| Shop[基本は店で値段識別]
```
</details>

以下、各要素についての説明になります。

## 🍃 フローチャートの要素（基本）

### 開始・終了

```mermaid
graph TB
    a([Start])
    b(Start)
```

フローチャートや特定のプロセスの開始・終了を示す記号です。
楕円・もしくは角丸の四角形で表現されます。今回のフローチャートでは両方使ってみました。

mermaidではこのように書きます。
```md
graph TB
    a([Start])
    b(Start)
```

### プロセス

```mermaid
graph TB
    a[Process]
```

フローチャートでもっとも頻出する記号で、ひとつの工程や処理などを示す記号です。
四角形で表現されます。

mermaidではこのように書きます。
```md
graph TB
    a[Process]
```

### 条件分岐（判断）

```mermaid
graph TB
    a{IF}
```

条件によりフローを切り替える際に用いられる記号です。
ダイヤで表現されます。

ちなみに僕は3つまでなら同じ条件分岐ブロックから線を引きますが、4つ以上になる場合は条件分岐ブロックを複数使う形で表現してます。

mermaidではこのように書きます。
```md
graph TB
    a{IF}
```

### 処理の流れ

```mermaid
graph TB
    a([Start])--> b([End])
    c([Start])--- d[Procsss A]--> e([End])
    c--- f[Process B]--> e
```

フローの流れを示すために使われるものです。
時系列通りに処理が流れる場合は矢印、並列に走る場合は線を使って表現します。
※破線などもありますが、僕は特殊な記号図形をつなぐときくらいしか見たことがないので多分気にしなくていいです（？）

mermaidではこのように書きます。
```md
graph TB
    a([Start])--> b([End])
    c([Start])--- d[Procsss A]--> e([End])
    c--- f[Process B]--> e
```

## 🍃 フローチャートの要素（応用）

先ほど紹介した基本以外にもいくつか特殊な図形を使っているので、そちらについても説明します。

### 作業

```mermaid
graph TB
    a[\Work/]
    b[/Work\]
```

こちらは主にフローの中で必要となる手作業などを示す場合に使われます。
ちなみに僕はどちらも同じ意味だと習ったので好きな方を使ってるんですが、これ実際どうなんですかね :thinking: 

mermaidではこのように書きます。
```md
graph TB
    a[\Work/]
    b[/Work\]
```

### 準備

```mermaid
graph TB
    a{{Ready}}
```

これは次のフローに必要・もしくは影響を与えるものを示すときに使われます。
六角形で表現されます。

mermaidではこのように書きます。
```md
graph TB
    a{{Ready}}
```

### ？？？

```mermaid
graph TB
    a>Who is this]
```

誰？？？？？？？？？
知らない子ですが、mermaidにあったので気になってなんとなく使ってしまいました。
これの意味どれだけ調べても分からなかったのでもし分かる方がいたらこっそり教えてください。

一応、mermaidではこのように書きます。（書き方は直感的でめっちゃ好き）
```md
graph TB
    a>Ready]
```

## 🍃 まとめ

フローチャートの描き方がなんとなく掴めたでしょうか？
基本的にここに書いてあることを覚えておけばいつ「フローチャートを描かないと出られない部屋」に入れられても安心です。
ここで紹介した以外にも色々な記号が存在するので、気になった方はぜひ調べてみてください！

この記事がみなさんのダンジョン攻略の一助になっていれば幸いです。

それでは :wave: 

## :punch: 一緒に二次元業界を盛り上げていきませんか
株式会社viviONでは、フロントエンドエンジニアを募集しています。

https://vivion.jp/recruit/

また、フロントエンドエンジニアに限らず、バックエンド・SRE・スマホアプリなど様々なエンジニア職を募集していますので、ぜひ採用情報をご覧ください。