2023年のフロントエンド振り返りと2024年 Burikaigi 2024 北陸ITエンジニアカンファレンス 2024年1月20日 / #burikaigi

自己紹介 sakito X：@__sakito__ , note：sakit0, Zenn : sakiti C サイボウズ株式会 C プロダクトのDesign ManageW C デザイン室リーダ% C デジタルプロダクトデザインとフロントエンド周りが好R C Podcastで毎月フロントエンド周りの情報を発信

話すこと・話さないこと @ 話すこw x 2023年にあったフロントエンドに関わる個人的に大事なトピックを紹介し、
 2024年のフロントエンドはどうなっていくのかを考えてみH x 今回はReact,Vue,Angularなどそのものついては触れなR @ 話さないこw x 1つ１つの技術的な詳細

引き続き進化するCSSとHTML周り

2023年に追加されたCSSと全ブラウザサポートされたCSS q 追加されたCSS(抜粋c v ::view-transitionまわD v Scroll-driven AnimationP v @scopI v Style QuerieP q 全ブラウザサポートされたCSi v :has(& v Nestin% v subgir6 v Container Queries

2023年に追加されたHTML周り T Popove6 T と

---

にセレクトボックスの区切り" T checkboxのswitch属 T のname属性

Baseline 引用元： Introducing Baseline: a unified view of stable web features
 https://developer.mozilla.org/en-US/blog/baseline-unified-view-stable-web-features/ 引用元： Baseline's evolution on MDN
 https://developer.mozilla.org/en-US/blog/baseline-evolution-on-mdn/

HTML、CSSとBaseline † 変化するHTML,CSS,Web APIなどの使用基準として作られたもF † 技術使用の1つの判断基準としてBaselineを活用でき† † Google, Apple, W3Cなどが協力して策定されたもF † 2023年12月に更新があり、「Baseline's evolution on MDN」によると
 † ブラウザサポート期間としては長めだが安心か6 † とはいえすでに:has()など使ってる人も居るだろŒ † 2024年に技術採用する基準になってきそう
 ”newly available”から30ヶ月後に”widely available”になるとのこ“

コンポーネントをコピペして自分のものにする

Headless UIという選択肢は2023年以前から増えはじめた W 基本的な挙動を備えたカスマイズ可能なコンポーネントの実˜ W 必然となりつつあるアクセシビリティの実˜ W 上記を兼ね備えたコンポーネントは欲しいけど、スタイルは欲しくな„ W そこでa11y要件を備え、スタイルは自前でつけるUnstyledなライブラリが増えl W これらは とよばれQ W Radix UIやtailwindが出しているHeadless UIがあ} W 2023年はMaterial UIもBase UIというHeadless UI出しl W TanStack Tableなど1つのコンポーネントに特化したものもある Headless UI

shadcn/uiの登場 a コンポーネントをコピペ or CLI経由で手元に持ってく„ a npm経由でコンポーネントライブラリとしてインスールはしなB a 必要な依存関係はコピペ後に自前でnpm instal) a Radix UIとTailwind CSSのみに依存してい„ a 必要なコンポーネントだけを必要なだけ自前でカスタマイズする方 a Headless UIをnpm installしてカスタマイズするなら、
 コピペして最低限の依存から自分達の世界観にあったコンポーネントにす„ a a カスタマイズを続けるとshadcn/uiからコピペしたことも忘れていくという思€ フロントエンド関連のGitHub年間スターを集計している
 2023 JavaScript Rising Starsでも1位と関心を多く集めた

shadcn/uiの登場 引用元： shadcn/ui
 https://ui.shadcn.com/docs/components/button

TailwindからCatalystがリリース 引用元： Introducing Catalyst: A modern UI kit for React
 https://tailwindcss.com/blog/introducing-catalyst g 2023年12月にリリースされb g shadcn/uiと同じで、npm installしな い方u g Catalyst is a “disappearing UI kitj g 手元に落として6ヶ月後には自分のもの になっていると説明があ‚ g 有名なTailwindも流れに乗ることで、 2024年はコピペするコンポーネントの 公開が増えるか？

生成AIの活用と技術選定への影響

ChatGPTとOpenAI APIにより生成AIの活用が進んだ f ChatGPTをはじめAIにソースコードを生成して もらい、ヒントを得てコード書† f GitHub Copilotの活€ f フロントエンドの開発もさまざまなサービスが 登場した2023年だった

UIとコードをセットで生成するサービスも登場 引用元： v0
 https://v0.dev/

生成AIと技術選定への影響 ~ 2023年は生成AIが登場し、まだまだ試しているところが多” ~ 2024年は生成AIを用いた開発がより進んでいく可能性が高” ~ AIが生成したコードをコピぺしてシームレスに開発に移d ~ TailwindだとCSSが別ファイルにならないのでコピペしやすく、
 設定による拡張もしやす” ~ 個人的にはCSSの書き方の好みの領域を出ていなかったが、
 生成AIの活用を考えるとメリットになってくd ~ 前述したshadcn/uiなどのコピペする方式のコンポーネントも活用しやすそ ~ v0.devは実際にshadcn/ui + Tailwindの構{ ~ ~ これは開発者体験に直結するので技術選定の要因になるのではないかÀ ~ 素早く開発できることはプロダクトリリースの速さにもなd 2024年は生成AIの活用による使用ツールや技術の変化にも注目

そのほか + まとめ

そのほか % React Server ComponentsをはじめとすReactの変$ % Next.jsやRemixなどのフレームワーク前提のライブラリとなりつつあ` % リリースやApp Routerなど技術の複雑$ % Zero Runtime CSSも増え… % Panda,Kuma U9 % 多くのOSSをはじめpnpmへの移行が見られ… % FigmaのDevModeを利用したデザインとフロントエンドへのコラボレーショ( % Storybook,Figma for VS Codh % RomeがBiomeになり、Lintとformatterとして使用する人が増えはじめたか3 % CJSからESMへの移 % ViteがBundlerとして有力になりつつ、Bun Bundlerなどの新勢力も

まとめ q IEが外れた2022年から引き続きCSSとHTMLの進化は当たり前になっu q 2024年は採用基準にBaselineが活用されるようになってくる q Headless UIとコピペしてコンポーネントを自分のものにする流れが生まれu q 2023年末にTailwindも追従したので、2024年はより増えるか q 生成UIを活用する未来はもう近いだろQ q 2024年は生成UIの活用しやすい技術選定が求められる時代は来るのか？ q IEが外れた2022年から引き続きCSSとHTMLの進化は当たり前になっu q 2024年は採用基準にBaselineが活用されるようになってくる q Headless UIとコピペしてコンポーネントを自分のものにする流れが生まれu q 2023年末にTailwindも追従したので、2024年はより増えるか q 生成UIを活用する未来はもう近いだろQ q 2024年は生成UIの活用しやすい技術選定が求められる時代は来るのか？

おわり