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

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

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

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

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

HTML + Inline Script

HTML + Script Tag

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

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

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

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

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

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

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

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

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

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

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

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

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

poteboy

More Decks by poteboy

Other Decks in Programming

Featured

Transcript