kintone における IE11 サポート終了による JavaScript 開発への影響

ようやく、2022/6/15 で IE11 のサポート終了となります。
これで、kintone で IE11 を意識することなく、JavaScript 開発が出来るようになります。
どのような影響があるかまとめてみます。

概要

JavaScript 開発において、IE11 がサポート対象かどうかで、利用できる構文やライブラリが変わってきます。
kintone のプラグイン開発では、IE11 の動作テストも必須になっていたので、そのテスト工数が無くなるだけでもうれしいことです。
また JavaScript 開発で、アロー関数を使って、より簡潔に記述できます。
とりあえず、IE11 サポート終了で、どのような影響があるかまとめてみます。

MS IE11 のサポート終了 2022年6月15日

2021/5/20 にMSからIE11のサポート終了が公開されました。
特定のオペレーティング システムでの Internet Explorer 11 デスクトップ アプリケーションのサポート終了

kintone の IE11 サポート終了 2022年6月12日

2021/6/15 にサイボウズからのお知らせで、IE11のサポート終了が公開されました。
当社製品・サービスでのInternet Explorer 11サポート終了について（2021/6/17更新）

IE11 のシェア

2021/07/10　日本で、4.58%。世界で、1.26%。
日本では、まだ少し使われているようです。
IE11 でしか動作しないサイトがあったりするので残しているとか、サポートの切れた古いPCをそのまま使っているところなどがある気がします。

WRブログ WebブラウザシェアランキングTOP10(日本国内・世界)

IE11 の JavaScript 対応状況

Can I use で、各ブラウザーのJavaScript 対応状況を比較できます。
IE11 は、Partial(部分的サポート)がいくつかありますので、IE11のサポート終了後はそれを開発で使えるようになります。

Can I use "JavaScript、JavaScript APIを各ブラウザーで比較"

IE11 サポート終了後に、利用できるJavaScript機能

よく使いそうなJavaScript機能です。

let

for of文の中で使用できませんでした。
あと IE11 では、変数の定義が他と異なるようです。

for(let a of [1,2,3]){ console.log(a) }

MDN, let

In Internet Explorer, let within a for loop initializer does not create a separate variable for each loop iteration as defined by ES2015. Instead, it behaves as though the loop were wrapped in a scoping block with the let immediately before the loop.

Can I use, let

let variables are not bound separately to each iteration of for loops

const

for in文の中で使用できませんでした。

for(const a in [1,2,3]){ console.log(a) }

Can I use, const

Not supported in for-in and for-of loops

関数のデフォルト引数

関数の引数省略時の値を指定

MDN, デフォルト引数

function test(x, y = 1) {
  return x+y;
}
test(4);

アロー関数式

関数定義で、"function" の記述が不要
MDN, アロー関数式

// 伝統的な関数
function (a){
  return a + 100;
}
// アロー関数に分解
// 1. "function" という語を削除し、引数と本体の開始中括弧の間に矢印を配置する
(a) => {
  return a + 100;
}
// 2. 本体の中括弧を削除と "return" という語を削除 -- return は既に含まれています。
(a) => a + 100;
// 3. 引数の括弧を削除
a => a + 100;

名前付きアロー関数.js

let test1 = (x, y = 5) => {return x+y}; 
test1(4);

非同期関数 async/await

kintone REST API などの非同期処理に、async/await が使えます。

MDN 非同期関数

目指せ！JavaScriptカスタマイズ中級者（２） 〜Promiseのかわりにasync/await編〜

kintone UI Component v1

※kintone ライクな UI パーツを簡単に作ることができるライブラリ
kintone UI Component v1は、IE11 未サポート
なお、kintone UI Component v1 では DateTime がまだ無いので、 V0 から v1 の切り替えは要検討

IE11 を動作対象にする場合は、kintone UI Component v0を利用
※kintone UI Component v0 は、メンテナンスモードになっている