フロントエンド

kintone開発チームの取り組み: フロントエンドのコード分割

kintone 開発チームの内山です。この記事では、kintone 開発チームで行っている改善活動の一つであるフロントエンドのコード分割について紹介します。最初にコード分割とはどのような活動なのかを述べ、分割の手順、分割後に得られた学びを順に紹介します。 …

フロントエンド刷新を迅速に終わらせるための2つの軸

kintone 新機能開発チームでエンジニアをしているぶっちーと宇都宮です。 6月の中旬から約3ヶ月間、アプリストアという「kintoneアプリ」を作成するための機能を実現している複数のページのフロントエンド刷新に取り組みました。この取り組みは、以前から …

フロントエンドカンファレンス北海道に協賛しました!

こんにちは、フロントエンドエキスパートチームの mugi です。 2024/08/24(土)にフロントエンドカンファレンス北海道が開催され、サイボウズもスポンサーとして協賛し、かつ弊社メンバーも複数名登壇しました。 今回は、当日の雰囲気や登壇の様子などをご紹…

新卒フロントエンドエンジニア 2 人が語る、サイボウズでの学びとフロントエンド刷新プロジェクトの今

この記事は、CYBOZU SUMMER BLOG FES '24 (Newcomer Stage) DAY 7 の記事です。 はじめに こんにちは!24 卒フロントエンドエンジニア職能としてサイボウズにジョインした daiki (@k1tikurisu) と saku (@sakupi01) です! 今回は、私たちがサイボウズフロン…

Webフロントエンドの社内祭 - Cybozu Frontend Day 2024 Summer を実施しました

この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 15 の記事です。 こんにちは、フロントエンドエキスパートチームの @mugi_uno です。 DAY 4 の記事で nus3 がすでに一部紹介していますが、2024年7月2日にサイボウズ社内で実施された開発・運…

Storybook をフル活用してテストを実装したその後の話

この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend stage) DAY13 の記事です。 こんにちは、フロリアでエンジニアとして活動している hacchan です。 現在 kintone ではフロリアというプロジェクトの中で、Closure Tools から React への移行作業に取り組ん…

社内イベントでフロントエンドクイズ大会を開催しました

この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend stage) DAY4 の記事です。 こんにちわ。フロントエンドエキスパートチームの@nus3_です。 サイボウズでは開発、運用に関わる様々なチームや職能の人が集まって交流を深める社内イベントとして開運夏まつり…

Next.js 製アプリケーションの CI の実行時間削減や安定性向上のために取り組んだこと

こんにちは!DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、画面刷新を進めていく中で CI の実行時間が長く不安定になってしまい、開発生産性に大きな影響が出ていました。今回の記事では、CI の…

フロントエンドリアーキテクチャ(部分刷新)を素早く終わらせるために取り組んだこと

※この記事は Cybozu Frontend Advent Calendar 2023 の 25 日目の記事です ! こんにちは、サイボウズでスクラムマスターとして働いている村田です。2023 年 8 月から新規機能を開発するチームに移動し、週3日(火水木)勤務で専任スクラムマスターとして活動し…

持続可能なフロントエンドのテストコードを書くために大切にしていること

こんにちは、kintone フロントエンドリアーキテクチャプロジェクト(フロリア)でエンジニアをしているはた丸です。 昨今は何かとSDGsが話題になる世の中なので、フロントエンドのテストコードも持続可能なものを作っていきたいと考えています。 この記事で…

新卒フロントエンド職同期と「React のドキュメントを読む会」をやってみた

こんにちは!kintone フロントエンド刷新プロジェクト(通称フロリア)にてエンジニアをしている キム テフンです。今日は フロントエンド職で新卒入社後にできることの一例として、現在も継続して社内で開催している「React のドキュメントを読む会」の事例…

サイボウズ Office のフロントエンド刷新におけるアクセシビリティ改善の取り組み

こんにちは。DOGO(どうご)チームのまっつー(@ryo-manba)です。DOGO チームでは、「サイボウズ Office」 のフロントエンド刷新を行っています。この記事では、フロントエンド刷新を進めていく中で取り組んでいるアクセシビリティ改善について紹介します。…

社内で使う npm パッケージの作成に Deno を採用した話

こんにちわ。フロントエンドエキスパートチームの@nus3_です。 最近、社内用の npm パッケージを作る必要があり、そのパッケージは依存が少なく、実装もシンプルだったので、npm パッケージの作成には Deno と dnt を採用しました。 dnt とは dnt は Deno で…

新卒 1 年目が kintone のフロントエンド刷新プロジェクトで取り組んでいること

こんにちは!kintone フロントエンド刷新プロジェクト(通称フロリア)にてエンジニアをしている キム テフンです。今日は フロントエンド職で新卒入社後にできることの一例として、「フロリア」の「Mira チーム」に合流してから 2 ヶ月間やってきたこと、そ…

サイボウズOfficeのフロントエンド刷新(DOGOプロジェクト) をやってます!

DOGOプロジェクトのマスコット こんにちは。サイボウズOffice開発チームの西谷です。 昨年より、私たちは”DOGO”と銘打ち、サイボウズOfficeのフロントエンド部分をNext.js App Routerを用いて刷新しています。 本ブログではこの刷新プロジェクトの概要やこれ…

サイボウズのフロントエンド発信を手伝ってくれるお友達ができました

どうもこんにちわ。フロントエンドエキスパートチームの@nus3_です。 突然ですが、今日は新しくサイボウズにジョインしてくれた、ちょっと変わったお友達を紹介します。 ハシビロコウのハシコウ 彼はハシビロコウで名前をハシコウと言います。発音は「ハチ公…

React 化した共通ヘッダーを kintone の全ページに適用しました!

こんにちは!kintone フロントエンドリアーキテクチャプロジェクト (フロリア) で、エンジニアとして活動している @nissy_dev です。 以前投稿したチーム紹介記事の中で、コンポーネント単位での共通ヘッダー部分の React 化に取り組んでいることを紹介しま…

Cybozu Frontend Day 2023の社内開催と資料公開

主催のkoba04による写真 こんにちは、フロントエンドエンジニアの@shisama_です。 6月30日にサイボウズ東京オフィスで開催された「Cybozu Frontend Day 2023」の資料と開催レポートを公開します。 「Cybozu Frontend Day 2023」は、サイボウズのフロントエン…

エコシステムの開発者体験を向上させるkintone DXチームの活動について

こんにちは! kintone DXチームでエンジニアをしている tasshi です。 今回はkintoneエコシステムの開発者体験(Developer eXperience: DX)を向上させる、私たちの活動について紹介します。 3行まとめ エコシステム開発者向けのSDKや、管理者向けのCLIツー…

GitHub ActionsでPRごとにNext.jsのアプリケーションをCloud Runへデプロイする方法

こんにちは。新規IAMプロダクトでフロントエンドアーキテクトを担当している@shisama_です。 この記事では、開発スピードを上げるためにGitHub Actionsを使ってプルリクエストごとにレビュー用の検証環境をGoogle Cloud Run(以下、Cloud Run)に構築する仕…

Storybook をフル活用してテストを実装した話

サムネイル こんにちは、フロリアでエンジニアとして活動している irico です。 現在 kintone ではフロリアというプロジェクトの中で、Closure Tools から React への移行作業に取り組んでいます。 今回は、そのフロリアのチームの 1 つである Reactone チー…

kintone アプリ作成フォームの UI の状態管理のライブラリ選定

サムネイル こんにちは!kintone のフロントエンド刷新プロジェクト(フロリア)の@nkgrnkgrです。 フロリアでは、kintone のフロントエンドの ClosureToolsで書かれたコードを React に置き換えています。 本記事では フォーム画面の UI の状態管理に使うラ…

新卒でマイクロフロントエンドを経験してみて

新卒でマイクロフロントエンドを経験してみて こんにちは!kintone フロントエンドリアーキテクチャプロジェクト(フロリア) の AppShell チームで活動している 22 新卒のアルベスです。この記事は、Cybozu Advent Calendar 2022 の 21 日目です。 AppShell…

kintone の共通ヘッダー部分の React 化に責任を持つチームの紹介!

こんにちは!kintone フロントエンドリアーキテクチャプロジェクト (フロリア) で、エンジニアとして活動している西川 @nissy_dev です。 フロリアは、現在 4 つのクロスファンクショナルチーム体制で、それぞれが独立したスクラムチームとして活動していま…

フロントエンドのテストコードを書くときに大切にしていること

こんにちは、フロントエンドエキスパートチームの @mugi_unoです! kintone では フロントエンドの刷新プロジェクト(通称フロリア)が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に…

新卒で飛び込んだフロントエンド刷新プロジェクトが学びだらけだった話

こんにちは、kintone フロントエンドリアーキテクチャプロジェクト (フロリア) に所属している 21 新卒の西川 (@nissy_dev) と左治木 (@sajikix) です。 フロントエンド刷新プロジェクトへの配属から約 1 年が経ち、プロジェクトに関わる中で多くの学びがあ…

実装例から見る React のテストの書き方

2024/04/17: 更新 内容を更新した記事を書きましたので、よかったらこちらも併せて、ご覧ください。 zenn.dev こんにちは!フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト(フロリア)では、品質を保ったまま開…

kintone フロントエンド刷新においての Web パフォーマンス方針

kintone フロントエンド刷新プロジェクトリーダーの @koba04 です。この記事では kintone フロントエンド刷新プロジェクトにおける Web パフォーマンス方針について紹介します。 kintone フロントエンド刷新プロジェクト(フロリア)とは プロジェクトの現状…

30人が参加するプロジェクトで桁違いのパフォーマンスを発揮するためのチームデザイン

こんにちは。シニアスクラムマスター(初めて名乗った!)の天野 @ama_ch です。開発本部に所属するアジャイルコーチとして、組織内を横断的に支援しています。最近は、 kintone フロントエンドリアーキテクチャ(フロリア)プロジェクトの支援に注力してい…

kintoneのアクセシビリティ改善とESLintルールの整備

こんにちは。Poca11y(ポカリ)チームのSUGI(@blindsoup2p1)と小林(@sukoyakarizumu)です。 わたしたちPoca11yチームは「kintone」のアクセシビリティ改善活動に参加しています。この記事ではkintoneのアクセシビリティを改善するチーム体制について解説しま…