Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2023年のフロントエンド振り返りと2024年

sakito
January 19, 2024

 2023年のフロントエンド振り返りと2024年

sakito

January 19, 2024
Tweet

More Decks by sakito

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 自己紹介
    sakito

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

    View full-size slide

  3. 話すこと・話さないこと
    @ 話すこw
    x 2023年にあったフロントエンドに関わる個人的に大事なトピックを紹介し、

    2024年のフロントエンドはどうなっていくのかを考えてみH
    x 今回はReact,Vue,Angularなどそのものついては触れなR
    @ 話さないこw
    x 1つ1つの技術的な詳細

    View full-size slide

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

    View full-size slide

  5. 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

    View full-size slide

  6. 2023年に追加されたHTML周り
    T Popove6
    T T とにセレクトボックスの区切り"
    T checkboxのswitch属
    T のname属性

    View full-size slide

  7. 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/

    View full-size slide

  8. 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”になるとのこ“

    View full-size slide

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

    View full-size slide

  10. 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

    View full-size slide

  11. 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位と関心を多く集めた

    View full-size slide

  12. shadcn/uiの登場
    引用元:

    shadcn/ui

    https://ui.shadcn.com/docs/components/button

    View full-size slide

  13. 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年はコピペするコンポーネントの
    公開が増えるか?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    v0

    https://v0.dev/

    View full-size slide

  17. 生成AIと技術選定への影響
    ~ 2023年は生成AIが登場し、まだまだ試しているところが多”
    ~ 2024年は生成AIを用いた開発がより進んでいく可能性が高”
    ~ AIが生成したコードをコピぺしてシームレスに開発に移d
    ~ TailwindだとCSSが別ファイルにならないのでコピペしやすく、

    設定による拡張もしやす”
    ~ 個人的にはCSSの書き方の好みの領域を出ていなかったが、

    生成AIの活用を考えるとメリットになってくd
    ~ 前述したshadcn/uiなどのコピペする方式のコンポーネントも活用しやすそ
    ~ v0.devは実際にshadcn/ui + Tailwindの構{
    ~
    ~ これは開発者体験に直結するので技術選定の要因になるのではないかÀ
    ~ 素早く開発できることはプロダクトリリースの速さにもなd
    2024年は生成AIの活用による使用ツールや技術の変化にも注目

    View full-size slide

  18. そのほか + まとめ

    View full-size slide

  19. そのほか
    % 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などの新勢力も

    View full-size slide

  20. まとめ
    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の活用しやすい技術選定が求められる時代は来るのか?

    View full-size slide