やろうと思ったきっかけ
- 複数アプリで同じような記述が増えていき、いろいろと共通化したかった（これが一番）
- 上記に似ているが、複数アプリに同じファイルを適用していると、変更時に差し替えるアプリを把握しきれなかった＆その作業時間が無駄だなと感じた
- 素のjavascriptで書くのに疲れた＆Reactを使いたかった
導入時にしたこと
-
目指せ！JavaScriptカスタマイズ中級者（１） 〜webpack編〜
(CDN) を参考にしました - npmでReactを入れる
- バージョンの相性があるみたいで、私は以下のバージョンで使っています（困ったのはこの辺だったと思う、、曖昧）
| package | version |
|---|---|
| react | 16.8.6 |
| react-dom | 16.5.2 |
| webpack | 4.44.2 |
| webpack-cli | 3.3.12 |
| webpack-dev-server | 3.1.14 |
| style-loader | 2.0.0 |
| css-loader | 5.2.6 |
- babelrcの設定
- 正直よく分かってないけどReact使うにはpresetsをこうしないといけないっぽい。（babelrcを理解してない）
.babelrc
{
"presets": [
[ "@babel/preset-react",
{
"targets": { "node": true }
}
],
[ "@babel/preset-env",
{
"targets": { "node": true }
}
]
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
これまで作ったモジュールの移行＋αでやったこと
- src/commonに、大量データ処理用APIを置いた。
- GETは レコード一括取得の JavaScript コーディング例：カーソル API を利用する方法(CDN) を参考に
- POST/PUT/DELETEは 【kintone】上限を気にせずPOST, PUT, DELETEする を参考に
-
kintone UI Component v0.8.0 を入れた
- v1系はReact非対応だそう。最初v1を入れてしまい、ちょっと悩みました
- kintone-spinnerを入れた
- ReactでFont Awesome 5を使用する方法 を参考に、Font Awesomeを入れた
- style-loaderとcss-loaderを入れた
感想
- 最初からこれでやればよかった。が、Kintoneを触り始めた時はこんな風にできるとは知らなかったので、Kintoneに慣れてきたこの時期にできたのは良かったと思います。
- webpack導入前からcustomize-uploaderを使っていて、その時は保存したら自動アップロードしてくれていましたが、webpack入れてからは保存→
npm run buildでビルド→自動アップロードという手順になるので、うっかりビルド忘れたら変更が反映されず、え？ってなることが多々あるので慣れるまでは気を付けないとです。 - 他にもエラー出たところたくさんあった気がしますが、もうよく覚えていないので、この辺で。