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
9
1.4k
DEIM2024 / 大規模言語モデルを用いたカテゴリ説明文付与によるニュース推薦の性能向上
yadayuki
0
88
【情報科学若手の会 2023秋 軽井沢】大規模言語モデル(BERT)を用いたニュース推薦のPyTorchによる実装と評価
yadayuki
1
840
技育展登壇資料 Omochi
yadayuki
0
520
クックパッド・インターン成果発表
yadayuki
0
510
Other Decks in Programming
See All in Programming
AI Agents with JavaScript
slobodan
0
230
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
170
RubyKaigi Dev Meeting 2025
tenderlove
1
140
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
750
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
120
Dissecting and Reconstructing Ruby Syntactic Structures
ydah
0
670
AI時代の開発者評価について
ayumuu
0
150
Being an ethical software engineer
xgouchet
PRO
0
210
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
650
Empowering Developers with HTML-Aware ERB Tooling @ RubyKaigi 2025, Matsuyama, Ehime
marcoroth
2
620
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
160
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
hanon52_
2
440
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Being A Developer After 40
akosma
91
590k
Typedesign – Prime Four
hannesfritz
41
2.6k
Building Adaptive Systems
keathley
41
2.5k
YesSQL, Process and Tooling at Scale
rocio
172
14k
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日間短い😢
フロントエンドエキスパートチームの皆さん 本当にありがとうございました!