Script5というバージョンでJavaScriptが書かれています。2017などは、それよりももっと便利で使いやすくなっているので、今回いくつか新しい記法とkintoneのJavaScriptカスタマイズでの使い所を紹介します。Explorerでは動作しない記法について、【IE非対応】の表記をしています。使用する必要があります。使っていますが、constとletを使っていくことをおすすめします。ブロックスコープスコープとは変数の名前や関数などの参照できる範囲を決めるものです。スコープの中で定義された変数はスコープの内側でのみ参照でき、スコープの外側からは参照できません。varはスコープが広く、関数スコープまでです。中の範囲で有効になります。constは再代入/再宣言ができないconstは再代入も再宣言もできません。この変数は代入し直さない、とわかっている場合はconstを使いましょう。長いコードになってくると、同じ変数名を間違って再度宣言したり、意図せず再利用してしまうこともありますが、積極的にconstを使うとそれを防げます。Objectや配列の中身は書き換えることができますのでご注意ください。letは再代入が可能(constと同様再宣言は不可)letはconst同様再宣言はできませんが、再代入はできます。値を途中で書き換えることがわかっている場合はletで変数を宣言しましょう。基本的にはconstを使い、明らかに再代入する場合はletを使う、という風に使い分けていくといいと思います。for文の使用を必要最低限にする例えばレコード配列のデータなどを繰り返し処理をするケースは多々ありますが、それをforでやると無限ループさせてしまったり、記述が長くなってしまったりしてしまいます。使ってみるようにしましょう。使うのが適しています。弱点として、レコードの数の指定を間違えると無限ループに陥ってしまいますし、records[i]と書く必要がありiが何なのか常に意識せざるをえません。データが1つずつ入って繰り返し処理を行ってくれますので見通しもよく便利です。実装できないか考えてみましょう。使えば条件に一致した配列を取得できます。売上n円以上のデータだけほしい、ということを簡単にかけます。使えば条件に一致した配列を取得できます。売上n円以上のデータだけほしい、ということを簡単にかけます。記述した場合if文を使わずとも任意のデータが取得できるので見た目もすっきりします。APIを呼ぶときに指定すればいいですが、もうちょっと複雑な条件を指定したいときには重宝します。使えば、配列全てに処理を行うことができます。記述した場合これもタイプ数は大分減らせることが出来ます。始まらない分、短くてすみますし、バグを引き起こす可能性を低くすることができます。実際には、小計を出す程度だと自動計算フォームを使えばいいですが、それではできない複雑な計算をする場合に使えます。使うとrecords配列の全ての合計値などを求めることができます。reduceは上記に挙げたものと比べると少しむずかしく見えるかもしれませんが、慣れてしまえば簡単にデータの合計値などを求めることができます。使わない分バグの確率は減ります。内で処理が完結するのでまとまりがあります。例のように合計値を求めたり、records配列をloopしてデータを計算したいときは積極的につかっていきたい関数です。関数の宣言には下記の種類があります。処理内容};ES6からは上記Arrow関数が使えるようになりました。この形が矢印にみえるのでArrow関数と呼ばれています。)Arrow関数のメリットArrow関数にはいくつかメリットがあります。短くかける上記のように普通に関数宣言しているだけではほとんど差はありませんが、Callback関数など、関数を多様するときにかなりスマートにかけます。とあるレコード一覧のデータをArray.map()やfilter()を使って必要なものだけとりだし、それぞれ処理をするパターンをみていきましょう。Array.prototype.filter()関数で税込にするべきレコードか判別し、その後Array.prototype.map()で税込にした金額を配列で取得する場合を考えてみます。なくなっただけでもスッキリしますね。引数が1つなら引数の括弧が省略できる、1行で結果を返せるならReturnを省略できるというルールがあり、それを適用すると下記のようにもっと短くかけます。1.1);returnがいらない分、関数を作る関数(カリー化)を作りやすくなります。opereatorなどは後述thisを固定できるkintoneのJSカスタマイズではDOMを操作するときにthisを参照するケースはあると思います。通常の関数宣言の場合「thisは何を指しているか?」を意識する必要がありましたが、arrow関数の場合thisが固定されるのでその混乱はなくなります。その代わりcurrentTargetなどをつかって押された要素自体を取得するなどができます。複数のアプリのレコードからデータを取得したい場合などに、Promiseによる非同期処理をしなければいけませんが、Promiseは.then()に次の処理を書く都合上、入れ子構造になり慣れていないとあまり直感的とは言えません。下記あるアプリのレコードを4件取得して合計値を求めるサンプルで試したいと思います。レコード一括取得APIを使うほうが適切ですがPromiseのサンプルのためにあえて1件ずつ取得します。そこで、Promiseをそのままつかうのではなく、Async/Awaitを用いることで下記の様に普通の関数を使うようにかけるようになりました。どちらが正しい、とかではないのですが、複数のPromiseだったり複雑だったりするとAsync/Awaitの書き方のほうが見通しがよいかと思います。4件のデータを取得し合計値を求める(Async/Await)ただし、注意点としては、asyncをつけることでPromiseObjectが返却されてしまうので、Promiseに対応していないイベントハンドラでは即時実行関数で包むなりしてあげないとエラーがでてしまうはずです。分割代入でスマートに変数を取り出す【IE非対応】これも便利な機能です。通常、下記のようにkintone.events.on()の中でrecord変数を取り出すときはこうします。分割代入を使うと下記のように2回「record」と書かなくて良くなります。kintone.events.on()の中でevent.recordからrecord変数を取り出す(分割代入)このように、わざわざ「record」と2回書く手間が省けます。潜ってrecordのpriceとcustomerフィールドを取りたい場合はこのようにします。先にpriceとcustomerをとってしまうことも可能です。必須な書き方ではありませんが値取り出すために数行かかってしまうと見通しが悪くなってしまうこともあるので、スマートに取りたい場合は有効です。スプレッド構文を使って展開する【IE非対応】スプレッド構文も使いこなせば便利です。使い、配列・関数の引数・オブジェクトを展開できます。配列で使うスプレッド構文kintoneのレコードの配列である、records配列を展開し結合する結合はArray.prototype.concat()でもできますが、こちらのほうが直感的でしょう。records2-3]とやっているのとほぼ同義です。...で配列を一度展開していると思えばわかりやすいかと思います。関数の引数に使えば可変数の引数に対応できます。複数の契約レコードの合計金額を集計する関数オブジェクトで使うスプレッド構文オブジェクトも配列のように展開がされますので、下記の用にオブジェクト同士の結合ができます。これも、配列と同様にcontractRecordとcustomerRecordが一度展開されているイメージです。副作用をなくして安全にコードを書くプログラミングで、状態を変化させることを副作用と呼びますが、副作用を起こすコードはなるべく少ないほうがバグを回避できます。言葉だけではわかりにくいので、起こりうるバグを見てみましょう。(1100)と税抜金額(1000)を表示してくれそうです。実際には下記のように表示されます。なんと、両方とも税込金額(1100)になってしまっていますね。これは「もとの変数に対して副作用が起きている」状態となります。このように、副作用がいつ起こるかというのを意識していなければ、思わぬバグを生んでしまいます。JavaScriptでは常に変数は値への参照なので起きてしまう現象です。これを回避するには、いくつか方法があります。以外のブラウザの場合SpreadOperatorを駆使して下記のようにaddTax関数を書き換えることができます。新しいObjectを作り、返すようなイメージです。データを扱うという方法もあります。jQueryを使わず素のJSでDOMを操作するもちろん込み入ったDOM操作をしたい場合はjQueryは有用ですが、1つのDOMを操作したい場合はわざわざjQueryを読み込むのは冗長なこともあります。素のJSでもDOMを操作しやすくなっているので紹介します。利用することで要素を取得できます。ありますが、上記のようにclass/id関係なくquerySelectorのほうが柔軟に要素を指定できます。することで、要素に対してstyleを変更することができます。CSSで設定できるstyleを割り当てられます。"bold";もちろん、kintone.app.record.getFieldElementなどで取得した要素にも同様のことが可能です。TypeScriptを導入するTypeScriptでkintoneカスタマイズ開発をしてみようの記事で紹介されていますが、kintoneのサブテーブルのRecord構造などは結構難しいので、TypeScriptを使うと、オブジェクトのキーの指定や型の間違いなどをなくすことができます。CodeなどのIDEを使えば補完しながらコードを書くこともできます。JavaScriptカスタマイズをしたい場合は導入したほうがよいです。最後に上記紹介したようにJavaScriptはよりプログラミングしやすくなるように進化していっています。const/let、Spread構文やArrow関数などを組み合わせたり新しい機能を使うと、バグを減らし副作用のない堅牢なコードも書けるようになると思います。コミュニティをご活用ください。05:38ご紹介ありがとうございます。Explorerでは動作しない記法をご紹介しています。使用する必要があります。Explorerでは動作しない記法」の部分を注記していただけますと助かります。05:03中村様フィードバックをありがとうございます。Explorerで動作しない記法についてわかるよう、追記をいたしました。Permalinkログインしてコメントを残してください。