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.5k
インターン成果発表資料 / サイボウズ・フロントエンドエキスパートコース
Yuki Yada
September 06, 2022
Tweet
Share
More Decks by Yuki Yada
See All by Yuki Yada
DEIM2024 / 大規模言語モデルを用いたカテゴリ説明文付与によるニュース推薦の性能向上
yadayuki
0
16
【情報科学若手の会 2023秋 軽井沢】大規模言語モデル(BERT)を用いたニュース推薦のPyTorchによる実装と評価
yadayuki
1
630
技育展登壇資料 Omochi
yadayuki
0
440
クックパッド・インターン成果発表
yadayuki
0
460
Other Decks in Programming
See All in Programming
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
甘い香りに誘われてVanilla Extractを1年間運用してみた
miyahkun
1
110
Elm Form Validation
bkuhlmann
0
500
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
PostmanでAPIの動作確認が楽になった話
h455h1
0
120
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
Netty Chicago Java User Group 2024-04-17
sullis
0
110
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
8
2.2k
プールにゆこう
irof
2
120
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.6k
Featured
See All Featured
Building Adaptive Systems
keathley
30
1.8k
How to Ace a Technical Interview
jacobian
272
22k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Writing Fast Ruby
sferik
620
60k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
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日間短い😢
フロントエンドエキスパートチームの皆さん 本当にありがとうございました!