会議を爆速にする、Visual Studio Code 超便利スニペット集


以前の[投稿](https://qiita.com/kitfactory/items/2fde799fa092f0d8f0f1)でVisual Studio Codeと[Markdown Preview Enhanced](https://shd101wyy.github.io/markdown-preview-enhanced/#/)環境を組み合わせの便利さを紹介しました。

議事メモを作成にマークダウンを使うと、議論が構造化されて表示されるので、非常にわかりやすくなりますね。みなさんもお使いかと思います。本稿では、そこに、更にVisual Studio Codeにマークダウン用のスニペットを登録しておくことを提案します。

出席者の議論をフォーカスさせる図や表がスムーズに呼び出せますので、効率的な会議を行うことができます。そんな爆速会議に便利なスニペットをいくつか紹介します。

以下ではVisual Studio CodeエディタとMarkdown Preview Enhancedプラグインが前提となっております。環境構築には以前の[投稿](https://qiita.com/kitfactory/items/2fde799fa092f0d8f0f1)をご参照ください。

## 1.会議を一気に立ち上げる：議事録スニペット

まずは議事録のテンプレートから。Visual Studio Codeを立ち上げて、meetingと打ち出せば、いきなりテンプレートが呼び出され、立ち上がりがとても早く行えます。また、報告業務のような定例会は、もう少しパターン化ができるでしょうから、そのあたりもスニペットを調整しておくと更にスムーズな会議運営ができますね。

```
## xxxx会議録
日時:2018/10/xx
場所:xxx会議室
出席者:xxx,xxx,xxx,xxx

### 1.目的
* xxxxの対応を決める。
* xxxxの対応を決める。

### 2.結論
* xxxxをxxxとする。
* xxxxをxxxとする。

### 3.A.I.
* xxxxxする。(担当: xxx 期日： x/xまで)
* xxxxxする。(担当: xxx 期日： x/xまで)
* xxxxxする。(担当: xxx 期日： x/xまで)

### 4.議論
* xxxxはxxxではないか？(Aさん)
→ xxxにする。

```

## 2.みんなを案の取りまとめに集中させる：プロコン(Pros. Cons.)用のスニペット

メリット・デメリットを整理したい。案を取りまとめたいなら、とにかくプロコンをやってみましょう。

```

|案|メリット|デメリット|決定|
|:--|:--|:--|:--|
|案A:xxxする| | | |
|案B:xxxする| | | |
|案C:xxxする| | | |

```

## 3.みんなの全体像の理解を助ける：システム図のスニペット

システムの全体像やビジネスモデルを描くには、コンポーネント図が便利ですね。このような図を共有すると技術者ではない人にも理解が早まると思います。

```
___xxシステム説明__
```plantuml
@startuml
actor A

node "社内"{
    A -up-> [xxxサーバー] : アクセス
}

node "AWS"{
    database DB
    [xxxサーバー]-right->[xxxAPI] : hoge
    [xxxAPI]-right->DB : xxxする   
}
@enduml
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/35954/5f27534c-7a48-0622-07c5-edd90e221461.png" style="width:450px" >


## 4.みんなの仕事の順序を爆速にまとめる：ワークフロー・スニペット

部署を超えて業務手順を考える相談する際には、スイムレーンを活用した図が超便利です。以下を呼び出すようなスニペットを登録しておきましょう。

```
__xxxのワークフロー__
```plantuml
@startuml
|__担当A__|
:xxxする;
|__担当B__|
:xxxする;
|#ccf|__担当C(部署X)__|
:xxxxする;
|__担当B__|
:xxxする;
fork
|__担当B__|
:xxxする;
forkagain
|#cfc|__担当D(部署Y)__|
:xxxする;
end fork
|__担当A__|
:xxxする;
@enduml
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/35954/84c396fc-68f3-7b4f-f8d4-73c978195bef.png" style="width:600px" />


## 5.不確実なリスクを先回りして、みんなに将来を爆速で予測させる：PDPCスニペット

リスクのある事象を検討する場合は、PDPC(Process Decision Program Chart)が利用できます。Aができたら？できなかったら？不確定のことが多いプロジェクトで、メンバーに先回りして予測させるには、PDPCをみんなで議論するのが最適です。（これはズバリ、アクティビティ図で描くことができますね。）

```
__PDPCの判断__
```plantuml
@startuml
(*)-->"xxxする"
if "問題ができた?" then
-->[Yes]"yyyする"
-->"zzzする"
-->"cccする"
else
-->[No]"aaaする"
-->"bbbする"
-->"cccする"
endif
"cccする"-->(*)
@enduml
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/35954/15b1cd38-2ff7-5e5a-b8c9-e52926568604.png" style="width:350px" />


## 6.作成する成果物のムダがないか、みんなに爆速に検討させる：PFDスニペット

プロジェクトで作成する文書などの成果物を検討するときはPFD(Process Flow Diagram)が良いですね。PFDでは四角を成果物、丸をプロセスに当てます。四角があるけれど、その先がないものは宙ぶらりんの成果物で意味がないかもしれません。作成するインプット・アウトプットのつながりを明確にして、成果物に必要な品質を予想しやすくします。

```
__開発プロセス(PFD)__
```plantuml"
@startuml
agent 企画書
agent 要求仕様書
agent 設計書
agent ソースコード

(企画)-->[企画書]
[企画書]-right->(要件定義)
(要件定義)-right->[要求仕様書]
[要求仕様書]-right->(設計)
[企画書]-right->(設計)
(設計)-down->[設計書]
[企画書]-right->(実装)
[要求仕様書]-right->(実装)
[設計書]-->(実装)
(実装)-->[ソースコード]
@enduml
```

<img src="https://qiita-image-store.s3.amazonaws.com/0/35954/3e863470-d959-7c07-303d-81fdcff9276a.png" style="width:500px" />

## 7. マークダウン用爆速スニペットの登録

上記のスニペットを登録するには、VSCodeのメニューからユーザースニペットを選択してください。

<img src="https://camo.qiitausercontent.com/d1e40e9fade40456c3df63172fdc017a8ff201c8/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f33353935342f30393966396365662d653366652d303431382d366236392d3661356663396366303865312e706e67" >


そして、マークダウン用のスニペット編集ファイル、markdown.jsonを編集すればOKです。上記のスニペットの内容は、[こちら](https://github.com/kitfactory/vscode-template)で公開していますので、markdown.jsonへ切り貼り＆編集などして、ご活用ください。ホワイトボードに描く時代は終わりました。プロジェクター上でPlantUMLの図を直接編集しましょう！

それでは、みなさん、Happy Meeting Life!!