Adobe XDのプラグインにReactでGUIを実装してみる(準備編)

前書き

お久しぶりです。あぽろきゃっとです。
XDの続きを書く予定はなかったのですが、ちょっと思いついたことを試すついでに備忘録がてら書いておきます。

前回、Adobe UXP Developer Toolのテンプレートプラグインを動かすことができたので、
この辺を参考にしながら、ReactでプラグインのGUI（ガワだけ）を実装してみます。
今回は準備編ということでReactを動かすためのnode環境を作っていきます。

前回はこちら「Adobe UXP Developer Toolを使ってAdobe XDのプラグインを作ってみる(作成編)」

環境

MacBook Pro (13-inch, M1, 2020)
macOS Monterey 12.6
Adobe Creative Cloud 5.9.0

はじめよう

チュートリアルの前提条件はこのような感じです。

* Basic knowledge of HTML, CSS, JavaScript, and React
* A text editor to write your code in (like VSCode, Sublime Text, Brackets, Atom, etc)
* Quick Start tutorial
* node and npm installed

Reactを使うので、nodeとnpmのインストールが必要になりますね。
ということでnodeを管理するnvm[^1]のインストールから始めていきます。
メモとして書くので、ターミナルの使い方など不明点があればご自身で調べてみてくださいね

nvm インストール

公式のインストールスクリプトがあるので、下記のページからコマンドをコピーしてターミナルで実行します。[^2]
https://github.com/nvm-sh/nvm#install--update-script

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

インストールが終わったらバージョンを確認します。

% source ~/.zshrc
% nvm -v
0.39.3

バージョンが表示されていれば大丈夫でしょう。

Node.js　インストール

nodeのインストールに進みます。
nodeの安定版を入れるために"--lts"オプションをつけてnvmを実行します。

% nvm install --lts

完了したらnodeとnpmのバージョンを確認します。

% node -v
v18.16.1
% npm -v
9.5.1

バージョンが表示されていれば大丈夫だとおもいます。

まとめ

ということでチュートリアルを進めるためのnode.js環境を用意しました。
次回はチュートリアルを進めていこうと思います。

[^1]　Node.jsのバージョンを管理するツール
[^2]　Homebrewでもインストールできますが、手動で追加の作業がいるのと、サポート対象外と表示されるので今回はこちらで。