【画像付】最速でデザイナーにレビュー依頼する

# はじめに
自社でVueを触るタイミングで、フロントエンドエンジニアからStorybookを教えてもらいました。
結果、一手間加えるとデザイナーとのレビューが圧倒的に楽になったので、今回はそこを書きます。

# Storybookとは？
![storybook-intro-animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/8481b0af-d8b0-d7c9-5d15-3427aed7efee.gif)

- StorybookはUIの開発ツール
- ReactやVueにて利用可能
- コーディングしたコンポーネントの挙動等を確認
- 細かい単位で分割してコーディングしていくのに適している。と感じた
    - 具体的にはAtomic Designが適している。と感じた

# こまってたこと

- 自社ではWebViewを用いたアプリを作っていたりします。もちろん、基本的にデモはアプリ上で行っています。
- ちょっとしたデザインレビューするのにもデモアプリに配布するのは効率が悪い...
- けどデザイナーに開発環境を構築してもらうのも悪い...
- **PushしたらStorybookを自動デプロイするようにして、URL連携してみてもらえたら最高じゃないか？**

# やりたいこと

## 開発の流れイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/e0e0a9b3-24a4-800a-aaf6-084043149999.png)

1. デザイナーからデザインファイルをもらう
2. コーディング
3. レビュー依頼（URL）
4. レビュー完了したらデモアプリに配布して、デモ会に持っていく

## 利用する構成イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/ce3f78cf-386b-ebd9-ba12-0a2e3a6d95c7.png)

1. コーディング後、ブランチにPush
2. Netlifyが自動的にStorybookをデプロイ
3. デザイナーにPR投げたり、URLを連絡したりしてレビュー依頼する

# やったこと

## storybookの導入

以下に詳細な手順を記載してありますのでこちらで導入
https://qiita.com/vengavengavnega/items/566a6beed89ec86c55fa

## buildコマンドの追加

```package.json(抜粋)
"scripts": {
  "build-storybook": "build-storybook -s public"
},
```

## Netlifyの設定

### アカウント作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/83cdf108-ee5e-44c1-cb0b-120098908b83.png)

今回はGithubアカウントで作成しました。
画面の手順に従って完了です。

### 新しいサイトの設定をする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/be628123-3edf-99b7-ad9d-8a664a9088cd.png)

`New Site from Git`から、新しいサイトの作成画面へいきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/54f72257-0262-abdf-e13f-6f9c573f81bc.png)

画像の通り、対象のブランチと、Buildの設定を入力します。

### デプロイの完了を確認する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/12208916-0d8b-0181-9e52-7581fbe655ea.png)

画像の通りStep1が`Your site is deployed ✔️`となっていればデプロイ完了です。
ちなみに、以降のステップはカスタムドメインを設定するなど記載がありますが、ただのレビュー用であれば不要なので問題ありません。

### サブドメイン（URL）をわかりやすい名前に変更する

デフォルトだと、サブドメインが自動生成された文字列になっていて分かりにくいかと思いますので変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/4dba5d9e-72b5-38ba-6226-f562ed12ad16.png)

`⚙ Domain setting`を押下してドメイン設定画面へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/130f7897-5d82-4bc0-7523-9c7882775df6.png)

`Custom domains`にデフォルトの設定が存在するので、`Options->Edit site name`を押下して名前を変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/87ede940-ddeb-3d56-11d0-5d3536261261.png)

いい感じの名前を入力して`Save`します。

![Overview___demo-for-designer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/7a12c9e2-cd57-2f3f-d77b-8f541c236192.png)

TOPの表示も変更されていますね！

### GithubのPRにも自動的にURLがリンクされています

<img width="497" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/be35b313-5780-0dd5-204c-2533bb8059ca.png">

### ちゃんとアクセスできますね！:+1:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/4c218fce-ae4f-ac4e-6110-68017cb2b347.png)

# (おまけ)SlackにPRの通知が行くように設定

[SlackとGitHubを連携してissueコメントやプルリク通知をチャンネルに流す方法（2020年版）](https://qiita.com/unsoluble_sugar/items/e42ac352400598a24915)

こちらの記事を参考に、PR生成時にSlackに通知が飛ぶようにすれば完璧ですね！
ノータイムでレビュー依頼ができます。

# 参考
https://www.learnstorybook.com/intro-to-storybook/vue/en/deploy/