フロントエンド

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 のフロントエンドの刷新をはじめるに至った経緯と、その取り組みについて紹介します。

プロダクト支援チームでkintoneのStorybookをホスティングした話

こんにちは。生産性向上チーム&フロントエンドエキスパートチームです。 今回は私たちプロダクト支援チームが普段どのようにプロダクトチームを支援しているかの一例として、kintoneのStorybookを社内からいつでも確認できるようにホスティングするまでの流…

大規模 Closure Tools プロジェクトに Prettier を導入するまでの道のり

こんにちは、フロントエンドエキスパートチームの鈴木(@__sosukesuzuki)です。 弊社のサービスである kintone では、コードのフォーマットを ESLint のみで行っているためプロジェクト内でコーディングスタイルを統一しきれていないという問題を抱えていまし…

フロントエンドエキスパートチームでWEB+DB PRESS Vol.119の特集記事を執筆しました

WEB+DB PRESS Vol.119の表示画像 こんにちは!フロントエンドエキスパートチームです! 私たちフロントエンドエキスパートチームの一部メンバーは、2020年10月24日発売のWEB+DB PRESS Vol.119に「フロントエンド脱レガシー 長く愛されるプロダクトをさらに改…

フロントエンドエキスパートチームが選ぶ web.dev Live2020 オススメセッション

こんにちは、フロントエンドエキスパートチームです。 フロントエンドエキスパートチームでは、フロントエンドに関する情報共有会を社内向けに行っています。 2017年から2020年までに10回開催しており、「Web ページのパフォーマンス」、「React の今とこれ…

Closure LibraryからTypeScriptの型定義を生成する

こんにちは、フロントエンドチームエキスパートチームの穴井(@pirosikick)です。 弊社の製品である kintone は Closure Tools (Closure Library と Closure Compiler の総称) を使って開発していますが、TypeScript を使ったモダンなスタックへの移行を検討…

フロントエンドカンファレンス福岡 2019 に行ってきました

こんにちは、フロントエンドエキスパートチームです。 先日、11/16(土)に福岡の九州産業大学で行われたフロントエンドカンファレンス福岡 2019 にシルバースポンサーとして協賛しました。チームから@toshi-tomaと@__sakito__が登壇し、当日はチームで参加…

Puppeteerで不要なCSSを消す

こんにちは。フロントエンドエキスパートチームの穴井(@pirosikick)です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいで…

React Conf 2018のKeynoteで発表されたHooks、Concurrent Reactのまとめ

フロントエンドエキスパートチームの@koba04です。 10/25,26の2日間、ネバダで開催されたReact Conf 2018に参加して来ました。 今回は、気になっている人も多いKeynoteで発表されたHooksとConcurrent Reactについて紹介したいと思います。 今回紹介された内…