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 デスクトップ アプリケーションのサポート終了](https://docs.microsoft.com/ja-jp/lifecycle/announcements/internet-explorer-11-end-of-support)

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

2021/6/15 にサイボウズからのお知らせで、IE11のサポート終了が公開されました。
 [当社製品・サービスでのInternet Explorer 11サポート終了について（2021/6/17更新）](https://cs.cybozu.co.jp/2021/007430.html)

# IE11 のシェア

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

[WRブログ WebブラウザシェアランキングTOP10(日本国内・世界)](https://webrage.jp/techblog/pc_browser_share/)

# IE11 の JavaScript 対応状況

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

[Can I use "JavaScript、JavaScript APIを各ブラウザーで比較"](https://caniuse.com/?compare=ie+11,edge+96,firefox+96,chrome+99,safari+15.1,ios_saf+15&compareCats=JS)

# IE11 サポート終了後に、利用できるJavaScript機能
よく使いそうなJavaScript機能です。

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

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

[MDN, let](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/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](https://caniuse.com/let)

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

## const

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

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

[Can I use, const](https://caniuse.com/const)

>Not supported in for-in and for-of loops

## 関数のデフォルト引数
関数の引数省略時の値を指定

[MDN, デフォルト引数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters)

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

## アロー関数式

関数定義で、"function" の記述が不要
[MDN, アロー関数式](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

>```.js
// 伝統的な関数
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 非同期関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)

[目指せ！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-)

# kintone UI Component v1
※kintone ライクな UI パーツを簡単に作ることができるライブラリ
[kintone UI Component v1](https://developer.cybozu.io/hc/ja/articles/900005544623)は、IE11 未サポート
なお、kintone UI Component v1 では DateTime がまだ無いので、 V0 から v1 の切り替えは要検討

IE11 を動作対象にする場合は、[kintone UI Component v0](https://developer.cybozu.io/hc/ja/articles/360000511023)を利用
※kintone UI Component v0 は、メンテナンスモードになっている