Upgrade to Pro — share decks privately, control downloads, hide ads and more …

インターン成果発表資料 / サイボウズ・フロントエンドエキスパートコース

Yuki
September 06, 2022

インターン成果発表資料 / サイボウズ・フロントエンドエキスパートコース

Yuki

September 06, 2022
Tweet

More Decks by Yuki

Other Decks in Programming

Transcript

  1. インターン成果発表 フロントエンドエキスパートコース / 矢田宙生

  2. 配属先の紹介 • 配属部署: フロントエンドエキスパートチーム • サイボウズのフロントエンドを最高 にすることを目的とした横断的開発 支援チーム. • エキスパート達に囲まれながら、

    一週間、ゴリゴリと開発をしていま した💪
  3. 取り組んだこと

  4. 取り組んだこと styled-componentsを異なるcss in js へ変換するCLIツールの開発

  5. 背景 • 現在、サイボウズ内の多くのReactコンポーネントのスタイリングには styled-componentsが用いられている • styled-componentsはJavaScriptの実行より動的にstyleタグを生成し、ス タイリングを付与。 ⇨ 主にパフォーマンス面で課題がある。 •

    将来的に負債となりうるリスクを回避することを目的に、静的なCSSフ ァイルを出力するZero-Runtime CSS in JSへの移行を検討 • しかし、手作業でZero-Runtime CSS in JSに書き換えるのは虚無作業。
  6. 背景 • 現在、サイボウズ内の多くのReactコンポーネントのスタイリングには styled-componentsが用いられている • styled-componentsはJavaScriptの実行より動的にstyleタグを生成し、ス タイリングを付与。 ⇨ 主にパフォーマンス面で課題がある。 •

    将来的に負債となりうるリスクを回避することを目的に、静的なCSSフ ァイルを出力するZero-Runtime CSS in JSへの移行を検討 • しかし、手作業でZero-Runtime CSS in JSに書き換えるのは虚無作業。 ⇨変換後のコードを自動生成するCLIツールを 開発しよう🧐
  7. 設計・実装

  8. 作ったもの(extract-styled) extract-styled Zero-Runtime CSS in JS styled-components vanilla-extract styled-components

  9. コード変換の全体像 styled-components ・ ・ ・ 構文解析 各CSS in JS への変換

    Reactコンポーネント のAST
  10. AST is 何 • 抽象構文木 (Abstract Syntax Tree)のこと • ソースプログラムを解析し、

    木構造に変換することによって 、プログラムを階層的に表現す る • ソースプログラムを抽象構文木 に変換する処理: 構文解析 const hoge = 1 + 1; 構文解析
  11. AST is 何 const hoge = 1 + 1; ※

    このサイトで簡単に試せる:https://astexplorer.net/
  12. 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のフォーマットに 変換 実装
  13. 最終成果物

  14. デモ🤩

  15. 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のコンポーネントを置換
  16. • JS(TS)のAST構造の把握. ◦ ASTの取得は@babel/parserを使え ば簡単. ◦ 出力されるJSON形式のASTから欲 しい値を探すには、地道な作業が必 要 •

    ASTの探索や上書きの実装 ◦ 再帰や木構造の全探索といった普通 の開発ではあまり出くわさない実装 が必要 ◦ 数少ない競プロが実務で役立つ場面 の一つかも 苦労した点
  17. • 対象とするCSS in JSの種類を増やす。 ◦ 今回はvanilla-extractとLinariaの2つ ◦ Zero-Runtime CSS in

    JSに限らず、さまざまなCSS in JSに 対応していきたい • 動的なCSSへの対応 ◦ JSによりスタイリングを動的に変更する構文に未対応なので 、改良していきたい • OSS化 & npmパッケージとして公開 💪💪💪 今後の展望
  18. 余談

  19. タスク以外にも...😋 • フロントエンド界隈の有名人とたくさん話せた. ◦ Twitterでしか見たことない人達と雑談 • Frontend Weeklyへの参加 ◦ 面白い話をたくさん聞けた

    ◦ 自分も研究の話をチラッと。 • サイボウズのフロントエンドの良い話 & 苦労話 をたくさん聞けて 、面白かった。 • エキスパート達とのモブプロはとても楽しい & 勉強になる
  20. まとめ

  21. まとめ • JS(TS)のASTをいじる仕事はとても面白かった(自作コンパイラ の知識が役に立って感動) • ユーザに直接は見えない部分を作るタスクであったが技術的にマ ニアックなことを学べて、とても良い経験になった。 • 同じチームの方との雑談を交えたワイワイとしたモブプロは本当 に楽しかった・勉強になった。(頻繁にフィードバックをもらえ

    て、良き。) • 5日間短い😢
  22. フロントエンドエキスパートチームの皆さん 本当にありがとうございました!