こんにちは、フロントエンドエキスパートチームの @mugi_unoです！ kintone では フロントエンドの刷新プロジェクト（通称フロリア）が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に合わせて、新たにフロントエンド側でのテストコードを積極的に書いています。 テストを書くことに不慣れなメンバーもいるため、日々 Pull Request 上でのレビューやペア・モブ作業を通じて、…

…いと思い、フロリアとフロントエンドエキスパートチームの兼任をしています。 そのほか、二人の経歴の詳細は、次のレジュメやプロフィールサイトをご覧ください。 西川 : https://github.com/nissy-dev/resume 左治木 : https://sajiki.dev/ kintone フロントエンドリアーキテクチャプロジェクト（フロリア）とは 私たちが配属された kintone フロントエンドリアーキテクチャプロジェクト（フロリア）は、次の 3 つの目標を掲…

こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるesli…

…tone開発チーム・フロントエンドエキスパートチーム・Poca11yチームのメンバーが集まる会議体を設定しました。この時間でスプレッドシートを閲覧しながらひとつひとつのルールを確認し、ルールの適用／不適用をまとめた設定ファイルを作成することにしました。また同時に議事録もとり、kintone開発チームのコミュニケーションスペースで共有しました。 議論になったルール ここでは具体的に議論したいくつかのルールについて、ルールの意味・議論の内容・ルールの適用結果を紹介します。 anc…

…ダクトセキュリティ フロントエンドエキスパート デザイン&リサーチ 各コースの内容、応募方法や報酬などの詳細は特設サイトをご確認ください。 cybozu.co.jp ※コースによって開催時期や応募期間が異なりますのでご注意ください。 参考情報 昨年までのインターンの報告も投稿しておりますので、ぜひご覧ください。 blog.cybozu.io *1:就業経験とは、原則として正社員や契約社員などでの 勤務経験を指します。学業と並行して行ったアルバイトや インターンシップは含まれま…

こんにちは！フロントエンドエキスパートチーム兼 Mira チームで活動している@nus3_です。 サイボウズが提供するkintoneは 10 年以上にわたり多くのユーザーにご利用頂いています。現在、kintone の開発が引き続きスケールできるように、Closure Toolsから React へと置き換えるフロントエンドリアーキテクチャプロジェクト(フロリア)が絶賛進行中です。 フロリアの詳細については次の記事をご覧ください。 Mira ってなんですか？ フロリアプロジェク…

こんにちは！フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか？ 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文脈で Playwright を用いた簡易的な Visual Regression Test を試してみたので、導入に至る経緯と、どのように実施…

こんにちは、フロントエンドエキスパートチームのsakitoです。 本記事ではkintoneをマイクロサービス化するためのPoCプロジェクトにおけるWebフロントエンドの技術選定について紹介します。 プロジェクト背景 本記事で扱うプロジェクトは「kintoneマイクロサービス化Proof of concept(PoC)プロジェクト」です。 現在サイボウズの主力製品であるkintoneは大きなモノリシックなアーキテクチャになっています。 モノリシックなサービスに関わる人数が増える…

こんにちは、フロントエンドエキスパートチームの麦島(@mugi_uno)です！ 2021年5月に新しくメンバーとして加わり、富山からフルリモートで働いています。 最近はチームメンバーに誕生日を祝ってもらって嬉しかったです🎉 さて、以前に "kintoneのフロントエンド刷新に向けた取り組み"*1 というエントリでもご紹介しましたが、現在サイボウズ社内では kintone で利用するフロントエンドの技術スタックを刷新する取り組みを進めています。 その一環として、 "Closur…

…用しない 開発体制 フロントエンドエキスパートチームの支援 アクセシビリティチームの支援 生産性向上チームの支援 これからの活動 おわりに はじめに 現在 kintone 開発チームでは、フロントエンドの開発に使用している Closure Tools (Closure Compiler、Closure Library、Closure Templates で構成されるツール) を React をはじめとした技術スタックに移行する取り組みを進めています。 kintone のフロン…

…デザイン&リサーチ フロントエンドエキスパート new! DevOpsエンジニア(AWS版kintone) new! Kubernetes基盤開発 new! 生産性向上 new! 品質保証 プロダクトセキュリティ 各コースの内容、応募方法や報酬などの詳細は特設サイトをご確認ください。 cybozu.co.jp ※コースによって開催時期や応募期間が異なりますのでご注意ください。 参考情報 昨年までのインターンの報告も投稿しておりますので、ぜひご覧ください。 blog.cyboz…

…協力してもらったのはフロントエンドエキスパートチームの笠間(@b4h0-c4t)さん，モバイルチームの今野(@rkonno)さん，Slash/CyDE-C チームの竹内(@lrf141)さんの 3 名です．普段から近くにこういった職種の人がいるのがベストではありますが，同郷の先輩がそうした仕事をしているということも距離が縮まる一つの要因かなという妄想の元に作られたものです． これらのメッセージは学校教諭時代の自分では発信し得なかったかなと思っています．サイボウズの人となった今…

フロントエンドエキスパートチーム内でスピードハッカソンを行いました。通常のスピードハッカソンは共通の題材に対してチームごとにスコアを競うというイメージですが、今回はランダムに決めたチームでそれぞれのチームごとに題材を探すところからはじめ、計測方法も自由としました。 今回のハッカソンは、チームのコミュニケーション促進を主な目的として開催しましたが、結果としてプロダクトの改善につながる成果、とっかかりとなる知見などが得られました。 今回取り組んだ内容などを紹介します。 開催目的と…

…。生産性向上チーム&フロントエンドエキスパートチームです。 今回は私たちプロダクト支援チームが普段どのようにプロダクトチームを支援しているかの一例として、kintoneのStorybookを社内からいつでも確認できるようにホスティングするまでの流れを紹介します。 支援チームとプロダクトチームの関わり まずは私たち支援チームとプロダクトチームが社内でどのように関わり、開発しているのかを紹介します。 プロダクト支援チームはプロダクトチームに属しておらず、さまざまなプロダクトの課題…

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

…」と思っていたら、 フロントエンドエキスパートチームにも所属している @toshi_toma がスクリプトを書いてくれたおかげで、数時間かかる作業が数秒で解決！ 海外との調整難しい→慣れているメンバーが連携や翻訳の調整を担当💪 参加してくれたベトナムのメンバーとの各種調整や翻訳など、自分は経験がなかったのでどうしよう……となっていました。 困っていたところ、運営メンバーの ayumi が普段の業務で知見があるので思い切ってお任せ🙏 安心してベトナムとも連携することができました…

こんにちは、フロントエンドエキスパートチームの @koba04 です。 本記事では、kintone の REST API を使うためのクライアントである @kintone/rest-api-client (以下 rest-api-client) の構成や工夫した点について紹介します。 本記事は rest-api-client の 1.6.0 のバージョンに基づいています。 @kintone/rest-api-client とは rest-api-client とは、kinto…

…示画像 こんにちは！フロントエンドエキスパートチームです！ 私たちフロントエンドエキスパートチームの一部メンバーは、2020年10月24日発売のWEB+DB PRESS Vol.119に「フロントエンド脱レガシー 長く愛されるプロダクトをさらに改善していくために」というタイトルで特集を執筆しました。 WEB+DB PRESS Vol.119、どこよりも早い表紙画像です！今号はフロントエンド脱レガシー、インフラ障害対応演習、深層学習入門以前を大特集！ 10月24日発売です！#w…

…トエンドで困ったら「フロントエンドエキスパートチーム」 プロダクトチームが開発に集中し、より多くの価値をユーザーに届けるために、各プロダクトが抱えているフロントエンドでの辛みや問題などを解決するフロントエンド専門のチームがいます。 blog.cybozu.io MySQLで困ったらMySQLエキスパートの yoku0825 さん 2019年11月に、GMOメディア株式会社とコンサルティング業務委託契約を締結し、MySQLエキスパートの yoku0825 さんに相談ができるよう…

こんにちは。フロントエンドエキスパートの平野（@shisama_）です。 フロントエンドエキスパートチームでは業務時間の 30 % の時間で技術探究を行っています。 今回は探究した技術の中から Node.js の ES Modules（以下 ESM）についてと Dual Package (CommonJS/ES Modules) に対応した npm パッケージの開発について紹介します。 ES Modules の特徴 ESM はブラウザ互換 ESM は Strict モード E…

…の水戸（広島所属），フロントエンドエキスパートチームのsakito（東京所属），kintone開発チームのにしみね（広島所属），コネクト支援チームの西原（東京所属）の 4 名でお送りいたしました．主だった話題の 3 点に沿って報告をいたします． ※ 参考 : オープンソースカンファレンスについて → https://www.ospn.jp/ 当日は登壇者の都合が合わなかったので，録画配信対応となりました．当日流した動画は OSPN から YouTube に投稿されていますので…

こんにちは、フロントエンドエキスパートチームです。 フロントエンドエキスパートチームでは、フロントエンドに関する情報共有会を社内向けに行っています。 2017年から2020年までに10回開催しており、「Web ページのパフォーマンス」、「React の今とこれから」、「Google I/O セッションまとめ」などフロントエンドに関する情報を社内に共有してきました。 今回行ったのは、2020年6月30日から7月2日にかけて3日間オンラインで開催された web.dev Live2…

…4t / 開発本部 フロントエンドエキスパートチーム 上岡真也 @ueokande / 開発本部 コネクト支援チーム 西原翔太 @tomio2480 / 開発本部 コネクト支援チーム (配信担当) 風穴江 @windhole / 開発本部 コネクト支援チーム よく試された道民であればわかると思いますが，今回のタイトルは道民に愛されしフレーズを RESPECT したものになっています．実はスライドの中にもいくつかそんなフレーズを盛り込んでおきました． セッションの内容は「サイボ…

こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについ…

こんにちは、フロントエンドエキスパートチームの小林（@koba04）です。 フロントエンドエキスパートチームでは、日々の業務としてブラウザやライブラリの更新情報をキャッチアップして社内で共有しています。 例えば先日、CSSのプロパティである image-orientation のデフォルト値が none から from-image に変わったため、画像の Exif 情報の扱いが変更されました。 https://www.fxsitecompat.dev/ja/docs/2020…

…筋縄ではいきません。フロントエンドエキスパートチームでは、このようなツールを活用することでより効率よく、より安全に移行できないか日々探究しています。 今回のサンプルを応用し、型が保証された状態で安全に Closure Tools 側のコードを再利用できるのでは！と期待しています。 また、今回紹介した Clutz 以外に次のようなツールもあります。 Closure Library で記述されたコードを TypeScript のコードに変換するGents 逆に TypeScrip…

こんにちは、フロントエンドエキスパートチームの小林（@koba04）です。 本記事では、Lerna と Yarn Workspaces を使った Monorepo 管理について解説します。 Monorepoとは 本記事では、単一のリポジトリで複数のモジュールやパッケージ（今回の場合は npm パッケージ）を管理する手法を Monorepo と呼んでいます。 有名なところだと、Babel や Jest、Create React App などが後述する Lerna を使い複数パッ…

こんにちは、フロントエンドエキスパートチームの@sakitoです。 今回はフロントエンドエキスパートチームがリモートワークで工夫している内容や、解決してきた課題を共有したいと思います。 最近リモートワークをはじめた会社やチームにとって参考になれば幸いです！ ※ テレワークやリモートワークという言い回しがありますが、本記事内ではすべてリモートワークで統一しています。 所属しているチームと会社の状況 サイボウズには、リモートワークをいつでも行うことができる文化があります。オフィス…

こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームは、プロダクトのフロントエンドを横断的に支援するチームです。今回はフロントエンドエキスパートチームが行っている、プロダクトへの支援活動について紹介します。 フロントエンドエキスパートチームがどういったチームかに関しては、次の記事をご覧ください。 サイボウズのフロントエンドエキスパートチームの紹介 フロントエンドエキスパートチームの活動 サイボウズは主力プロダク…

フロントエンドエキスパートチームの小林(@koba04)です。 先日、npmから脆弱性についての発表がありました。 調べていく中でいくつか思うところがあったので解説も兼ねて書いていきたいと思います。 The npm Blog — Binary Planting with the npm CLI npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる です。 npmのバージョンが6.13.4になったNo…