IE廃止の影響

> Internet Explorer は無効になります。

この 1 文が何人のウェブエンジニアを歓喜させたでしょうか。

今まで Chrome が IE のシェアを超えても、Edge のレンダリングエンジンが Chromium になっても、 日本において IE ユーザーは根強く一定割合残り続けていました。

その IE ユーザーに対応するため、便利な新しい機能を使えず苦労された開発者の方は多いはずです。

kintone.Promiseというオブジェクトも、サイボウズが IE 環境で非同期処理が動くよう用意したものです。

更にネット上には IE に対応するための古い記述方法と、IE を無視した新しい記述方法の情報が混在し、JavaScript 初学者の大きな壁となっていました。

この記事では、IE のサポート終了が kintone のカスタマイズ開発に与える影響と、今後のコーディングで注意する点を解説します。

IE が完全になくなるわけではない

従来の Internet Explorer ベースの Web サイトやアプリケーションに直接アクセスできる「Internet Explorer モード (IE モード) 」を搭載した Microsoft Edge をご利用ください。

Microsoft は 2022 年 6 月 15 日に、Windows 10 の一部のバージョンで Internet Explorer 11 のデスクトップアプリケーションのサポートを終了しました。その後の更新プログラムで IE は無効化されています。

ただし、Microsoft Edge の「IE モード」を使えば、IE 向けに作られた従来のサイトを開くことは引き続き可能です。

とはいえ、IE モードは社内システムなど IE が必須のサイトのための互換機能です。一般的なウェブサービスやカスタマイズ済みの kintone を、わざわざ IE モードで利用する理由は少なくなります。IE 対応を前提とした記述は、基本的に不要と考えてよいでしょう。

kintone 開発に与える影響

kintone は特性上アップロードした JavaScript がコンパイル等されることなくそのまま実行されるため、Node.js などの開発環境でトランスパイルしない限り、記述段階で IE を意識する必要がありました。

IE を対象外にできれば、その必要はなくなります。なお、対応ブラウザは時期によって変わるため、実際にサポートするブラウザはkintone の動作環境で確認してください。

レンダリングエンジンがブラウザによって異なる以上、「クロスブラウザ対応」という言葉は残り続けると思いますが、「IE とそれ以外」と比べれば大したコストではないでしょう。

では、今後のコーディングではどうすればよいのかを見ていきます。

var は使わない

varは非常に柔軟な変数宣言です。

ホイスティング(巻き上げ)により、宣言前に参照してもエラーにならずundefinedになり、同じ名前で再宣言してもエラーになりません。また、スコープがブロックではなく関数単位になります。

この挙動は、意図しないバグの原因になりかねません。

これから JavaScript を学ぶ方は、 「変数定義に var は存在しない」という認識でも全く支障は出ません。

varは使用せず、代わりにletとconstを使うべきです。

さらに言えば、ほぼ全ての変数定義はconstで代替できるはずです。

kintone.events.on('app.record.detail.show', (event) => {
  for (const [code, field] of Object.entries(event.record)) {
    console.log(`フィールドコード${code}の内容は`, field.value);
  }
  return event;
});

非同期処理には async/await を使う

Promise の.then()によるメソッドチェーンは、処理が長くなるほど可読性が下がります。また、非同期処理のエラーをtry-catchで扱えないのも不便です。

async/await を使えば、非同期処理を同期処理のように記述でき、Promise.allによる並列処理もtry-catchによるエラー処理も容易になります。

kintone.events.on('...', async (event) => {
  try {
    const [clientRecords, departmentRecords] = await Promise.all([
      kintone.api(/* ... */),
      kintone.api(/* ... */),
    ]);
  } catch (error) {
    console.error(error);
  }
  return event;
});

参考:Windows 11 のシステム要件、機能、デバイスの要件について