はじめに AI 在庫管理のフロントエンドの開発を主に担当している鳥海です。 今回は AI 在庫管理のフロントエンドでシングルページアプリケーション (以下、SPA) における強制リロード戦略を考え、実装したので、 AI 在庫管理での強制リロードの仕組みについて、変遷を交えながらご紹介させていただければと思います。 なぜリロード戦略が必要なのか？: SPA におけるアセットが変わらない問題 よく知られている問題だと思うのですが、SPA ではページに再訪するか、リロードしない限り、クライアントで利用されるアセットが更新されない問題があります。 これによって下記のような問題が発生する可能性があります…

こんにちは、Musubiアカウント管理サービスのフロントエンドエンジニアをしている市川です。 本記事では、Google Analytics4（以下、GA4）にてMusubiアカウント管理サービスによるユーザーの行動データをどのように取得し、役立てているかを解説します。 GA4が登場してまだ日が浅く、参考記事が少ないため試行錯誤が必要でしたが、何かのお役に立てれば幸いです。 アーキテクチャについて まず、GA4に行動データを送信する際、Google Tag Manager（以下、GTM）を経由しています。 フローとしては、GTMにてGoogleタグやイベントタグを設定し、特定のイベントを起こすこ…

こんにちは。QAのくぼぴー(@kubop1992)です。 2024年5月10日にスクフェス新潟に参加したので、そこで学んだことを書いてみようかと思います。 スクフェス新潟とは スクラムフェス新潟は、スクラムと名を冠していますが、同時にテストや品質について興味のある方が多く参加されています。 コンセプトとしては以下のような内容を扱います。 特に以下のようなテーマに興味を持ちます。 テストエンジニアリング、テストオートメーション、モダンテストマネジメント、アジャイルトランスフォーメーション、メンタルヘルス、アジャイルリーダーシップ、生成AI、コミュニケーションと関係性 スクフェス新潟にオンラインで…

こんにちは！ 「AI在庫管理」開発チームの小室です。 最近、Amplify Consoleで稼働中の、ReactのSPAアプリケーションの前段に、Cloudfrontを挿入する改修をおこないましたが、 Amplify Console + Cloudfront環境の情報源が限られていることもあり、特にドメイン名の移管部分で何点かハマったポイントがありました。 本記事ではその対応方法をまとめて行きたいと思います。 背景 弊開発チームでは薬局向けの在庫管理システムを開発しており、ページのホスティングにはAmplify Consoleを利用しています。選定理由としては、業務システムのためSSRなどが特…

すべてのソースコードを読む時間があればよいのですが。 GitHubを横断して確認すると、ソースコードレベルで気になる箇所はよく見つかります。このとき他のコードベースでも起きてないか確認したいところです。ソースコードレベルの細かいレビューをコツコツしていくことは可能ですが、どうしても量が多くなってしまうのとスケールしづらいです。調査のためにも再現性担保のためにもGitHubで検索できると便利でしょう。 この記事ではカケハシ内で実際に見かけた箇所について、サンプルのGitHub検索クエリを共有します。 カケハシではTypeScriptとPythonを活用していることから、この2言語に絞って記載しま…

こんにちは、カケハシでAI在庫管理のバックエンドエンジニアをしているもっちです。 5/10、5/11に開催されたスクフェス新潟が開催されました。 はじめてスクフェスというものに参加したので、本エントリで参加レポートを書いてみたいと思います。 オンライン参加です。また、参加したのが主にDay2となるのでそこを中心にレポートしたいと思います。 参加するにあたって 今回、参加することに対しての自分のモチベーションは3つありました。 * カケハシから登壇しているメンバーの応援 * 自分やチームに何か持ち帰りたい * なにより元気をもらいたい カケハシからは3人が登壇しました カケハシからも3人が登壇し…

前回は、アーキテクチャの進化はドメインイベントが起点になるという記事内で、ドメインイベントの重要性を語りました。本稿では、ドメインイベントを伝達する際にシステム要件を満たした上で、どのようにしてデータモデル並びにドメインモデルを象るかを説明します。 なお、ビジネスドメインを深掘りドメインモデルを探索する手法の説明は、世にたくさん解説されているため詳しくはそちらに譲ります。特にAlberto Brandolini氏が提唱するモデリング手法であるEvent Stormingは、ワークショップ形式でドメインイベントを深く理解し、一連の業務プロセスやドメイン領域を探索的に発見することができる手法であり…

こんにちは。ソフトウェアエンジニアのくぼぴー(@kubop1992)です。 2023年9月1日より、カケハシのMusubi 開発チームにジョインしました。（もう半年も経っている！）。 初めてテックブログを書くので緊張しますが、昨年より大規模なリファクタリングを行い、その中でサーバサイドエンジニアとしての役割と、QAエンジニアとしての役割を担うことがあり、二足の草鞋を履いた超絶器用貧乏な私がどんなことをしたのか、ということを書いてみようかと思います。 リファクタリング概要 このリファクタリングがどの程度大規模かというと、 カケハシのプロダクト内のメインどころとなる機能のサーバーサイドをまるっと別…

GitHubドメイン認証がうまくいかない 会社でGitHubを利用するときは組織のドメイン認証を行い、トップ画面に"Verified"マークを表示させることが多いと思います。 GitHubのドメイン認証を行うときは指定のTXTレコードを追加しますが、CloudFrontを使っているときには注意が必要です。 たとえばwww.example.comのドメイン認証を行うとします。このサイトはCloudFrontで配信しており、CloudFrontのドメイン（d***.cloudfront.net）がCNAMEで指定されているとします。 このドメインを認証する場合、GitHubのドキュメントにあるよう…

はじめに こんにちは、株式会社カケハシでエンジニアリングマネージャーをやっている小田中（ @dora_e_m ）です。 今回は、タイトルの通り「日報を書くといいよ！」、とくに「組織のニューカマーにはオススメだよ！」という話を書きます。 日報って何? まず、日報とは何でしょうか。一般には、日々の業務内容や進捗などを報告する文書を指します。 この定義に従えば、受益者は報告される立場の上長であり、日報を作成する当の本人にはあまりメリットがありません。 私自身、ただ進捗を共有するだけの日報にはあまり意味を感じません。たとえばJiraなりTrelloなりで進捗管理している現場であれば、そのうえで進捗報告…

こんにちは。カケハシでデータサイエンティストとして働いている川渕です。 2024年3月3日にAtCoderで開催された第一回マスターズ選手権-予選-にカケハシのメンバーと参加してきたので、決勝前に参加記を書いておきたいと思います。 なお、対象読者はAHC(Atcoder Heuristic Contest)参加者とするので、細かい内容については説明を省かせて頂くことをお許しください。 チーム結成から予選まで 最適解が求まらない系の最適化問題が社内にありそうな気がしたので、カケハシ入社前の2023年の秋くらいから趣味と実益を兼ねてAHCへの参加を始めました。 AHCは一人でやっていても十分おもし…

こんにちは。ソフトウェアエンジニアの椎葉（@bufferings）です。最近実施したオリジナルのふりかえりがよかったので紹介します。 いつもはエンジニアリングマネージャの小田中さん（@dora_e_m）が、そのときのチームの状況に合わせたふりかえりの手法を用意してくれていて、毎週違うふりかえりをみんなで楽しんでいるのですが、今回は小田中さんが不在だったので私がファシリテーションをしてみることにしました。 どんなふりかえりをしようかなと ふりかえりカタログ を眺めていたところ Six Thinking Hats が目に止まり「これをアレンジして『帽子の交換』をすると、今のチームにちょうどいいかも…

大前提: 手作業をやってはいけない 病院で薬を棚から取ることを考えてみましょう。作業自体は高校生でもできるような簡単なものですが、似た名前の薬を取り違えたら死人がでるかもしれません。 開発に比べて作業は単純と見られがちですが、障害が起きたときの影響は同等、またはそれ以上です。今の段階では一見うまく回っていても、いつ爆発するかはランダムです。 リスクだけではなく効率を考えると手作業はもってのほかでしょう。 大前提: エンジニアがやってはいけない 自動化した！といってもエンジニアが対応していたらパフォーマンスは大きく変わりません。セルフサービスにして、要望を出す人が自らできるようにしましょう。発生…

カケハシでMusubi Insightの開発を行っている高田です。 以前、Angular のプロダクトを React（Next.js）にリプレイスしました！という記事を書きました。 本記事はその続きとなりますが、以前の記事はどちらかというとプロジェクト管理的な内容がメインだったので、今回は技術面を紹介できればと思います！ App Router の導入 今回の移行プロジェクトで技術選定を開始したのが 2023 年の 4 月頃です。 技術選定を行なったタイミングではまだ Pages Router が主流でしたが、ちょうど技術選定が終わる頃 Next.js のバージョンが 13.4 となり、App …

こんにちは。 カケハシの Musubi AI在庫管理 チームにて業務委託のエンジニアをさせていただいております takanakahiko と申します。 今回はuvをGitHub Actionsに導入したらとても効果があったので、紹介することができればと思います。 uvとは uvとはPythonのパッケージインストーラー・リゾルバーです。 その最大の特徴はRust言語で開発されており、従来のツールの100倍の速度で動作する点です。 pipやpip-toolsのdrop-in replacementが可能であることも特徴です。 開発をするのはAstralです。 AstralはRuffの開発で有名で…

Musubi AI在庫管理のフロントエンドエンジニアの木本です。 Unitテストを書いていると、「この正常ケース/異常ケースの羅列で本当に品質を担保できているのか？」と不安になることがあります。そのとき有用な技術としてProperty-based Testingがあります。 TypeScriptでの代表的なProperty-based Testingフレームワークであるfast-checkを導入してみたところ、その結果として実装に不具合を発見することができたので、まとめたいと思います。 Property-based Testingとは？ 宣言された入力条件からランダムな入力を何パターンも生成し…

こんにちは、株式会社カケハシでおくすり連絡帳 Pocket Musubiの開発を担当している渡辺です。 以前はMusubiをはじめ各種プロダクトのフロントエンド部分をAngularで書いていたのですが、最近はもっぱらReact/Next.jsを扱うことが増えました。 現在、Reactのキャッチアップに励んでいる日々です。 最近、関わっているプロダクトのコードでuseContextというhooksが利用されているのをみて、興味を持ちました。 調べたことをブログの記事にしたいと思います。 かなり初心者向けの話になると思いますが、ご容赦ください。 Contextってなんだろう Contextは何かと…

はじめに こんにちは。カケハシの牧野です。 私が所属するチームでは数カ月間にわたり「ソフトウェアアーキテクチャの基礎」という書籍の輪読会をしておりました。この記事では輪読会を実施した背景や、実施して良かったことなどを紹介いたします。 輪読会のきっかけ 私のチームが開発するプロダクトはローンチから1年以上が経ちました。 私も含めローンチ時には在籍していなかったメンバーも増えたため、初期開発においてどういう方針で開発を進めていたのかの共有と、今後の方針について議論する機会がありました。 議論をする中で、初期開発で参考にしていた「進化的アーキテクチャ」の理解がメンバー間でばらつきがあったりと、共通の…

はじめに こんにちは。AI在庫管理チームソフトウェアエンジニアの坂本です。 今回はこちらの記事で松本さんが紹介していたメンテナンスモードの中で、イベント駆動処理のメンテナンスモードを開発するためにやったことを少し詳しく紹介できればと思います。 松本さんの記事のアーキテクチャ図を拝借すると、今回の記事は以下の赤枠の話が中心になります。 AI 在庫管理のメンテナンスモードとは AI在庫管理のメンテナンスモードの主な目的は夜間のDBへのアクセスを止めて、長時間のDBのマイグレーションや再起動操作を実行することです。そのため、こちらで実行タイミングを制御することができないイベント駆動処理はメンテナンス…

こんにちは、カケハシでAI在庫管理のプロダクトのバックエンドエンジニアをしている松本です。 AI在庫管理でメンテナンスを行うための機能としてメンテナンスモードを開発しました。本エントリではメンテナンスモードを実現する際に考えたこと、気をつけたことを書きたいと思います。このメンテナンスモードは他のメンバーとも協力して開発していますが、代表して本エントリを書いています。 また、メンテナンスモードの実現には、当然Webアプリの画面側の対応も必要ですが、今回はバックエンド側の対応を中心に紹介したいと思います。 本エントリの要約 さて、忙しい人のために本エントリの内容をまとめたものをここに記載しておきま…