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
1.9k
DEIM2024 / 大規模言語モデルを用いたカテゴリ説明文付与によるニュース推薦の性能向上
yadayuki
1
120
【情報科学若手の会 2023秋 軽井沢】大規模言語モデル(BERT)を用いたニュース推薦のPyTorchによる実装と評価
yadayuki
1
880
技育展登壇資料 Omochi
yadayuki
0
550
クックパッド・インターン成果発表
yadayuki
0
520
Other Decks in Programming
See All in Programming
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
280
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
12
2.7k
新しいモバイルアプリ勉強会(仮)について
uetyo
1
260
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
1.8k
Infer入門
riru
4
1.5k
ゲームの物理
fadis
5
1.2k
The State of Fluid (2025)
s2b
0
170
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
620
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
480
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
240
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
1.1k
Vibe coding コードレビュー
kinopeee
0
450
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Optimizing for Happiness
mojombo
379
70k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Embracing the Ebb and Flow
colly
86
4.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How STYLIGHT went responsive
nonsquared
100
5.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
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日間短い😢
フロントエンドエキスパートチームの皆さん 本当にありがとうございました!