「2022年度上半期トレンド」を語るフロントエンドTechCafe

1.脱IE時代のフロントエンド開発（吉田）

1-1. IEサポート終了によって使えるようになるCSSの機能の例

表現が豊かになる系

実装がかんたんになる系

効率良く書ける系

1-2. IEサポート終了によって使えるようになるJavaScriptの機能の例

1-3. IEサポート終了によって使えるようになるWeb APIの例

1-4. IEサポート終了によって使えるようになるその他

2.ES2022の新機能紹介（岩佐）

2-1. まとめ

2-2. ☆Class

  • typescript との比較
  • typescript playground

クラスフィールド宣言

プライベートなメンバー

static イニシャライザー

  • static method/field
  • private static method/field

in

class Hoge {
    #name;//private field
    static type = "Hoge";//static field
    static #count = 0;//static private field
    static {//クラス宣言の評価時に一度だけ実行
        this.#init = Math.random();
    }
    
    consctructor (name) {
        this.#name = name;
    }
    
    //private method
    #fuga() {
        this.#name
    }
}

const hoge = new Hoge();
// in
console.log( "#name" in hoge );// false

2-3. ☆トップレベル　await

await キーワードを非同期関数の外側でも使用できるようにするもの
即時関数等を使っていたのが不要になる

  • 外部公開のライブラリの dynamic import とか
  • 非同期処理のエクスポート時に結果をそのまま返すことができる

使い方

  • webpack
  • Developper toolで試したいとき便利 
    ​​​​    const res = await fetch('https://api.github.com/users/octocat');
​​​​    await res.json();
  • browser
    • htmlから呼び出す場合
      • <script type="module" src="src/hoge.js"></script>
  • node.js
    • v 14.3.0
      • フラグが必要（–experimental-top-level-await）
    • v 14.8.0以降
      • フラグなし
      • 拡張子mjsを使う or package.jsonに "type":"module" を記載する
  • TypeScript
    • 3.8 からサポート

注意点

2-4. Array#at

  • 配列
    • [1,2,3,4,5].at(0) => 1
    • [1,2,3,4,5].at(-1) => 5
    • [1,2,3,4,5].at(100) => undefined
  • 文字列
    • "あいうえお".at(0) => "あ"
    • "あいうえお".at(-1) => "お"
  • もろもろ
    • 数値以外の値を入れたときの挙動とか
    • TypedArray　/ String での at
    • withAt?

2-5. Object.hasOwn

  • Object.prototype.hasOwnProperty.call の代用
  • xxx.hasOwnProperty は hasOwnProperty が書き変わってしまっている可能性があるので使わないほうがいい。

2-6. Error.cause

  • エラーの発生源を格納
throw new Error("failed", { cause: error });
  • 多段プロミスなど、エラーの発生個所の特定をしやすくする
  • delveloper tool での表示はブラウザごとに異なる

2-7. 正規表現 d フラグ

  • マッチした部分の開始・終了のインデックスを取得する
const regexp = /私の姓は(.*)、名前は(.*)です/du;
const result = '私の姓は山田、名前は太郎です'.match(regexp)

console.log(result.indices[1]) // [4,6]
console.log(result.indices[2]) // [10,12]
  • Named Capture Groups と組み合わせて使う
const regexp = /私の姓は(?<sei>.*)、名前は(?<mei>.*)です/du;
const result = '私の姓は山田、名前は太郎です'.match(regexp)
  • 注意点
    トランスパイルできないので古いブラウザでは使えない（polyfillが必要）

2-8. 実装状況

https://ics.media/entry/220610/

  • ブラウザでの実装状況
  • Node.jsのバージョン

3.Vue2系のEOL時期判明。3系への乗り換え準備はお早めに

3-1. 時系列

  1. ☆Vue 3.0 リリース（2020/09/18）
  2. Vue 3.1 リリース（2021/06/08）
  3. Vue 3.2 リリース（2021/08/10）
  4. Vue 3系をデフォルトバージョンに変更（2022/02/07）
  5. ☆Vue 2.7 リリース（2022/07/01）

3-2. 移行に際して

3-3. 各社の移行体験談

4.その他

  1. AngularJSサポート終了（2021/12/31）
    • Angularではなく
  2. Safari 15.4 リリース（2022/03/14）
  3. React 18.0 リリース（2022/03/29）
  4. Google Chrome 100 リリース（2022/03/29）
  5. Node.js 18 リリース（2022/04/19）
  6. Node.js 16 EOL前倒し（2022/06/08）
    • OpenSSL 1.1.1のサポート終了に合わせる形
    • 2023/09/11に前倒し（7ヶ月の前倒し）
Select a repo