Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
近代フロントエンドの歴史とKuma UIの登場意義
Search
poteboy
September 10, 2023
Programming
4
5.1k
近代フロントエンドの歴史とKuma UIの登場意義
2023/9/9「~ 秋のエンジニア大交流会 & LT会!!~」発表資料
poteboy
September 10, 2023
Tweet
Share
More Decks by poteboy
See All by poteboy
現代CSSフレームワークの内部実装とその仕組み
poteboy
10
5.1k
Kuma UIの設計思想と 頑張らないゼロランタイムCSS-in-JS
poteboy
4
2.2k
CSSパフォーマンスに関する計測結果
poteboy
4
2.2k
Kuma UIのこれまでとこれから
poteboy
7
4.7k
Other Decks in Programming
See All in Programming
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
300
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
710
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
12
7.4k
NEWT Backend Evolution
xpromx
1
150
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
700
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.3k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
270
型で語るカタ
irof
1
810
QA x AIエコシステム段階構築作戦
osu
0
150
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
190
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
5
810
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
GraphQLとの向き合い方2022年版
quramy
49
14k
Optimizing for Happiness
mojombo
379
70k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Practical Orchestrator
shlominoach
189
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
A Tale of Four Properties
chriscoyier
160
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
Transcript
近代フロントエンドの歴史と 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を共有するアーキテクチャではこ の問題はより顕著
モジュールシステムの登場 - モジュールシステムとは、複数のパッケージやリソースを1つにまとめる仕組み - 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