フロントエンド

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

※この記事は 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 のテストの書き方

こんにちは!フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト(フロリア)では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの…

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

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

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

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

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

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

kintoneの内部を(こっそり)Reactに置き換えるチームがあるってホント?

こんにちは!フロントエンドエキスパートチーム兼 Mira チームで活動している@nus3_です。 サイボウズが提供するkintoneは 10 年以上にわたり多くのユーザーにご利用頂いています。現在、kintone の開発が引き続きスケールできるように、Closure Toolsから R…

typescript-generatorを利用して、HTML に埋め込んだ JSON データをフロントエンドで型安全に扱う

こんにちは!kintone フロントエンドリアーキテクチャチーム (フロリア) の西川 @nissy_dev です。 最近のフロントエンド開発で導入されることの多い TypeScript ですが、開発期間の長いプロジェクトに導入する際にはバックエンドとの結合部分の型定義をどう…

Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test

こんにちは!フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか? 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事…

ユーザー体験を最高にするkintone Design Systemsをつくってます

春ですね〜、ユーザー体験を最高にするチームプロジェクトオーナーのsakitoです。 以前、kintone フロントエンドリアーキテクチャプロジェクトをスタートさせたブログ記事が公開されました。 今回はこの取り組みの一つのチームである「ユーザー体験を最高に…

kintone フロントエンドリアーキテクチャプロジェクトで大切にしていること

kintone フロントエンドリアーキテクチャプロジェクトリーダーの @koba04です。 昨年末から、kintone フロントエンドリアーキテクチャをプロジェクト(フロリア)として再構成してスタートさせました。フロリアという名前は社内での公募により決定しました。…

kintoneマイクロサービス化検証プロジェクトのWebフロントエンドにおける技術選定

こんにちは、フロントエンドエキスパートチームのsakitoです。 本記事ではkintoneをマイクロサービス化するためのPoCプロジェクトにおけるWebフロントエンドの技術選定について紹介します。

フロントエンド刷新のために DevTools を作って開発を捗らせる

こんにちは、フロントエンドエキスパートチームの麦島(@mugi_uno)です! 2021年5月に新しくメンバーとして加わり、富山からフルリモートで働いています。 最近はチームメンバーに誕生日を祝ってもらって嬉しかったです さて、以前に "kintoneのフロントエン…

kintoneのフロントエンド刷新に向けた取り組み

こんにちは。kintone開発チーム Webエンジニアの村田です。 本記事では kintone のフロントエンドの刷新をはじめるに至った経緯と、その取り組みについて紹介します。