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

近代フロントエンドの歴史とKuma UIの登場意義

poteboy
September 10, 2023

近代フロントエンドの歴史とKuma UIの登場意義

2023/9/9「~ 秋のエンジニア大交流会 & LT会!!~」発表資料

poteboy

September 10, 2023
Tweet

More Decks by poteboy

Other Decks in Programming

Transcript

  1. 近代フロントエンドの歴史と
    Kuma UIの登場意義

    poteboy

    View full-size slide

  2. - Poteboy (@_poteboy_)といいます。
    フロントエンドエンジニアです。
    - Kuma UIというOSSの作者で、有難
    いことに先日GitHubで1000 Star獲
    得しました🎉

    View full-size slide

  3. 本日の流れ
    - 近代フロントエンドアプリケーションのざっくりとした歴史
    - その上で、Kuma UIの登場意義は何だったのか、利点につい
    て紹介

    View full-size slide

  4. フロントエンド
    = 本質的にはHTML + CSS + JavaScript
    しかし現在は色々なツールが存在する
    React, Webpack, ES Modules…って一体何?

    View full-size slide

  5. HTML + Inline Script

    View full-size slide

  6. HTML + Script Tag

    View full-size slide

  7. 既存の方法の問題点
    - グローバルの名前空間が汚染される
    - モジュールの依存順番が重要となり、コードのメンテ性・再利
    用性が低下する
    - 特に後述するSPA(シングルページアプリケーション)のように
    複数ページ間で単一HTMLを共有するアーキテクチャではこ
    の問題はより顕著

    View full-size slide

  8. モジュールシステムの登場
    - モジュールシステムとは、複数のパッケージやリソースを1つにまとめる仕組み
    - Node.jsの登場に付随してCommonJSというモジュールシステムが制定される
    - `require`や`module.exports`の文法で異なるファイル間でコードをインポート・エク
    スポートできるようになる
    - しかし、CommonJSはブラウザの実行環境ではネイティブサポートされていない

    View full-size slide

  9. モジュールバンドラーの登場
    - `require`構文を使っているJavaScriptをブラウザで動作可能な単一のファイルにま
    とめ上げるモジュールバンドラーが生まれた
    - 初期にはBrowserifyというツールが生まれ、その後webpackと呼ばれるバンドラが
    覇権を握った
    - webpackはES Modulesと呼ばれるモジュールシステムも解釈できた。
    - また、JSだけでなくCSSや画像も解釈できた

    View full-size slide

  10. トランスパイラ
    - JavaScriptには先述のようにCommonJSやES Modulesといったモ
    ジュールシステムがあったり、ES5やES6など複数のバージョンが存在
    する。
    - そして、先述の通りブラウザはCJSを解釈できないし、すべてのブラウザ
    が最新のバージョンをサポートしているわけではない。
    - 新しい構文で書かれたJSを環境差異なく動かすために、新しい構文を
    古い構文に変換する必要がある。これをトランスパイル(またはDown
    Level Compiling)と呼ぶ。代表的なものにBabel。

    View full-size slide

  11. 要するに、モジュールバンドラーとトランスパイラ
    のお陰で我々開発者はめんどくさい制約を無視
    してアプリケーションを書くことに集中することが
    できる

    View full-size slide

  12. SPAとReact
    SPAとは、先述の通り単一Webページ内で、ユーザーからのアクションに基づいて
    HTML構造を動的に更新し、優れたUXを提供するアーキテクチャ
    代表的なものにReactがある。ReactではJSXという構文を使用し、JavaScript内で
    HTMLを書く事ができる。そしてこの関数群をコンポーネントという

    View full-size slide

  13. 一般的なフロントエンドの世界では、右図
    のように複数のコンポーネントを組み合わ
    せて画面を作る
    - コンポーネントは複数画面で再利用したい
    (a.jsで定義したコンポーネントを b.jsやc.jsで
    も使いたい)
    👉モジュールシステム の出番
    - ブラウザはモジュールシステムを解釈できな
    いから単一JSにまとめる必要がある
    👉モジュールバンドラの出番
    - JSXは一種のDSLのようなもので、ブラウザ
    はそのままだと解釈できないから JSに変換
    する必要がある
    👉トランスパイラの出番

    View full-size slide

  14. ところで、JSXはJavaScriptの中にHTMLを書く事ができる技術
    👉それならCSSもJavaScriptの中で書けると嬉しい!
    👉それを実現するCSS-in-JSという技術が開発される

    View full-size slide

  15. CSS-in-JSの問題点
    従来のCSS-in-JSはJavaScriptの実行時にJSに埋め込まれたCSSを解析する必要があ
    り、パフォーマンスのオーバーヘッドがある
    👉そこでKuma UIの出番

    View full-size slide

  16. Kuma UIの意義
    Kuma UIは先ほど紹介したモジュールバンドラとトランスパイラを活用したライブラリ
    アプリケーションのトランスパイル時にコードのAST(抽象構文木)にアクセスして、JS内
    に書かれたCSSを抽出する
    そして、モジュールバンドラを利用して、抽出したCSSをアプリケーションのバンドルに出
    力する
    👉これにより、パフォーマンスを大幅に向上することができる!

    View full-size slide

  17. ご清聴ありがとうございました!
    よかったらGitHubでスターよろしくお願いします!
    https://github.com/kuma-ui/kuma-ui

    View full-size slide