こんにちは！ロコガイド 技術部バックエンドグループの @ar_tama です。
第1回から随分間があいてしまいましたが、第2回の更新です！
先日、デザイナーの id:rei-suzuki と社外向けに1つプラグインを公開しました。 techblog.locoguide.co.jp
もうひとつ社内向けにもプラグインを作ってるのですが、そちらのご紹介は id:rei-suzuki に譲るとして、
今日は開発を進める上で出会った素敵なBolierplateについて紹介します。
Figma Plugin TypeScript Bolierplate
https://github.com/aarongarciah/figma-plugin-typescript-boilerplate
Figma PluginはTypeScriptを使って開発することは第1回でも触れたとおりですが、
こちらはそれを更に拡張して最適な土台を作ってくれます。
デフォルトで
- TSのコンパイル
- Linterやwebpack等々のデフォルト設定
- テスト（Jest）
- ビルド・テストのGithub Actions
- Node12系、13系で動かしてくれる
UI.htmlのビルド- css, js（ts）のファイルを分けて管理できるようにしてくれている
の機能が揃っています。
簡単なプラグインの作成であれば導入はほぼ不要なものですが*1、
改修を重ねてtsファイルが肥大化した・しそうなプロジェクトには早めに導入するとたいへん幸せになれます。
※ 詳しくはこちら
導入方法
新規プロジェクトに導入する場合
Quick Startを参考にファイルを配置後、
npm install npm run dev して開発をスタートします。簡単ですね！
src 以下には各コードのボイラープレートもありますので、適宜参考にしながら書き換えていくのがよいですね。
具体的にはplugin / UI間でのメッセージングのInterfaceなどが用意されています。
既存のプロジェクトに導入する場合
今回は既に進行しているプロジェクトに導入したので、このように進めていきました。
1. 既存のファイルを退避する
コンフリクトを避けるために、既存のファイルは予めバックアップしておきましょう。
- manifest.json
- code.ts
- ui.html
- （独自に設定している場合は）tsconfig.json
2. Boilerplateを導入する
プロジェクトのディレクトリで
npx degit https://github.com/aarongarciah/figma-plugin-typescript-boilerplate
npm install
した後に、退避したファイルを配置していきます。
- manifest.json, config → ルートディレクトリ
- 一部boilerplateの設定を反映させる必要があるので注意（★例）
- code.ts →
src/plugin/ - ui.html →
src/ui/
3. 動作確認をする
npm run dev でビルド後、Figma Pluginが動作するか試してみましょう。
小ネタ
このBoilerplateを利用したプラグインは、 dist 以下にビルド結果が出力されます。
デフォルトではgitignoreに指定されてしまっているので、
（Developer Modeでの配布など）ビルド後のファイルを含める必要があればignoreから外しましょう。
また、このような運用の場合はcommit hook等で npm run build しておくと更に便利ですね。
おわりに
「せっかくTSで開発しているんだし、主要ロジック部分のテストが書きたい」と思ったのが
このBolierplateを見つけたきっかけでした。*2
結果コードも整理され（UI側のファイルが分割できた・TSを導入できたのが本当に嬉しい）、
中程度以上の規模のプロジェクトの生産性をさくっと爆上げしてくれると感じています。
皆さんもぜひ試してみてください💪
