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

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

<!-- 目安10分ほど -->
- ☆[IEサポート終了について概要](https://blogs.windows.com/japan/2022/06/15/internet-explorer-11-is-no-longer-supported/)
<!-- ↓一覧でざっと見れるので、こんなにありますって話 -->
- ☆[The world after IE left.](https://the-world-after-ie-left.vercel.app/?view=css)
- ☆[benefit-from-end-of-ie](https://github.com/progfay/benefit-from-end-of-ie)
<!-- ↓各ブラウザでの対応状況確認 -->
- [MDN](https://developer.mozilla.org/ja/)
- [Can I Use](https://caniuse.com/)
- [Compare Browsers](https://caniuse.com/ciu/comparison)
- [ECMAScript Compatibility Table](https://kangax.github.io/compat-table/es6/)

### 1-1. IEサポート終了によって使えるようになるCSSの機能の例
#### 表現が豊かになる系
- [backdrop-filter](https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter)
- ☆[background-clip](https://developer.mozilla.org/ja/docs/Web/CSS/background-clip)
- [background-blend-mode](https://developer.mozilla.org/ja/docs/Web/CSS/background-blend-mode)
- [mix-blend-mode](https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode)
- [conic-gradient](https://developer.mozilla.org/ja/docs/Web/CSS/gradient/conic-gradient)
- ☆[filter](https://developer.mozilla.org/ja/docs/Web/CSS/filter)
- [(motion-path)](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Motion_Path)

#### 実装がかんたんになる系
- [accent-color](https://developer.mozilla.org/ja/docs/Web/CSS/accent-color)
- [apperance](https://developer.mozilla.org/ja/docs/Web/CSS/appearance)
- ☆[fit-content](https://developer.mozilla.org/ja/docs/Web/CSS/fit-content)
- ☆[object-fit](https://developer.mozilla.org/ja/docs/Web/CSS/object-fit)
- ☆[aspect-ratio](https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio)
- [position: sticky](https://developer.mozilla.org/ja/docs/Web/CSS/position#sticky_positioning)
- ★[scroll-behavior](https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior)
- [(line-clamp)](https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp)
- ★[display: contents](https://developer.mozilla.org/ja/docs/Web/CSS/display#%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9)

#### 効率良く書ける系
- ★[:is()](https://developer.mozilla.org/ja/docs/Web/CSS/:is)と[:where()](https://developer.mozilla.org/ja/docs/Web/CSS/:where)
- ★[clamp](https://developer.mozilla.org/ja/docs/Web/CSS/clamp), [max](https://developer.mozilla.org/ja/docs/Web/CSS/max), [min](https://developer.mozilla.org/ja/docs/Web/CSS/min)
- [:in-range](https://developer.mozilla.org/ja/docs/Web/CSS/:in-range)

### 1-2. IEサポート終了によって使えるようになるJavaScriptの機能の例
- [ES5](https://kangax.github.io/compat-table/es5/#ie11) → [ES6](https://kangax.github.io/compat-table/es6/#ie11)

### 1-3. IEサポート終了によって使えるようになるWeb APIの例
- [Fetch API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)
- [URL API](https://developer.mozilla.org/ja/docs/Web/API/URL/URL)
- [URL.searchParams](https://developer.mozilla.org/ja/docs/Web/API/URL/searchParams)

### 1-4. IEサポート終了によって使えるようになるその他
- ☆[webp](https://developers.google.com/speed/webp)

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

### 2-1. まとめ
- https://zenn.dev/tonkotsuboy_com/articles/es2022-whats-new
- https://ics.media/entry/220610/

### 2-2. ☆Class
- typescript との比較
- typescript playground
#### クラスフィールド宣言
#### プライベートなメンバー
- [typescript の private との互換性参考 -> es2022](https://www.typescriptlang.org/play?target=9&ts=4.7.4#code/MYGwhgzhAEASD2BzAptA3gKGtAxAOzAFtkAuaCAFwCcBLPRAbi2gAdaA3MC1MFMvAK6EARsipNmweHkpUBwCvCoAKAsTKy6iADTRepaIJFiAlOmbYKACxoQAdPiKoAvIadNslm-f3RX+j2gAX2wMIIwMKRkKaCskF0NkAHc4eOUAIjiULOR03QBGAAYTBiA)
#### 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](https://webpack.js.org/configuration/experiments/)
- 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 からサポート

#### 注意点
- そもそもトップレベルのみで使える機能なので async なしの関数中では　await　は使えない
- 実行順の[注意点](https://zenn.dev/estra/books/js-async-promise-chain-event-loop/viewer/16-epasync-top-level-async#top-level-await-%E3%81%AE%E5%AE%9F%E8%A1%8C%E9%A0%86%E5%BA%8F)とか
- https://qiita.com/uhyo/items/0e2e9eaa30ec2ff05260

### 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) => "お"
- [もろもろ](https://qiita.com/printf_moriken/items/da03f55cb626617c1958)
- 数値以外の値を入れたときの挙動とか
- 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）
* 新機能紹介
* https://hackmd.io/@hrxVDayfRGeTR-1JBV3QLA/ByfOjZxWv#Vuejs%E9%96%A2%E9%80%A3%E6%83%85%E5%A0%B1
3. Vue 3.1 リリース（2021/06/08）
* 変更点
* https://github.com/vuejs/core/releases/tag/v3.1.0
5. Vue 3.2 リリース（2021/08/10）
* 変更点
* https://blog.vuejs.org/posts/vue-3.2.html
6. Vue 3系をデフォルトバージョンに変更（2022/02/07）
* https://blog.vuejs.org/posts/vue-3-as-the-new-default.html
* 周辺ライブラリの整備も進み、正式に3系が推奨される状態へ
* なおVuetifyは。。。
* https://vuetifyjs.com/ja/introduction/roadmap/
* https://github.com/vuetifyjs/vuetify/issues/14984
7. ☆Vue 2.7 リリース（2022/07/01）
* https://blog.vuejs.org/posts/vue-2-7-naruto.html
* 2系のラストリリース（18ヶ月後=2023年末にサポートが終了。）
* https://github.com/vuejs/vue/projects/6#card-34430029
* 3系からのバックポートバージョンなので一部3系の書き方が可能
* https://blog.vuejs.org/posts/vue-2-7-beta.html

### 3-2. 移行に際して

* ☆マイグレーションガイド
* https://v3.ja.vuejs.org/guide/migration/migration-build.html
* 周辺ライブラリの対応状況
* https://v3.ja.vuejs.org/guide/migration/introduction.html#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3%83%95%E3%82%9A%E3%83%AD%E3%82%B7%E3%82%99%E3%82%A7%E3%82%AF%E3%83%88

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

* https://engineering.linecorp.com/ja/blog/vue3-migration-with-improved-line-music-performance/
* https://studist.tech/migration-to-vue-3-4b4c4fad0324

## 4.その他

1. [AngularJSサポート終了](https://blog.angular.io/discontinued-long-term-support-for-angularjs-cc066b82e65a)（2021/12/31）
* Angularではなく
1. [Safari 15.4 リリース](https://developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes)（2022/03/14）
* [色々変更点あり](https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/)
1. [React 18.0 リリース](https://reactjs.org/blog/2022/03/29/react-v18.html)（2022/03/29）
1. [Google Chrome 100 リリース](https://blog.chromium.org/2022/03/chrome-100-beta-reduced-user-agent.html)（2022/03/29）
* User-Agent削除に向けた動きやバージョン3桁問題など
* [開発者ツールの変更点](https://developer.chrome.com/blog/new-in-devtools-100/)
* [(おまけ)ウェブの歴史](https://developer.chrome.com/100/)
1. [Node.js 18 リリース](https://nodejs.org/en/blog/announcements/v18-release-announce/)（2022/04/19）
* [次のLTSバージョン（2022/10から約3年ほど）](https://nodejs.org/en/about/releases/)
1. [Node.js 16 EOL前倒し](https://nodejs.org/en/blog/announcements/nodejs16-eol/)（2022/06/08）
* OpenSSL 1.1.1のサポート終了に合わせる形
* 2023/09/11に前倒し（7ヶ月の前倒し）