create-plasmic-appを試す

## この記事の概要

Plasmicという、コードに統合もできるビジュアルビルダーを試してみました。

https://www.plasmic.app/

いきなり大規模なプロジェクトを作ると大変そうなので、まずは簡単なプロジェクトを作るだけとします。

## GUIでのセットアップ

[プロジェクトページ](https://studio.plasmic.app/projects)にアクセスし、新規プロジェクトを作成します。
ページ右上の`New Project`をクリックします

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/0489708e-61e4-f35e-a781-2f4c1e1bb077.png)

テンプレートも選べますが、とりあえずBlankを選びます。
すると次のような画面に移ります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/b76f53f5-ed34-1893-f01a-7ef529dd7b51.png)

コードからも触るために、一度Publishする必要があります。
ページ右上の`Publish`をクリックします。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/4e623fdc-0a22-cdd8-8b3d-d47e690ed738.png)

出現したモーダルウインドウ右下の`Publish`をクリックします。

この後の工程で、このファイルのURLが必要になるのでメモっておき、次に進みます。

## CLIでのセットアップ

既存のコードベースにPlasmicを追加することもできますが、今回は新規にPlasmic用のプロジェクトを作成します。
ターミナルに次を入力します。

```shell
npx create-plasmic-app@latest
```

対話型で進みます。
今回はすべてデフォルトの選択肢を選びました。
（TypeScript, Next.js, PlasmicLoader, app/ディレクトリ無し）

```shell
? What is your project named? (my-app) 
? What language do you want to use? (Use arrow keys)
❯ TypeScript 
  JavaScript
? What React framework do you want to use? (Use arrow keys)
❯ Next.js 
  Gatsby 
  Create React App
? Which scheme do you want to use to integrate Plasmic? (Use arrow keys)
❯ PlasmicLoader: recommended default for most websites 
  Codegen: for building complex stateful apps 
? Do you want to use the app/ directory and React Server Components? (see https://beta.nextjs.org/docs/app-directory-roadmap) (Use arrow keys)
❯ No, use pages/ directory 
  Yes, use app/ directory (experimental) 
? If you don't have a project yet, create one by going to https://studio.plasmic.app/starters/blank.
What is the URL of your project?
```

ここまで来たら先ほどメモしておいたURLを入力して進みます。
URLは`https://studio.plasmic.app/projects/PROJECT_KEY`の形式です。

入力するとauthorizeのページが開きます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/d929cd90-9926-eb48-79b7-96d3bc4009ad.png)

下部にある`Authorize`をクリックすれば完了です。
このページは閉じて構いません。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/3f02859e-9994-c7a2-c7f4-eee77cfe17a6.png)

ターミナルに戻るとこのように表示されているはずです。

```shell
Let's get started! Here's what we'll do: 
1. Authenticate with Plasmic
2. Create a React/Next/Gatsby repo
3. Integrate with Plasmic

==================================================
AUTHENTICATING WITH PLASMIC
==================================================

If your browser doesn't automatically open, enter the following URL:
https://studio.plasmic.app/auth/plasmic-init/8c9f5c98-c60e-4a97-b2ac-114d6dba994c

Please log in and authorize Plasmic CLI.
Waiting for token...
We haven't received an auth token from Plasmic yet.
? Your Plasmic user email Cancelling prompt...
Successfully created Plasmic credentials file at /Users/h-2486/.plasmic.auth

==================================================
CREATING THE PROJECT
==================================================
npx create-next-app@latest --ts --no-experimental-app  --eslint --no-src-dir  --import-alias "@/*" /Users/h-2486/Repositories/my-first-plasmic
Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y)
```

`y`を押せば追加のインストールが完了しますので、作成されたディレクトリへ移動しましょう。
今回はNextを選んだので起動のために次を入力します。

```shell
npm run dev
```

すると通常のNextと同様にローカルホストの3000番で立ち上がります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/d31284e2-f485-ca2e-0909-a3c5ff315fbf.png)

先ほどGUI上で作っていたのと同じ見た目です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/bdbe5d41-cd70-43a8-55cd-349f78bc8a53.png)

## コンテンツの更新

まず、GUIでコンテンツを更新します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/1a4a216d-3237-5f6e-9732-516a79015aaf.png)

その後、最初に実施したのと同様に`Publish`をします。
完了したらページを再読み込みすれば更新されています。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/9ab95578-885d-50f2-1cbb-77e261040acc.png)

## 最後に

非常に簡単な内容ですが、GUIとコードを行き来してPlasmicを試してみました。
デプロイフローなどがまだ試せていませんから、今度試して別の記事として投稿するつもりです。

軽く触ってみた感じ、単なるデザインツールとして見てもかなり優秀に見えたので色々模索してみようと思います。

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

https://twitter.com/xrxoxcxox

Devトークでのお話してくださる方も募集中です！

https://jobs.qiita.com/employers/qiita-inc/dev_talks/489