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

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

Transcript

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

   poteboy
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. HTML + Inline Script
   

   View Slide

6. HTML + Script Tag
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide