KAKEHASHI Tech Blog

カケハシのEngineer Teamによるブログです。

クライアントサイド

FlutterでDatadog RUMを利用する

この記事は カケハシ Advent Calendar 2023 の20日目の投稿になります。 adventar.org はじめに こんにちは!カケハシでおくすり連絡帳 Pocket Musubi というサービスを開発している牧野です。 皆さんはモバイルアプリのモニタリングをしていますでしょうか…

業務システム SPA のフロントエンド技術選定(2023年版)

本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。 (Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。) はじめに こんにちは。カケハシでソフトウェアエンジニアをしている平松です。 今年、新規プロダクト立ち上げの…

Flutterで全画面表示を実現する

この記事はカケハシ Advent Calendar 2023 の 13日目の記事になります。 今年はPart2もあるのでぜひそちらもご覧ください! はじめに こんにちは!KAKEHASHIでおくすり連絡帳 Pocket Musubi というサービスを開発している星川です。チーム内では主にFlutter…

AngularのプロダクトをReact(Next.js)にリプレイスしました!

こちらの記事は カケハシ Part1 Advent Calendar 2023 の8日目の記事になります。 こんにちは! カケハシでMusubi Insightの開発を行っている高田です。 Musubi Insightは、立ち上げ当初よりフロントエンドフレームワークにAngularを採用していましたが、こ…

フロントエンド技術選定のヒント 【令和五年度版】

こちらの記事は カケハシ Advent Calendar 2023 の 4日目の記事になります。 こんにちは。カケハシでエンジニアをしている今川です。 今回はこれからフロントエンドの技術選定をする方向けに、どんな技術・ツールを使えばいいかのヒントになるような記事を書…

RxJS - mergeMap vs switchMap、適切に使い分けましょう!

はいさい!カケハシの新米メンバー、オースティンと申します。 沖縄から参上しております! 概要 RxJS のmergeMapとswitchMapの違いと使い方について解説します。 背景 Observableを使っていると、必ず直面する問題があります。それは、複数のObservableをど…

React + esbuildの開発環境にSASSを導入する

こんにちは!カケハシにて薬局と患者の関係性を向上させるためのツールである 患者リスト というWEB業務アプリケーションを開発している小室と申します。 本プロダクトのフロントエンドの開発環境としては、React + esbuildを採用しており、採用の経緯や実践…

マイクロフロントエンドとResumableとqwikについて

この記事は、カケハシ Advent Calendar 2022 の 18 日目 の記事になります。 はじめまして、こんにちは。 おくすり連絡帳「Pocket Musubi」というプロダクトで、エンジニアリングマネージャーをしています @hisasann と申します。 人にフォーカスした開発組…

スマホアプリ開発とデザインガイドライン

こちらの記事は、カケハシ Advent Calendar 2022 の14日目の記事になります。 はじめに こんにちは!KAKEHASHIでおくすり連絡帳 Pocket Musubi というサービスを開発している星川です。チーム内では主にFlutterを利用したスマートフォンアプリ開発を担当して…

ジョインしたのと同時期に導入されて感動した MSW とその周辺パッケージ についてのお話

こちらの記事はカケハシ Advent Calendar 2022 の 13 日目の記事になります。 https://adventar.org/calendars/7444 こんにちは。Musubi AI 在庫管理のフロントエンド開発を担当している鳥海です。 上記プロダクトのフロントエンドチームでは、私がチームに…

RxJSと仲良くなる

こんにちは、株式会社カケハシでおくすり連絡帳 Pocket Musubiの開発を担当している渡辺です。 RxJS RxJSはリアクティブプログラミングのライブラリです。 リアクティブプログラミングって何かと言いますと、 データを受け取るたびに反応(リアクション)をす…

ElectronアプリとDeepLinkでシステム連携する

概要 こんにちは!私はカケハシにて薬局と患者様の関係を向上させるためのオペレーションツールである 患者リスト の開発を担当している小室と申します。患者リストの立ち上げから担当させて頂いており、技術選定などのお話は先日はTechPlayでも登壇させて頂…

Figma からアイコンの画像を生成して GitHub の PR を作る Widget の作り方

はじめに こんにちは、Pocket Musubi エンジニアの関(@sekikazu01)と申します。 「あ〜アイコン大量に増えた時逐一画像を書き出して Icon コンポーネントに反映させるのめんどくせ〜〜〜」 そんな風に思った事はないでしょうか。私は思いました。 ので Figma…

ServiceWorkerの事前読み込みとキャッシュ化でプロダクトを高速化した話

はじめに こんにちは、KAKEHASHIのMusubiInsightチームでエンジニアをしている高田です。 MusubiInsightとは、薬剤師さんの業務データを可視化するBIツールになります。 そんなMusubiInsightにおいて、表示の高速化を狙いにServiceWorkerという技術を導入し…

Angular テストフレームワーク を jasmine/karma から Jest に移行しました

概要 薬局運営のデータ分析サービスである Musubi Insight のフロントエンド開発をしております米山と申します。 Musubi Insight のフロントエンドは Angular で開発されており、テストフレームワークには jasmine/karma を利用していました。 この度、jasmi…

新規プロダクトでFlutterのローコードツール利用とそのリファクタリング戦略

概要 こんにちは。PocketMusubiチームの南光です。 今回は、ローコードツールを利用してアプリを開発した際に工夫した内容を記事としてまとめました。 ローコードツールの開発知見記事はあまりみない気がするので、興味を持っている方やこれから利用を検討し…

【Angular】@angular/common の DOCUMENT を利用して、window.document を依存注入する

概要 Angular での開発において、DOM 操作などのために window.document を参照することはあるかと思います。 @angular/common には、DOCUMENT という DI Token が用意されています。こちらを利用することで、依存注入経由で document を参照することができ…

Storybook Addon Contexts を使って、ワンランク上のコンポーネントカタログを作ろう

概要 コンポーネントのカタログを作成することができる storybook。利用している開発者は多いのではないでしょうか? この記事では、Storybook Addon Contexts を利用して、storybook 環境をちょっと便利にする方法を書きます。 Storybook Addon Contexts と…

【Blender】フロントエンドエンジニアが3Dモデリングに入門して、サービスアイコンをぴょんぴょこさせる

ご挨拶 こんにちは。カケハシで「Musubi Insight」のフロントエンド開発を行っている米山と申します! Musubi Insight 経営データを即座に見える化 この記事はカケハシアドベントカレンダー2021 の9日目の記事になります✨ 概要 最近よく耳にする Blender。入…

Web NotificationとWeb Audioによる通知

こんにちは、株式会社カケハシでおくすり連絡帳 Pocket Musubiの開発を担当している渡辺です。 先日、Pocket Musubi で処方せん送信機能をリリースいたしました。 処方せん送信は手元の Pocket Musubi から処方せんの画像を撮影して事前にアップロードするこ…

カケハシのフロントエンドエンジニアとしてのスキルアップ

こんにちは、株式会社カケハシでおくすり連絡帳 Pocket Musubiの開発を担当している渡辺です。 カケハシのエンジニアはフロントエンドもバックエンドのAPIサーバーも開発を担当しています。どちらかといえばフロントエンドの方が知識・経験ともに自信がある…