kintone JavaScriptカスタマイズで中級者を目指す！

# はじめに
kintoneの標準機能でできることは、今までの数々のアップデートによりできることがかなり増えてると思います。それに加え、プラグインなどのエコシステムも年々進化してきており、ノーコードでもやれることもたくさんあります。

しかし、ある一定以上の規模のものを扱おうとするとJavaScriptカスタマイズを用いたくなるシーンもまだまだあります。
kintoneでJavaScriptであまり制限なく介入できるのは、他のSaaSと比較してもかなり大きいメリットです。JavaScriptを利用できるということは、JavaScriptに関する今までの知識やライブラリなど、JavaScriptのエコシステムまでも取り込むことができます。

反面、JavaScript開発に慣れていない方にとっては、今までのJavaScriptの歴史もあり「JavaScriptはどう書くのがいいのか」ということが結構難しかったりします。
様々な書き方がある中でどういう書き方をすればいいか？一元管理してソースコードを管理したり、ファイル構成どうするかや、共通の関数などを作っていろんなアプリで使い回すにはどうするべきか、など色々考え出すと難しい面もあります。

そこで一つの考え方の参考になればと思い「目指せ！JavaScriptカスタマイズ中級者」という記事を執筆させてもらっています。

# 目指せ！JavaScriptカスタマイズ中級者シリーズについて

現時点では4記事の公開をしています。
それぞれ、主要な点を段階を踏みながら学習できるようにしているつもりです。下記に、各記事のURLと学べることについてまとめます。

1. [目指せ！JavaScriptカスタマイズ中級者（１） 〜webpack編〜](https://developer.cybozu.io/hc/ja/articles/360040220451-%E7%9B%AE%E6%8C%87%E3%81%9B-JavaScript%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E4%B8%AD%E7%B4%9A%E8%80%85-%EF%BC%91-webpack%E7%B7%A8-)
まず、複数のアプリに対してJavaScriptを一元で管理できるよう、第一回では、Webpackを用いて複数のJavaScriptファイルをバンドルする方法などを解説しています。ディレクトリ構成の例も示しているので参考のひとつにしてもらえればと思います。
また、Webpackでバンドルしつつトランスパイルも行うことにより、JavaScriptの新しい記法を使ってもIEでも動かせるようにしています。JavaScriptは、[ECMAScript 2015](https://html5experts.jp/1000ch/16984/)以降とそれ以前で大幅に進化しており、まだ試せてない方はぜひ新しい記法や機能も使えるようになればと思っています。

2. [目指せ！JavaScriptカスタマイズ中級者（２） 〜Promiseのかわりにasync/await編〜](https://developer.cybozu.io/hc/ja/articles/900001244323-%E7%9B%AE%E6%8C%87%E3%81%9B-JavaScript%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E4%B8%AD%E7%B4%9A%E8%80%85-%EF%BC%92-Promise%E3%81%AE%E3%81%8B%E3%82%8F%E3%82%8A%E3%81%ABasync-await%E7%B7%A8-)
Promiseは概念的に少し難しいものだと思っています。この記事では、より直感的にコードを書けるasync/awaitを使った書き方について説明しています。
プロジェクトにもよるとおもいますが、どちらかというとasync/awaitが主流ではあるとおもいますので、公式リファレンスでは説明しきれていないasync/awaitに言及したいと思って書いた記事です。(IEでは動作しないので第一回のトランスパイル前提となっています）

3. [目指せ！JavaScriptカスタマイズ中級者（３） 〜自動で一括ファイルアップロード編〜](https://developer.cybozu.io/hc/ja/articles/900001933483-%E7%9B%AE%E6%8C%87%E3%81%9B-JavaScript%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E4%B8%AD%E7%B4%9A%E8%80%85-%EF%BC%93-%E8%87%AA%E5%8B%95%E3%81%A7%E4%B8%80%E6%8B%AC%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E7%B7%A8-)
第一回で紹介した状態ですと手動でJavaScriptファイルをアップロードするまでになっているので、自動でアップロードできるようスクリプトを用意しました。

4. [目指せ中級者！実践JavaScriptカスタマイズレベルアップ（４） 〜kintone REST API Client編〜](https://developer.cybozu.io/hc/ja/articles/900000566086-%E7%9B%AE%E6%8C%87%E3%81%9B%E4%B8%AD%E7%B4%9A%E8%80%85-%E5%AE%9F%E8%B7%B5JavaScript%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%83%AC%E3%83%99%E3%83%AB%E3%82%A2%E3%83%83%E3%83%97-%EF%BC%94-kintone-REST-API-Client%E7%B7%A8-)
[kintone rest api client](https://github.com/kintone/js-sdk/tree/master/packages/rest-api-client) の導入方法と使い方について説明した記事です。もちろん必ずしもkintone rest api clientを利用する必要はありませんが、気軽にレコードの全件取得ができたり、その他便利な使い方もできるので、今後カスタマイズしていく上では積極的に採用してもいいと思い、解説しています。

5. 目指せ中級者！実践JavaScriptカスタマイズレベルアップ（5） 〜TypeScript編〜（準備中）
どこまでが中級者なのかというのはありますが、最終的には、TypeScript書けるようになれば、開発体験としてはかなりいいと思っています。TypeScriptはJavaScriptに型定義をできるようにしたもので、利用できるようになると型定義により未然にバグも防げます。例えば、複雑なサブテーブルの構造もTypeScriptでかけるようになれば、だいぶサクサクかけるようになりますので、ぜひTypeScriptの導入を広めるべく、現在記事を準備しております。

# おわりに
kintoneを扱い始めた当初、もともとJavaScript開発がわからなかった自分なりに、試行錯誤してきました。
同じようにkintoneでJavaScriptにふれるようになり多少書けるようになったが、規模が大きくなるとよりよく書くにはどうするべきか、といった悩みを持つ方も少なからずいると思っています。上記の記事がその一つの参考になればいいと思っています。
「こういう場合どうするべきか」など上記記事で触れきれていない部分もあるとおもうので、何か要望等アレばコメントいただければ幸いです。