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.2k
DEIM2024 / 大規模言語モデルを用いたカテゴリ説明文付与によるニュース推薦の性能向上
yadayuki
0
70
【情報科学若手の会 2023秋 軽井沢】大規模言語モデル(BERT)を用いたニュース推薦のPyTorchによる実装と評価
yadayuki
1
830
技育展登壇資料 Omochi
yadayuki
0
510
クックパッド・インターン成果発表
yadayuki
0
500
Other Decks in Programming
See All in Programming
生産性アップのためのAI個人活用
kunoyasu
0
480
体得しよう!RSA暗号の原理と解読
laysakura
3
520
RCPと宣言型ポリシーについてのお話し
kokitamura
2
140
AI時代のプログラミング教育 / programming education in ai era
kishida
22
20k
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
120
requirements with math
moony
0
520
エンジニア未経験が最短で戦力になるためのTips
gokana
0
190
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
7
6.5k
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
130
プログラミング教育のコスパの話
superkinoko
0
110
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
190
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Rails Girls Zürich Keynote
gr2m
94
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
GitHub's CSS Performance
jonrohan
1030
460k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Making Projects Easy
brettharned
116
6.1k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
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日間短い😢
フロントエンドエキスパートチームの皆さん 本当にありがとうございました!