20231220_FETechCafe_今年のフロントエンドの流行を語る

Transcript

1. 「今年のフロントエンドの流行を語る」 ラクスのフロントエンドエンジニアが選ぶ 2023年フロントエンド流行語大賞！
2. 集計方法 - 各項目に対し、話題になった度を0-5ptで回答 - 0：知らない - 1：名前くらいは知っている - 2：内容は知っているが、話題になった印象はない - 3：話題になった技術とある程度感じている(使ってみたいと感じる) - 4：話題になった技術と強く感じている(気に入っている） - 5：State of My Frontend Tech 2023！ 2
3. ノミネート候補一覧 - ノミネート一覧（アルファベット順） Astro, Bun, Deno, ECMAScript, Google Chrome(109-119), Internet Explorer, MSW, Next.js, Node, Nuxt, Prettier, React, Recoil, Remix, Storybook, Svelte, TypeScript, Vite, Vue.js, Webアクセシビリティ 3
4. 集計対象 - 基本FEエンジニアが対象。FE技術に興味のあるBEエンジニア の回答もあり - 順位付けはFEエンジニア回答の平均値を採用。 BEエンジニア も含めた全体スコアも参考値として記載 - ※あくまで社内調査のランキングです。一般的な認識と乖離し ている箇所があるかもしれません。 4
5. 10 5
6. Deno FE: 3.00pt 全体: 3.00pt 6
7. Denoについて DenoとはV8 JSエンジンとRustで構築されているJS/TS用のランタイ ム環境。TSを標準でサポートしている。（イメージキャラクターが可 愛い） 主なトピック - バージョン 1.30-1.38 - Deno KV(Key-Value Store) - Deno.serve(APIサーバー) - HMR(Hot Module Replacement) 7
8. Deno KV / Deno.serve() / HMR 1.30～1.38で便利な機能が追加された - Deno KV - Deno組み込み型のKey-Value Database - ローカル：SQLite、Deno Deploy：FoundationDB - watch - Deno.serve()（stabled） - v1.25から追加されたWebサーバー機能 - Node.jsと比較して性能が良い - HMR 8
9. 9 9
10. Internet Explorer(IE) FE: 3.06pt 全体: 3.00pt 10
11. IEについて microsoft製のブラウザで、1995年のwindows95からwindowsに標 準搭載されていた。 IEに非対応のJavaScriptやCSSプロパティあり、開発者はIEでも表示 できるように対応を行っていた。 主なトピック - サポート終了（6/16） 11
12. IE対応 今までは以下のような対応を行っていたが、6/16のサポート終了 によって対応が不要になった - 変換する - Polyfill - Babel - 互換モードを指定する - metaタグ - HTTPヘッダー 12
13. 8 13
14. Vue.js FE: 3.13pt 全体: 3.00pt 14
15. JavaScriptのフレームワーク。 日本語のドキュメントが豊富。 主なトピック - 2系のEOL(12/31) Vue.jsについて 15
16. バージョン2のEOLに伴い、さまざまなサービスで、3系に移行する /Reactなど他のライブラリに移行する/継続して使用するなどの対 応が必要になった。 - Vue 2からVue 3への移行 - 移行ガイドやVue CLIの利用 - Vue 2の延長サポート - HeroDevs社のNES (Never-Ending Support) for Vue 2など - Vue 2のまま継続 - セキュリティ・ブラウザ互換性などの問題の自己解決が必須 バージョン2のEOL対応 16
17. 7 17
18. Bun FE: 3.19pt 全体: 3.15pt 18
19. Node.jsの互換、既存フレームワークの統合を図るJS/TS用のオー ルインワンツールキット。 主なトピック - v1リリース(9/8) Bunについて 19
20. Bunの優れている点 - JS、TSの開発、テスト、実行、バンドルを全てカバー - JavaScriptCore、Zigを利用。高速＆メモリ使用量が小さい - Node.jsの多くのパッケージが動く Bunの主な機能 - bun run…JS、TSファイルを実行 - bun install…パッケージインストール - bun bundle…単一のJSファイルにバンドル - bun test…テストファイルの実行 Bun v1.0 20
21. 6 21
22. Webアクセシビリティ FE: 3.25pt 全体: 3.10pt 22
23. 高齢者や障害者など心身の機能に制約のある人でも、年齢的・身 体的条件に関わらず、ウェブで提供されている情報にアクセスし 利用できること。 主なトピック - 努力義務→義務化（2024/4/1） - WCAG2.2（10/5） Webアクセシビリティについて 23
24. - WCAG(Web Content Accessibility Guidelines)とは - WEBコンテンツのアクセシビリティを向上させるためのガイドライン - 4つの原則（知覚可能、操作可能、理解可能、堅牢）に基づいて、12のガイドラインと86の達成 基準から構成されている - 達成基準は、A（最低レベル）、AA（中間レベル）、AAA（最高レベル）の3つのレベルに分類され ている - WCAG 2.1が2018年6月なので、5年以上ぶりに更新された - 株式会社インフォ・クリエイツさんの資料が非常にわかりやすいです。 - https://accessibility.jp/images/pdf/WCAG2.2_20231007.pdf WCAG2.2 24
25. 5 25
26. TypeScript FE: 3.31pt 全体: 3.25pt 26
27. JSを型付け可能にしたAltJSの一種。 主なトピック - 5.0-5.2 - Decorator - using宣言 TypeScriptについて 27
28. - Decorator - 実験的機能だったが5.0で利用可能になった - クラス宣言などと合わせて使用可能な宣言 - https://js.studio-kingdom.com/typescript/handbook/decorators - using宣言 - v5.2で導入 - let, constのようにusingで変数宣言ができる - try-finallyを使用せず、リソースの解放ができるようになる - ファイル操作やDB操作時に便利 - https://zenn.dev/ventus/articles/ts5_2-using-preview Decorator / using宣言 28
29. 4 29
30. Next.js FE: 3.31pt 全体: 3.30pt 30
31. Vercel社が開発しているReactのフレームワーク。サーバーサイドレ ンダリング（SSR）、スタティックサイトジェネレーション（SSG）の両方 に対応している。 主なトピック - 13.2-14 - App Router - ServerActions Next.jsについて 31
32. 13.4でApp Routerが、14.0でServer Actionsがstabledになった。 - App Router - 既存のPages Routerの問題点の解消、及びServer Componentsのデ フォルト化を行ったルーティング機能 - Server Actions - “use server”ディレクティブを付与した関数をformのactionに渡すこ とで、fetch等を実行することなくデータ更新が可能になる機能 - 特徴 - APIのエンドポイントが不要になる - プログレッシブエンハンスメントをサポート App Router / Server Actions 32
33. 3 33
34. React FE: 3.38pt 全体: 3.05pt 34
35. Facebook発のクライアントサイド用JSライブラリ。 主なトピック - react.devが脱ベータ - 日本語版も Reactについて 35
36. react.devが脱ベータ - 旧サイト - https://ja.legacy.reactjs.org/ - 新サイト - https://ja.react.dev/ - React 日本語ドキュメントが実はわりと ChatGPT で翻訳されている 件 react.dev 36
37. 2位の発表の前に・・ 37
38. LT！ 38
39. 2 39
40. Vite FE: 3.56pt 全体: 3.35pt 40
41. ノーバンドルのビルドツール。開発時にバンドルを行わないことで 開発サーバーの起動を速めたツール。また、HMRも修正箇所のみ 適用することで高速になっている。 主なトピック - 4.1-5.0 - パフォーマンス改善 - ViteConf 2023 Viteについて 41
42. 2023年10月5日に開催されたViteのカンファレンス。 - Rolldown - Rust製のバンドラー - 現在Viteは開発時はesbuild、プロダクションビルドはRollupを使用 - Rolldownの開発が完了→パフォーマンスの向上、開発とビルドの内容の 不一致が解消 - Viteを統合したフレームワークの説明 - Volar、Nuxt、Storybook、Angular、etc… ViteConf 2023 42
43. 1 43
44. MSW(Mock Service Worker) FE: 3.81pt 全体: 3.25pt 44
45. Service Worker上で機能するAPIリクエストに対するモックのレスポ ンスを返すことが出来るライブラリ。これを使用することで、別途 モックサーバーを立てる必要がなくなる。 主なトピック - 1.0リリース - 2.0リリース MSWについて 45
46. - v1.0 - 開発・テスト・デバッグなど共通で利用可能な APIモック - 1/25にv1.0がリリースされた - Service Workerで起動するため、Json-Serverのように別途サーバーを立てる必要がな い - また、テストやstorybookでも利用可能なため、メンテコストが軽減できる - v2.0 - 10/23にリリース - いくつか破壊的な変更もあり - streamingに対応 - 記述方法が直感的にわかりやすくなった - https://zenn.dev/keitakn/scraps/2ca70305a71847 MSW v1 / v2 46
47. まとめ：1-10位は以下の結果になりました。 1. MSW(Mock Service Worker) 2. Vite 3. React 4. Next.js 5. TypeScript 6. Webアクセシビリティ 7. Bun 8. Vue.js 9. Internet Explorer(IE) 10. Deno 47
48. 時間があまったので・・・ 48
49. 11-20位 49
50. 11-20位は以下のような結果になりました。 11. Prettier 12. Node 13. Astro 14. Chrome(109-119) 15. ECMAScript 16. Storybook 17. Recoil 18. Remix 19. Nuxt 20. Svelte 50
51. コードフォーマッタ。 主なトピック - 3.0リリース - https://sosukesuzuki.dev/posts/prettier-3.0/ 11. Prettier（2.94pt） 51
52. V8 JSエンジンで構築されているJSのランタイム環境。 主なトピック - 20リリース - 14,16EOL - 14: 4/30 - 16: 9/11 12. Node（2.81pt） 52
53. React、Preact、Svelte、Vue、SolidJS等を複数組み合わせてコン ポーネントを作成することが出来る。 主なトピック - 2.0-4.0 - Hybrid Rendering - View Transitions 13. Astro（2.69pt） 53
54. Google製のブラウザ。 主なトピック - MathML, View TransitionsAPI, CSS のネスト記法 - PopoverAPI - Picture-in-Picture - @scope css rule 14. Chrome(109-119)（2.69pt） 54
55. JavaScriptの標準仕様。 主なトピック - 2023 - 配列の非破壊操作（toSorted、toReversed） - 配列の末尾操作 15. ECMAScript（2.69pt） 55
56. UIカタログ作成ツール。コンポーネントの挙動の確認やテストを行 うことが出来る。 主なトピック - 7.0-7.6 - viteをファーストクラスサポート - CSF3（Component Story Format）がデフォルトに 16. Storybook（2.63pt） 56
57. facebook製の状態管理ライブラリ。 主なトピック - メンテナが解雇され、メンテナンスが止まってしまっている 17. Recoil（2.44pt） 57
58. React Routerの制作者が着想したSSR特化のReact用フレームワー ク。 主なトピック - バージョン2リリース - Flat Routes 18. Remix（2.34pt） 58
59. Vueのフルスタックフレームワーク。 主なトピック - 3.3-3.8 - View Transitions 19. Nuxt（2.34pt） 59
60. クライアントサイド用フレームワーク。仮想DOMを用いずにコンパ イル時に状態が変化する場所の特定と該当箇所へのJSの生成を 行うことでパフォーマンスを上げている。 主なトピック - バージョン4リリース - パッケージサイズ減少 20. Svelte（2.25pt） 60