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
4.9k
近代フロントエンドの歴史とKuma UIの登場意義
2023/9/9「~ 秋のエンジニア大交流会 & LT会!!~」発表資料
poteboy
September 10, 2023
Tweet
Share
More Decks by poteboy
See All by poteboy
現代CSSフレームワークの内部実装とその仕組み
poteboy
9
4.9k
Kuma UIの設計思想と 頑張らないゼロランタイムCSS-in-JS
poteboy
3
1.5k
CSSパフォーマンスに関する計測結果
poteboy
4
2.1k
Kuma UIのこれまでとこれから
poteboy
7
4.6k
Other Decks in Programming
See All in Programming
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
730
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
510
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Immutable ActiveRecord
megane42
0
140
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.2k
Open source software: how to live long and go far
gaelvaroquaux
0
630
SwiftUI Viewの責務分離
elmetal
PRO
1
230
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
260
color-scheme: light dark; を完全に理解する
uhyo
3
200
sappoRo.R #12 初心者セッション
kosugitti
0
250
チームリードになって変わったこと
isaka1022
0
200
CI改善もDatadogとともに
taumu
0
110
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Done Done
chrislema
182
16k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Designing for Performance
lara
604
68k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Unsuck your backbone
ammeep
669
57k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
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