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

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

Cybozu
November 26, 2022

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

Cybozu

November 26, 2022
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide