「Goqoo on kintone」で Reactを使う方法

概要

Goqoo on kintone を使って、kintoneカスタマイズの React開発環境を構築する方法について書きます。

Goqoo on kintone については下記の公式記事を参照ください。
https://qiita.com/the_red/items/3222d8bf71c32d769060

環境

• macOS 10.15.7

goqoo new

適当なディレクトリを作成して、下記を実行。

npx goqoo new プロジェクト名

「Frontend Framework」は (None) を選択。

プロジェクトが生成されたら、プロジェクトディレクトリにcdして、git commitします。

goqoo generate

カスタマイズに必要な雛形のファイル等を生成します。

npx goqoo generate app アプリ名

$ npx goqoo generate app app305
✔ App name · app305
info Created src/apps/app305/index.ts
info Created src/apps/app305/hello.ts

srcディレクトリ以下はこんな感じになっています。

$ tree -L 3 ./src
./src
├── apps
│   └── app305
│       ├── hello.ts
│       └── index.ts
├── context.ts
├── example.ts
├── in-app
└── types.ts

Reactパッケージのインストール

React関連のパッケージをインストールします。

package.jsonにパッケージを登録して、npm installします。

  "devDependencies": {
    "@types/bootstrap": "^5.1.0",
    "@types/react": "^17.0.15",
    "@types/react-dom": "^17.0.9",
・・・ 
  "dependencies": {
    "bootstrap": "^5.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
・・・

TSXファイルの作成

アプリフォルダの「hello.ts」を書き換えます。

hello.tsx

import type { IndexEvent } from 'types'
import * as React from "react"
import * as ReactDOM from "react-dom"

const App = () => (<span> Hello from Goqoo on kintone!!!!!!! </span>)

kintone.events.on('app.record.index.show', async (event: IndexEvent<any /* kintone.types.SavedXxxxFields */>) => {
  const container = document.getElementById('react-sample-container')
  ReactDOM.render(<App />, container)
  return event
})

goqoo.config.js修正

「bundlerType:」を'react' に書き換えます。

const config = {
  // bundlerType: 'default',
  bundlerType: 'react',

goqoo start

npx goqoo start して確認します。

※事前にカスタマイズビューを作成して、<div id='react-sample-container'></div>を設定しておきます。