NotionとFigmaのMCPサーバを活用してVSCodeでの開発速度を加速させたい

:::note warn
2025年4月27日時点の情報になります
注意して読んでください
:::

# 前書き
最近、MCPサーバが流行っているというのもあり自分自身でも学び、NotionとFigmaのMCPサーバを利用すれば開発速度をあげられるのではと考えました
まだ難しい機能開発は難しい気がしますが開発初期や簡単な実装の時には絶大な相棒になってくれると思い、記事にまとめていきます

# セットアップ
## 各種APIキー発行

各サービスからAPIキーを取得していきます

### Notion

#### 1. 「新しいインテグレーション」をクリック
赤枠で囲った箇所をクリックしてください

https://www.notion.so/profile/integrations

![CleanShot 2025-04-28 at 06.58.41@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/9bd05e16-4c9e-42de-9ee9-f40eb53e20dd.png)

#### 2. 「インテグレーション名」「関連ワークスペース」を設定

赤枠箇所を入力してください
「インテグレーション名」は自分自身がわかりやすいものにしてください
入力出来たら下部の「保存」を押してください

![CleanShot 2025-04-28 at 07.06.04@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/006354c5-6791-4ee2-b83f-824d7bcb0e21.png)

#### 3. APIキーをメモ

インテグレーションの設定画面を開いたら「内部インテグレーションシークレット」をコピーしてください

![CleanShot 2025-04-28 at 07.08.46@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/83712774-2fe5-4647-83b1-5917d34a988c.png)

#### 4. 作成したインテグレーションを自身のワークスペースと接続

自身のワークスペースに訪れて右上にある三点リーダーをクリック、項目にある「設定」をクリックして検索窓に「MCP」と入力して先ほど作成したインテグレーションを接続してください

![CleanShot 2025-04-28 at 08.07.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/e3456d43-a6c3-48b8-bbd9-3a055bd32428.png)

### Figma

#### 1. APIキー作成画面へ移動

ユーザ名 → 設定 → セキュリティ → 個人アクセストークン → 新規トークンを作成
の順で移動します

![CleanShot 2025-04-28 at 07.17.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/0c715f5e-d49b-4879-8382-6ced380c5673.png)


#### 2. 権限を設定

添付している画像は記事内容の動作が行えるスコープにしています

![CleanShot 2025-04-28 at 07.14.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/7328fc19-410e-4f68-b6eb-a8b1803d65e5.png)

#### 3. APIキーをメモ

作成出来たら「このトークンをコピーします。」をクリックしてコピーしてください

![CleanShot 2025-04-28 at 07.19.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/17f9eaf2-e6a5-4acd-842a-e43f5e328161.png)


### 環境

簡単な内容にするため`React + vite`で環境を構築していきます

```zsh:zsh
npm create vite@latest mcp-study -- --template react-ts
```

### VSCodeにてMCPサーバへの接続設定

#### 1. Setting画面からMCP設定項目検索

「cmd + ,」(macOS操作だと)を押してSetting画面を開き、検索フォームで「MCP」と入力してMCP設定項目を表示させてください
表示されたら「Edit in setting.json」をクリックしてください

![CleanShot 2025-04-28 at 07.43.37@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/e2cb867b-76ed-4507-a262-77946be1ffa0.png)

#### 2. 設定を記載

NotionとFigmaのMCPサーバ設定を記載していきます
また今回はGithub Copilot Agentを使用して自然言語から開発者がコード生成、修正などを行いたいのでこちらも設定していきます

```json:setting.json
"mcp": {
    "inputs": [],
    "servers": {
        "notionMCP": {
            "command": "npx",
            "args": [
                "-y",
                "@notionhq/notion-mcp-server"
            ],
            "env": {
                "OPENAPI_MCP_HEADERS": "{\"Authorization\": \"Bearer ntn_xxxx\", \"Notion-Version\": \"2022-06-28\" }"
            }
        },
        "figmaMCP": {
            "command": "npx",
            "args": [
                "-y",
                "figma-developer-mcp",
                "--stdio"
            ],
            "env": {
                "FIGMA_API_KEY": "figd_xxxx"
            }
        },
        "filesystem": {
            "command": "npx",
            "args": [
                "-y",
                "@modelcontextprotocol/server-filesystem",
                "path/to/mcp-study"
            ]
        }
    }
}
```

##### Notion

`ntn_xxxx`の部分は先程メモをしたNotionのAPIキーに置き換えてください

```json
"notionMCP": {
    "command": "npx",
    "args": [
        "-y",
        "@notionhq/notion-mcp-server"
    ],
    "env": {
        "OPENAPI_MCP_HEADERS": "{\"Authorization\": \"Bearer ntn_xxxx\", \"Notion-Version\": \"2022-06-28\" }"
    }
},
```

##### Figma

`figd_xxxx`の部分を先程メモしたFigmaのAPIキーに置き換えてください

```json
"figmaMCP": {
    "command": "npx",
    "args": [
        "-y",
        "figma-developer-mcp",
        "--stdio"
    ],
    "env": {
        "FIGMA_API_KEY": "figd_xxxx"
    }
},
```

# Notionにコード規約

ここは自身のプロジェクトに合わせてコード規約をNotionに記載してください

![CleanShot 2025-04-28 at 08.18.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/eab8d0dd-07be-435b-b713-9ddd5bb4f6ff.png)

<details><summary>例</summary>

# **フォルダ構成**

```bash
frontend/
      ├─ public
      ├─ src/
            ├─ components/
                  ├─ ui/
                  ├─ models/
            ├─ pages/
            ├─ hooks/
            ├─ consts/
            ├─ providers/
            ├─ routes/
            ├─ utils/
            ├─ env/
            ├─ styles/
```

| ディレクトリ | 役割 |
| --- | --- |
| components | ui: 各パーツ models: ビジネスロジック |
| pages | 各ページのトップ |
| hooks | hooks 関数 |
| consts | 変更が無い値 |
| providers | provider の設定 |
| routes | ルーティングの設定 |
| types | 共通で使う型 |
| utils | 通常関数 |
| env | env 系の設定 |
| styles | 初期スタイル設定 |

# **コード規約**

## **命名**

基本的に命名する際はキャメルケース（例：camelCase）を使用します。命名が思いつかない場合は[codic](https://codic.jp/)または[deepl](https://www.deepl.com/ja/translator)を使用してください。

以下の場合は異なる命名規則を適用します：

- Pageファイル・Componentファイル・クラス名・型定義：パスカルケース（例：PascalCase）
- 定数：大文字スネークケース（例：SNAKE_CASE）

## **コメント**

コメントは以下のいずれかの形式で記載してください：

- [アノテーションコメント](https://qiita.com/taka-kawa/items/673716d77795c937d422)
- [JSDoc](https://www.typescriptlang.org/ja/docs/handbook/jsdoc-supported-types.html)

のどちらかで記載してください。

## **`eslint-disable`を使用する場合はコメントを残す**

`eslint-disable`が必要な理由を必ず記載してください。

## **マジックナンバー・マジックストリングを使用しない**

コードの可読性向上のため、使用を避けてください。

## **`any`を使用しない**

`any`は型情報を損なうため、使用を避けてください。

代替として`unknown`を使用してください。

## **`null`ではなく`undefined`を使用する**

`{valid:boolean,value?:Foo}`の形式、`空文字`、または`0`の使用を推奨します。

**1ファイル`300〜350行`を目安にする**

共通化の意識と可読性向上のため、この行数を目安にしてください。

`300〜350行`を超える場合は、ファイルの分割を検討してください。

`pages`、`libs`、`test`など複数機能を持つファイルは例外とします。

## **共通化は必ずしも最適解ではない**

条件やpropsが複雑化する場合は、無理な共通化は避けてください。

UIデザインに起因する場合は、デザイナーと協議してください。

## **型推論**

型推論が機能している場合は、明示的な型指定は不要です。

**`type`を使用する**

型定義には`interface`ではなく、基本的に`type`を使用してください。

**`named export`を使用する**

`default export`はファイル名変更時の追跡が困難なため避けてください（[参考](https://typescript-jp.gitbook.io/deep-dive/main-1/defaultisbad)）。

```
export const Foo = () => {};
import { Foo } from "./foo";
```

## **オブジェクトの省略記法**

可能な場合は、オブジェクトのプロパティ名を省略して記述してください。

```
const user = {
  id,
  name: "foo",
};
```

## **boolean型の属性**

booleanのpropsは省略形で記述してください。

```
<Component isPersonal />
```

## **enumを使用しない**

型安全性の観点から（[参考](https://typescriptbook.jp/reference/values-types-variables/enum/enum-problems-and-alternatives-to-enums)）、`as const`による定義を使用してください。

```tsx
export const TAG_TYPE = {
  LARGE: "large",
  NORMAL: "normal",
  SMALL: "small",
} as const;
export type TAG_TYPE = (typeof TAG_TYPE)[keyof typeof TAG_TYPE];
```

## **カスタムフック**

「useXXX」という命名(「XXX」は任意で設定)で`hooksディレクトリ` に作成していください。

また型を作成します
`UseXXXArg` は引数が存在しない場合は設定しない

```tsx
type UseXXXReturn = {}
type UseXXXArg = {}
type UseXXX = (arg: UseXXXArg) => UseXXXReturn

export const useXXX: UseXXX = ({}) => {
  return {}
}
```
</details>

# Figmaにデザイン

簡単なアカウント作成画面をFigmaで作成します

![CleanShot 2025-04-28 at 20.55.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/cf617a69-9b1b-4779-b048-23117e1c0716.png)
![CleanShot 2025-04-28 at 20.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/23a9287d-5744-445e-ac6f-46cc2b62dbf1.png)

Figma MCPを使用する場合にノードを細かくしてあげると読み取り精度が高いです
またノードが極端に多すぎると読み取りが出来ず無限ループになる可能性があります(自分はなりました)

https://zenn.dev/superstudio/articles/91ceb2f2f1d784#%E3%81%AA%E3%82%8B%E3%81%B9%E3%81%8F%E3%83%8E%E3%83%BC%E3%83%89%E3%81%AE%E5%8D%98%E4%BD%8D%E3%82%92%E5%B0%8F%E3%81%95%E3%81%8F%E3%81%99%E3%82%8B

# 実際に動かしてみる

ここまで出来たらMCPサーバを起動していきます
VSCodeのコマンドパレットから起動する方法もありますが、今回は`setting.json`から起動していきます
各サーバ名の上にある「Start」をクリックすることで起動します

![CleanShot 2025-04-28 at 22.06.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/f0aaae88-cbe4-46a2-a4e7-a3919f9ccb88.png)

起動出来たら「Running」と表記が変わっているはずです

![CleanShot 2025-04-28 at 22.08.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/2f78429f-8a66-4165-977d-b3739a34a8b5.png)

ここまできたらGithub Copilotのチャットを開いてください
開けたら赤枠のところプルダウンがあるのでこちらから「Agent」に切り替えてください
これで起動しているMCPサーバを使用して開発することができます

![CleanShot 2025-04-28 at 22.09.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/499cf401-34b8-4dcd-90ea-fbef687c0c5c.png)

## エラーについて
現状のままだとエラーが発生してAI駆動で開発することが出来ません
NotionのAPIで不具合らしき現象が発生しているため添付画像のようにエラーが発生してしまいます

![CleanShot 2025-04-28 at 22.00.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/abbec34c-09cb-4fc4-ac3e-42de5ac09244.png)

暫定的な解決策として下記のissueがありました

https://github.com/makenotion/notion-mcp-server/issues/15

### 1. ツールマークをクリック

チャットの下にあるツールマーク（赤枠）をクリックするとコマンドパレッドが開きます

![CleanShot 2025-04-28 at 22.19.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/e5c017f8-ce32-42be-bd1c-6f6a3cb8daae.png)

開いたら添付画像のツールだけ選択してください
使用するツールを絞り込むことでNotionMCPを使用することが出来ます

![CleanShot 2025-04-28 at 22.18.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/22725b28-ed9e-439e-ac0d-0701c753faaa.png)
![CleanShot 2025-04-28 at 22.48.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/678b0d35-aa1e-43ae-aaee-3056eb1afb4f.png)

## Figma
FigmaはNotionほど難しくなく起動出来るかと思います

![CleanShot 2025-04-28 at 22.55.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/d27eca17-16cb-4a60-9e52-2dc05c6667c1.png)


## コードを書いてもらう

NotionのFimgaの情報読み取りながらコードを書いてもらえます

![CleanShot 2025-04-28 at 23.18.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/db3de016-df00-4ddd-aaeb-9e8e981ce2ae.png)
![CleanShot 2025-04-28 at 23.26.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/65a10331-b71a-4a79-99d0-a9141383a115.png)
![CleanShot 2025-04-28 at 23.39.21@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311195/8ae1ba74-d6a8-447f-9a6b-fccd61f94274.png)

# まとめ
今回は簡単にVSCodeでMCPサーバを活用してコードを書いていきました
新たな開発スタイルが見られて楽しかったです
ただ、楽しいだけではなくリスクについてもしっかり理解した上で使う必要があります
下記記事はとてもわかりやすいので一読するのをおすすめします

https://zenn.dev/sun_asterisk/articles/mcp_security_risk