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

2023 年の Web 開発のベースライン / Web Development Baseline 2023

Shogo Sensui
September 27, 2023

2023 年の Web 開発のベースライン / Web Development Baseline 2023

2023年9月27日に開催された TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」 (https://techfeed.io/events/techfeed-experts-night-26) の「2023 年の Web 開発のベースライン」のセッション資料です。

Shogo Sensui

September 27, 2023
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

Transcript

  1. 2023 年の Web 開発のベースライン
    at TechFeed Experts Night #26
    by @1000ch
    2023 年の Web 開発のベースライン by @1000ch 1

    View full-size slide

  2. Shogo SENSUI (shogosensui.com)
    SIer での受託開発を経て、2012 年に株式会社サイバーエー
    ジェントに入社。様々な事業開発の傍ら、エンジニア組織の
    マネジメントに従事。2018 年に株式会社メルカリに入社後
    は、株式会社メルペイの Frontend チームの立ち上げや Web
    版の「メルカリ」の刷新、メルカリアプリのコードベース刷
    新を牽引した後に、執行役員 VP of Engineering としてメル
    ペイのエンジニアリング部門を管掌。2023 年 4 月にデジタ
    ル庁入庁。2023 年 7 月に株式会社ハウテレビジョン入社、
    執行役員プロダクト本部長に就任。TechFeed 公認エキスパ
    ート (Web 標準技術 • JavaScript)、Mond 認定回答者。
    2023 年の Web 開発のベースライン by @1000ch 2

    View full-size slide

  3. 変化し続けてきた Frontend 領域の、背景と現在地を整理する
    Web 標準技術とブラウザ事情? 進化を支えるエコシステム? 設計のパラダイム?
    Web ページに向き合う開発者として、これからのスキルマップを思考する
    2023 年の Web 開発のベースライン by @1000ch 3

    View full-size slide

  4. Web 標準技術とブラウザ
    2023 年の Web 開発のベースライン by @1000ch 4

    View full-size slide

  5. IE11 サポート終了後のブラウザシェアの推移
    IE11 の終了から早 1 年…ブラウザエンジンが Chromium 寡占になる懸念はありつつも、日本
    におけるモダンブラウザは定着したと言って良い (StatCounter Global Stats)。
    July 2022
    Aug 2022
    Sept 2022
    Oct 2022
    Nov 2022
    Dec 2022
    Jan 2023
    Feb 2023
    Mar 2023
    Apr 2023
    May 2023
    0%
    14%
    28%
    42%
    56%
    70%
    Chrome
    Edge
    Safari
    Firefox
    IE
    Other (dotted)
    StatCounter Global Stats
    Top 5 Desktop Browsers in Japan from June 2022 - May 2023
    2023 年の Web 開発のベースライン by @1000ch 5

    View full-size slide

  6. Interop による持続的な相互運用性の改善
    Web Standards Interop 2022 でも触れた通り、Interop により Web 標準技術の相互運用性が
    持続的に改善されている。Interop 2023 の焦点は Container Queries や Custom Properties
    の @property
    など。
    2023 年の Web 開発のベースライン by @1000ch 6

    View full-size slide

  7. Open UI グループによる "Web の" UI 拡張
    HTML 標準で提供されている UI は Web 黎明期にデザインされたもので、そのプラットフォ
    ームニュートラルな性質も相まって、長らく Web 開発者は UI の実装に苦労してきた。

    要素などの実用的な UI も追加されたが、より現代のユースケースに即した UI イ
    ンキュベーションを行う W3C の Open UI によって、
    要素のような試験的な
    UI 要素が提案されている。
    2023 年の Web 開発のベースライン by @1000ch 7

    View full-size slide

  8. Web 標準技術のボトムアップと漸進
    モダンブラウザの一般化と Interop が意味するところ
    ブラウザエンジンが複数種類存在する限りブラウザ間の差はなくならないが、IE11 を中心と
    した後方互換性の考慮は大きく削減された。Interop によるモダンブラウザ間の相互運用性の
    向上も、Web アプリケーション実装のベースラインを大幅に前進させている。
    各プロダクトによる試験的な Web 標準技術への貢献
    Figma の性能や Squoosh のコーデックは WASM で実現していたり、Astro v3 の View
    Transition API サポートなど、プロダクトによって優れた技術の導入も進んでいる。
    2023 年の Web 開発のベースライン by @1000ch 8

    View full-size slide

  9. エコシステムと開発者体験
    2023 年の Web 開発のベースライン by @1000ch 9

    View full-size slide

  10. JavaScript Runtime の群雄割拠
    Node.js のエコシステムは、今や Web 開発に無くてはならな
    い存在になった。Deno や Bun といった実行環境や
    Cloudflare Workers のようなサービスも新たに登場し、
    JavaScript Runtime の相互運用性の改善を目指す WinterCG
    が組成された。
    2023 年の Web 開発のベースライン by @1000ch 10

    View full-size slide

  11. esbuild
    An extremely fast bundler for the web
    開発におけるビルドの一般化
    JavaScript の実装は Babel や TypeScript によるトランスパ
    イルが一般化した。実行環境は Node.js に留まらず、実行速
    度の向上を目指して Go/Rust で実装された esbuild や swc、
    Biome などのツールチェインが登場した。
    2023 年の Web 開発のベースライン by @1000ch 11

    View full-size slide

  12. Node.js や React が Web 開発に与えた影響
    TypeScript および型付テンプレートとしての TSX
    Facebook ですら JSX が市民権を得ると思わなかったが、TypeScript の JSX サポートや VS
    Code といったエディタの TypeScript サポートなど、Language Server Protocol 実装があ
    る型付きテンプレートエンジン として、品質と生産性の向上に寄与している。
    開発者体験へフォーカスするプラットフォーム
    Next.js on Vercel や Remix on Cloudflare といった、アーキテクチャだけでなくデプロイ環境
    といった開発者体験を統合的にサポートするフレームワークとプラットフォームの組み合わ
    せが登場している。
    2023 年の Web 開発のベースライン by @1000ch 12

    View full-size slide

  13. アプリケーションアーキテクチャ
    2023 年の Web 開発のベースライン by @1000ch 13

    View full-size slide

  14. Virtual DOM がもたらしたパラダイムシフト
    差分描画と単一方向のデータフロー
    Virtual DOM が実現する HTML の差分描画はアプリケーションの状態に応じたページの高速
    な再描画を実現し、昨今の UI ライブラリの多くはこの概念を踏襲している。これは単一方向
    のデータフロー設計である Flux を一般化させた。
    CSR or SSR? SPA or MPA?
    アプリケーションの要件に応じたアーキテクチャの試行錯誤が繰り返され、概念が成熟して
    いく。Universal JavaScript や Jamstack などのパラダイムが発明された。MPA への揺り戻
    しをブラウザ実装の最適化である bfcache が後押しする。
    2023 年の Web 開発のベースライン by @1000ch 14

    View full-size slide

  15. 広がり続ける Frontend の責務
    サーバーサイドエンジニアが Backend を実装してマークアップエンジニアが HTML/CSS を
    実装する時代から、Node.js が成すエコシステムの普及と成熟によって Software Engineer
    (Frontend) が Web アプリケーション全域をカバーしつつある。
    FUJI Goro
    @__gfx__·フォローする
    .@1000ch さんの「フロントエンドの責務が広がってバック
    エンドを飲み込んでいる」という話があって、これは結構象
    徴的だなと思いました。たとえばフロントエンドエンジニア
    向けのミートアップでCDNが話の中心になるというのは隔世
    の感があります。 #高速化_findy
    午後8:07 · 2023年3月22日
    55 返信 リンクをコピー
    1件の返信を読む
    2023 年の Web 開発のベースライン by @1000ch 15

    View full-size slide

  16. ベースラインをどこに置くべきか
    2023 年の Web 開発のベースライン by @1000ch 16

    View full-size slide

  17. 堅牢な UI の実装技術
    セマンティックで HTML を使いつつ、@layer/@container クエリ, :has()
    , CSS Nesting な
    ど CSS の新機能を抑えていく。Sass や Autoprefixer は役目を終えつつある。
    プログラミング言語
    JavaScript は ES2015 をベースにしつつ、実利と投資を含めて ES2016+ を前提にして差し
    支えない。TypeScript も積極的に導入し、target も同様に ES2015+ で問題ない。
    2023 年の Web 開発のベースライン by @1000ch 17

    View full-size slide

  18. 実行環境やアーキテクチャ
    Node.js とそのエコシステムは Web 開発にとって今や欠かせない。要件に応じて UI ライブラ
    リとビルドツールを選びながら、ベストプラクティスを模索していく。
    拡がる Frontend のスキルマップ
    Frontend Developer Roadmap を参考に、Software Engineer (Frontend) としての分化する
    専門性を磨いていく。
    2023 年の Web 開発のベースライン by @1000ch 18

    View full-size slide