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
インターン成果発表資料 / サイボウズ・フロントエンドエキスパートコース
Search
Yuki Yada
September 06, 2022
Programming
0
1.8k
インターン成果発表資料 / サイボウズ・フロントエンドエキスパートコース
Yuki Yada
September 06, 2022
Tweet
Share
More Decks by Yuki Yada
See All by Yuki Yada
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
11
2k
DEIM2024 / 大規模言語モデルを用いたカテゴリ説明文付与によるニュース推薦の性能向上
yadayuki
1
140
【情報科学若手の会 2023秋 軽井沢】大規模言語モデル(BERT)を用いたニュース推薦のPyTorchによる実装と評価
yadayuki
1
890
技育展登壇資料 Omochi
yadayuki
0
550
クックパッド・インターン成果発表
yadayuki
0
530
Other Decks in Programming
See All in Programming
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
800
パフォーマンスチューニングで Web 技術を深掘り直す
progfay
18
4.8k
Build your own WebP codec in Swift
kishikawakatsumi
2
840
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.6k
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
11k
AccessorySetupKitで実現するシームレスなペアリング体験 / Seamless pairing with AccessorySetupKit
nekowen
0
210
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
230
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
630
プログラマのための作曲入門
cheebow
0
510
CSC509 Lecture 03
javiergs
PRO
0
320
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
1
320
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Optimizing for Happiness
mojombo
379
70k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Facilitating Awesome Meetings
lara
56
6.6k
GitHub's CSS Performance
jonrohan
1032
460k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Context Engineering - Making Every Token Count
addyosmani
3
140
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Transcript
インターン成果発表 フロントエンドエキスパートコース / 矢田宙生
配属先の紹介 • 配属部署: フロントエンドエキスパートチーム • サイボウズのフロントエンドを最高 にすることを目的とした横断的開発 支援チーム. • エキスパート達に囲まれながら、
一週間、ゴリゴリと開発をしていま した💪
取り組んだこと
取り組んだこと styled-componentsを異なるcss in js へ変換するCLIツールの開発
背景 • 現在、サイボウズ内の多くのReactコンポーネントのスタイリングには styled-componentsが用いられている • styled-componentsはJavaScriptの実行より動的にstyleタグを生成し、ス タイリングを付与。 ⇨ 主にパフォーマンス面で課題がある。 •
将来的に負債となりうるリスクを回避することを目的に、静的なCSSフ ァイルを出力するZero-Runtime CSS in JSへの移行を検討 • しかし、手作業でZero-Runtime CSS in JSに書き換えるのは虚無作業。
背景 • 現在、サイボウズ内の多くのReactコンポーネントのスタイリングには styled-componentsが用いられている • styled-componentsはJavaScriptの実行より動的にstyleタグを生成し、ス タイリングを付与。 ⇨ 主にパフォーマンス面で課題がある。 •
将来的に負債となりうるリスクを回避することを目的に、静的なCSSフ ァイルを出力するZero-Runtime CSS in JSへの移行を検討 • しかし、手作業でZero-Runtime CSS in JSに書き換えるのは虚無作業。 ⇨変換後のコードを自動生成するCLIツールを 開発しよう🧐
設計・実装
作ったもの(extract-styled) extract-styled Zero-Runtime CSS in JS styled-components vanilla-extract styled-components
コード変換の全体像 styled-components ・ ・ ・ 構文解析 各CSS in JS への変換
Reactコンポーネント のAST
AST is 何 • 抽象構文木 (Abstract Syntax Tree)のこと • ソースプログラムを解析し、
木構造に変換することによって 、プログラムを階層的に表現す る • ソースプログラムを抽象構文木 に変換する処理: 構文解析 const hoge = 1 + 1; 構文解析
AST is 何 const hoge = 1 + 1; ※
このサイトで簡単に試せる:https://astexplorer.net/
1. 構文解析(ReactコンポーネントからASTへの変換): - @babel/parserというライブラリを使用 1. 各CSS in JS への変換 a.
Linaria - @babel/traverseでASTをLinariaの記法に編集 - @babel/generateでASTコード生成 a. vanilla extract: - @babel/traverseでASTからCSSの定義を抽出 ⇨ stylisによりCSSを解析し、vanilla extractのフォーマットに 変換 実装
最終成果物
デモ🤩
extract-styled(作成したCLIツール) $ extract-styled --path ./src/components/**/*.tsx --target linaria --output ./ --ignore
stories test #storybookとtestはignore • 上のコマンドを実行すると./src/components/**/*.tsxに該当す るReactコンポーネントがLinariaに変換される • 現時点で対応しているCSS in JSはLinariaとvanilla-extract の2つ • 上のコマンドを実行して、Mantleのコンポーネントを置換
• JS(TS)のAST構造の把握. ◦ ASTの取得は@babel/parserを使え ば簡単. ◦ 出力されるJSON形式のASTから欲 しい値を探すには、地道な作業が必 要 •
ASTの探索や上書きの実装 ◦ 再帰や木構造の全探索といった普通 の開発ではあまり出くわさない実装 が必要 ◦ 数少ない競プロが実務で役立つ場面 の一つかも 苦労した点
• 対象とするCSS in JSの種類を増やす。 ◦ 今回はvanilla-extractとLinariaの2つ ◦ Zero-Runtime CSS in
JSに限らず、さまざまなCSS in JSに 対応していきたい • 動的なCSSへの対応 ◦ JSによりスタイリングを動的に変更する構文に未対応なので 、改良していきたい • OSS化 & npmパッケージとして公開 💪💪💪 今後の展望
余談
タスク以外にも...😋 • フロントエンド界隈の有名人とたくさん話せた. ◦ Twitterでしか見たことない人達と雑談 • Frontend Weeklyへの参加 ◦ 面白い話をたくさん聞けた
◦ 自分も研究の話をチラッと。 • サイボウズのフロントエンドの良い話 & 苦労話 をたくさん聞けて 、面白かった。 • エキスパート達とのモブプロはとても楽しい & 勉強になる
まとめ
まとめ • JS(TS)のASTをいじる仕事はとても面白かった(自作コンパイラ の知識が役に立って感動) • ユーザに直接は見えない部分を作るタスクであったが技術的にマ ニアックなことを学べて、とても良い経験になった。 • 同じチームの方との雑談を交えたワイワイとしたモブプロは本当 に楽しかった・勉強になった。(頻繁にフィードバックをもらえ
て、良き。) • 5日間短い😢
フロントエンドエキスパートチームの皆さん 本当にありがとうございました!