kintone プラグイン開発の環境構築 （Windows）

# はじめに

本記事の初投稿から年月が経ち、Internet Explorer のサポート終了や、Typescript での開発がスタンダードになりつつあったりと、kintone プラグイン開発に関する周辺で様々なことが変化してきています。
また、[@kintone/create-plugin](https://github.com/kintone/js-sdk/tree/master/packages/create-plugin) の登場で kintone プラグイン開発環境構築も劇的に簡単になっています。
これに伴い、要件も変わってきており、本記事を更新しました。（もはや記事にすることでもないかも。。）

# 要件

プラグインの作成にあたり、以下の要件がありました。

- Windowsで開発
- git 管理
- 共通処理をモジュール化して他のプラグインでも使用する
- Typescriptで開発

# 構成概要

前述の要件を満たす構成として、以下のようにしました。

- [Git for Windows](https://gitforwindows.org/)
- [Visual Studio Code](https://code.visualstudio.com/)
- [Node.js](https://nodejs.org/ja/)
- [@kintone/create-plugin](https://github.com/kintone/js-sdk/tree/master/packages/create-plugin)

# 構築手順と設定

## Git for Windows のインストール

[kintone developer network のドキュメント](https://developer.cybozu.io/hc/ja/search?utf8=%E2%9C%93&query=cygwin)には`cygwin`という言葉がでてきたり、現在では WSL2（Windows Subsystem for Linux）上で開発した方がスマートな気がしたりもしますが、手軽に bash 環境と git コマンドが得られる Git for Windows を選択しました。

[トップページ](https://gitforwindows.org/)の download からダウンロードしてインストールします。

インストール時の`Configuring the line ending conversions`の設定は`Checkout as-is, commit as-is`にしておくと改行コードの扱いについて混乱しないかと思います。


## Visual Studio Code のインストールと設定

[トップページ](https://code.visualstudio.com/)の Download for Windows からダウンロードしてインストールします。

拡張機能として Japanese Language Pack for Visual Studio Code とESLint をインストールしておきます。
インストール方法については省略します。

ターミナルはデフォルトでは Power Shell になっていますが、 bash を選択しておくと、Git bash を別途立ち上げなくても bash コマンドが実行できるようになり便利です。
メニューバーの「表示」→「ビューを開く...」→「ターミナル」を選択し、開いたターミナルビューの「＋」アイコンを（初めて）クリックすると、新しい種類のターミナルを追加でき、そこで Git Bash を選択します。

その他の基本設定は、メニューバーから「ファイル」→「基本設定」→「設定」から行い、 JSON で設定します。
既定の改行文字を LF にしておくとよいでしょう。
以下は設定例です。

```json
{
    "window.zoomLevel": -1,
    "editor.renderWhitespace": "all",
    "window.menuBarVisibility": "default",
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "editor.renderControlCharacters": true,
    "files.eol": "\n",
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/.project": true,
        "**/.tern-project": true
      },
}
```

## Node.js のインストール

[トップページ](https://nodejs.org/ja/)の 推奨版をダウンロードしてインストールします。

特筆することはないので詳細は省略します。

## @kintone/create-plugin でプラグイン開発用フォルダの作成

@kintone/create-plugin の登場でコマンド一発で作成できるようになりました。

```bash
npx @kintone/create-plugin --template modern --lang ja sample-plugin
```

質問に答えるだけで、フォルダの作成、ESlint/Prettier の設定、Webpack/babel の設定、Typescript の設定、秘密鍵の作成を自動でしてくれます。なんて便利なんでしょう。

## git の初期化と .gitignore の作成

プラグイン用フォルダ直下で以下のコマンドを実行します。これはプラグイン用フォルダを作成した直後に行います。

```bash
$ git init
```
`.gitignore` は Visual Studio Code またはターミナルから`vim`コマンド等で作成します。
記述する内容については [github/gitignore](https://github.com/github/gitignore) が参考になります。
[Global/VisualStudioCode.gitignore](https://github.com/github/gitignore/blob/master/Global/VisualStudioCode.gitignore) と [Node.gitignore](https://github.com/github/gitignore/blob/master/Node.gitignore) の内容を組み合わせたものでよいでしょう。

プラグイン用として以下も追加します。

````
dist/
plugin/js
````

適宜 git に commit します。

## プラグインパッケージ化

開発版の場合は以下のコマンドにより、プラグインディレクトリ配下の dist ディレクトリにプラグインが作成されます。

```bash
$ npm run build
```
製品版の場合は以下のコマンドになります。

```bash
$ npm run build:prod
```

とっても簡単ですね。

# おわりに

このような環境で作成した kintone プラグインを https://kinkozi.webware.co.jp/ にて販売中です。