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

フロントエンド刷新活動の紹介

Cybozu
PRO
November 26, 2022

 フロントエンド刷新活動の紹介

Cybozu
PRO

November 26, 2022
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

  1. フロントエンド刷新活動の紹介
    サイボウズ株式会社
    JS Conf 2022 Sponsor LT

    View Slide

  2. ⾃⼰紹介
    ▌⻄川⼤貴 / 2021年⼊社
    ▌kintone のフロントエンド刷新 / エンジニア
    ▌最近の興味
    n Rust で書かれた JS ツールチェーン
    n Rome 推し︕先⽉末からコントリビューションし始めました
    @nissy_dev
    @nissy-dev

    View Slide

  3. kintone のフロントエンド刷新の活動を
    もっと知ってもらいたい︕

    View Slide

  4. 開発の知識がなくても
    業務に合わせたシステムを
    かんたんに作成できる
    クラウドサービス
    東証プライム上場企業の3社に1社が kintone を利⽤中
    ※2022年3⽉末時点

    View Slide

  5. チームの独⽴性や⾃律性を重視しながら、
    kintone の各ページを Closure Tools から React へ移⾏しています。
    kintone のフロントエンド刷新 (フロリア)
    最近 ロゴもできました︕
    チームの独⽴性や⾃律性の観点の詳細は、「kintoneフロントエンドリアーキテクチャプロジェクトで⼤切にしていること」を参照

    View Slide

  6. React コンポーネント
    共通ヘッダーの React 化 (今まで)
    ページ単位で React 化を⾏うチームへコンポーネントを提供
    npm
    install

    View Slide

  7. 共通ヘッダーの React 化 (今まで)
    Closure Tools 部分の置き換えが難しく、⼆重実装が課題に
    React コンポーネント
    npm
    install

    View Slide

  8. React 化された共通ヘッダーを
    レンダリングするスクリプト
    script タグでの
    読み込み
    共通ヘッダーの React 化 (これから)
    コンポーネント単位での React 化を進めています

    View Slide

  9. 共通ヘッダーの React 化 (これから)
    ▌マイクロフロントエンドのプラクティスを
    取り⼊れながら進めています
    ▌共通ヘッダーとページコンテンツ間で
    技術的に考えることがたくさん
    n 結合⽅法
    n コミュニケーション⽅法
    n 共通ライブラリの扱い⽅
    React 化された共通ヘッダーを
    レンダリングするスクリプト
    script タグでの
    読み込み

    View Slide

  10. https://blog.cybozu.io/archive/category/フロリア
    kintone フロリア 検索
    今回紹介した活動以外にも、
    フロントエンド刷新の活動を積極的に発信しています︕

    View Slide

  11. フロントエンド刷新を
    ⼀緒に⾏うメンバーをもっと増やしたい︕

    View Slide

  12. We are hiring!
    ご応募お待ちしています︕
    採⽤サイトトップ
    フロントエンドエンジニア
    (kintoneフロントエンド刷新PJ)
    https://cybozu.co.jp/recruit/ https://cybozu.co.jp/recruit/entry/careerfront-end-engineer-kintone.html

    View Slide