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

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