TECH PLAY

KINTOテクノロジーズ

KINTOテクノロジーズ の技術ブログ

936

はじめに この記事は New Relic Advent Calendar 2025 20日目の記事です。 こんにちは、KINTOテクノロジーズ(以下KTC)SREチームの手﨑です。 本記事では、先日のAWS re:Invent 2025で発表されたAWS DevOps Agentと、普段KTCで利用しているNew Relicを連携させて、障害調査をどこまで自動化できるのか検証した結果をご紹介します。 注意事項 AWS DevOps Agentは本記事執筆時点(2025年12月)ではプレビュー版です。 GA(一般提供)までに仕様が変更される可能性があります。 AWS DevOps Agent とNew Relicの連携 AWS DevOps Agent とは AWS DevOps Agentは、インシデントを解決、予防し、信頼性とパフォーマンスを継続的に向上させるフロンティアエージェントです。詳細は以下の公式ページをご覧ください。 AWS DevOps Agent 特徴的な点はCapabilitiesという設定で、DevOps Agentが扱える情報(能力)を拡張できることです。 今回もこのCapabilitiesを利用してNew Relic MCP経由で障害調査を行います。 他にもCapabilitiesには以下のような設定が可能です。 Cloud 他のAWSアカウントのリソースへのアクセス Telemetry オブザーバビリティSaaSのテレメトリーデータへのアクセス Pipeline ソースコードが管理されているリポジトリやデプロイパイプラインの情報へのアクセス Communications Slackなどのコミュニケーションツールとの連携 MCP Server MCPサーバーを使った情報の収集 Webhook Webhook経由でのサードパーティ製アプリケーションやサービスへのアクセス New Relic との連携方法 AWS DevOps Agentの初期設定 AWS DevOps Agentの初期設定はエージェントスペースの作成から始まり、Roleの作成などが必要ですが、ここではNew Relicとの連携設定の箇所に絞って記載します。 以下のページにあるようにTelemetryの設定にNew Relicを追加することでNew RelicからAWS DevOps Agentを実行するためのwebhook URLを取得できます。 Connecting New Relic この設定により、New Relic remote MCP も利用されるようになります。 Telemetryの設定 AWS DevOps AgentのSettingsから「Telemetry」-「New Relic」を選択します。 New RelicのaccountIDとAPIキーを入力し、Regionを選択します。 webhook URLとsecret keyが発行されるため、保存しておきます。 エージェントスペースを選択し、「Capabilities」タブから「Telemetry Sources」に「New Relic Server」 を追加します。 New Relicのアラートの設定 New RelicのアラートからAWS DevOps Agentをwebhookで起動するために、New RelicのDestinationsとWorkflowの設定を行います。 Destinationsの設定 New Relicの「Alerts」から「Destinations」を選択し、「Add a destination」から「Webhook」を選択します。 「Name」に任意の名前を入力し、以下のとおり設定値を入力します。 Name: New Relic Webhook Endpoint URL: https://event-ai.us-east-1.api.aws/webhook/generic/****** //Telemetryの設定の発行画面で発行されたURL Authorization: Bearer Authorization Value: ****** //Telemetryの設定の発行画面で発行されたsecret key 設定を保存します。 Workflowの設定 New Relicの「Alerts」から「Workflows」を選択し、「Add a workflow」から新しいWorkflowを作成します。(もしくは既存のWorkflowに対して設定を追加します) NotifyのAdd channelからWebhookを選択し、「Destinationsの設定」で追加したDestinationを選択します。 PayloadのTemplateに以下の内容を入力します。 { "eventType": "incident", "incidentId": {{ json incidentIds.[0] }}, "action": "created", "priority": {{ json priority }}, "title": {{ json annotations.title.[0] }}, "description": {{ json state }}, "service": {{json entitiesData.names.[0]}}, "timestamp": {{#timezone activatedAt 'Asia/Tokyo'}}{{/timezone}} } 以上でAWS DevOps AgentとNew Relicの連携設定は完了です。 実際に試した結果 実際にNew RelicのアラートからAWS DevOps Agentをwebhookで起動してみます。 連携の流れ 実際に連携を試した際の流れは以下の通りです。 New RelicのアラートからAWS DevOps Agentへwebhookする New Relicでアラートが発生すると、AWS DevOps Agent に webhook が送信されます AWS DevOps AgentからNew Relicのテレメトリを取得して分析する AWS DevOps Agentは自律的にNew RelicのMCP経由でテレメトリデータの取得を繰り返し、分析を行います 同時にAWSリソース内も調査する New Relicのテレメトリ分析と並行して、AWSリソースの状態も調査します Root Causeレポートが生成される 分析結果を基に、根本原因(Root Cause)レポートが自動生成されます 修正案の計画を指示できる 生成されたレポートを基に、修正案の計画を指示することができます 調査結果 調査状況をweb appから確認すると以下のような結果となります(表示しているものはサンプルのアプリケーションです) New Relic MCPを利用してアラートに関する情報を取得しています。 今回のアラートはサンプルアプリケーションのため必ずエラーが発生する作りであることを Root Cause として結論付けられています。 追加の調査として直近のデプロイとアラートの発生に関連性があるか確認してもらいました。 AWS側の調査により、Fargate Spotのプロビジョニング遅延によって起動が遅れたことと、直近でデプロイが実施されていないことが報告されました。 結果 New RelicのアラートをトリガーにAWS DevOps Agentをwebhookで起動し、MCP経由で取得したNew RelicのテレメトリとAWSリソース情報を組み合わせて自動調査させるところまで確認できました。 AWS DevOps Agentのweb appは対話形式で追加の調査を行うことができ、AWSリソースの直接参照とNew Relicのテレメトリ分析の両方を自律的に実施してくれるため、他の連携先が増えても柔軟に対応することができそうです。 まとめ 本記事では、AWS DevOps AgentとNew Relicを連携させて障害調査の自動化を試しました。 New RelicのアラートをトリガーにAWS DevOps Agentをwebhookで起動し、MCP経由で取得したNew RelicのテレメトリとAWSリソース情報を組み合わせて分析することで、自律的にRoot Causeレポートを生成できることを確認しました。プレビュー段階ではありますが、障害発生時の初期調査を自動化できる点は非常に価値があると感じています。 また、今回は試していませんが、将来のインシデントを予防するPrevention機能を利用すれば、New Relic MCP経由でAPMの情報を参照してパフォーマンスチューニングのような改善サイクルにも活用できると考えています。 引き続きGA版の様子も見ながら検証していきたいと思います。 以上です。
アバター
この記事は KINTOテクノロジーズ Advent Calendar 2025 の20日目の記事です🎅🎄 はじめに ラスベガスで開催された AWS re:Invent 2025に弊社から6名が参加してきました。 世界中からエンジニアが集まり、AWSの新サービスが発表されたり、ワークショップを通じて使い方を学べたりする、年に一度の巨大イベントです。 期間:12/1(月)〜12/5(金) 参加者数:現地約6万人(うち日本からの参加者は約1,900人)/オンライン約200万人 セッション数:3,044 ※これらの数値は、re:Invent 2025中の公式セッション「Japan Wrap-up Session & Werner's Keynote (GBL105)」(現地時間12/4 14:45-17:30)で発表された公式情報です。 2025年6月に日本で行われたAWS Summit Japan 2025のセッション数が160以上とのことなので、規模の違いが容易にわかります。 この記事では現地に行くまで知らなかったことや、参加して本当に役立ったTipsをまとめています。 来年以降、参加を検討している方の参考になれば幸いです。 準備(持っていってよかったもの) 録音機器 セッション中にメモを取る必要がほとんどなくなります。 私は Plaud NotePin をレンタルしました。 録音し、AI要約して整理してくれるので、目の前の内容に集中できます。 なお録音することが不安な場合は、あらかじめ講師やスタッフに確認すると良いです。 私が確認した際には「もちろん!」という回答をもらえました。 ケトル いきなりケトル?と思いますが、ラスベガスのホテルでは置いていないところが多い(らしい)です。 朝一番のキーノートに行く方はカンファレンスのご飯を食べていては間に合わない場合もあるので、用意しておくと良いでしょう。 また時差ボケにより、夜活動してしまう人にも便利です。 各セッションTypeの違い セッションが多すぎてどれを選んでいいか分からない方へ、まずはセッションTypeの違いを意識すると良いです。 Breakout Session 最もオーソドックスな講義形式。新サービスの解説やベストプラクティスなど幅広いです。 人気なセッションはタイトルに[OVERFLOW]と書かれた中継形式のものがありますので、拠点移動が間に合わない場合などはそれに参加するのも手です。 ただし座席間が狭いためPCを広げるのは至難の業でした。どれぐらい狭いかというと、日本の電車の座席より狭く、腕組みしようものなら横の人と当たるレベルでした。 後日YouTubeで配信されるので、優先度が高くなければそれを待つのもありです。 Builder’s Session 講師1人に対して10人程度が参加するハンズオン形式のセッション。事前説明後にハンズオン手順が配られるので、それに従って進めます。 講師との距離が近いので、気になる機能を深掘りしたい方は参加すると良いでしょう。 PC(laptop)が必須です。ハンズオンの手順を見ながら進められるよう、PCとは別に小さなモニターがあると便利です。 自分は過去の参加レポートを見て、iPadを持参して画面拡張できるようにしていました。 日本からの参加者以外ではあまりやっている人はいなかったですが、気にせず広げて問題なかったです。 ![sub_screen](/assets/blog/authors/yuji_morimoto/re_invent_2025/sub_screen.jpg =500x) 講師の方も「それいいね!」と思わず感心してました Workshop こちらもPCが必須です。 数時間かけて行われるハンズオン形式のセッション。Builder’s Sessionと比べて大規模な部屋に数人の講師がいます。 こちらも講師を捕まえれば質問はできますが、参加者が多く、順番が回ってくるまで時間がかかる場合もあります。 Gameday こちらもPCが必須です。 テーブルに集まったメンバーで課題を解決することで順位を競うセッションです。 まず講師から事前説明があります。その後、チームメンバーと役割分担しながらゴールを目指します。 自分以外のメンバーと合わず、居心地が悪いと感じたら、席を移動してしまっても問題なさそうです。 実際にそのようにしている方はいました。 他の方の参加レポートでは事前知識不要という方もいますが、私が参加した会ではある程度のインフラ知識が必要でした… Chalk Talk 少人数の聴衆を対象とした対話形式のセッションです。講師による短い講義と、その後の参加者とのQ&Aで構成されます。実世界のアーキテクチャの課題を中心とした技術的な議論をします。 他のセッションと比べると講師に質問できる時間が多く、また記録にも残らないので、まさに現地に行って参加する価値のあるコンテンツとなっています。 英語に自信がある方はぜひ参加して発言してみてください。 Code Talk 講師が実装しながらサービスについて解説をするセッションです。 Lightning Talk 20分程度の短時間セッションです。 セッションとセッションの隙間時間で聴くことができます。 回り方のTips 会場が異なるセッション移動は1時間見込む 会場が異なるセッションの場合は1時間を見込んでおくと安全です。 ちなみにre:Inventはラスベガスの複数のホテル・コンベンションセンターで同時に開催されました。 北から以下の通りの並びになっており、1つ1つの会場が大きいです。 Wynn Venetian Caesars Forum MGM Grand Mandalay Bay 参加したいセッションが開催されている会場に時間までに向かう必要があります。 1.会場間の移動 まず移動に時間がかかります。移動手段としては以下のものがあります。 徒歩 モノレール シャトルバス タクシー/ライドシェア 隣り合った会場のWynn↔︎Venetianであっても、徒歩15分程度かかりました。 また各会場間はシャトルバスが走っており、会場出てすぐそばに発着するのでアクセスが良くおすすめですが、運行間隔が15〜20分程度空くこともあります。 ライドシェアの場合は呼べる場所が制限されている場合があり、目の前を乗車場所に指定できないことがあります。 ![shuttle_bus](/assets/blog/authors/yuji_morimoto/re_invent_2025/shuttle_bus.jpg =500x) 会場前にあるシャトルバス 各会場ごとに分かれている 2.荷物検査 会場に到着しても荷物検査があるので、混雑具合によっては時間を要します。 PCやタブレットを取り出してセキュリティを通過する必要があります。 呼び止められてしまったら、入念に荷物をチェックされます。 3.予約していてもセッション開始10分前には会場へ re:Inventには「Walk-up」という当日枠があります。 事前予約が埋まってしまっても入れる可能性があるこの枠ですが、セッション開始10分前に予約した人を対象とした受付を一旦締め切り、当日枠の入場を開始してしまいます。 これにより、事前予約していても入れなくなることがあるので注意が必要です。 ![walk_up](/assets/blog/authors/yuji_morimoto/re_invent_2025/walk_up.jpg =500x) 並ぶ列が予約枠と当日枠で分かれている 1日1つの会場にこもってみる 移動が大変であれば、特定の拠点に1日こもってセッションを梯子するのもアリです。 各会場には朝食・昼食・軽食(コーヒー、紅茶やお菓子など)が用意されているので、食事面も心配ありません。 次のセッションまで時間がある場合は前のセッションの内容を見直すのがおすすめです。 会場の廊下には床に座ってPCを開いている人がたくさんいました。 ![people_seated](/assets/blog/authors/yuji_morimoto/re_invent_2025/people_seated.png =500x) 奥の窓際に人が座っており、各々の作業をしている 新機能について紹介する[NEW LAUNCH]が突如出てくる re:Invent開催前や期間中、またKeynoteで発表された新機能は、セッションタイトルの頭に[NEW LAUNCH]と記載されているものが突然出てくる場合があります。 気になる新機能の場合はセッション一覧をときどき探してみて、新しく追加されていないか見ると良いでしょう。 SNSで情報を探る 上記のような新機能のセッション情報や、突然始まるSWAG(ノベルティ)配布情報など、SNSで拡散されていることがあります。 気になる新機能のセッションが実は2時間前に終了していたということもあったので、逐一チェックすることをおすすめします。 5日間もあるので頑張りすぎない セッションを詰め込みすぎると体力を消耗します。 日本からの移動の疲れ、日々の移動の疲れなどが知らない間に蓄積していきます。 楽しむにも体力がいるので、無理せずに行動しましょう。 疲れが溜まった時には認定者ラウンジに行くのもおすすめです。 テーブル席やソファ席などがあり、軽食も用意されています。 会場の廊下で仮眠を取るのは心配ですが、このラウンジでは何人か仮眠している人がいました。 ![certificated_lounge](/assets/blog/authors/yuji_morimoto/re_invent_2025/certificated_lounge.jpg =500x) Venetianにある認定者ラウンジ イベントを楽しむ AWS公式が企画しているイベントが毎日何かしらあります。 セッションがない朝や夜の時間で開催されているので、息抜き(兼ネットワーキング)に参加してみましょう。 私は4つ参加してみました。 APJ Kick Off Party APJ(アジア太平洋・日本)の参加者向けのイベント ビンゴ大会 5k race チャリティーを目的とした5kのランニング re:Play 4日目の夜に開催される、セッションに頑張って参加した参加者へのご褒美イベント ![5k_race](/assets/blog/authors/yuji_morimoto/re_invent_2025/5k_race.jpg =500x) 朝6時に会場に集まった参加者 コミュニケーションを全力で楽しむ re:Inventに参加して強く感じたのは、現地で得られる価値の多くはコミュニケーションから生まれていたということでした。 英語に自信があるわけではありませんでしたが、AWSという共通言語があることで、思っていた以上に会話はできました。セッションの感想を一言伝えたり、ふと感じた疑問を質問したりすると、新しい視点や気づきを得られる場面が多かったです。 日本人同士であっても、参加しているセッションや注目しているトピックはそれぞれ異なり、会話を通じて自分1人では拾えなかった情報を得ることができました。 (お酒の場でも名刺を交換するところにも日本人らしさを感じ、嬉しくなりました。) 現地の熱量を最も強く感じられたのも、人と直接コミュニケーションを取っている瞬間でした。 Keynote後のざわつきや、セッション終了後の高揚感は、その場で誰かと共有することでより鮮明に感じられました。 旅の恥はかき捨てという言葉通り、うまく話せなかったとしてもその場限り、それならと遠慮せずにどんどん話しかけて、現地で感じる熱量を最大化するのは良かったと思います。 実際にその体験は、上手く行かなかったこと含め、日本に戻ってからの学習意欲やモチベーションとして確実に自分の中に残りました。 まとめ re:Inventは「柔軟さ」がカギだと感じました。 参加前は3,000を超えるセッションの中から何を選べばいいか分からず、参加したいセッションは予約開始と同時に埋まってしまう。満足にセッションに参加できないまま終わってしまうのではないか、そんな不安を抱えながらラスベガスに向かいました。 しかし、それは杞憂でした。 Walk-upと呼ばれる当日枠を活用すれば予約なしでも参加できますし、セッションによっては開始後も空席があれば入場できました。「どうせ無理だろう」と諦めず、果敢に挑戦してみることの大切さを学びました。 Gamedayのような参加者同士でコミュニケーションを取る場も、最初は英語力への不安がありましたが、ギリギリ会話ができることを実感できたので参加してよかったです。もちろん、「言いたかったことはそうじゃなかった…」と歯がゆい思いをすることもありましたが、それが「もっと英語を学ぼう」という具体的なモチベーションに変わりました。 5日間、業務を離れて学びに集中できる環境は貴重でした。技術を深掘りし、気になることがあればその場で質問できる、こんな贅沢な場はそうそうありません。そして、これだけ多くのAWSファンが世界中から集まり、熱量を注いでいる光景を目の当たりにできたことも大きな収穫でした。 これから参加される方も、計画通りにいかないことを恐れず、その場その場で新しい選択肢を見つけてみてください。 (2026年は11/30〜12/4と決定しているみたいです。)
アバター
この記事は KINTOテクノロジーズアドベントカレンダー2025 の20日目の記事です🎅🎄 はじめに こんにちは、KINTOテクノロジーズ Mobile KMPチームです。 本記事は「Compose MultiplatformとSwiftUIで作るハイブリッドモバイルアプリ」シリーズのPart 2です。Part 1ではハイブリッド開発を選んだ背景とアーキテクチャ概要を紹介しました。今回は具体的な実装方法を詳しく解説します。 本シリーズの構成 Part 1:なぜハイブリッドなのか Part 2:実装ガイド ← 現在の記事 Part 3:SwiftUI連携と技術Tips(近日公開) 実装事例 プロジェクト構造 プロジェクトのディレクトリ構成 my-cmp-app/ ├── composeApp/ │ ├── src/ │ │ ├── commonMain/ // CMP Shared code │ │ ├── androidMain/ // Android-specific │ │ └── iosMain/ // iOS-specific ├── iosApp/ │ ├── Views/ // SwiftUI views │ ├── Screens/ // Native screens │ └── ComposeViewContainer.swift └── shared/ // KMP domain layer ├── viewmodels/ └── models/ まず composeApp です。 commonMain にはCMPの共通コード、 androidMain / iosMain には各プラットフォーム固有の実装を入れています。 次に iosApp 。SwiftUIのViewやネイティブ画面が含まれています。特に ComposeViewContainer.swift ファイルでCMPコンポーネントをiOS側に組み込んでいます。 最後に shared 。KMPのドメイン層で、viewmodelsやmodelsを共通化しています。 このように、ディレクトリレベルでも 共通化できる部分はまとめ、ネイティブ依存部分は分離 しています。 ハイブリッドUIの実例 実際に作成したPoCアプリの画面構成を紹介します。 MainScreenでは、ボトムナビゲーションに4つのタブを配置しています。 タブ UI実装 Application CMP Lineup CMP HelpCenter CMP Settings SwiftUI on iOS Application、Lineup、HelpCenter はCMPで共通UIを実装 Settings だけはネイティブ(iOSではSwiftUI)で作っています このように、共通UIとネイティブUIを組み合わせても、タブ切り替えはシームレスに行えます。 iOS固有のUIが活きるSettings Tab ネイティブからCMPベースのハイブリッドナビゲーションへの移行 このような構成では、ネイティブ中心のナビゲーションからCMPベースのハイブリッドナビゲーションへ移行する必要がありました。どのように移行したのか、具体的な方法をご紹介します。 既存のナビゲーションスタックをリファクタリングし、ネイティブとCMP間でルーティング プラットフォーム固有のナビゲーションロジックを共有インターフェースの背後に抽象化 ルートベースのナビゲーション戦略 先ほど紹介したPoCアプリのタブ構造を振り返ると、1〜3番目のタブはCMP、4番目はSwiftUIで実装しています。 PoCアプリのタブ構造 このような構成でルーティングを実現するために、各画面のルートをstring constantで定義しておきます。 // Routes.kt - Navigation routes defined in shared code object Routes { const val LOGIN = "login" const val SCREEN_A = "screen_a" const val SCREEN_B = "screen_b" const val SCREEN_C = "screen_c" const val SCREEN_D = "screen_d" } プラットフォームごとに実装を分けて、AndroidではCompose Navigation、iOSではSwiftUI NavigationでComposeをつなぐ Bridge をします。 Kotlinナビゲーション実装 こちらは ComposeViewController.kt の例です。パラメータとして initialRoute を受け取り、そのルートに応じてwhen分岐で 遷移先を切り替え ています。 // ComposeViewController.kt fun createComposeViewController( initialRoute: String, onCallback: (Boolean) -> Unit = {} ): UIViewController { return ComposeUIViewController { MyAppTheme { when (initialRoute) { "login" -> LoginNavigation(onLoginSuccess = onCallback) "screen_a" -> ScreenANavigation() "screen_b" -> ScreenBNavigation(iosCallback = onCallback) "screen_c" -> ScreenCNavigation() "screen_d" -> ScreenDNavigation() else -> FallbackNavigation() // default fallback } } } } 例えば、"login"なら LoginNavigation へ、"screen_a"や"screen_b"なら、それぞれの画面のNavigationを呼び出します。このように、ルートを定義しておけば、プラットフォーム固有のナビゲーション処理と簡単に接続できます。 iOS側でCompose Navigationを統合する仕組み まず ComposeViewContainer を定義して、 UIViewControllerRepresentable を実装します。これによってSwiftUIの中に Compose UIを埋め込む ことができます。 // ComposeViewContainer.swift struct ComposeViewContainer: UIViewControllerRepresentable { let initialRoute: String let onCallback: (Bool) -> Void func makeUIViewController(context: Context) -> UIViewController { // Wrap the Swift callback into the KotlinBoolean signature let kotlinCallback: (KotlinBoolean) -> Void = { kotlinBool in onCallback(kotlinBool.boolValue) } // Create the Compose UIViewController, passing the wrapped callback return ComposeViewControllerKt.createComposeViewController( initialRoute: initialRoute, onCallback: kotlinCallback ) } func updateUIViewController(_ uiViewController: UIViewController, context: Context) { // No dynamic updates needed here } } 次に、 makeUIViewController の中でKotlin側の createComposeViewController を呼び出します。 iOS Navigationの実践 こちらは、統合コードを使ったiOS Navigation codeです。 TabView の中に4つのタブを定義しています。1〜3番目のタブは CMP画面 で、 NavigationView の中に ComposeViewContainer を埋め込み、初期ルート"screen_a"を指定しています。 // MainScreen.swift struct MainScreen: View { var body: some View { TabView { // Tab 1~3: CMP screen NavigationView { ComposeViewContainer(initialRoute: "screen_a", onCallback: { _ in }) }.tabItem { Label("Application", systemImage: "doc.plaintext") } ... // Tab 4: SwiftUI screen NavigationView { SettingsScreen() }.tabItem { Label("Settings", systemImage: "gearshape.fill") } } } } 4番目のタブはSwiftUIネイティブの SettingsScreen() を使用しています。このように、CMPとネイティブ画面を同じナビゲーション構造内で自然に共存させることができます。 Koinによるモジュール化 ここまでナビゲーション統合を見てきましたが、実際のアーキテクチャはCMP + MVVMでどんどん複雑になります。そこで、Multiplatform向けDIの Koin を導入しました。結果、構造がシンプルになり、テストや保守もしやすくなりました。 Koinの利点: 依存関係をきれいに管理 できる 同じ定義を使って 複数プラットフォームで再利用 できる モジュール単位で分離 でき、構造がシンプルになる テストのしやすさ が向上 // commonMain/di/AppModule.kt val appModule = module { single { NetworkClient() } single { AuthRepository(get()) } viewModel { HomeViewModel(get()) } viewModel { ProductViewModel(get()) } factory<Validator> { ValidatorImpl(get(), get()) } } single や viewModel をシンプルに書くだけで、依存関係を自動的に解決できます。 プラットフォーム固有のDI Koinでは、iOSとAndroidそれぞれに 専用のモジュール を定義できます。 // iosMain/di/PlatformModule.ios.kt val iosModule = module { single<HttpClientEngine> { Darwin.create {} } single<DataStore<Preferences>> { createDataStore() } single { IOSLocationService() as LocationService } single { AppStoreConnectTracker() as AnalyticsTracker } } // androidMain/di/PlatformModule.android.kt val androidModule = module { single<HttpClientEngine> { OkHttp.create {} } single<DataStore<Preferences>> { createDataStore(androidContext()) } single { AndroidLocationService() as LocationService } single { FirebaseAnalyticsTracker() as AnalyticsTracker } } iOS側では iosModule を定義し、 Darwin.create() を使った HttpClient を登録しています。一方Android側では androidModule を定義し、 OkHttp.create() を使った HttpClient を登録しています。 このように、 プラットフォーム固有の実装はモジュールごとに分離 しながら、共通のインターフェースを通して利用できるようにしています。 Koinの初期化 ここではKoinの初期化方法です。まず共通コード側に initKoin 関数を用意しておきます。 // commonMain/di/KoinSetup.kt fun initKoin(platformModule: Module) = startKoin { modules(appModule, networkModule, platformModule, ...) } // Android Application class class MyApplication : Application() { override fun onCreate() { super.onCreate() initKoin(androidModule) } } Androidでは Application クラスの onCreate から androidModule を渡して初期化します。 // iOS AppDelegate func application(_ application: UIApplication, didFinishLaunchingWithOptions...) { KoinKt.doInitKoin(platformModule: IOSPlatformModuleKt.iosModule) return true } iOSでは AppDelegate から iosModule を渡すだけです。このようにして、 両方のプラットフォームで同じ初期化処理を共通化 できます。 Koinでの動的モジュールロード 次に、Koinでの 動的モジュールロード です。 // Feature module definition val featureModule = module { viewModel { FeatureViewModel(get(), get()) } factory { FeatureValidator() } single { FeatureRepository(get()) } } // Register dynamically after the Koin's initialization loadKoinModules(featureModule) まず featureModule を定義して、ViewModel・Validator・Repositoryを登録します。その後、 loadKoinModules に featureModule を渡してロードします。 Koin初期化後にモジュールを動的にロード できます。これにより、大規模アプリでも 必要な機能だけを後から読み込む構成 が可能になります。これがKoinの強みです。 開発効率化事例:Validator統合 問題状況 メール、電話番号、郵便番号、パスワード強度、日付形式など、様々な検証ロジックが必要でした。 従来方式で実装した場合: Android:24個のValidator(Kotlin) iOS:24個のValidator(Swift) 合計48個の実装 合計48個のValidationResult 合計48セットのユニットテスト KMPソリューション すべての検証ロジックを共有KMPモジュールに移動しました。 Kotlinで各Validatorを一度だけ実装 共通関数/クラスとして公開 CMP画面、Android/iOSネイティブ画面すべてから呼び出し可能 結果: 実装量50%削減 テストコード50%削減 プラットフォーム間検証ロジックの一貫性保証 バグ修正も一箇所で完了(両OS同時に修正される) 次回予告 Part 2では、プロジェクト構造、ナビゲーション統合、Koin DI、Validator統合など具体的な実装方法を紹介しました。 Part 3:SwiftUI連携と技術Tips では、SwiftUIとCMPの相互埋め込み、CMP vs Flutter比較、実践で直面した落とし穴、導入戦略などを詳しく解説します。お楽しみに! こちらは「Compose MultiplatformとSwiftUIで作るハイブリッドモバイルアプリ」シリーズのPart 2です。
アバター
この記事は KINTOテクノロジーズアドベントカレンダー2025 の19日目の記事です🎅🎄 KINTOテクノロジーズで Unlimited(Android)アプリの開発を担当している kikumido と申します。 これまで Android の UI 実装では、Figma のデザインを見ながら色・タイポグラフィー・レイアウト・アセットを手作業で Compose へ落とし込む必要があり、どうしても時間と労力がかかっていました。 しかし、Figma が提供する MCP(Model Context Protocol) と、Anthropic の Claude Code を組み合わせることで、このワークフローが大きく変わります。 Figma MCP を通じて AI がデザインデータを直接読み取り、Claude Code が Compose コードを自動生成 してくれるため、これまで手作業で行っていた工程が一気に効率化されます。 本記事では、この「Figma MCP × Claude Code」による UI 実装高速化の流れを、設定方法からプロンプト例、生成結果までまとめて紹介します。 目次 Figma MCP を有効にする MCP クライアントを導入する API Token(PAT)を設定する Figma のファイル URL を指定する Claude Code に実装を依頼する 実行結果 まとめ 1. Figma MCP を有効にする デスクトップ版 Figma の MCP サーバー機能をオン にするだけで準備は完了です。 公式ヘルプに非常にわかりやすい手順があります。 🔗 https://help.figma.com/hc/ja/articles/32132100833559-Figma-MCP%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E3%82%AC%E3%82%A4%E3%83%89 2. MCP クライアントを導入する 本記事では、チームで使用している Claude Code を MCP クライアントとして設定します。 Claude Code は Figma MCP に公式対応しており、設定も非常に簡単です。 🔗 https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/#claude-code 3. API Token(PAT)を設定する Figma の API を利用するためには Personal Access Tokens(PAT) が必要です。 セキュリティを考慮し、Claude Codeに直接PATを記載するのではなく 環境変数に保存して使用する方法が安全 です。 3.1 環境変数が安全とされる理由 誤ってAIに送信されない Git に誤コミットされるリスクを防げる PC(OS)のユーザー権限で保護される 3.2 PAT の取得方法 Figma にログイン 右上の自分のアイコン → Settings 左メニューの Personal Access Tokens Generate new token 名前を入力して生成 → 表示されたトークンをコピー(再表示不可) 3.3 環境変数への設定(例:macOS / Linux) echo 'export FIGMA_TOKEN="あなたのPAT"' >> ~/.zshrc source ~/.zshrc PAT の詳細: 🔗 https://www.figma.com/developers/api#access-tokens 4. Figma のファイル URL を指定する Claude Code に Figma の URL を渡すだけで、 ノード階層・レイアウト・色・フォント・画像アセット を自動で読み込みます。 4.1 正しい Figma ファイル URL の取得方法 対象の フレーム / コンポーネント / レイヤー を選択 右クリック Copy → Copy link(リンクをコピー) → ?node-id=xxx を含む正しい URL がコピーされます。 4.2 環境変数への設定(例:macOS / Linux) echo 'export FIGMA_FILE_KEY="コピーしたリンク"' >> ~/.zshrc source ~/.zshrc 5. Claude Code に実装を依頼する 以下は、Figma のデザインを Jetpack Compose に落とし込むためのプロンプト例です。 ご自分のプロジェクトに合わせて適宜調整してください。 目的: Figma MCP を使い、Figma のデザインデータを直接参照して Jetpack Compose の UI コードを生成してください。 前提: - FIGMA_TOKEN(環境変数) - FIGMA_FILE_KEY(環境変数) ■ デザイン情報 - Figma に存在する色・Typography のみ使用し、未定義の値は追加しない - 以下のファイルに分割して実装 - Color.kt - Type.kt - Theme.kt - 上記テーマを使って Screen.kt を実装 - @Preview を追加 - 不明点は推測せず、Figma MCP が取得したデータを使用する ■ 画像アセットの扱い - SVG の場合: - Figma MCP から取得したファイルを基に、正確に Android VectorDrawable(.xml)へ変換して配置 - PNG の場合: - Figma の Export 設定に従う - Export 設定がなければ以下 5 種類の密度で PNG を生成して配置 - mdpi / hdpi / xhdpi / xxhdpi / xxxhdpi - アセット名は Figma 名を Android の命名規則(lower_snake_case)へ変換して作成する 6. 実行結果 Claude Code は、指定された Figma ノードから 色・Typography・レイアウト・画像アセット を取得し、 Color.kt / Type.kt / Theme.kt / Screen.kt / Preview を自動生成します。 これにより、手作業で行っていた 色のコピペ フォント設定 画像書き出し レイアウト再現 といった作業が大幅に自動化され、 UI 実装の速度と正確性が飛躍的に向上します。 それでは、Claude Code にプロンプトを渡した結果を確認してみましょう。 6.1 UIを確認する 左が Figma 、右が Claude Code が実装した Compose のPreviewです。 良い精度で再現できていると思います。 ※「×」はSVGからVectorDrawableに変換された画像、アバターはPNG画像です。 Figma ComposeのPreview ![Figma](/assets/blog/authors/kikumido/figma.png =200x) ![Compose](/assets/blog/authors/kikumido/preview.png =200x) コードも確認してみましょう。 6.2 コードを確認する 画像は以下のように実装されていました。 Image( painter = painterResource(id = R.drawable.ic_avatar_large), contentDescription = "メインアバター", modifier = Modifier .size(106.dp) .clip(CircleShape), contentScale = ContentScale.Crop ) Textは以下のように実装されていました。 styleや色も Figma で指定されたtypography、colorが適切に指定されています。 // ドライバー名 Text( text = driverName, style = KintoTheme.typography.labelLarge, color = KintoTheme.colors.textPrimary ) 入力欄の幅が Figma は固定値なのに対し、Compose は fillMaxWidth() を使用し横幅いっぱいに広がるようになっていました。 こちらはFigmaを正とするのであれば実装を修正するべきですが、横幅の広い端末を考慮しデザイナーと相談しても良いかもしれません。 入力欄の間の余白が14dpであることも Figma 通りに再現できています。 同じ見た目の入力欄が一つの InputField として実装されている点も注目です。 さらに、選択状態に合わせてボーダーの色が変わるようにすでに実装されてもいます。 var selectedField by remember { mutableStateOf<SelectedField>(SelectedField.BirthYear) } // 入力フィールド Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(14.dp) ) { // 生年月 InputField( label = "生年月", value = birthYear, isSelected = selectedField == SelectedField.BirthYear, onClick = { selectedField = SelectedField.BirthYear }, modifier = Modifier.weight(1f) ) // 普段の起床時刻 InputField( label = "普段の起床時刻", value = wakeUpTime, isSelected = selectedField == SelectedField.WakeUpTime, onClick = { selectedField = SelectedField.WakeUpTime }, modifier = Modifier.weight(1f) ) } InputField は Figma の仕様どおりに実装されており、onClick などの挙動もパラメータで柔軟に渡せる設計になっています。 また、入力ボックス内のテキストに typography が設定されていない点も、Figma の定義を忠実に反映した結果です。 なお、プロンプトで「未定義の値は追加しない」と指定しない場合、Claude Code が推測で適切そうな typography を補完してしまいます。 しかし、望ましいアプローチはアプリ側で補正することではなく、Figma のデザイン側を修正し、正しい typography を設定することだと考えています。 その方が、UI の一貫性やメンテナンス性が大きく向上するためです。 @Composable private fun InputField( label: String, value: String, isSelected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier ) { Column(modifier = modifier) { // ラベル Text( text = label, style = KintoTheme.typography.labelMedium, color = KintoTheme.colors.textPrimary ) Spacer(modifier = Modifier.height(8.dp)) // 入力ボックス Box( modifier = Modifier .fillMaxWidth() .height(53.dp) .border( width = if (isSelected) 2.dp else 1.dp, color = if (isSelected) KintoTheme.colors.borderFocused else KintoTheme.colors.borderDefault, shape = RoundedCornerShape(8.dp) ) .clickable { onClick() } .padding(horizontal = 16.dp), contentAlignment = Alignment.CenterStart ) { Text( text = value, style = TextStyle( fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 21.sp ), color = KintoTheme.colors.textPrimary ) } } } 先述のプロンプトでは文字を strings.xml に定義するように指示をしていないので、コード上にそのまま記載されています。 先のプロンプトを修正したり、追加で指示を出せば strings.xml に定義した上で使用することもしてくれます。 7. まとめ まとめとして強調したいのは、 実装の精度は Figma 側のデザインシステムが適切に整備されているかに大きく左右される という点です。 Figma のスタイルが未整理だったり、コンポーネント化が不十分な場合、AI が取得する情報も不完全になり、結果的にコードの手直しが必要になってしまいます。 逆に、デザイナーとエンジニアが協力してデザインシステムをしっかり構築しておけば、 UI 実装の速度・正確性は飛躍的に向上し、保守性も格段に高まります。 そのためにも、 日頃から密に連携し、同じ前提でデザイン・実装を行うことが不可欠 です。 さらに、Compose Multiplatform と組み合わせて Figma MCP を活用すれば、 プラットフォームをまたいだ UI 実装の高速化にもつながり、よりスピーディに高品質なアプリ開発が可能になります。 質の高いアプリを素早く届けるためにも、 エンジニアとして継続的に知識をアップデートし、より良いワークフローを探求していくことが重要だと感じています。
アバター
この記事は KINTOテクノロジーズアドベントカレンダー2025 の19日目の記事です🎅🎄 はじめに こんにちは、KINTOテクノロジーズ Mobile Assistanceマネージャー&KMPチームリードのYena Hwangです。 2025年9月にDroidKaigi 2025で「 Compose MultiplatformとSwiftUIで作るハイブリッドモバイルアプリ 」というテーマで登壇する機会をいただきました。本記事では、発表内容をもとに、私たちKMPチームがハイブリッド開発を導入した背景と実際の経験を共有したいと思います。 DroidKaigi 2025セッションページ から発表動画をご覧いただけます。また、 発表スライド も公開していますので、ぜひご参照ください。 本シリーズの構成 Part 1:なぜハイブリッドなのか ← 現在の記事 Part 2:実装ガイド(近日公開) Part 3:SwiftUI連携と技術Tips(近日公開) 私たちのチーム紹介 Mobile KMPチームは元々 Androidエンジニアのみで構成されたチーム でした。しかし、Kotlin Multiplatform(以下KMP)とCompose Multiplatform(以下CMP)を導入することで、 iOSアプリの開発まで担当できるチームへと進化 しました。 これこそがハイブリッドアーキテクチャの大きなメリットの一つです。AndroidエンジニアがKotlinの知識をベースにiOS開発まで担当できるようになり、逆にiOSエンジニアもKotlinを習得することで共有コードの開発に参加できます。各OS専門のエンジニアを別々に確保するより、はるかに効率的なチーム運営が可能です。 チーム構成(3名): メンバー スキル拡張 Yao Xie ( Tech blog ) Android → KMP, CMP, iOS Yonghui Chen ( Tech blog ) iOS, Android → KMP, CMP Garamoi Choi ( Tech blog ) API, Android → KMP, CMP, iOS この 3名のチーム で、Androidアプリの開発に加え、iOSチームに提供する共有ライブラリ/SDKの開発も担当しています。KMP/CMPで作成したロジックやUIコンポーネントをライブラリ形態でiOS側に提供することで、iOSチームは共有モジュールを統合するだけで同じ機能を実現できます。 現在、私たちのチームはAndroid/iOSアプリで共通利用できるSDKの開発を担当しています。 なぜハイブリッド開発を選んだのか 現実的な制約条件 昨年(2024年)に、既存のコードベース(Jetpack Compose + SwiftUI)を活用して新しいプロダクトを開始することになりました。プロトタイプ段階から求められた条件は明確でした: High Speed :非常に短い期間 Low Cost :少人数の開発チーム High Quality :ネイティブアプリレベルのUIパフォーマンス しかし現実では、この3つを同時に達成することは「不可能な三角形」と呼ばれるほど難しいことです。通常は2つを選ぶと、残り1つを諦めなければなりません。 KMP + CMPという解答 すでにKMPでビジネスロジックを共有していた私たちにとって、2024年にCMPのiOSサポートがBetaになったことは、UIレイヤーまで共有する挑戦を始める絶好のタイミングでした。ロジックだけでなくUIまで共有することで、この「不可能な三角形」を破れると考えました。 このアプローチが約束すること: 少人数チームでも迅速なプロトタイプリリース ネイティブレベルのパフォーマンス 既存のJetpack Composeコンポーネント再利用 ロジックとUIコード共有による効率最大化 タイトなデッドライン達成 AndroidとiOSを別々のチームで開発していたら実現できなかった、不可能な三角形を破る実用的な方法でした。 KMPとCMPとは 本記事では以下の略称を使用します: KMP(Kotlin Multiplatform) :ビジネスロジックをAndroid/iOS/Desktop/Web間で共有 CMP(Compose Multiplatform) :Jetpack ComposeベースのUIをプラットフォーム間で共有 KMPでロジック層を、CMPでUI層を共有することで、効率的なクロスプラットフォーム開発が可能になります。 ハイブリッドアーキテクチャとは レイヤー別技術選択基準 私たちが確立した実用的なガイドラインです: レイヤー 技術 適した領域 KMP Kotlin Shared ビジネスロジック、APIサービス、データ管理 CMP Compose Multiplatform リスト/カード/フォーム画面、データ中心の詳細画面 Native SwiftUI/UIKit ナビゲーション/ジェスチャー、Map/Camera/Wallet、プラットフォーム固有スタイリング なぜ100% CMPではなくハイブリッドなのか もちろん、100% CMPで構築することも可能です。しかし、私たちの場合は以下の理由でハイブリッドを選択しました。 Best of Both Worlds: プラットフォーム別UI/UXガイドライン準拠が可能 ネイティブコンポーネント統合(Maps、Camera) 段階的マイグレーションパス確保 チームの既存専門性活用 適したユースケース: 既存ネイティブアプリがある場合 プラットフォーム別デザイン要件がある場合 複雑なネイティブ統合が必要な場合 以下は、私たちがPoCアプリで実際に使用したハイブリッドアーキテクチャです。 End-to-End Blueprint ハイブリッドアーキテクチャを実現するための全体像です。 要素 説明 Module layout 共有コードとプラットフォーム固有コードを明確に分離 Shared ViewModel UIからロジックを切り離すための共通契約 Bidirectional UI interop CMPビューをネイティブ画面に埋め込む ネイティブコンポーネントをCMP画面に埋め込む Navigation & State プラットフォーム間で動作するナビゲーションと状態管理戦略 次回予告 Part 1では、ハイブリッド開発を選んだ背景とアーキテクチャの全体像を紹介しました。 Part 2:実装ガイド では、実際のプロジェクト構造、ナビゲーション統合、Koin DIの設定など、具体的な実装方法を詳しく解説します。お楽しみに!
アバター
こんにちは、Engineering Office……もとい、技術広報グループのemimです。 主業務はEngineering Officeのデザイナーなのですが、社外交流や社内の勉強会、さらに今回のようなイベント出展にて技術広報メンバーの手を煩わせる機会が多くなりそうだな……という試算から、少し前から技術広報チームの一員としても活動しています。 この記事は、 KINTOテクノロジーズ Advent Calendar 2025 の18日目の記事として執筆しています。 今回は、首題のとおり、アクセシビリティカンファレンス福岡2025にKINTOテクノロジーズ株式会社(以下KTC)が「おやつスポンサー」として協賛したので、そのレポートを行います。 アクセシビリティカンファレンス福岡とは https://fukuoka.a11yconf.net/ アクセシビリティカンファレンス福岡は、2023年より毎年福岡で開催されている「アクセシビリティ」をテーマとしたカンファレンスです。今年で3回目の開催です。私は過去2回も現地で参加しています。 福岡から始まった地方カンファレンスですが、これまで賛同者による派生版として、名古屋(愛知)、石川、千葉など他地方でも開催されています。「アクセシビリティカンファレンス」は表記も発話も長いので、いずれの場合でも略して「アッカン」と表されます。 さて、アクセシビリティとは、誰もがどんな状況にあっても容易に利用・参加できる状態や仕組み、及びその状態(利用可能性)のことを指す言葉です。物理的な環境や情報、サービスなど、さまざまな面で誰もが平等にアクセスできることを意味し、特にソフトウェア分野では最低限の品質の閾値として捉えても齟齬はないでしょう。 そのため、アクセシビリティへの興味関心の高いあらゆる職種の方は、総じて、高いスキルと感度を持ち合わせていると個人的に考えています。 話をKTCに戻すと、今年はたまたま当社の 福岡オフィスの開所が決まった 年でした。そこで、そんなに意識の高い方たちの集まるカンファレンスが、タイミングよく福岡で開催されるならば!と採用とKTCの感度の高さアピールを目的に、なんらかスポンサーができないか、と考えたのが始まりです。 そうは言っても、KTCでの具体的なアクセシビリティに関する取り組みはまだほとんどありません。 過去2回の参加経験から、 会場参加者の印象に残りやすい 会場で一定の交流ができる 展示物や具体の成果アピールが必ずしも必要ではない という3点をカバーできる「おやつスポンサー」がKTCには適していると考え、前のめり気味で応募しました。 おやつスポンサーの内容 おやつ……! 参加されていない方には何も伝わらないですよね。かくいう当社でも、このゆるふわなスポンサー区分名について「これでは(威厳=期待値が薄れて)申請が通らないかもしれない」という懸念が上がり、内部的な申請の際に横文字な名称でカモフラージュされたとかなんとか…… (個人的には、これがとてもアッカンらしいユーモラスな名称でいいな、と感じています。) 具体的なおやつスポンサーの役割は、クッキーとコーヒー及びアッカン公式チロルチョコを食べ放題/飲み放題の形で提供する、ブースへのスポンサーです。ブースで担当者がクッキーやコーヒーを提供するついでに、自社の事業内容などをアピールする機会を得られます。 この軽食サービスは、カンファレンスの最初の開催の2023年当初から提供されています。 他のカンファレンスに比べ、アッカンでは色々な障害がある人でも「ここにいる。^[「ここにいる。」とは、アクセシビリティカンファレンス福岡2023のテーマでした。]」ことが当たり前の世界です。長時間同じ姿勢がしんどいような方や、ずっと同じ所に居続けることに不安のある方もいるかもしれません。会場内には託児所などもあるので、子供の声も聞こえていました。そんな方々でもカンファレンスを楽しめるように、各セッションの時間が短めだったり、休憩時間が長めだったりという工夫がなされています。 そこにマッチするのが、コーヒー^[中にはコーヒーが苦手な方もいらっしゃったようで、提供はコーヒーだけなので少し窮屈な思いをさせてしまったようです。]とクッキーです。甘いものと苦いもので、疲れた脳と心を癒やしてくれます。会場のみの提供となってしまいますが、参加者が長丁場のカンファレンスで疲れないように配慮されたサービスです。 昨年まではアイシングクッキーが配られていましたが、今年はシンプルなクッキーに希望の図柄のプリントされたクッキーに変更となっていました。 後日、隣席の同僚が「なんだ〜、アイシングの方がいいじゃん……って最初思ったけど高級クッキーじゃん!!」と小躍りしたクッキーです。 コーヒーは、福岡で有名な REC COFFEE とスターバックスのものがサーバーで用意されました。 カンファレンスの様子(と前夜祭の様子) 前夜祭について カンファレンスの前日夜には、LINEヤフーさんの博多オフィスにて、 アクセシビリティカンファレンス福岡 前夜祭 が開催されていました。 私は別件の予定があり不参加だったのですが、当社からは 11月からジョインした辻 がLTで登壇し、スクリーンリーダーの NVDA を用いてKindleの書籍を読む方法(「『聴く』読書から『読む』読書へ」という副題が添えられています)が紹介された他、福岡オフィスのメンバーなどが聴講者として参加をしました。辻については、転職の記事が公開されていない時期だったこともあり、会場でざわめきを作ったと聞いています。 さらに後から聞いた感想では、自称アクセシビリティ初心者な人たちでも「自分にもできるかもしれない」となれるような、代替テキストについてなどの話題提供が心に残ったそうです。当社の参加メンバーから、当日福岡にいなかったチームメンバーにも「ぜひ聞いてほしかった」との声を聞きました。 カンファレンス当日について カンファレンス当日は、開場より少し早めに会場入りをしてブース設営などを行いました。我々は他のカンファレンスなどでも利用する、KINTOのキャラクターである「 くもびぃ 」とともにブースに立ちました。 ちなみに、アッカンは他のカンファレンスやセミナーに比べて、運営メンバーにも参加者にも女性が多い印象です。ブースに来てくれる方々も、すれ違う方々も、開場前のアッカン福岡実行委員会やボランティアスタッフなど、とにかく多くの方から「かわいい〜」という声を聞けたのが嬉しかったです。 スポンサーブースエリアは本会場と別ながらも、大きなスクリーンとクリアな音声(スピーカー)で、カンファレンス本編の内容がサテライト放映されていました。スポンサーブースにずっといたとしても、講演内容が楽しめるようになっています。 KTCブースでは、前日にLTを行った辻も端にずっと居て、普段利用しているスクリーンリーダーや点字ディスプレイを利用し、デモの披露など行っていました。途中、カンファレンスの手話通訳の方が「視覚障害者がどのように情報を受け取られているのか」と話しを聞きにきてくれたり、聴覚障害の方も点字ディスプレイの様子を見に来てくれたりしたそうです。 他のイベントではスポンサーブースに居ると、なかなかカンファレンス本編を楽しめなかったりするのですが、その辺りもみんなで楽しめるように計算されているように感じます。「お客さんと楽しむ」だけではないことが幸いし、スポンサーブースにいただけでも学びの多かったKTCスタッフは「せっかくなら、アクセシビリティに興味のあるメンバーも参加できたらよかった…次回はぜひ!」と話していました。 また、現地ではカンファレンスの後に懇親会も開催されました。KTC福岡のスタッフ陣が、熱冷めやらぬまま福岡の各社の方々と情報交換を行い「引き続き勉強会などを開催しましょう!」と意気投合したと聞いています。大変楽しみです。 この記事では本編の様子に全然触れられていないのですが、前夜祭と当日のXの様子が公式にまとめられています。当日Xでは、ハッシュタグ付きポストの多さからか度々「本日のニュース」に取り上げられたりしていました。少しでも盛り上がりを感じたい方は、以下のまとめをご覧ください。 https://posfie.com/@FukuokaA11yconf/p/OD58dzG 後日アーカイブも公開されるそうです。 https://x.com/FukuokaA11yconf/status/1997858020148330885?s=20 アクセシビリティカンファレンス福岡実行員会の皆様及び、ご登壇の皆様、のみならず各スポンサーブースの方々、オフライン/オンラインの各参加者の皆様、お疲れ様でした。そして交流くださって、ありがとうございます。また来年も(開催が予告された)アッカン福岡に参加できることを楽しみにしています。 おまけレポート:ブース出展に伴う制作物 今回、ブースでの配布物にくもびぃの紙クリップを用意しました。過去、別の機会でも配布していたノベルティです。せっかくなので触って形のわかってもらえるもの、そして使えそうなもの、かつお菓子といっしょにもらっても困らないサイズのもの、ということで選びました。この「触ってわかる」という点は好評でした。 さらに、スタッフとして参加していないのに「これがあると『今日会場に来ているのはこの人』って説明ができるんです!」と参加スタッフのアクスタ(アクリルスタンド)を ゆかちさん が作ってくれました。まさかのアクスタデビューです。 土台の部分にはNFCタグが組み込まれており、個々人のSNSに繋がっていたりします。これが(意外にも?)好評で、他社の広報チームでも「真似したい」という意見をもらいました。 ちなみに辻に「視覚障害の場合は、名刺をもらうよりもNFCの方が便利ですか?」と事前に確認をしたところ、「会場(うるさい所)で忙しくNFCで操作するよりも、家に帰ってから名刺を改めて確認できる方がいいように思います」との意見をもらいました。なるほど。 今回ブースにいたメンバーは、SNS上でアイコンの方が知られている人も多かったです。そのため「この人だよ」と紹介をするのにもアクスタが役立った、というポイントも補足しておきます。
アバター
この記事は KINTOテクノロジーズ Advent Calendar 2025 の18日目の記事です🎅🎄 はじめに KINTOテクノロジーズのクリエイティブグループ所属の福田です。 Osaka Tech Lab に所属しています。 トヨタグループ内コミュニティ「TURTLE」にて、2025年4月にデザイン分科会を設立しました。 アンバサダーとして分科会の勉強会企画・運営に携わったので、振り返りと今後の意気込みをまとめます。 TURTLEとは TURTLE(Toyota cloud UseR TechnicaL alliancE)は、トヨタグループのクラウド技術に関するエンジニアが集まり、知見を共有するために設立されたコミュニティです。 「社外コミュニティでは話せないことが多く、参加しづらい」「社内にインプット・アウトプットの場がない」「同じものを複数社で開発しているのはもったいない」 こうした現場の声を背景に、トヨタグループとしてエンジニアのコミュニティをみんなで作ろうという想いから誕生しました。 なぜデザイン分科会なのか 近年、ビジネスにおけるデザインの重要性は急速に高まっています。 デザインは単なる見た目の美しさを超え、ユーザー体験やブランド構築、サービスの使いやすさにまで影響を及ぼし、企業活動の前線に立つ存在となっています。 しかし、私が所属するクリエイティブグループでは、トヨタグループ内でデザインに関する知見やノウハウを共有できる場がほとんどありませんでした。 特に、デザインに関連する事例や成果物には社内専用の情報が多く、社外コミュニティでは安心して話すことが難しい状況もありました。 こうした背景から、Osaka Tech Labに所属し、TURTLEの他分科会で企画・運営を担っているアンバサダーに相談しました。 その結果、グループ横断でデザイン領域の知見を共有できる場の必要性を再認識し、TURTLE事務局に相談した後、2025年4月に『デザイン分科会』が正式承認されました。 分科会設立までの流れ 2025年2月 TURTLE総会で設立準備中の案内 デザイン分科会の勉強会企画・運営を共に担うアンバサダー募集開始 2025年3月 デザイン分科会アンバサダーのキックオフMTG開催 分科会設立申請 2025年4月 デザイン分科会設立が事務局にて正式承認 2025年2月のTURTLE総会での案内時の写真です。この開設準備発表がきっかけでトヨタグループ他社のアンバサダーの仲間を集めることができました。 活動実績(2025年4月~9月) 設立当初、デザイン分科会には2社から6名のアンバサダーが参加し、隔週で定例会を開きながら情報共有と関係構築に努めてきました。 勉強会開催 半年間でオンライン勉強会を2回実施し、質疑応答や投票など参加型コンテンツを簡単に作成できるインタラクションツール「 slido 」や、チームでのアイデア出しや共同作業をスムーズに行えるオンラインホワイトボードツール「 FigJam 」を活用することで、オンラインでも双方向のコミュニケーションを重視した勉強会を実現しています。 第1回:「コーポレートサイトのリニューアル」 コンセプトの重要性やデザインプロセスを共有 第2回:「デザインシステム導入とFigma運用の最適化」 実践的なツール活用法を紹介 まとめ 2025年12月時点で、デザイン分科会の参加企業数は30社、参加者数は179名に達しています。 明日(2025年12月19日)には第3回勉強会「UX入門勉強会」の開催も予定しています。 現在、アンバサダーの構成は2社7名による運営です。 今後もグループ全体でデザインに関する知見やノウハウを共有し、新たなグループ会社からのアンバサダーの仲間集めにも取り組み、学びの多い場を目指します。 デザイン分科会は「デザインをビジネスの前線に」というビジョンのもと、トヨタグループ全体でのデザイナー同士の知見共有を加速させ、より良いユーザー体験の創出を目指して活動を続けていきます。 最後まで読んでいただき、ありがとうございました!
アバター
この記事は KINTOテクノロジーズ Advent Calendar 2025 の17日目の記事です🎅🎄 Engineering OfficeのNaitoです。KINTOテクノロジーズ(以下、KTC)には4つの2025年注力テーマ(インテンシティ、AIファースト、ユーザーファースト、リリースファースト)があります。 以前のブログ で2025年注力テーマの1つ、リリースファーストについてお伝えしました。 今回はリリースファーストにまつわるこの1年の取り組みや変化について紹介します。 最初に認識合わせをしておくと、KTCではリリースファーストは、「アイディア創出からリリースまでの期間を短くし、ユーザー・顧客に早く価値を提供する」としています。 2025年1月〜3月 Engineering Officeが立ち上がりました。 メンバーは ahomu と私(当時入社3ヶ月)の2人です。 Findy Team+の導入・活用支援という切り口で開発チームとの対話を通し、各チームの状況やメンバーのことを知り始めた状態で、その結果わかったことは以下のようなことでした。 自分たちの現状を定量的に把握できているのは一部のチームにとどまっている Findy Team+を導入したが、うまく計測・可視化できないチームもある Findy Team+の1機能である、プロセスタイム分析(JiraをINPUTとして各工程ごとのリードタイム)の計測・可視化ができるチームはゼロ 開発パフォーマンスの計測・可視化に取り組んでいるチームにおいても一部の人で計測データを見て試行錯誤しながら、改善活動に取り組んでいる。チーム全体には広がっていない 計測・可視化に関心があっても先行しているチームがどんな状況なのかはわからず、情報収集ができない 現在(2025年末) Engineering Officeはなんと4名に増えました。それぞれの専門領域を最大限発揮しつつ、コラボレーションしてチームで活動しています。 「一緒にやろう」と複数チームから声をかけていただき(ありがたい!)、私たちはこの1年間で約20チームに関わらせていただきました。 各チームは、 注力テーマに紐づいた目標を設定し、取り組んでいる リリースファーストの第一歩は自分たちの現状を定量的に定性的に把握することからという意識が全社に広がっており、社内の主なプロダクト、開発チームはFindy Team+を導入して開発パフォーマンスの計測を行っている Findy Team+ではFour Keysについては全チームが計測可能な状態になっている Findy Team+を見て話し合うことがチーム全体に広がっているところも増え、改善事例が少しずつ共有されている Findy Team+の1機能である、プロセスタイム分析(JiraをINPUTとして各工程ごとのリードタイム)は3プロダクトが計測できている チームを超えたリリースファーストのタスクフォースが発足し、業務のかたわら、プロダクト横断でリリースファーストを実現するための仕組みづくりを実施中 ある部門では部門全体で役割分担や開発プロセスを見直し、役割間・チーム間のコラボレーションを強化中 チームのレビュープロセスを見直した結果、レビュー時間が向上した事例 この変化がどうやって起こったのか?正直、各チームの頑張りの賜物なわけですが。Engineering Office(横軸組織)から見た目線でお伝えしていきたいとおもいます。 注力テーマを理解する 各プロダクトにおいては注力テーマの意味はなんとなくわかるけど具体的にどういうこと?というのが当時の状況でした。 そのため、最初の2−3ヶ月は推進メンバー全員で注力テーマについて社内に浸透させるところから始まりました。 まずは社内で言葉の認識合わせを行い、「なぜこれがいまKTCにとって大事なのか」また「リリース期間だけ短くなればよいということではなく、ユーザー・顧客に向き合い、価値を提供することに意味がある」「ユーザーファーストをないがしろにしてリリースを優先しても技術的負債になってしまう」ということを伝える活動を続けました。 プロダクトやチームごとに自分たちにとってのリリースファーストを考える 注力テーマについて各人が理解すると、次はプロダクトごと、チームごとに自分たちは注力テーマを実現するために何をしたらいいのか?自分たちの現状ってどんな感じなのか?ということが話し合われました。 各方面で注力テーマについて考えた結果、私のところにも以下のような声が届いてきました。 リリースが早くなったかどうかBefore/Afterをわかるようにしたい AIを活用して実装スピードあげたい リリースまでの流れってどうなっているのか 統合テストに時間かかっている ユーザーが遠くて価値が届いているのかわからない 設計・実装より前のフェーズにボトルネックがあるように思うが計測できていない 自チームだけでは前に進めるのは難しい。関係者で集まって話し合いたい こういった課題感共有や話し合いを経て、プロダクトやチームで注力テーマを実現するための自分たちのチームの目標を定めていきました。 取り組み 以下はリリースファーストに関する取り組みの一部です。複数のチームで同様の取り組みをしているケースもあります。 なぜ開発パフォーマンスを計測するのかとFindy Team+導入の説明会 GitHubのブランチ戦略・運用ルール変更 PRレビュープロセスの改善 Findy Team+を見合う会 チームのケイパビリティの可視化 Jiraを使った工程ごとのリードタイムの計測(そのためにJiraの運用ルール見直し) 全社横断でのAI利活用状況の計測・可視化 Value Streamの可視化 部門全体でのValue Streamの改善 アジャイルトレーニングの実施 ユーザー視点で要求を整理し、PRDを作成するワークの実施 プロダクト毎のテスト環境構築 インシデント対応プロセス改善 テストデータ作成方法の見直し Techラウンドテーブル(チーム間の情報共有) トヨタ生産方式勉強会入門編 ここに挙げたのは私が関わった取り組みだけですので、社内には他にもたくさんの取り組みがあります。 ボトルネックを特定し、Value Streamを改善した事例 Techラウンドテーブル @Osaka Tech Lab まとめ 上記のような取り組みを1年間繰り返し続けてきた結果が冒頭のような変化に繋がっています。 当初のリリースファーストの目標を実現しているチームもまだ途中のチームもいますが、どのチームも自分たちの行動で起きた変化は実感していることとおもいます。 社内の風土としてボトムアップで様々なことが進むことが多いです。そのため、今回の注力テーマの各取り組みにおいてもまずは自分のチームの範囲でやってみようという形で始まることが大半でした。 一方で、KTCのプロダクトは複数のチームで構成されていることが多いです。リリースファーストやユーザーファーストを実現するためには、プロダクト全体を俯瞰する視点が欠かせません。 自チームが整うと、自然とメンバーの視野も広がりより広い範囲に目を向けるようになります。そのため、2025年後半にはチームを超えた「リリースファースト」の取り組みが増えてきました。 チームを超えると部門が異なる人や他の役割の人たちと課題を共有し、目線合わせをしていく必要があるのですが、専門領域や役割の違いにより見えているもの感じているものが異なる場合も多く、ゴール設定や進め方で躓くことも多いです。 このような時にはビジネス・技術・プロセスを統合して見えているマネージャーのアドバイスや方向性づけ、判断というのがとても大事になります。 それによりチームを超えた様々な関係者がまとまり、取り組みが加速するというの目の当たりにしています。 今年の変化が成果となって表れるのが来年です。来年、リリースファースト・ユーザーファーストの活動を加速させ、より多くの成果に結びつけていくためにはマネージャーの関与は不可欠です。 本当の意味でリリースファーストを実現するプロダクトがどれだけ増えるのか今からとても楽しみです。 リリースファースト、ユーザーファーストは一年で終わる話ではありません。プロダクト開発に携わる以上は継続的に取り組んでいくテーマです。 Engineering Officeは来年も引き続き各チームとともにリリースファースト、ユーザーファーストに取り組んでいきます。 お知らせ Regional Scrum Gathering Tokyo 2026 のDay1(1/7)に出ます。具体の取り組みのいくかについて話す予定です。みなさんよかったら見に来てくださいね。 「リリースファースト」の実感を届けるには〜停滞するチームに変化を起こすアプローチ〜
アバター
この記事は KINTOテクノロジーズアドベントカレンダー2025 の17日目の記事です🎅🎄 1.はじめに こんにちは! KINTOテクノロジーズのデジタル戦略部DataOpsG所属の上平です。 普段は社内のデータ分析基盤と「cirro」というAIを活用した社内アプリの開発・保守・運用を担当しています。 以前、下記の記事で、Strands Agentsの導入前の検証事例をご紹介させていただきました。 https://blog.kinto-technologies.com/posts/2025-07-18-try-strands-agent/ 当時より発展し、現在「cirro」はAmazon Bedrock × Strands Agentsという構成になっています。 本記事では、「cirro」にStrands Agentsを利用し、GA4への問い合わせ画面を構築した事例を紹介します。 2.本記事の対象者 本記事は、Amazon BedrockをConverse APIやInvoke Model経由で利用した経験があり、 Strands Agents等エージェント開発SDKへの切り替えを迷っている方が対象となります。 3.GA4への問い合わせ画面構築の背景、概要 3.1.背景 GA4 (Google Analytics 4) は、Webサイトやアプリに 「誰が」「どこから来て」「何をしたか」 という、 訪問者のアクセス状況を分析できる非常に便利なサービスです。 しかし、その分析できる項目の種類があまりにも多いため、 初めて使う方にとっては、どこを見たらいいのか、どうデータを読み解けばいいのか、かなり難しいです。 GA4のデータは、主に次の2種類の要素で構成されています。 ディメンション:データを分類したり切り口としたりする「属性」を示す項目です。 「どこから」アクセスしたか(例:Google検索、Twitterなど) 「どの国・地域」から来たか 「どのページ」を見たか 「どんなデバイス」を使ったか(例:スマートフォン、PC) メトリクス:具体的な量や頻度を表す「数値」を示す項目です。 Webサイトへのアクセス数(セッション数) 特定のページが表示された回数(表示回数) ユーザーがサイトに滞在した時間 サイトを訪れたユーザーの数 これらのディメンションやメトリクスの項目が200項目・300項目の規模で存在するため、 慣れていないと欲しい情報にたどり着くこと自体が課題です。 Google公開資料:アナリティクスのディメンションと指標 この課題について、例えば「今週のアクティブユーザ数が知りたい」「アクセス数が多いページは?」等、 自然言語で問い合わせできるようになれば、サイトやアプリの管理者が簡単に傾向を見ることができ 改善に役立つのでは…と構築に着手しました。 3.2.概要 GA4への問い合わせ画面は、よくあるシンプルなチャット画面です。 以下の流れでユーザの問い合わせに対し、GA4の内容を応答します。 ユーザの問い合わせを入力 AIがGA4のAPIから現在有効なディメンションとメトリクスの一覧を取得 AIが適したディメンションとメトリクスを選択し、GA4へ問い合わせる GA4の結果をAI側で表示用の形式に変換し、回答を出力 シンプルですが、ユーザはディメンションやメトリクスを把握せずともAIを介してGA4のデータにアクセスできます。 初心者には単純にデータアクセスの補助として、 ディメンションやメトリクスを全て把握していない中級者の方には、 どの項目で必要なデータが取得できそうかの当たりをつけることに役立ちます。 4.要素技術・アーキテクチャの紹介 ここからは、「GA4への問い合わせ画面」を構築時に使用した要素技術やアーキテクチャをご紹介していきます。 4.1.Strands Agentsとは? 2025年5月16日にAWS Open Source Blogで公開されたオープンソースのAIエージェントSDKです。 以下は、AWSのAmazon Web Services ブログで公開されている図です。 図のように、ツールを備えたAIを実装するには、Agentic Loopと呼ばれるループ処理が必要です。 この処理では、AIの応答がユーザーへの回答なのか、ツールを使ってさらに処理を進めるべきかを判断します。 Strands Agentsを使えば、このループ処理を開発者が自前で実装することなく、AIエージェントを構築できます。 参考、図の出典:Strands Agents – オープンソース AI エージェント SDK の紹介 4.2.cirroってどんなサービス? 私の所属するDataOpsGでは下記ミッションを目的に活動しています。 「全社のデータを分析用に整備、AI-Readyなデータ分析基盤を提供することでデータドリブンな意思決定を支援する」 AIは、非エンジニアでも容易にデータにアクセスするための入り口として注目しており、 cirroはDataOpsGで独自に開発・運用している生成AIの活用基盤です。 UI等可能な限り共通化し、チャットや問い合わせ画面のような画面構成であれば、 プロンプトと参照データの追加のみで 金太郎飴的に量産できる構成となっています。 図のように、①UI/コンピューティング機能と、②システムプロンプトや参照データを分離し、 ②を切り替えることで1つのシステムで複数のAIの機能を実現しています。 また、URLパラメータで使用するツールを指定することができ、ツールを持ったAIエージェントとして稼働することも可能です。 今回はこの機能を利用し、cirroでGA4への問い合わせ画面を構築しました。 4.3.GA4の問い合わせ用のツール Googleが公開する2つのAPIをStrands Agentsが使用するツールとしてラップし構築しました。 cirroはツールを使用して、「利用できるディメンションとメトリクスの取得」と「ユーザの質問に合ったデータをGA4から取得」を実現しています。 4.3.1.getMetadata GA4で使用できるメトリクスとディメンションを取得するAPI getMetadata詳細 4.3.2.runReport 指定したプロパティID、メトリクス、ディメンション等から、合致するデータを取得するAPI runReport詳細 5.実装時のポイント 本記事では、MCPを使用せずツールの形で機能追加を実現しました。 ここではMCPを使用しなかった理由や、ツールでの実装を採用したメリットをご紹介します。 5.1.MCPを使用しなかった理由 cirroはLambdaがコンピューティングエンジンです。 そもそもがツールでできることについて、より工数をかけてMCPサーバを立てることにメリットを見いだせなかった背景もありますが、 Lambda主体とすることで以下の課題があり、確実に機能提供するためツールでの実装を採用しました。 Lambdaでの起動方法や、起動時のオーバヘッドの課題 Googleが公開するMCPサーバはローカル稼働前提になっている 別途ECS等を使用し自前でリモートサーバとして用意する方法もあるが、Lambda主体の維持管理が容易なcirroのコンセプトと異なる。 Lambdaの特性上、うまくMCPサーバと通信できるかの課題 MCPサーバとAIの通信は、調べる限り別プロセスを立ち上げ、標準出力を介してやり取りしている。 Lambda上でMCPサーバと通信できるか調査期間では確証が持てなかった。 5.2.ツールでの実装を採用したメリット ツールとして実装することによるメリットもありました。 5.2.1.クレンジング処理の追加が容易 API「getMetadata」は大量のディメンションやメトリクスの内容を応答します。 おそらくすべてのディメンションやメトリクスが必要なケースは少ないのではないでしょうか? 私の環境でも、使用していなかったり、想定するユーザ(GA4初心者)にとって不要と思われる項目を、 ツール内で除去しています。 AIに与える情報を削減することで、精度の向上や応答速度、トークン消費量を抑える工夫をしました。 5.2.2.カスタムが容易 ローカルでも稼働するツールとすることで、実装と確認を容易にしました。 また各クライアントで資源を共有するMCPサーバでなく、ツールとして独立するため、 案件ごとの個別の変更を他に影響なく実施できます。 修正前後の比較も、新たなツールと旧ツールそれぞれ共存させ、確認することが容易です。 5.2.3.親子構成のマルチエージェントが構築しやすい ツールはただの関数です。当然関数内でBedrock等AIのサービスを呼び出すことができます。 AIを呼び出すツールを用意すれば、メインのAIとツール内の子AIが存在するマルチエージェントの構成が組めます。 本記事では採用しませんでしたが、例えば自由記述の文面の前処理や、AIの出力内容のチェック等、 ロジックベースの処理では難しい内容を子エージェント側で処理させるようなこともできそうだ…と考えています。 MCPが注目される昨今ですが、ツールにはツールのメリットがあり小規模で個別開発が発生するようなケースの場合、 まだまだツールでの実現の選択肢は残るだろうな...と個人的には思っています。 6.おわりに 今回は、デジタル戦略部で展開しているAI活用システム「cirro」を活用し、 GA4への問い合わせ画面を構築した事例を紹介させていただきました。 「AIにツールを持たせる」というと難しく感じるかもしれませんが、Strands Agentsを使えば驚くほどシンプルです。 元々「Converse API」を使用したただのチャットボットだったcirroが、 「Strands Agents」に切り替えるだけで、ツールを使ってAPIを呼び出すエージェントに進化しました。 AIエージェント開発に興味はあるけれど、何から始めればいいか分からない...という方は、 まずStrands Agentsで簡単なツールを1つ持たせてみることから始めてみてはいかがでしょうか? きっと、AIができることの幅が一気に広がる体験ができると思います。
アバター
この記事は KINTO テクノロジーズ Advent Calendar 2025 の 16 日目の記事です 🎅🎄 はじめに こんにちは! KINTO 開発部 KINTO バックエンド開発 G マスターメンテナンスツール開発チーム、技術広報 G 兼務、Osaka Tech Lab 所属の high-g( @high_g_engineer )です。フロントエンドエンジニアをやっています。 現在、筆者はプロジェクトで TanStack Query を利用しています。 TanStack Query は、 useQuery や useMutation のおかげで、 React Hooks を扱う感覚でデータの取得・更新が可能で非常に便利なライブラリです。 しかし、キャッシュの扱いで少し癖があり、理解が浅いと、以下の様な挙動に振り回されてしまいます。 データをキャッシュで賄えるはずの場面で無駄にフェッチしてしまっている サーバーのデータを更新したはずなのに、古い情報が画面に表示されてしまっている 闇雲にキャッシュ削除を連発してしまっている 本記事は、こういった挙動に振り回されないように、TanStack Query の公式ドキュメントを読んで、 筆者自身がキャッシュ周辺の挙動を理解するため の内容となっております。 本記事の構成 TanStack Query とは? TanStack Query のキャッシュの基本である stale と gc を理解する TanStack Query のキャッシュの挙動を理解する クエリの無効化 ミューテーション時のクエリの無効化 プロジェクト内でよく利用している QueryClient のメソッドの紹介 TanStack Query とは? https://tanstack.com/query/v5 本記事では、TanStack Query v5 の利用を前提にしています。 TanStack Query(旧 React Query)は、フロントエンドアプリケーションにおけるサーバー状態管理のためのライブラリです。 サーバー状態とは、API から取得するデータのように、アプリの外部に存在し、非同期で取得・更新が必要なデータのことです。 以下を非常にシンプルなコードで実現してくれます。 データ取得&データ更新のシンプル化 キャッシュ管理 バックグラウンド更新 ローディング・エラー状態の管理 TanStack Query のキャッシュの基本である stale と gc を理解する まず、TanStack Query のキャッシュの挙動を理解するために、 stale (古いデータ) と gc (ガベージコレクション) について理解する必要があります。 以下の記事が TanStack Query のキャッシュを理解するうえで一番最初の入口として読むべきドキュメントです。 https://tanstack.com/query/latest/docs/framework/react/guides/important-defaults stale について stale とは、「古くなった」または「更新が必要な可能性がある」状態のデータを指します useQuery または、 useInfiniteQuery のようなデータ取得系のフックは、デフォルトでクエリ(※)のデータを stale として扱います stale は、 staleTime を設定することで再フェッチの頻度を制御できます staleTime のデフォルトは 0 なので、データ取得直後に stale となります stale なデータは、新しいクエリのマウント、ウィンドウの再フォーカス、ネットワーク再接続時に自動で再フェッチされます ※ クエリとは、取得データ、状態、メタ情報、キー、データ取得関数をひとまとめにした管理単位のことです。 gc について 使用しなくなったキャッシュを削除する機能のことです useQuery , useInfiniteQuery はアクティブなインスタンスがなくなった場合、「非アクティブ」というラベル付けが行われ、再使用される場合に備えてキャッシュに残ります 「非アクティブ」の場合、デフォルトだと、5 分後に gc されます gcTime を設定することで、 gc が発生するまでの時間を変更できます stale と gc について、 staleTime と gcTime (v4 より以前は cacheTime という名称) をもとに考えると分かりやすいです。 staleTime → クエリを再取得するまでの時間 gcTime → gc するまでの時間(キャッシュにメモリを保持する時間) staleTime が過ぎても、クエリはキャッシュに残っていますが、 gcTime が過ぎると、クエリがキャッシュから消えるということになります。 それ以外の細かいオプションなども書かれてはいますが、 TanStack Query のキャッシュの基本を理解するために、まずは stale と gc が理解できていれば問題ないと思います。 TanStack Query のキャッシュの挙動を理解する 以下のドキュメントでは、TanStack Query の useQuery がクエリのデータをキャッシュ、キャッシュしたデータの利用、そして gc するまでの流れが解説されています。 https://tanstack.com/query/latest/docs/framework/react/guides/caching useQuery は、 useQuery({ queryKey: ["todos"], queryFn: fetchTodos }); といった記述が基本になりますが、こちらがどのように動作するかを順番に解説します。 本題の前に useQuery の基本コードを簡単に紹介 キャッシュの挙動理解の本題に入るまでに、 useQuery を利用した簡単なサンプルを紹介します。 useQuery が利用される場合、以下のようなコードが記述されることが一般的です。 // データ取得関数 const fetchTodos = async () => { const response = await fetch("/api/todos"); return response.json(); }; // コンポーネント内で使用 const TodoList = () => { // useQuery の記述 const { data, isPending, error } = useQuery({ queryKey: ["todos"], queryFn: fetchTodos, }); if (isPending) return <p>読み込み中...</p>; if (error) return <p>エラーが発生しました</p>; return ( <ul> {data.map((todo) => ( <li key={todo.id}>{todo.title}</li> ))} </ul> ); } useQuery の引数として与えられているオブジェクトには、 queryKey と queryFn というプロパティがありますが、それぞれについては以下の意味があります。 queryKey → キャッシュを識別するためのキー。配列で指定。同じキーを持つクエリはキャッシュを共有 queryFn → データをフェッチするクエリ関数 TanStack Query のキャッシュの一連のライフサイクルを理解する ここまで出た queryKey , stale , gc を元に useQuery のキャッシュ周辺の流れを整理すると、以下のようになります。 1. 初回の useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) を実行 まだ、 queryKey: ['todos'] に紐づけられたクエリのデータが存在しないため、データを取得する為に queryFn で指定された fetchTodos を実行します。 クエリ関数の実行が完了すると、レスポンスは、 ['todos'] キーのもとにキャッシュされます。 staleTime はデフォルトで 0 なので、この時のデータは即座に stale になります。 2. 再度、 useQuery({ queryKey: ['todos'], queryFn: fetchTodos })  を実行 この時、 ['todos'] キーのもとにキャッシュされたデータが stale として存在するため、 stale なデータがレンダリングに利用されます。 それと同時に queryFn で指定された fetchTodos がバックグラウンド実行されます。 クエリ関数の実行が完了した時点で、キャッシュが新しいデータで更新されます。(初回と同じく、 staleTime が 0 なので、即座に stale になります) そして、この時点で更新されたデータを元にまたレンダリングが更新されます。 3. useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) がマウント解除され、使用されなくなる この時、アクティブなインスタンスがなくなったため、クエリは「非アクティブ」のラベルが付与され、 gcTime を利用して、 gc を実行するための時間設定を行います。 gcTime のデフォルトは 5 分なので、何もなければ、5 分後に ['todos'] キーに紐づいたキャッシュデータは gc されますが、5 分以内に再度 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) が実行されるようなことがあれば、 gc のタイマーはリセットされ、同じ様な流れでキャッシュの更新が行われます。 一連のライフサイクルを図示すると以下のようになります。 queryKey によるキャッシュ管理について 少しだけ脱線しますが、 queryKey については、以下のドキュメントで詳しく解説されています。 https://tanstack.com/query/latest/docs/framework/react/guides/query-keys TanStack Query は、 queryKey に基づいて、キャッシュを管理します。 queryKey の型は unknown[] なので、シンプルな文字列のみで構成された配列から文字列とオブジェクトのネストなどの複雑な配列まで対応しています。 大切なことは、TanStack Query は queryKey を一意のキーとして、キャッシュを管理するため、キャッシュしたクエリのデータを再利用したい場合は、正しく配列を指定する必要があります。 例えば、以下のように、 queryFn に対して同じクエリ関数を指定しているが、異なった queryKey を指定している場合、キャッシュは全く別のもとして扱われます。 useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) useQuery({ queryKey: ['todos1'], queryFn: fetchTodos }) また、逆に queryFn は異なったクエリ関数を指定しているが、同じ queryKey を指定している場合、同一のキャッシュが扱われます。 useQuery({ queryKey: ['todos'], queryFn: fetchTodos1 }) useQuery({ queryKey: ['todos'], queryFn: fetchTodos2 }) queryKey の指定が正しくないだけで、そもそもキャッシュが正しく効かない状態になるので、注意が必要です。 ただし、以下のように、 queryKey にオブジェクトが扱われている場合、オブジェクトの中身(キーと値)が同じであれば、オブジェクト内のキーの順序に関係なく、同じキャッシュとして扱われます。 useQuery({ queryKey: ['todos', { status: 'done', page: 1 }], queryFn: fetchTodos }) useQuery({ queryKey: ['todos', { page: 1, status: 'done' }], queryFn: fetchTodos }) ここまでの内容が理解できれば、TanStack Query のキャッシュの基本はかなり押さえられたと思います。 クエリの無効化 staleTime に基づいた自動的なキャッシュ更新のみだと、必ずしも効果的でない場面は存在します。 例えば、ユーザーの何らかの操作によって、キャッシュが古くなっていることが確実な時や、意図的にキャッシュを更新したい時などです。 そういった場面に利用できるのが、 QueryClient に存在する invalidateQueries メソッドです。 これを利用することで、クエリのデータを強制的に stale にします。そのクエリが現在レンダリング中(アクティブ)であれば、即座にバックグラウンドで再取得されます。 import { useQuery, useQueryClient } from "@tanstack/react-query"; // QueryClient からコンテキスト取得 const queryClient = useQueryClient(); // キャッシュ内のすべてのクエリを無効化 queryClient.invalidateQueries(); // todos キーを持つ全てのクエリを無効化 queryClient.invalidateQueries({ queryKey: ["todos"] }); 注意点として、 invalidateQueries() はクエリのデータを stale にするだけであり、キャッシュを削除したり、 gc したりするわけではありません。 キャッシュを削除する場合、 removeQueries() を利用する必要があります。 ミューテーション時のクエリの無効化 TanStack Query を扱う上で最も挙動に振り回されるタイミングがミューテーション(更新、削除などの操作)後のレンダリングだと筆者は思います。 正直なところ、ここまでの説明は、この項目を説明するための長い前置きでした。 (本当に長くてすみません・・・。) ドキュメントとしては、以下を読んで終わりなのですが... https://tanstack.com/query/latest/docs/framework/react/guides/invalidations-from-mutations ドキュメントで扱われているサンプルコードを記載します。 import { useMutation, useQueryClient } from "@tanstack/react-query"; const queryClient = useQueryClient(); const mutation = useMutation({ mutationFn: addTodo, onSuccess: async () => { // パターン1: 単一のクエリのデータを無効化する場合 await queryClient.invalidateQueries({ queryKey: ["todos"] }); // パターン2: 複数のクエリのデータを無効化する場合 // ※ 実際はパターン1かパターン2のどちらかを使用します await Promise.all([ queryClient.invalidateQueries({ queryKey: ["todos"] }), queryClient.invalidateQueries({ queryKey: ["reminders"] }), ]); }, }); ミューテーション後に queryClient.invalidateQueries({ queryKey: ["todos"] }) を実行することで、キャッシュに保持しているクエリのデータを手動で無効化し、バックグラウンドで再取得が行われます。これにより、キャッシュのデータを最新の状態に更新できます。 この記述がない場合、キャッシュの更新が staleTime に依存するため、タイミングによってはミューテーションでデータを更新したにもかかわらず、画面の表示が古いままになることがあります。 ここまでで紹介したドキュメントに目を通した方なら、なぜ onSuccess のタイミングで、 queryClient.invalidateQueries({ queryKey: ['todos'] }) を実行しているのか?を正しく理解できると思います。 ただ、このドキュメントを読むだけだと正しい理解ができず、更にこのドキュメントでもそこまで触れられていない為、 useMutation を利用した後は、対応する queryKey を invalidateQueries() に記述するだけで終わってしまうのではないかと思います。 実際、筆者はそうでしたし、未だにプロジェクト内にはそういったコードが散在しています。 プロジェクト内でよく利用している QueryClient のメソッドの紹介 最後に、プロジェクト内でよく利用している QueryClient のメソッドを紹介します。 invalidateQueries queryClient.invalidateQueries({ queryKey: ["todos"] }); 指定したクエリキーのクエリを無効化し、キャッシュを stale にマークします。 キャッシュは即座に削除されません そのクエリを使用しているコンポーネントがアクティブな場合、バックグラウンドで再フェッチが自動的に実行されます 用途: データ更新後に関連するクエリを再取得させたいとき refetchQueries await queryClient.refetchQueries({ queryKey: ["todos"] }); 指定したクエリキーのクエリを即座に再フェッチします。 invalidateQueries とは異なり、アクティブなコンポーネントの有無に関係なく強制的に再取得 await で完了を待つことが必要 用途: 更新後に最新データが確実に取得されていることを保証したいとき removeQueries queryClient.removeQueries({ queryKey: ["todos"] }); 指定したクエリキーのキャッシュを完全に削除します。 キャッシュからデータが消えるため、次回アクセス時は新規フェッチが必要 用途: エンティティが削除された後など、キャッシュに残っていると問題になるケース setQueryData queryClient.setQueryData([`/v1/versions/${variables.id}`], data); 指定したクエリキーのキャッシュデータを直接書き換えます。 サーバーへのリクエストなしでキャッシュを更新 用途: Mutation の結果をそのままキャッシュに反映したいとき(楽観的更新など) まとめ TanStack Query というライブラリは処理を非常にシンプルに記述でき、ドキュメントをそこまで読まなくても利用できてしまうほど便利なライブラリです。 ただ、キャッシュ周辺に関しては、ある程度ドキュメントを読み込んで理解しておかないと、挙動に振り回されて、書かなくても良いようなコードを書いて、場当たり的な対応をしてしまうことになります。 この記事が TanStack Query のキャッシュ周辺で悩んでいる方の助けに少しでもなれば幸いです。 最後まで読んでいただきありがとうございました。 参考記事 https://tanstack.com/query/v5 https://tanstack.com/query/latest/docs/framework/react/guides/important-defaults https://tanstack.com/query/latest/docs/framework/react/guides/caching https://tanstack.com/query/latest/docs/framework/react/guides/query-keys https://tanstack.com/query/latest/docs/framework/react/guides/query-invalidation https://tanstack.com/query/latest/docs/framework/react/guides/invalidations-from-mutations https://tanstack.com/query/latest/docs/reference/QueryClient
アバター
はじめに KINTOテクノロジーズのデジタル戦略部DataOpsG所属の西です。 普段は社内のデータ分析基盤の開発・保守・運用を担当しています。 データガバナンスの一環としてのデータ分析基盤へのアクセス制御のため、AWS Lake Formation、その機能であるハイブリッドアクセスモードとLFタグを扱う機会がありました。 はじめてLake Formationを触ると、その仕様や用語を理解するだけでも大変だと思います。(自分は、なかなか苦労しました。) そのため本記事ではLake Formationの主要な概念や設定方法をご紹介します。 Data lake locations、Data permissions、Data locations、IAMAllowedPrincipalsについて ハイブリッドアクセスモードについて LFタグによるアクセス制御について ハイブリッドアクセスモード、LFタグによるアクセス制御の設定方法 :::message なお、本記事はGlue Data Catalog(以下、Glueデータカタログ)上のリソースに対するLake Formationのアクセス制御を前提として書かれています。 ::: またLake Formationを触って気づいた注意点として、下記を本稿後半の 注意点 に記します ハイブリッドアクセスモード運用における新規作成IAMロールの関係について ハイブリッドアクセスモードとCloudFormation Amazon Athenaビューへのアクセス制御 AWS Lake Formation データ分析基盤のデータカタログにGlueデータカタログを採用している場合、IAMポリシーやS3バケットポリシーよりもさらにきめ細かいアクセス制御を実施するには Lake Formationの導入検討が必要になると思います。 Lake Formation自体の詳細はAWSから出ている下記ドキュメントをあたってください。 デベロッパーガイド AWS Black Belt ← 個人的に、Lake Formationの概要を掴むのにわかりやすい資料でした Data lake locations Lake Formationでアクセス制御する対象を登録する機能 対象:S3パス 説明:ここに登録されたS3パス配下をLake Formationによるアクセス制御対象として登録する 例:Glueデータカタログ上のデータベースをアクセス制御したい場合、データベースのS3ロケーションはData lake locationsに登録されたS3パス配下である必要がある 注意点:ここにS3パスを登録するだけではLake Formationによるアクセス制御は実施されない Data locations 対象:プリンシパル ^1 とS3パス 説明:Glueデータカタログのデータベースやテーブルへの作成や変更の権限を付与する。ここで行う設定はデータロケーション(S3リソース)へのメタデータをプリンシパルに作成、変更する権限 Data permissions 対象:プリンシパル、Glueデータカタログのデータベースやテーブル 説明:下記のアクセス権限をプリンシパルに付与する データベースに対して Create Table、Alter、Update、Drop、Describe テーブルに対して Select、Insert、Delete、Describe、Alter、Drop 注意点: Data lake locationsの設定を事前におこなっておく メタデータを作成、変更する権限(Create Table/Alterなど)をData locationsで事前に設定しておく AWS Black Belt のP19,P20 がわかりやすいです。 IAMAllowedPrincipals IAMAllowedPrincipals について Lake Formation 許可のリファレンス に下記の通り説明があります。(2025/11) 「Lake Formation は、データカタログ内のすべてのデータベースとテーブルに対する Super アクセス許可を、デフォルトで IAMAllowedPrincipals というグループに設定します。このグループアクセス許可がデータベースまたはテーブルに存在する場合、アカウント内のすべてのプリンシパルが、 AWS Glueの IAM プリンシパルポリシーを介してリソースにアクセスできるようになります。」 IAMAllowedPrincipalsにSuper権限があるため、Lake Formationのデフォルト設定時では、GlueデータカタログリソースにIAMポリシーでアクセスが可能です。 Glueデータカタログのデータベースやテーブルのアクセス制御について、IAMポリシーでのアクセス制御からLake Formationでのアクセス制御に移行するには IAMAllowedPrincipalsの設定の排除が必要 それぞれのIAMプリンシパルに対して、Lake Formationでアクセス制御(メタデータ、データロケーションへの制御)を設定する 上記を実施する場合、既存IAMプリンシパルの棚卸が必要になります。 この棚卸に漏れがあると、GlueデータカタログのリソースにアクセスできないIAMプリンシパルが発生することに注意が必要です。 また、Lake Formationのアクセス制御を解除し元のIAMによるアクセス制御に戻す際は、手順の逆を実施することになります。 こちらにその手順とスクリプトが公開されています Using only IAM access controls ハイブリッドアクセスモード これまでの方式では、Lake Formationでアクセス制御を実施するには、IAMAllowedPrincipalsの設定を排除しLake Formationを設定する必要があります。(この方式はLake Formationモードと呼ばれます) 一方、ハイブリッドアクセスモードの場合はIAMAllowedPrincipalsが付与されていてもLake Formationのアクセス制御が優先されるため、IAMAllowedPrincipalsの設定を排除せずにLake Formationのアクセス制御を有効にできます。 つまり、IAMAllowedPrincipalsが付与されていてもLake Formationによる制御を強制的に⾏わせる機能です。そのため、上述のIAMプリンシパルの棚卸を行わずにLake Formationによるアクセス制御を有効にできます。 ハイブリッドアクセスモードの場合、下記が可能になります。 選択したリソースとプリンシパルについてLake Formationのアクセス制御を有効化(ハイブリッドアクセスモードのオプトイン) Lake Formationアクセス制御を解除するには、ハイブリッドアクセスモードのオプトインを解除する LFタグ Glueデータカタログのリソース(データベース、テーブル、カラム)にタグを割り当て、そのタグに基づいてプリンシパルにアクセス権限を付与するための機能です。 LFタグを定義(例: Key=Confidential, Value=True/False) リソースにLFタグを付与する プリンシパルに、LFタグに対するアクセス権を付与する LFタグを使うと、リソースとプリンシパル間の権限関係を疎結合に保つことができます。 LFタグを使わない場合、リソースとプリンシパル間で直接アクセス権を設定する必要があります。この場合、リソースやプリンシパルが増えると、アクセス権の管理が煩雑になります。 設定方法 以下、Lake FormationのハイブリッドアクセスモードとLFタグ方式によるアクセス制御の手順を記します。 前提条件 今回は、下記のペルソナのもとアクセス制御を実施したいと思います。 ペルソナとLFタグ ペルソナ 役割 対象IAMロール名 対象LFタグ 許可する権限 データレイク管理者 Lake Formationの操作権 lf-test-001 Confidential = True, False Super データユーザー 許可されたテーブルにアクセスできる lf-test-001-user Confidential = False Select、Describe 手順 Lake Formationでアクセス制御を実施するには、大まかには、下記を実施します。 データレイク管理者に登録する Glueデータカタログのメタデータへのアクセス制御のため、S3パスをData lake locationsに登録し、そのS3パスをLake Formationで制御可能状態にする Glueデータカタログのメタデータの作成の制御として、Data locationsの設定。これでテーブルのCreateやAlter権限をLake Formationで付与 LFタグの設定 Data lake administratorsの設定 Lake Formationの操作設定権をIAMロールに付与する Data lake administratorとして今回はlf-test-001というIAMロールをセットする Data lake locationsの設定 GlueデータカタログのデータベースのS3ロケーションを設定する Hybrid access modeを選択する Data locationsの設定 Data locationsの設定として、ハイブリッドアクセスモードでアクセス制御をしたいプリンシパルと制御対象のS3プレフィックスを登録する この制御対象のS3プレフィックスはGlueデータカタログのデータベースのうち、ハイブリッドアクセスモードでアクセス制御したいデータベースのS3ロケーションを設定している LFタグを作成 キーはConfidential、バリューはTrue、Falseを作成する LFタグへのアクセス権を設定 「Permissions」の「Data permissions」からアクセス権を設定します。 Lake Formationで権限を渡したいプリンシパルを選択する Lake Formationで管理したいLFタグを選択する 今回は、lf-test-001-userというIAMロールに対して、LFタグのキーがConfidentialでバリューがFalseにアクセス権を付与する Lake Formationで許可したいアクセス権を選択する lf-test-001-userはキーがConfidential、バリューがFalseのリソースに対して、データベースの場合Describeを付与、テーブルの場合Select、Describeを付与する LFタグを管理対象リソースに設定する 今回はconfidential というデータベースのtable_001、table_002 というテーブルに下表のようにLFタグを付与します。 データベース名 テーブル名 LFタグのキー名 LFタグのバリュー名 confidential table_001 Confidential True confidential table_002 Confidential False table_001にはキー=Confidentialのバリュー=True、table_002にはキー=Confidentialのバリュー=Falseを設定する ハイブリッドアクセスモードを有効化する 管理したいリソース(テーブル)を設定 今回はデータベースを設定しないため、データベースはIAMポリシーでのアクセス制御が継続される アクセス制御したいプリンシパルを設定 動作確認 アクセスさせないテーブルについて lf-test-001-user にスイッチロールするとConfidential=Trueであるtable_001はUI上から見えない confidential.table_001 へのクエリは失敗する アクセス許可しているテーブルについて Confidential=Falseであるtable_002 はUI上から見える confidential.table_002 へのクエリは成功する 解除手順 ハイブリッドアクセスモードをRemove(解除)することでLake Formationによるアクセス制御は解除される 注意点 最後にLake Formationを触ってみて気づいた注意点を書いておきます。 異なるキーのLFタグによるリソースへのアクセス制御はLFタグの AND条件ではなく OR条件になる 例:キーがConfidential=TrueのLFタグとキーがDepartment=SalesのLFタグが付与されたリソースに対しては、プリンシパルにキーがConfidential=TrueのLFタグへのアクセス権またはキーがDepartment=SalesのLFタグへのアクセス権を持つ場合、アクセス可能になる 運用時にはハイブリッドアクセスモードでは新規作成されたIAMロールには対応できない。Lake Formation管理者とIAM管理者が異なる場合、Lake Formation管理者が予期せぬIAMロールがGlueデータカタログにアクセスする可能性がある ハイブリッドアクセスモードのオプトイン操作はCloudFormationには現時点で非対応と思われる。 ハイブリッドアクセスモードのオプトインの実施(CreateLakeFormationOptIn)が必要だが、CloudFormationには現時点では見当たらない。 ^2 CloudFormationでリソースの作成後、下記が必要なのではないかと思われる。(今後の検証が必要) Lake FormationコンソールやAWS CLIなどでプリンシパルのオプトインの設定を行う CloudFormationのカスタムリソースを用いて、Lambda関数からCreateLakeFormationOptIn APIを実行する Athenaで作成したビューに対するアクセス制御は基礎となるテーブルの権限と一致させておく必要がある。そのためAthenaビューとテーブルのアクセス制御は同じものとなる ^3 ※1 データカタログビューを使うとテーブルとは異なるアクセス制御をビューに設定できる。 ^4 ※2 データカタログビューはハイブリッドアクセスモードのIAMAllowedPrincipalsを排除が不要という恩恵を受けられない ^5 データカタログビューの作成には下記が必要 データカタログビュー作成にはIAMAllowedPrincipalsのアクセス権限をビューの基のテーブルから外す テーブルが所属するデータベースからデフォルトで設定されている[Use only IAM access control for new databases] を外す データカタログビューを作成するIAMロールに対して、Lake Formationでビューの基のテーブルに対するアクセス権限を設定する あとがき Lake Formationを使うとGlueデータカタログのリソースに対してきめ細かいアクセス制御が可能になることは分かりました。 一方で、Lake Formation自体の理解と設定に学習コストがかかる印象を受けました。 そのためチーム内で知見を十分に共有できていないと、誰もアクセスできないリソースが発生しそれを解決できる人間がわずかしかいないという状況に陥りかねないと感じました。ドキュメントの整備、ハンズオンの実施などでチーム内の知見を高めることが重要と思います。 また、Lake Formation管理下のテーブルとビューのアクセス制御については、テーブルとビューで異なるアクセス制御を実施したい場合は注意が必要です。 既存のIAMロールの管理体制、Glueデータカタログの運用方法とLake Formationの仕様を十分に検証することが重要と思います。
アバター
この記事は KINTOテクノロジーズ Advent Calendar 2025 の12日目の記事です🎅🎄 はじめに my route のAndroidアプリを開発している 長谷川 です。 開発をしていると、何らかの理由でメンテナンス性を犠牲にしてしまうことってありますよね。「今動けばいいや」という感じで。 この記事では、アプリがローカルにデータを保存(永続化)する際に陥りがちな罠と、それを防ぐテスト手法を紹介します。ここでは例として Android を取り上げていますが、ローカル永続化を扱うあらゆるアプリケーションに共通する問題であり、同様のアプローチで対策できます。 ケーススタディ:チケット機能の実装 シンプルなチケットの永続化 とあるアプリの開発では、お得なチケット機能があります。チケットには以下のような情報があります。 data class Ticket( val id: String, val name: String, ) このチケットはオフラインでも使える必要があります。オフライン状態ではサーバーから情報を取得できないため、ローカルに永続化する必要があります。 AndroidのSQLiteデータベースを扱いやすくする Room ライブラリを使うと、シンプルなデータ構造なら、アノテーションをいくつかつけるだけで永続化することができます。 @Entity data class Ticket( @PrimaryKey val id: String, val name: String, ) 現実は複雑... しかし、実際のチケット情報はもっと複雑です。 価格情報 有効期限 利用条件 AndroidのRoom (SQLite) などのRDB (リレーショナルデータベース) では、このような複雑なオブジェクトをそのまま保存できません。通常は以下のような対応が必要です。 テーブル設計を工夫してリレーションを作る TypeConverter (複雑な型を基本型に変換する仕組み) を使って変換する しかし、これらの対応は結構大変です... 「あ〜、今はそんなこと考えている時間ないなぁ!」 楽な方法:全部JSONにする! そこで思いつくのが、 全部JSONにしてしまう という方法です。 // ビジネスロジックで使う実際のデータクラス @Serializable // kotlinx.serializationを使用 data class Ticket( val id: String, val name: String, // ... その他複雑なプロパティ (価格、有効期限など) ) // データベースに保存する用のクラス @Entity data class TicketForDB( @PrimaryKey val id: String, val json: String, // Ticketを丸ごとJSON文字列として格納 ) // 保存 fun write(ticket: Ticket) { db.write( TicketForDB( id = ticket.id, json = Json.encodeToString(ticket) // オブジェクト → JSON文字列 ) ) } // 復元 fun read(id: String): Ticket { val ticketForDB = db.read(id) return Json.decodeFromString<Ticket>(ticketForDB.json) // JSON文字列 → オブジェクト } やった〜!複雑なデータ構造を持つチケット情報を簡単に保存できた! この方法なら 複雑なTypeConverterを書く必要なし テーブル設計で悩まなくていい 開発スピードが速い 数ヶ月後...チケット機能の改善 時は流れ、新機能の開発が始まります。 「一つのチケットで複数人が利用できる機能を追加しよう!」 今までは一つのチケットで一人しか利用できませんでしたが、グループ利用に対応するため、 maxUsersPerTicket というパラメータを追加しました。 @Serializable data class Ticket( val id: String, val name: String, val maxUsersPerTicket: Int, // 追加! // ... その他のプロパティ ) やったね!これで便利な新機能も簡単に開発できた! テストも通ったし、リリース準備OK! リリース後、問題発生... リリース後しばらくして、 「クラッシュ報告が来ています!オフラインでチケットが使えないという問い合わせが多数...」 何が起きたのか? 原因は、 新しく追加した maxUsersPerTicket プロパティ です。 問題の流れ: [v1.0] チケット保存 {"id":"abc123", "name":"Sample Ticket"} ↓ [v2.0にアップデート] ↓ [復元を試みる] maxUsersPerTicketが必要だが、JSONにない ↓ クラッシュ! 永続化されたJSONには maxUsersPerTicket がありません。しかし、新しい Ticket クラスは maxUsersPerTicket を必須としています。JSONライブラリは値を決められず、エラーになります。 // この時、永続化されたJSONには maxUsersPerTicket が存在しない val ticket = Json.decodeFromString<Ticket>(json) // → Field 'maxUsersPerTicket' is required for type Ticket どうすれば良かったのか? 解決策1:RDBでリレーショナルモデリングを頑張る RDBはJSONとして保存するよりも、圧倒的に型に強いです。 丁寧にテーブル設計を行っていれば スキーマ変更時にRoomのコンパイルエラーで気づける 型安全性が保証される データの整合性を保ちやすい 一方でデメリットもあります。 複雑なデータ構造の表現が難しい (RDBは表形式) テーブル設計に時間がかかる TypeConverterやリレーションの管理が煩雑 将来的なメンテナンス性も不透明 → 準備が大変な割に、メンテナンス性が必ずしも高くなるとは限らない 解決策2:JSONを使いつつ、ユニットテストで安全性を確保する JSONの手軽さを維持しつつ、ユニットテストで問題を早期発見する方法です。 課題 将来の開発者 (または未来のあなた) が、何も知らずに Ticket のプロパティを追加/削除/変更しても気づけるようにするには? 解決方法 過去のJSON形式をテストで保存し、デシリアライズをテストする まず、現在のバージョンで保存されるJSONをfixtureファイル (テストで使う固定サンプルデータ) として保存します。 // fixture.json (テストリソースとして保存) { "id": "abc123", "name": "Sample Ticket" } テストコード 以下の2つのテストを追加します。 @Test fun `古いバージョンのJSONをデシリアライズできる`() { // 過去に永続化されたJSONが、現在のコードで読み込めることを保証 val jsonString = loadJson("fixture.json") val deserialized = runCatching { Json.decodeFromString<Ticket>(jsonString) } // 失敗したら、新しいプロパティに初期値が必要など、問題に気づける assert(deserialized.isSuccess) { "デシリアライズに失敗しました: ${deserialized.exceptionOrNull()}" } } @Test fun `デシリアライズ後に再シリアライズすると元のJSONと一致する`() { // fixtureファイルの更新漏れを検知 val jsonString = loadJson("fixture.json") val deserialized = Json.decodeFromString<Ticket>(jsonString) val serialized = Json.encodeToString(deserialized) // プロパティを削除したのにfixtureを更新していないケースなどを検知 assert(jsonString == serialized) { "JSONが一致しません。fixture.json の更新が必要かもしれません" } } このテストが守ってくれるもの 古いJSONとの互換性 :過去のバージョンのJSONが読み込めることを保証 fixtureの更新漏れ防止 :データ構造が変わったら気づける 実際にテストを動かしてみよう ケース1:プロパティを追加した場合 問題が発生した例と同じく、数ヶ月後、複数人利用機能が追加されたとします。 @Serializable data class Ticket( val id: String, val name: String, val maxUsersPerTicket: Int, // 追加 ) 先ほどのユニットテストを実行してみます。使用しているJSONライブラリにもよりますが、概ね以下のようなエラーでテストが落ちます。 Field 'maxUsersPerTicket' is required これで将来の開発者やAIはこのデータクラスが永続化されていて、追加されるパラメータには初期値が必要なことが分かります。なぜならすでに永続化されたデータには新しい値が当然考慮されていないからです。 次にプロパティの名前が変更されたとします。 ある開発者がnameという名前は抽象的だ!と言い出して、 displayName に変更しました。 @Serializable data class Ticket( val id: String, val displayName: String, // 変更 ) 先ほどのユニットテストを実行してみます。同じように以下のようなエラーにより、問題に気づくことができます。 Field 'displayName' is required 次に、Ticketから名前が不要になりました。 @Serializable data class Ticket( val id: String, // val displayName: String, // 削除 ) たいていのプロジェクトではJSONライブラリの設定で、 ignoreUnknownKeys のような、知らない値が来たら無視するための設定を有効にしていることが多いと思います。 したがってこれによるクラッシュが発生することは少ないでしょう。 しかし永続化されているであろうfixtureファイルの更新を漏らしたくないです。 先ほどのユニットテストを実行してみます。 以下のようなエラーにより、fixtureファイルの更新漏れを防ぐことができるでしょう。 "JSONが一致しません。fixture.json の更新が必要かもしれません" (上記のテストではどのプロパティに差分があるかまでは分からないので、実際にはobjectとして比較する案が考えられる) まとめ 本記事では、永続化したデータを安全に扱うためのテスト手法を紹介しました。 今日から始められること 現在永続化しているデータのJSON例をfixtureとして保存 そのJSONをデシリアライズするテストを書く CIに組み込む 一度ユーザーの端末に保存されたデータは、簡単には消せません。それは「技術的負債」になりやすい部分ですが、裏を返せば、ここを堅牢に保つことこそがアプリの長期的な信頼性に繋がります。 また、今回紹介したFixtureを用いたテストは、 JSONライブラリの置き換え (例:GsonからMoshi/Kotlin Serializationへの移行) などにおいても極めて強力な武器になります。同じFixtureに対してテストが通れば、ライブラリや環境が変わっても「以前と同じようにデータを復元できる」ことが保証されるからです。 「今動くコード」を書くのは当然として、私たちはそこから一歩進んで、「ライブラリが変わっても、担当者が変わっても、少しでも安全に動き続けるコード」を残せるエンジニアでありたいものです。
アバター
この記事は KINTOテクノロジーズ Advent Calendar 2025 の15日目の記事です🎅🎄 こんにちは。KINTOテクノロジーズ株式会社でQAエンジニアをしているおおしまです。今回は、51歳の私が今年一年間、AIに助けてもらいながら業務に向き合ってきた経験と、その活用の仕方についてご紹介します。ほぼ自分語りになりますが、お付き合いいただければ幸いです。 前提:AI推進の機運と現場の課題に挟まれて — 51歳からの挑戦 私の勤務するKINTOテクノロジーズでは、会社全体としてAI活用を強く推進する機運があり、専門部署の設立や数多くの研修機会の提供、社内環境の整備・アップデートなど、非常に恵まれた環境が整っています。そんな状況に身を置くと、 「使わない手はない」という気持ちになる のは自然なことでした。 一方、私がメインで担当していた案件は、既存Webサービスの改善や機能追加を小さな単位で素早くリリースするものでした。規模は大きくありませんが、短期間で高品質を求められる開発・テストは常に厳しく、キャッチアップに苦労する日々。 自動化や仕様整理の効率化は必須であり、AIはそれを支える重要な道具 という認識は持っていました。 黎明期:まずは触ってみる — AIとの距離を縮めたきっかけ 昨年までは公私ともにAIに触れる機会はほとんどありませんでしたが、社内の機運もあり「学んで使えるようになりたい」という漠然とした思いはありました。そんな中、外部講師によるAI研修を受けたことが大きな転機になります。 研修は初歩的な内容でしたが、印象に残ったのは「毎日プロンプトを書いてAIと触れる」という講師のアドバイスでした。世の中の大きな成果を見上げるのではなく、少しずつでも使うことを習慣化する。これが私の中で「スモールスタートでも継続する」という意識に変わった瞬間でした。 この時期はまだ実務とは関係ない形で、 AIと仲良くなるための時間を過ごして いました。 習熟期:現場の必然に応える — 短納期対応でのAI活用模索 最初は業務無関係にプロンプトを書いて、期待通りの答えなのか質問の仕方が悪いのかといった試行錯誤をしていました。そのうち実業務で効率化できないかと抱えてきた課題について、小規模なものからAIで解決できないか試すようになったのが研修から3か月ほど経過したくらいです。 それまでは実務ではAIは全く活用していませんでしたが、このくらいならできそうという感触を実務での困りごとの解決に生かすように仕向けてみました。 結果としてはいろいろできそうという感触がありつつ、 まだ実戦投入にはしんどい状態 というのがこの時期です(案件内容によっては現在もこの状態です)。 開花期:自動化の可能性を掴む — コード生成とプロセス変革 今年9月、社内では「Vibe Coding Challenge」という企画が行われました(詳細は 別のテックブログ記事 で紹介しています)。QAというコーディングが主業務ではない私たちにとっても、この企画は業務の進め方を発展させるきっかけになりました。 具体的には、テスト実施やデータ作成に必要な自動化コード生成でAIが大いに役立ちました。 これが出来たらいいなと願いがありながらスキル不足でできなかったこれらの作業をAIの助力であっさりクリアできたこと。これまでマニュアルテストで確認していたもののうち 自動で置き換えできる領域の拡大可能性が見えた ことが大きな成果でした。 適応期:実戦投入と成果 — 高頻度リリース現場でのAI活用 可能性が見えてきた一方、現場のスケジュールは相変わらず厳しく、むしろ以前よりタスク量は増加。期間延長はできない中で、もうAIに頼らざるを得ない状況でした。 とはいえ、まだ社内コンセンサスが十分ではないため、従来の手法で検証を行いながら、AIによる自動テストでカバーできる部分を徐々に増やす方針を採用しました。 案件詳細はお伝えできませんが、これまで「5車種を3日間で確認」していたペースを、AI活用によって「5日間で60車種以上」をこなすことに成功。今後も続いていく同種の案件では、この成功をベースにより効率的な進行が可能となり、 大きな成功体験 になりました。 展開期:情報共有と発信 — 知見を広げる挑戦 得られた知見はまずQAグループでの定例ミーティングで共有していきました。その後、社内外の勉強会で複数回登壇して成果を外部発信する機会をいただきました。まだまだ先を走る人から見ると小さな成果かもしれませんが、 他社エンジニアとの交流から新しいアイデアを得られたのは大きな収穫 でした。 2025年登壇イベント一覧 日時とイベント名 登壇タイトル 内容 3月27日 JaSST Tokyo QA作業における生成AI活用事例 SpeakerDeck ※弊社ブース前でのミニセッションでプログラムには記載なし 9月24日 CO-LAB Tech Night vol.3 生成AIを自動テストに活用していくための試行錯誤と見えたもの — 11月14日 TokyoTestFest Claude Code × Playwright環境で自然言語による指示のみでフロントエンドテストを自動実行できた話 ※弊社ブース前でのミニセッションでプログラムには記載なし 11月20日 AI時代の開発現場 — 成功と失敗のリアル共有会 Claude Code × Playwright環境で自然言語による指示のみでフロントエンドテストを自動実行できた話 SpeakerDeck ※11/14とほぼ同じ 登壇機会が多かった理由としては会社がシンポジウムのスポンサーになったり、勤務先のOsaka Tech Labにイベントスペースがあって会場として多くの勉強会が開催されたりしたことが大きな助けになりました。そのほか、稚拙な内容ながらも恥を忍んで登壇できたのは、50歳を超えた厚かましさのおかげかもしれません。 終わりに:未来への展望 — AI4QAからQA4AIへ、次の挑戦 今年の取り組みは、とある勉強会で知ることになった今風の用語をお借りして「AI4QA:QA業務にAIを活用」の実現となります。一部できつつあるものの、まだまだ完成には程遠い出来というところも実感しています。この取り組みは来年以降も継続していきます。 その一方で、「QA4AI:AIに対してQAする」も世間的には進んできているようです。弊社でも各サービスや製品をAI活用を前面に押したものが増えるのではないかと想像しています。となると、これまで個人的には想定していなかったAI自体に立ち向かう時代も遠くないと感じています。 これはAI4QA以上の難関で、何をすればいいのかも見当が付きません。ただ、QA4AIが求められるのは、厳しくしんどい仕事である一方、51歳の私でも伸びしろを感じられる刺激的な面がある楽しみもあります。 とはいえ、自分自身の向上も大事ですが、エンジニアの仕事はいいサービス・製品を提供することが第一です。AI4QAでこれまで出来なかったことの実現や時間がかかったことが短縮できた成果を広げていくことは大事ですが、効率化による時間的・精神的余白が出来たことで人間だからできる品質向上への貢献ができれば、高速リリースの時代でもお客様に満足していただけるリリースに貢献できるのではと思います。 今年はこれまで触れる機会がなかったAIにある程度向き合うことができました。来年以降もしっかり向き合っていきたいと思います。
アバター
Introduction Hello. I'm Sato, a frontend developer at KINTO Technologies Corporation (KTC). In this article, I'd like to introduce my team developing a website for KINTO used vehicles, sharing how we proceed with the development and how our team structure looks like. I recently started using a sun umbrella for the first time in my life. For learning more about myself, please check here What Is the KINTO Used Vehicle Website Development Team? In general, when you sign up with KINTO, a subscription with a new vehicle is started. At the end of the subscription, you need to return the vehicle. Our team mainly work on developing and operating KINTO used vehicles (only in Japanese) , a website that sells the returned vehicles as used vehicle subscriptions online. A major difference of the e-commerce site from the one for KINTO new vehicles is that vehicle inventory fluctuates daily as used vehicles are basically one-of-a-kind items sold on a first-come, first-served basis. We implement e-commerce-specific initiatives and approaches, considering how to display inventory and recommendation sections, which is very worthwhile. Team Structure (as of November 2025) One product manager One producer Five frontend engineers Eight backend engineers Team Atmosphere My team members working at our office Our frontend (FE) team, backend (BE) team, and contract partners are able to communicate casually without barriers and freely share opinions. Since we're close to the business teams related to used vehicles, I think we are in the mindset of sharing opinions and growing the used vehicle e-commerce site together! Sometimes people from other divisions join our regular project meetings, giving very pleasant comments like, "This meeting has a really great atmosphere." **Introducing Some Team Members!** Some of our used vehicle frontend team members have written articles, so please check them out too! NAKAHARA Yuki Loves cheering for soccer Boosting work efficiency with his custom-built keyboard! NAKAHARA Yuki's article (below) Website Image Optimization with Lambda@Edge & Next.js ![Ren.M](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/minakawa.png) Ren.M - Basketball club captain! Shining as a point guard - When it comes to iPhone, the high-end model is the best! - Ren.M's articles (below) - [Introduction to TypeScript](/posts/2024-04-10-TypeScript入門/) - [Introducing In-House Club Activities: Basketball Club](/posts/2024-09-26-社内部活動紹介-バスケ部編/) Project Team Structure The used vehicle e-commerce site is developed and operated by KTC members in different teams. Team Role Affiliation Used vehicle business team Business owner KINTO Corporation Used vehicle site development team Handles all development KTC Creative team Handles project direction and website design KTC Analytics Team Manages numbers of website access and CVR KTC :::message Did you know the role of KINTO Technologies (KTC)? ::: KTC is a tech company founded to drive mobility services developed by companies in the Toyota Group using diverse technologies and our creativity. It handles in-house development of KINTO, which is one of Toyota's mobility services. By dividing business domains into two organization—KINTO Corporations (KINTO’s service operation domain) and KTC (KINTO’s development domain)—and working together, we are able to leverage each other's strength. How We Develop Products In developing the used vehicle e-commerce site, we determine what to do based on regular project meetings, and we growth hack the website through running PDCA cycles using the HCD development methodology. We proceed with the development in four different teams led by the business team, and everyone shares opinions while developing with a sense of ownership. What Is HCD? User testing is underway HCD stands for Human Centered Design, a methodology that focuses on understanding user needs and how to translate them into products. We, the used vehicle team, specifically conduct surveys and user testing, organize website improvement points and user demands to make a better e-commerce site. User testing involves communicating with users about what they're thinking while operating the website, which helps us to explore unexpected insights and is a very valuable experience for the website developers as well. Example of How We Proceed PDCA Cycle Content Responsible Team Plan Set goals and improvement plans based on analytics team reports, customer feedback, and achievements as a commercialized project Everyone shares opinions to make decisions on structure, design, etc. (repeat the above activities several times until we finalized the project) ・Used vehicle business ・Used vehicle development ・Creative ・Analytics Do Development to release ・Development Check Check metrics Discuss results ・Used vehicle business ・Used vehicle development ・Creative ・Analytics Action Plan next steps based on checked points, if needed ・Used vehicle business ・Used vehicle development ・Creative ・Analytics Regular Project Meetings Project members attending regular business meeting In weekly meetings, we share information with the used vehicle business team while discussing improvements and considering service expansion. The used vehicle business team, creative team, and analytics team attend meetings from their own working positions. I personally like how Kitahata-san from the used vehicle business team facilitates—there's no formal icebreaker segment, but he keep things running in a great atmosphere throughout. For more about Kitahata-san, see here The regular meeting agenda is structured like this: Updates from individual teams Used vehicle business Used vehicle development Analytics Creative Topics Planning improvement measures based on inquiries received Proposing ideas on what we want to do Sharing results of initiatives, etc. Development Team Initiatives We implement various initiatives alongside development. Recently, we've been actively adopting AI-powered development and using the external service Findy Team+ to improve our development process. Item Details AI-related ・Devin  ・Minor fixes, document creation, etc. ・Copilot  ・Source code review  ・Implementation assistance ・RCA (Root Cause Analysis)  ・AI-powered critical alert root cause analysis Internal development meetings ・Scrum events ・Study sessions ・Pair programming Development process improvement ・Findy Team+ ・Process improvements related to code review Interview I, Sato, interviewed some of members involved with the e-commerce site development. ![開発FEリーダー佐藤](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/sato.png) Sato, leader of the development FE team "Nobe-san, it's been about 3 months since you joined. What are your impressions of the used vehicle website development team?" ![開発P野辺](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/nobe.png) Nobe, producer of the development team "By participating in various development meetings, I was particularly impressed that everyone speaks up and thought that this is an environment allowing everyone to share opinions." "And I could feel that opinions are quickly adopted, and everyone wants to make things better together." ![開発FEリーダー佐藤](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/sato.png) Sato, leader of the development FE team "Thank you. I'm very grateful that you've already shared your opinions and made many improvement suggestions." "How are things going with the BE team lately, Kaneda-san?" ![開発BE(リーダー)金田](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/kaneda.png) Kaneda, leader of the development BE team "Well, the BE team is also trying to boost productivity and holding study sessions to raise the skill level of team members." "Recently, we've been focusing on domain-driven development." ![開発FEリーダー佐藤](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/sato.png) Sato, leader of the development FE team "Thank you. The BE team's initiatives and success stories that you share are always helpful for my FE team’s improvements too." "I'd like us to enhance our products as a whole team, regardless of FE or BE." "Let's also talk with Kitahata-san from the used vehicle business team. What do you think about the used vehicle website development structure?" ![中古車ビジネスチーム北畑](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/kitahata.png) Kitahata, member of the used vehicle business team "I always feel that new features are released at a good pace and progress are being made daily. The style of 'just try it first and run PDCA' feels like a very good match for us." "What's great about this project team is that anyone can say anything regardless of job title or position. The development side often proposes things we, the business side, never thought of, and it feels like we're all doing business together." ![開発FEリーダー佐藤](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/sato.png) Sato, leader of the development FE team "Thank you. I also feel that each team is united in development and operations." "I'd like to continue increasing KINTO fans one by one." "Finally, a question for Mizuuchi-san, our product manager. What do you expect from the development team?" ![開発PDM水内](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/mizuuchi_1.png) Mizuuchi, product manager of the development team "It's not just about doing development. We discuss in meetings how to improve the website, expecting the service to grow in mind. That's why I want project members to speak up and make the website even better." "As an ideal way of working, I don't intend to fix a role, like 'this is your job,' so I want people to proactively do what they can and what they notice for any improvements." "Technology is a means of achieving what you want to do, so I want the members who can develop with a service-first mindset rather than technology-first. We bring members with that perspective in mind." ![開発FEリーダー佐藤](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/sato.png) Sato, leader of the development FE team "So it is ideal that we have members who are service-first and can develop proactively." "I also thought this is an important perspective in terms of growing all services in KTC. Thank you." In Closing I hope this has given you at least a glimpse of how we develop the used vehicle e-commerce site and the atmosphere of our team. We've also introduced our team atmosphere and processes here! If you're interested, please read it, which makes me very happy. A Development Culture That Starts with "Let's Just Try It." The KINTO Used vehicle Team Talks About the Driving Force and Flexibility Behind the Scenes (only in Japanese)
アバター
はじめに こんにちは。KINTOテクノロジーズ株式会社(以下、KTC)でフロントエンド開発をしている佐藤です。 この記事では私が属しているKINTO中古車サイト開発チームについて紹介させていただきます。 主に開発の進め方や体制などをお伝えできればと思います。 最近日傘デビューしました。佐藤について詳しくは こちら KINTO中古車サイト開発チームって? 通常KINTOで契約すると新車でサブスク開始となり その後契約終了するとその車両が返却されます。 返却された車両を中古車のKINTOとして 再びEC販売する「 KINTO 中古車 」のプロダクトを 開発、運用をメインとしているチームです。 「KINTO 新車」と大きく違うポイントとして、 中古車は基本的に早い物勝ちの一点物商品となりますので 日々在庫変動があるECサイトとなります。 在庫の見せ方、おすすめコーナーなど ECサイトならではの施策や打ち出し方がやりがいの一つでもあります。 チーム内体制(2025年11月時点) プロダクトマネージャー 1名 プロデューサー 1名 フロントエンドエンジニア 5名 バックエンドエンジニア 8名 チームの雰囲気 チームの様子 フロントエンド(FE)、バックエンド(BE)チーム、業務委託のパートナーさんとも 垣根なく気軽に会話コミュニケーション、意見が言い合える雰囲気です。 また中古車のビジネスチームとも距離が近く、 意見を言ったり一緒に中古車サイトを育てていこう!という気持ちで 皆同じ方向を向いていると思います。 たまに他部署の方がビジネス定例会議に参加される事があるのですが、 「非常に雰囲気の良い会議ですね」のようなありがたいお言葉を 耳にすることもあり嬉しい限りです。 **チームメンバーを一部ご紹介!** 中古車フロントエンドのチームメンバーが執筆した記事もありますので ぜひこちらもチェックしてみてください! NAKAHARA Yuki サッカーの応援が大好き 自作キーボードで作業効率UP! NAKAHARA Yukiさんの記事↓↓ Lambda@Edge & Next.jsによるサイト画像最適化 ![Ren.M](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/minakawa.png) Ren.M - バスケ部部長!ポイントガードで輝いています - iPhoneはハイエンド機種に限る! - Ren.Mさんの記事↓↓ - [TypeScript入門](/posts/2024-04-10-TypeScript入門/) - [社内部活動紹介-バスケ部編-](/posts/2024-09-26-社内部活動紹介-バスケ部編/) 体制 中古車サイトは様々なステークホルダーと 関わりながら運用されています。 チーム 役割 所属 中古車ビジネスチーム ビジネスオーナー 株式会社KINTO 中古車サイト開発チーム 開発全般を担当 株式会社KINTOテクノロジーズ クリエイティブチーム ディレクションやサイトデザインを担当 株式会社KINTOテクノロジーズ 分析チーム アクセス数やCVRなどを管理 株式会社KINTOテクノロジーズ :::message 豆知識「KINTOテクノロジーズ(KTC)の役割」 ::: KTCはトヨタグループ各社が展開するモビリティサービスをテクノロジーとクリエイティビティでリードするために創設されたテックカンパニーです。KINTOもトヨタモビリティサービスの一つとして、KTCが内製開発を担っています。 KINTO(KINTOの運営領域)、KTC(KINTOの開発領域)と 専門領域を分担し協業することによって強みを活かしております。 開発の進め方 中古車サイトの開発ではビジネス定例を軸としてやることを決めていき、 HCDという開発手法を元にPDCAのサイクルでECサイトをグロースハックしています。 ビジネスチームを中心とした4チームで進めており、 皆で意見を出し合いながら主体性を持って開発しております。 HCDとは ユーザーテストの様子 人間中心設計(Human Centered Designの略称)のことを指し、 ユーザーのニーズを理解し、 どうやって製品に反映させるかを中心に設計する手法となります。 中古車チームでは 具体的に実際にアンケートやユーザーテストを行い、 サイトの改善点、ユーザーの欲求などを整理して改善に繋げています。 ユーザーテストは何を思って操作しているかなど、 コミュニケーションをとりながら実施するので 予想外な気づきがあったり 開発者としても非常によい経験となっております。 進め方の例 PDCAサイクル 内容 担当チーム Plan(計画) 分析チームのレポートやお客様の声、 ビジネスとして実現した事などを元に目標、 改善案などを設定 皆で意見出し合い、構成、デザインなどを決めていく (fixするまで何度か繰り返す) ・中古車ビジネス ・中古車開発 ・クリエイティブ ・分析 Do(実行) 開発〜リリース ・開発 Check(評価) 数値をチェック 結果の議論 ・中古車ビジネス ・中古車開発 ・クリエイティブ ・分析 Action(改善) 評価を元に必要であれば次の計画へ ・中古車ビジネス ・中古車開発 ・クリエイティブ ・分析 ビジネス定例 ビジネス定例の様子 週次ミーティングで中古車ビジネスチームと情報共有をしつつ、 改善の相談やサービス拡大の対応を検討しています。 中古車ビジネスチーム、クリエイティブチーム、分析チームがあり ミーティングではそれぞれの立場で参加しています。 中古車ビジネスチーム北畑さんのファシリテートが私は好きで アイスブレイクなど形式張ったコーナーはないのですが 終始とても良い雰囲気で進行してくださります。 北畑さんについては こちら 定例はこのようなアジェンダ構成になります。 各チーム共有 中古車ビジネス 中古車開発 分析 クリエイティブ トピックス 問い合わせがあった内容をもとに改善策を皆で考える やりたい事の相談 施策の結果など 開発チームでの取り組み 開発に伴い、さまざまな取り組みを実施しています。 最近ではAIを使った開発や 外部サービスのFindy Team+を活用した開発プロセスの改善など を積極的に取り入れています。 項目 詳細 AI関係 ・Devin  ・軽微な修正や、資料作成など ・Copilot  ・ソースコードレビュー  ・実装の補佐 ・RCA(Root Cause Analysis)  ・AIによるクリティカルアラート原因分析 開発内部定例 ・スクラムイベント ・勉強会 ・ペアプロ 開発プロセス改善 ・Findy Team+ ・コードレビュー周りのプロセス改善 インタビュー 私、佐藤が関係者にインタビューしてみました。 ![開発FEリーダー佐藤](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/sato.png) 開発FEリーダー佐藤 「野辺さん入社して3ヶ月ほど経ちましたが中古車サイト開発チームについて感じた事などありますか?」 ![開発P野辺](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/nobe.png) 開発P野辺 「各開発定例に参加させていただき、皆発言していて意見が言いやすい環境なんだなと特に印象的に感じました」 「そしてすぐ意見を取り入れ皆でよくしていこうという気持ちが伝わってきましたね」 ![開発FEリーダー佐藤](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/sato.png) 開発FEリーダー佐藤 「ありがとうございます。野辺さんからも早速ご意見いただいたり、改善の提案をたくさんいただいているので非常に感謝しています」 「BEチームの最近はいかがでしょうか?金田さん」 ![開発BE(リーダー)金田](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/kaneda.png) 開発BE(リーダー)金田 「そうですね、BEチームも生産性アップの試みや勉強会なども開催し、チームメンバーのスキル底上げをしていますね」 「最近だとドメイン駆動開発に注力しています」 ![開発FEリーダー佐藤](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/sato.png) 開発FEリーダー佐藤 「ありがとうございます。いつもBEチームの取り組みや成功事例などご共有していただきFEチームの改善にも参考になっております」 「FE、BE問わずチーム全体としてよりよくしていきたいですね」 「中古車ビジネスチーム北畑さんともお話ししてみましょう。中古車サイトの開発体制についていかがでしょうか?」 ![中古車ビジネスチーム北畑](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/kitahata.png) 中古車ビジネスチーム北畑 「いつもテンポよく新しい機能などがリリースされ日々改善されていく事を実感しています。まずやってみてPDCAを回すスタイルは我々にとって非常にマッチしたやり方だと感じています」 「職責や役職に関係なく、誰が何を言ってもよいのがこのチームの良いところです。ビジネス側で思いもつかなかったことを開発側が提案してくれることも多く、皆でビジネスをしている感覚です」 ![開発FEリーダー佐藤](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/sato.png) 開発FEリーダー佐藤 「ありがとうございます。それぞれのチームが一丸となって開発、運用ができていると私自身も感じております」 「引き続きKINTOのファンを一人でも増やしていきたいですね」 「最後にPDM水内さんに質問です。開発チームに期待していることはどんな事ですか?」 ![開発PDM水内](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/mizuuchi_1.png) 開発PDM水内 「開発だけやっていればいいわけではなく、サービスが成長することを念頭にサイトをどう改善していくかをミーティングで会話している。そのためメンバーにも発言してもらってより良いサイトにしていきたい」 「理想の働き方として、あなたの業務はこれですと決めるつもりはないので各自出来ること、気づいたことを自発的にやってもらいたいです」 「技術はやりたいことを叶えるための手段なので技術ファーストではなく、サービスファーストで開発できるメンバーであってほしいです。その観点でメンバーを採用しています」 ![開発FEリーダー佐藤](/assets/blog/authors/Keita.S/2025-10-20-UpTeamWebsiteImprovement/sato.png) 開発FEリーダー佐藤 「サービスファーストであり、自発的に開発できる方が理想なのですね」 「私も自社サービスを育てていくという意味で重要な視点だと思いました。ありがとうございます」 さいごに 少しでも中古車サイトの開発の進め方や雰囲気が伝われば幸いです。 また他にもチームの雰囲気や進め方などこちらでもご紹介しております! ご興味のある方はぜひ一度読んでいただけると幸いです。 “とりあえずやってみる”から始まる開発文化。KINTO 中古車チームが語る、推進力と柔軟性の裏側
アバター
こんにちは。プラットフォームGでPlatformEngineeringの考え方をベースにツール周りの開発・運用・展開の役割(とエンジニアリングマネージャーと本格的にアプリケーション開発もやり始めて、よくわからなくなった) 島村 です。 この記事は KINTOテクノロジーズアドベントカレンダー2025 の14日目の記事です🎅🎄 社内モニタリング基盤をリプレイスするにあたって、ECSやManagedServiceではなく、EKS上に構築した話についてお話しをします。 背景 弊社では元々、 社内モニタリング基盤 OpenSearch (Log + Alert + Visualization) Managed Prometheus (Metrics) Managed Grafana (Alert + Visualization) X-Ray (Trace + Visualization) SaaS NewRelic (ALL) となっていました。基本、そんなに監視運用レベルが求められないものはモニタリング基盤、ガッツリ色々見たい+関連サービスがあるものはNewRelicというような感じです。 OpenSearchについては、本当はバージョン追従をするべきなんですが、古いままで運用し、 2025/11についにEOLになりました。 コストや運用の手間を減らす目的と、AIのベクトルストアで使えるか確認のため、Serverlessの検証なども行ったんですが、「確認の際に横断的に見えないというのは課題だ」、ということで、全体的な刷新を行うことにしました。 合わせて、RCA(RootCauseAnalysis)の情報取得元としても使いやすくしようということで、関連プロジェクトとしてプロジェクト化しました。 (RCAの概要はこちらのイベントのLT参照) まずはStackを決める まず、弊社のワークロードの基本構成はECS+Fargateです。AWS上に環境を作る場合、PackModuleと呼ばれているTerraformのモジュール群があります。→ 過去参考動画 なので、ECSをベースに考えたのですが、制限事項も多いことから、まずは求められること(要件)を整理しました。 したいこと 横断的にLog/Metrics/Traceが可視化できること (リソース、ライセンス的に)安価であること 切り替えが容易であること Fluentbitでログを、AdotCollectorでMetrics/Traceを転送している部分を大きく変更しない。 永続ログはS3に保存できること モニタリング基盤から保存ではなく、途中でAWSコンポーネントからの転送でもOK NewRelicより可能なら長く検索できる期間があること 特に、2番目については、NewRelicというSaaSツールも既にありますから、使用するアプリケーションユーザ側の予算的に今までより高価になると意味がありませんでした。 しないこと こちらも重要だと思います。最低限必要なものを整理して、あれもこれも…とやると時間と手間が増えます。 AWSのアカウントは既存と同じにする 運用アカウント分割を過去は検討したが、現状ではやらない CloudInfraチームやSCoEなど、アカウント増やすなら関係各所が増えるのと、アカウント自体のセキュリティールールの運用のため Profile可視化(Pyroscope) アプリケーション担当者へのトランスファーや運用手順が増える S3にある永続ログを検索できるように戻したりとかはしない 生成AI周りの監視基盤 最終的にはLangFuseが生えましたが、最初の時点ではスコープ外 決まったこと 使うOSS 名称 機能 概要 Loki Log保存 ログ保存。OpenSearchのOSSやElasticも悩みましたが、全体揃ってるので基本GrafanaLabs系で統一 Tempo Trace保存 トレース保存 Grafana 可視化 各種可視化とアラート。Grafanaの構築単位は任意のアプリ群にしました Alloy AWSログ転送 Lambda/WAF/RDS系のログがKinesisFirehose(HTTP)からAlloyを経由してLokiに転送 Thanos Metrics保存 Mimirではなくこちらで。メンバーのナレッジがあったため 自作Logger AWSログ転送 ALB/Cloudfrontの、S3にしか出力できないログの転送用。現行はLogStashを使用 ArgoCD GitOps GitOpsのためこちらを選択 制限事項 Thanos/MimirともにNFSをサポートしてないので、ECS+Fargateだと厳しい CNDW2025でLokiをECS+Fargateで構築した人がいらっしゃったんですけど、コンポーネントとか考慮点が多い Grafana系だとLoki以外はDockerでのDeploy手順が公式でサポートされていない Prod環境だとHelmかTankaでのデプロイメントが推奨 あ、EKSで動かすしか無いか… もともと、EKSはアプリケーション要件があれば導入を検討しようという話もありました。そのため、ちょうど良い機会としてEKSを実行サービスとして決めました。ただ、Webアプリケーションを動かしているワークロードについてはECSのままとしています。 PlatformEngineeringTeamとして、CICDのテンプレートやその他ツール群を提供していますが、アプリケーション部門にEKSを提供するメリットがあまり見えなかったことと、提供のための各種修正を考慮した結果です。 構成 ※NewRelic経路は変わらないので割愛 AWSコンポーネント この時点で、ちょうどEKSにAutoModeが発表されました。制限事項の1つ目のEFSの対応という点では、EKS+Fargateでも対応不可だったので、AutoModeを使ってみようということになりました。 AutoModeでも、ARM64を指定した設定ができ、起動するEC2のインスタンスが安価になるので、構築後にArmアーキテクチャのNodePoolを設定しています。 EKS構築以外の新モニタリング基盤の推進に向けたおしごと PackModuleの修正 最初の方 にあった、Moduleの修正です。 意識しないと移行しない(=Default値が変わらないようにする)形で修正しました。 KinesisFirehose(HTTPエンドポイント向け)のModule作成 Backupの取得をALLにしてS3へ保存( 要件4 に関連する) 呼び出す各コンポーネントModuleの修正 Lambda WAF RDS セキュリティー調整 Firehoseですが、VPC内部に作成されないので、Alloyの前段のALBにインターネット経由での通信経路となります。その場合、さすがに認証認可もなしでALBにログを送るのもNGでしたので、Headerでの認証を追加しました。 構築時にSecretManagerにKEYを保存して、Firehoseからはそれを付与して送信。ALBではその値とマッチしているか?と確認しています。 コンテナの脆弱性を検知する仕組みをECR+通知で作っており、DockerHubから直接呼び出さずに、ECRに一時的に保管する運用も行なっています。が、かなり運用負荷が高いので、どうにかしたいのが課題となっています。 移行のお願い 一番泥臭く、CustomerSuccessEngineerチーム(CSE)が各担当にお声がけをしてチケットを切って管理する形で行なっています。一部は開発タスク優先で期限からはみ出ましたが、多くのプロダクトはありがたいことに協力いただき、年内での切り替えを想定しています。 アプリケーションの担当者の変更作業としては Fluentbitの使用バージョンの変更(LokiPlugin向け) 各種Configの修正 AdotCollector ECS TaskDefinition こちらは、PlatformGでConfluenceに作業手順を準備して、提供しています。 Firehoseなどの切替は、アプリケーション担当者と日程を調整し、PlatformGとCloudInfraGでTerraformの修正という形で行なっています。 おまけ アカウント分割の対応 移行中ではあるんですが、社内のAWSアカウントの最適化が進んでおり、そちらの変更反映も実施する予定です。 ただ、EKSの前にはNLB/ALBを挟んでいるため、VPCPeeringかVPCEndpointによる対応で済む見込みです。 (´・ω・) 運用アカウントに分割する日は、何時来るのかな LLM監視や追加機能のデプロイ RCAのためのLangFuse、実行時間やメモリなどの関係からCode分析機能がLambdaをやめてEKS上に移行、AWSメトリクス収集のための YACE のデプロイなど、モニタリング・RCA関連が色々と追加で載るようになりました。 所感 基本、機能要件とか技術制限など、何かしらの理由がない場合は、AWSでコンテナなどを動かすにはECSで十分だと思います。実際、n8nとか他のOSS系はECSで起動するようにしています。 新しくジョインしたメンバーがEKSと各種Grafanaスタックに経験が多かったこともあって、ある程度、スムーズに構築や移行できたこともあります。 ただ、AutoModeの運用経験や、実際に各環境のログなどを投入していくと問題、エラーなどが出てきました。安定運用までに色々と手を打たないといけないと考えています。 やはり、K8s運用は一筋縄ではいかないと実感しました。 さいごに PlatformEngneeringチームは、社内向けの横断ツールを統制して必要なものを開発しています。 必要なものを新規作成や既存のものをマイグレーションしたり、ツールを使ってもらうためのEnablingの活動や、マーケティング技術を使った内部展開などのチームもあります。 GoldenPathの整理(そもそも業務フローの可視化・改善)も実施していく予定です。 こういった活動に少しでも興味を持ったり話を聞いてみたいと思った方は、お気軽にご連絡いただければと思います。 @ card
アバター
この記事は KINTOテクノロジーズ Advent Calendar 2025 の14日目の記事です🎅🎄 はじめに 2025年にKINTOテクノロジーズのQAGに入社したメンバーで、アドベントカレンダーに参加しました! 入社してからこれまでのQAとして取り組んできたトピックをまとめています。 同じQAの方々にはアイデアのきっかけとして、開発の方々には「QAってこんなこともやるんだ」という認知の拡大につながればと思います。 テスト効率化のためのWebAppの作成 自己紹介 とみよしです。前職でも第三者検証でQAをしていました。開発経験はほとんどありません。 内容 ある日こんなことが。 スマホ端末でチャットに文言入力するのに効率よくテストをするためにはどうすればいいだろうかという話に。 いっそのことAIを使ってWebAppを作るか!という案が出ました。 なので作りました!! コピー ペースト 仕組みとしては作業自動化ツールのZapierを使用し、 AIで生成した質問をGoogle SpreadSheetにDBとして格納、 Google App Scriptを使用してWebAppとして作成しました。 ツール 行っていること 参考画像 1 Zapier form画面の作成。 Zapierの機能としてInterfacesからformの作成を行うことができます。 2 Zapier AIによる質問生成 form画面から入力された内容を元に質問を生成します。 ー 3 Zapier Googleスプレッドシートへの連携 生成した質問をGoogleスプレッドシートに連携します。Zapierの標準機能としてこちらの連携が行えます。 ー 4 Googleスプレッドシート DBの代わりとして使用 Zapierから連携した質問内容を保存する ー 5 GoogleAppsScript DBの代わりとして使用Zapierから連携した質問内容を保存する ー これを作成するにあたって最初はできるのか?と思いながら進めていましたが、 AIにどうすればできるのか、どうやればいけるのかなど細かく聞きながら進めていきました。 Zapierでスプレッドシートに連携することはできました。連携している内容に生成された質問JSON(D列)があります。 このJSONのquestionsの内容を一覧にして一つ一つコピーできるようなwebを作成したいです 添付:ダウンロードしたGoogleスプレッドシートのExcelファイル もちろん一発でできるわけもなく、AIに生成してもらったコードをそのまま利用してもエラーが発生しました。 そのエラーに対してもAIに一つ一つ確認していくことで今のような形になりました。 当初は検索機能などもなかったため、利便性の面ではやや物足りない状態でした。 ただ一度に大量のことを要求することはせず、細かく機能追加を行うように指示したのが今回はうまく行った要因かと思っています。 このように行っていったおかげでコードについてもほとんど自分からは手を加えてはいません。 ひたすらこうして欲しいと言ったのを繰り返し、コードと向き合っていた期間としては1〜2日程度で作成してくれました。 このWebAppであらかじめチャットに入力する内容を登録しておき、 スマホ端末でアクセスしてコピペをするだけになったことで、 ひたすらキーボード入力するよりは効率的に実施できるようになりました。 初のWebApp作成でしたがAIと二人三脚で何とか作り上げることができました。 開発ほぼ未経験でもこうして作り上げることができるので今後も挑戦していきたいと思います。 付録 Zapier: https://zapier.com/ Googleスプレッドシート: https://workspace.google.com/intl/ja/products/sheets/ Google Apps Script : https://developers.google.com/apps-script?hl=ja Appium環境構築初心者の体験談を発表してきました 自己紹介 ろきです。前職ではニュースアプリの会社でQAをやっていました。開発未経験です。 内容 こんにちは! 先日、 Appium Meetup Tokyo #3 で「Appium環境構築の初心者つまづきポイント」についてLTしてきました。 形式はオンラインとオフライン両方。時間は15分くらいで、スライドを使って4つのポイントを紹介しました。 そもそもAppiumに興味を持ったのは、「コーディングの第一歩を踏み出せそう!」と思ったから。 とはいえ、初心者だと環境構築で詰まってしまって心が折れることもありますよね。 私自身もかなりハマったので、「同じようなところで困っている人に少しでも役立てば…」と思って発表しました。 話したポイントはこんな感じです。 エラーはAIに聞くと意外と解決できる バージョン合わせはAppium公式HPを見ると確実 必要なツールだけ起動してツールの競合を防ぐ Gitコマンドは触って慣れるのが早い 登壇後、参加者の方から「あるあるばかりで共感できました!」と言ってもらえたのが嬉しかったです。 人前で話すのはやっぱり緊張しますが、終わったあとはホッとしました。 これからも少しずつコーディングに挑戦して、できることを広げていきたいです。 付録 https://speakerdeck.com/kintotechdev/appiumwodong-kasumatenotumatukihointo-chu-xin-zhe-kagan-sitariarunabi-toxue-hi Playwrightによる自動化 自己紹介 ひがしです。前職では第三者検証のQAをしていました。開発経験はほとんどありません。 内容 僕が入社して印象深かった経験は『テスト自動化』です。 前職では全くしたことがありませんでしたが、上長と先輩社員から「やってみる?」とお話を頂いた時は「ぜひ!」と二つ返事するくらいワクワクでいっぱいでした! ジョインした案件では、様々な申込条件で申込完了までの一連のフローを確認するリグレッションテストが必要となりました。 そこで、それを自動化で実施するために、この案件専用のリグレッションテスト用スクリプトを作成することになりました。 また、僕の所属チームでは、E2Eテスト自動化のためのツールとして『Playwright』を採用しており、 既に先輩社員がデータ作成用やリグレッションテスト用のスクリプトをある程度完成させている状態でした。 それらのスクリプトを参考に、指定された申込条件のスクリプトを作成するお手伝いをさせていただきました。 参照するスクリプトがあるものの、 プルダウンの選択値やテキストボックスの入力値、押下するチェックボックスやボタンなど、コンポーネントの操作が1つ異なるとそこで要素取得エラー等が出て、 なかなか思うように作業を進めることができないことがありました…。 そこで僕がお世話になったPlaywrightの機能が『コード生成機能』です。 この機能は、ブラウザ操作を録画し、その操作に対応する自動化用コードを出力してくれるものになります。 この機能を使い、一度申込条件に沿ったブラウザ操作を行なってみることで、 初心者でもすごく簡単にコード生成および要素の取得ができ、エラーを解決することができました。 (例:”取扱車種一覧を見る”をクリックする操作を録画) 他にもまだ知らないPlaywrightの便利な機能があると思いますので、 先輩社員に尋ねたり自身で調べながら少しずつ使用できるようになり、徐々にPlaywrightに慣れていきたいです。 Appium周りの対応と開発ルール周り整備を行った話 自己紹介 mです。KTC入社と同時にQAへジョブチェンジしました!前職まではAndroidアプリの開発をしていました。 内容 最近、Appiumを用いたE2Eテストの自動化に挑戦する機会がありましたのでその内容についてです。 主に2つのポイント、単体テストとE2Eテストの違いと所感、そして開発ルール周りの整備について触れます。 1. AppiumによるE2Eテストの導入 E2Eテストとはユーザーが実際に行う操作を端末上で再現し、アプリ全体の動作を検証するものです。 Appiumを使ってAndroidアプリとiOSアプリのE2Eテストの作成に取り組みました。 その中で特に課題となったのが実行にかかる時間です。 E2Eテストでは待機時間の発生が避けられません。具体的には、以下のような待機時間が発生します。 UI操作の待機 画面描画の待機 通信処理の待機 待機時間の増加に伴い、テスト実行時間とコストも増大します。 そのため、どのシナリオからテストを優先するかの判断や、外的要因によってテストが正常に実行できない場合に備えたリトライ処理の設計が重要になります。 現在は相互レビュー時に処理内容について相談することで、実行速度の高速化を進めています。 その結果、一部処理の負荷軽減を実現できました。引き続き検討と対応を進めていきたいと思います。 2. 開発ルール周りの整備について プロジェクトのメンバーが増えてきたため、ブランチ戦略やブランチ保護の設定見直し、PRのルール策定など開発にまつわるルールの整備を行いました。 ブランチ戦略の変更 以前はGitHub Flowを採用していましたが、現在はGit Flowに変更しました。 この変更の主な理由は、利用するアプリのバージョンごとにリリースを管理したかったためです。 Git Flowを採用することで、機能開発やリリースの管理が明確になり、複数のバージョンを同時に扱う際の混乱を軽減できます。 ブランチ保護の設定見直し 実運用環境で動作しているmainブランチで、 自身含めて新規でアサインがあった開発者の各個人の環境によって動作しない事象が発生していました。そのため、mainおよびreleaseブランチへのPR作成時に GitHub Actionsのワークフローを利用して 自動的に動作確認(全テスト実行)が通るかどうか確認できた場合のみマージ可能とする設定に変更しました。 PRのルール策定 開発者がそれぞれ以前のPRで何を対応していたかを明確にするため、 以下の項目を含むPRテンプレートを用意しました。 対応内容概要 詳細 動作確認した内容 レビュー時に確認して欲しいこと このテンプレートにより、PRの内容が整理されレビューが効率的になることを目指しています。 これにより、さらに安定・安全に開発を進めるための基盤を整えることができました。チーム全体で協力し、より良い開発環境を作り上げていきたいと思っています。 今回ご紹介したようなAppiumを用いたE2Eテスト自動化の取り組みや、 QA観点での開発ルール整備については社内イベントでも継続的に発信しています。 大阪支社(Osaka Tech Lab)にてCO-LAB Tech Nightというイベントを毎月実施しておりますのでぜひご参加ください、、、! QA回で登壇させていただいたときの様子です。 最後に 最後まで読んでいただきありがとうございます。 今回の内容が皆様のQA活動のきっかけの一つになれば幸いです。
アバター
This article is the Day 14 entry for the KINTO Technologies Advent Calendar 2025 🎅🎄 Introduction We, members who joined KINTO Technologies' QA Group in 2025, have participated in this Advent Calendar campaign! This blog describes the topics we have worked on as QA team members from our joining the company to date. We hope it serves as inspiration for QA professionals and helps developers understand that QA has tasks which are not perceived well. Creating a Web App for Test Efficiency Self-introduction I'm Tomiyoshi. I worked as a QA in third-party verification at my previous job. I have almost no development experience. Content One day, something came up. We discussed how to efficiently test text input in a chat on mobile devices. Someone said, "Why don’t we just use AI to create a web app? So, I built one!! Copy Paste The system uses Zapier, a process automation tool. After questions generated by AI are stored in Google Spreadsheet as a database, we use Google Apps Script to create the web app. Tool What a Tool Does Reference Image 1 Zapier Creating a form screen Zapier's Interfaces feature allows you to create forms. 2 Zapier AI-powered question generation Generates questions based on input from the form screen. — 3 Zapier Integration with Google Spreadsheet Links generated questions to Google Spreadsheet. This integration is enabled as a standard Zapier feature. — 4 Google Spreadsheet Used as a database substitute Stores question content shared from Zapier — 5 Google Apps Script Displays the web app based on the question content stored in Google Spreadsheet — When I started creating the app, I was in doubt that I could finish it. I proceeded by asking AI for details about how to accomplish each step for the app creation. I was able to link Zapier to the spreadsheet. The linked content includes the generated question JSON (in Column D). I want to create a web page that lists the contents of the questions in this JSON and allows for copying each one individually. Attachment: Downloaded Google Spreadsheet Excel file Of course, it didn't work on the first attempt, and errors occurred when I used the code generated by AI as-is. By checking each error with AI one by one, I was able to create the app in the current format. Initially, the app didn’t have a search function, so it somewhat lacked in convenience. However, I believe the key to success is not to request too many things at once but instruct AI to add detailed features step by step. Thanks to this approach, I rarely modified the code on my own. I simply kept writing about what I wanted to do on prompt, and AI gave shape to my ideas by coding for about 1 to 2 days. Once I registered template texts in advance to input into the chat using this web app, all I need to do is to access it from a mobile device and copy-paste, rather than to manually type texts on a keyboard, which increased the input task efficiency. This was my first web app creation, but I managed to build it, collaborating with AI. Despite a lack of development experience, I was able to create something like this, so I will continue trying to develop new things. Appendix Zapier: https://zapier.com/ Google Spreadsheet: https://workspace.google.com/intl/ja/products/sheets/ Google Apps Script: https://developers.google.com/apps-script?hl=ja Presenting My Experience as a Beginner Setting Up an Appium Environment Self-introduction I'm Roki. At my previous job, I worked as a QA at a news app company. I have no development experience. Content Hello! Recently, I gave a lightning talk at Appium Meetup Tokyo #3 about "Stumbling Blocks for Beginners in Appium Environment Setup." The event took place both online and onsite. I talked for 15 minutes about introducing four key points using slides. The reason I felt interested in Appium was that I thought this could be my first step into coding! However, as a beginner, getting stuck on environment setup may be discouraging. Since I struggled quite a bit myself, I wanted to present my experience, hoping it might be helpful for others facing similar issues. Here are the points I presented: AI is surprisingly capable of providing solutions when you ask about errors Checking the official Appium website ensures the correct versions Only launching necessary tools prevents tool conflicts Getting hands-on experience is the fastest way to learn Git commands After my lightning talk, I was happy when participants told me that they could really relate to all common issues. Speaking in front of people is still nerve-wracking, but I felt relieved when it ended. I want to continue coding little by little and expand what I can do. Appendix https://speakerdeck.com/kintotechdev/appiumwodong-kasumatenotumatukihointo-chu-xin-zhe-kagan-sitariarunabi-toxue-hi Automation with Playwright Self-introduction I'm Higashi. At my previous job, I worked as a QA in third-party verification. I have almost no development experience. Content The most memorable experience since I joined the company was testing automation. I had never done it at my previous job, but when my manager and colleagues said, "Would you like to try it?" I was so excited that I immediately said, "Absolutely!" The project I joined required regression testing to verify the entire process up to application completion under various conditions. To automate the process, we decided to create a regression test script specifically for this project. Also, my team has adopted Playwright as a tool for E2E testing automation, and my colleagues had already completed data creation and regression test scripts to some extent. Based on the scripts, I created ones for specified application conditions. Although I had reference scripts, when even one component operation differed—such as dropdown selections, text box inputs, or checkboxes and buttons to click—element retrieval errors would occur. This hindered me from making progress as smoothly as I expected... That's when I found a Playwright feature that helped me the most: the code generation feature. It records browser operations and outputs automation code for them. Using this feature for performing browser operations in line with the application conditions, even beginners can easily generate code and retrieve elements. Thanks to the feature, errors are solved. (Example: Recording the operation of clicking "View vehicle list") There are still many convenient Playwright features I don't know about, so I want to gradually learn how to use them by asking colleagues and researching on my own, thereby getting more familiar with Playwright over time. Handling Appium-Related Tasks and Establishing Development Rules Self-introduction I'm m. I made a job change to QA when I joined KTC! Until my previous job, I was developing Android apps. Content Recently, I had an opportunity to get involved with E2E testing automation using Appium, so I'll share that experience. I'll touch on two main points: the differences between unit tests and E2E tests along with my impressions, and the establishment of development rules. 1. Introduction of E2E Testing with Appium E2E testing reproduces the operations that users actually perform on devices and verifies the overall behavior of the app. I worked on creating E2E tests for Android and iOS apps using Appium. The particular issue was the execution time. Wait times are unavoidable in E2E testing. Specifically, the following wait times occur: Waiting for UI operations Waiting for screen rendering Waiting for network communication The more waiting time we have, the more test execution time and costs we need to spend in testing. Therefore, it is significant to decide which scenarios to prioritize for testing and to design retry processing for cases where tests cannot execute normally due to external factors. Currently, we are working on speeding up execution through discussions about processing content in our peer review phase. As a result, we have achieved reduced load on some processes. We will continue to discuss and address these issues. 2. Establishing Development Rules As the number of project members increased, we established development-related rules, such as reviewing branch strategies, branch protection settings, and PR rules. Changing Branch Strategies Previously, we used GitHub Flow, but we have now changed the version control system to Git Flow. That is mainly because we wanted to manage releases for each version of the app we use. Adopting Git Flow enabled clearer feature development and release management, reducing confusion when we handle multiple versions simultaneously. Reviewing Branch Protection Settings On the main branch running in the production environment, we faced an issue that the application didn’t work due to individual environment differences among newly assigned developers, including myself. To overcome the issue, we changed the branch settings to enable merging in creating PRs for the main and release branches only when GitHub Actions workflows automatically verify that operation checks (running all tests) pass. Establishing PR Rules To clarify what each developer was doing for previous PRs, we prepared a PR template including the following information: Summary of changes Details What was verified What reviewers should check This template was designed to organize PR content and make reviews more efficient. It helped us establish a foundation for more secure and safe development. We want to work together as a team to create an even better development environment. We continuously share initiatives like E2E testing automation using Appium and development rule establishment from a QA perspective at internal events. We currently hold a monthly event called CO-LAB Tech Night at our Osaka branch (Osaka Tech Lab), so please join us...! Here's a photo of the event when I presented at the QA session. Conclusion Thank you for reading to the end. We hope this content serves as inspiration for your QA activities.
アバター
この記事は KINTOテクノロジーズアドベントカレンダー2025 の13日目の記事です🎅🎄 はじめに はじめまして!の方も、いつもありがとうございますの方もこんにちは!! KINTOテクノロジーズ(以下、KTC)でエンジニア採用と採用広報を担当している たけの ひかる( @t_hikarutaaaan )です。 毎年恒例のアドベントカレンダー企画、 今年も呼吸をするようにエントリーしてみました!(笑) 今回は、 「エンジニア採用と採用広報の舞台裏」 をテーマに、 私の “とある1日” をゆるっと紹介してみようと思います。 すこしだけ自己紹介 入社して約4年、採用担当になって約2年。 当時は 人事も採用も完全にゼロ経験からのスタート。 技術の話は半分も理解できず、 スカウト1通送るだけであたふたして、 面談ではガチガチに緊張してスクリプトを棒読み。(今では完全にネタw) でも、止まらずに挑戦し続けたからこそ今言えます。 「採用という仕事が、本当に好きです。」 そしてKTCは、 “やってみたい” と手を挙げた人に本気で任せてくれる会社。 未経験の私が走り続けられたのは、そのカルチャーのおかげです。 やっと笑ってイベント司会ができるようになりました エンジニアって、魔法使いじゃん 実は、採用担当になって少し経ったころ、生成AIにコードを書いてもらいながら 採用データを分析できる小さなアプリをつくったことがあります。(アプリって言っていいレベルではないですがw) ワンクリックで画面にグラフが表示された瞬間、思わず声が出ました。 「え、すご…魔法じゃん。」 技術が人の困りごとを一瞬で解決してしまう瞬間にシンプルに感動しました。 で、そのとき思ったんですよね。 「あ、もっとちゃんと向き合わなきゃ」って。 現場の人たちがどんな想いでプロダクトつくってるのか、 「もっとちゃんと知りたいし、もっともーっとちゃんと伝えたい」と。 そこから更に毎日あたふたしながら走り回ってます。(笑) というわけでここからは、 そんな私の 「とある1日」 をゆる〜く紹介してみます! 時間 内容 実際にやったこと こんな気持ちでやってます(例) 09:00 スカウトtime ターゲット選定、プロフィール読み込み、スカウト文作成&送付 どの媒体にしようかな。良い人発見。「なぜ声をかけたいのか」を必ず書く 10:00 書類選考 職務経歴確認、現場メンバーと評価すり合わせ むむ…めちゃくちゃ良い人…! 11:00 現場MTG 採用状況共有、採用要件摺り合わせ、PJ状況ヒアリング 分からないことは素直に聞く。優しく答えてくれる文化に感謝 🙏 12:00 ランチtime 卵かけごはんをすする かつお節が合う。おなかいっぱい。 13:00 カジュアル面談 キャリアヒアリング、プロダクト紹介 双方コミュニケーションできた時が最高。時間足りない日も多い。 15:30 採用広報企画 採用トレンド調査、競合リサーチ、企画案作成、資料構成 煮詰まった…。壁打ち相手求む。 17:00 カジュアル面談 キャリアヒアリング、プロダクト紹介 技術質問に少し答えられず…あとで現場に確認。 19:00 イベント運営 受付、撮影、アナウンス、来場者サポート 基本、走り回ってます(笑)。写真撮って声かけて…ハイハイ! コスパ&タイパ最高の卵かけごはん 採用の難しさと向き合う日々 採用は、スペックだけでは測れない世界です。 会話の空気 ちょっとした表情の変化 選択の背景にある価値観 そういった“見えないもの”を丁寧に受け止める必要があります。 ある候補者の言葉が忘れられません。 「転職の決め手は、“誰と働くか”なんです」 その一言で、ハッとしました。 私はずっと会社としての魅力を伝えることに精一杯でした。 でも候補者の方が本当に知りたいのは、 「このチームなら、自分の挑戦を託せるか」 それからは、 現場の空気やカルチャー、そこで生じる悩みや挑戦も含めた本音を届けることを大切にしています。 面談の最後に 「一緒に働く姿が想像できました」 と言ってもらえた日は、心の中で小さくガッツポーズしています。(笑) 採用広報で挑戦したこと 今年、採用広報として 国内最大級のモビリティイベントである Japan Mobility Show 2025 の登壇企画を担当しました。 KTCが所属するTOYOTAグループ内の関係者や、 リアル領域とIT領域それぞれの担当者を巻き込みながら進めるプロジェクトで、 調整量も難易度も、正直これまでで一番大変でした。(笑) でも、どうしても実現したかった理由があります。 私たちの強みである「リアル × IT」での挑戦を、ちゃんと外に届けたかった。 そして、「一緒にやろう」と快諾してくれた部長の熱量を発信したかった。 求人票だけでは伝わらない空気や想いを、 生の言葉で届けたかったんです。 本番のあと、応援してくれていた社内メンバーから 「めちゃくちゃよかったよ!」 と声をかけてもらえて、すごく嬉しかったです。 さらに後日、登壇企画の動画が公開されたあと、 日々いろいろな業務で関わるグループ企業の方々にも 「YouTube見たよ!」「いい内容だった」「かっこよかった」 と声をかけてもらえたと。 さらに、登壇してくれた部長はこんな言葉をくれました。 「採用に効いてくるのはもう少し先かもしれないけど、 社内広報とか、KTCのセルフブランディングには効いてくるね」 めちゃめちゃ嬉しかったぁ。なんだろ。うまく言葉にできないけど(笑) 採用広報は、会社の挑戦と未来の仲間をつなぐ仕事。 私はその“橋渡し役”でありたいと思っています。 会場の写真を一生懸命撮ってます ちなみに以下がこの記事で触れた登壇企画のアーカイブ動画です! あつーーく、ギュギュっと詰まった50分なので是非ご視聴ください♪ https://youtu.be/NXM2lyapia0?si=QiK5GP2XFtCh0c9c 採用はチーム戦であり、未来づくり 採用に、これが正解!っていう形はありません。 毎回迷うし、悩むし、揺れ続けます。 (正直、答えが分からなすぎてソワソワする日もある。笑) でも、ひとつだけ確信していることがあります。 いい採用は、いい“対話”からしか生まれない。 KTCには、私を含めて5名の採用担当がいます。それぞれが部門に専任としてつく部門担当制。 だからこそ、現場とめちゃくちゃ密にコミュニケーションができるんです。 プロダクトの話も、カルチャーの話も、 嬉しいことも、しんどいことも、ぜんぶ一緒に考える。 そうやって、チームで採用をつくっている感覚がある。 これは本当に誇れるポイントだと思っています。 最後に、読者のみなさまへ エンジニアのみなさまへ   尊敬しています。本気で。   技術で未来を変えていく姿は、私にとってずっと魔法のように見えています🪄 プロダクト開発に関わるみなさまへ   本気でプロダクトと向き合う姿勢や、ひとつの価値をつくるためのコミュニケーションや試行錯誤。   そのリアルなストーリーに、私はいつも心を動かされています。 人事グループの仲間へ   いつもわちゃわちゃしている私と一緒に悩んでくれて感謝です!!   これからも一緒に走ってね!!(/・ω・)/ KTCのみなさまへ   いつも助けてくれてありがとうございます!!   私の大好きな会社がもっと強くなるために、まずは採用という場所から全力で貢献します!!! この記事を読んでくださったみなさまへ   もし少しでも何か響くものがあったら、   ぜひイベントで、カジュアル面談で、、、、どこかでお会いできたら嬉しいです!! 未来の仲間へ 私たちKINTOテクノロジーズは変革期の自動車産業のど真ん中で、 内製開発組織をゼロからつくる挑戦をしています。 こんなダイナミズムに関われるチャンスは、そう多くありません。 未来を一緒に創る仲間をお待ちしています🙌 以上、採用担当・広報担当の“とある1日”でした! 読んでくださり、本当にありがとうございました~~~!
アバター
この記事は KINTOテクノロジーズアドベントカレンダー2025 の 13 日目の記事です🎄 はじめに KINTO開発部 KINTOバックエンド開発G マスターメンテナンスツール開発チーム・Osaka Tech Lab 所属の yuki.n( @yukidotnbysh )です。 わたしたちのチームでは各サービスと連携する管理システムを開発しています。これらは管理システムであると同時に、業務課題を解決するためのものでもあります。 そのため管理システムと言えども単純な CRUD システムというわけにはいかず、開発するシステムや業務によって様々複雑な課題が発生します。これらをビジネスロジックに落とし込むにあたって Railway Oriented Programming が効果的ではないかと考え、実際のプロジェクトで導入しました。その事例をもとにどのようなメリット・見えてきた課題があったのかをご紹介したいと思います。 Railway Oriented Programming について Railway Oriented Programming Railway Oriented Programming とは F# for Fun and Profit の運営や「 Domain Modeling Made Functional(関数型ドメインモデリング) 」の作者である Scott Wlaschin 氏が提唱した、関数型プログラミングにおけるエラーハンドリングの手法です。日本語では「鉄道指向プログラミング」と呼ばれています。 F# for Fun and Profit に投稿された 同じタイトルの記事 を見ると、少なくとも 2013 年には公開されていたようです。 Railway Oriented Programming では、関数を「線路(Railway)」に例え、正常系の処理と異常系の処理を 2 本の線路として表現します。 この「線路」を複数つなぎ合わせたのが以下のイメージ図です。 各処理ステップは「スイッチ」として機能し、成功すれば正常系の処理(線路)を進み、失敗すれば異常系の処理(線路)に切り替わります。一度異常系に入ると、以降の処理では成功することはなく、エラーとして最後まで流れていきます。 具体的には Result 型を返す関数をパイプラインで次々とつなぎ合わせていくイメージです。 Railway Oriented Programming を取り入れた理由 もともとわたしたちのチームでは Rust の開発実績があり、このプロジェクトでもバックエンドサーバーの開発言語として Rust を採用しています。 アーキテクチャとしては「The Clean Architecture」の図を参考にしています(以後、便宜的にあえて「Clean Architecture」と書きます)。 過去のプロジェクトで Clean Architecture を導入した時、上の図で描かれている「Use Cases」層の処理が複雑かつ肥大化していく傾向にあり、一部処理をドメインサービスとして「Entities」層へ切り出したとしても、やはり Use Cases 層の可読性が落ちてしまうという課題がありました。 そんな中で Railway Oriented Programming の存在を知り、導入することになりました。 Rust での Railway Oriented Programming 全体の構造 わたしたちが実装した Use Cases 層は概ね以下のような構造になっています。 #[derive(Debug, thiserror::Error)] pub enum CreateUserUseCaseError { // エラー型の定義 } pub trait UsesCreateUserUseCase { /// Workflow fn handle( &self, input: CreateUserInputData, ) -> impl Future< Output = Result<CreateUserOutputData, CreateUserUseCaseError>, > + Send; } pub trait CreateUserUseCase: // 依存関係 ProvidesUserFactory + ProvidesUserRepository { } impl<T: CreateUserUseCase + Sync> UsesCreateUserUseCase for T { async fn handle( &self, input: CreateUserInputData, ) -> Result<CreateUserOutputData, CreateUserUseCaseError> { // railway モジュールで定義した関数のチェーン } } mod railway { type RailwayResult<T> = Result<T, super::CreateUserUseCaseError>; pub(super) fn validate_input(/* ... */) -> RailwayResult<(Email, UserName)> { /* ... */ } pub(super) async fn check_email_not_exists(/* ... */) -> RailwayResult<(Email, UserName)> { /* ... */ } pub(super) fn build_user(/* ... */) -> RailwayResult<User> { /* ... */ } pub(super) async fn save_user(/* ... */) -> RailwayResult<User> { /* ... */ } pub(super) fn end(/* ... */) -> CreateUserOutputData { /* ... */ } } 「 Rust の DI を考える –– Part 2: Rust における DI の手法の整理 」で紹介されている Cake Pattern を用いています(本記事の本筋とは逸れるため詳細は割愛します)。 railway モジュールに関数を定義し、それらを UsesCreateUserUseCase の handle メソッド内で結合する、という形です。 (なお、「関数型ドメインモデリング」では handle メソッドにあたる部分を「ワークフロー」、引数は「コマンド」と表現されています。本記事でもこれに倣います) これらの要素をひとつずつ分解していきます。 エラー型の定義 #[derive(Debug, thiserror::Error)] pub enum CreateUserUseCaseError { // エラー型の定義 #[error("メールアドレスが既に存在します。")] AlreadyExistsEmail, #[error("無効なメールアドレスです。")] InvalidEmail, #[error("無効なユーザー名です。")] InvalidUserName, #[error("UserFactoryError")] UserFactoryError(#[from] UserFactoryError), #[error("UserRepositoryError")] UserRepositoryError(#[from] UserRepositoryError), } Use Case ひとつに対し、エラー型を必ずひとつ定義する形で運用しています。 Rust ではエラー型を Enum で定義することができます。標準のままだと std::error::Error トレイトを実装する必要があるのですが、 thiserror クレートを使うことでエラー型の定義を簡略化できます。 また thiserror クレートで定義した場合、 #[from] アトリビュートを設定することで From トレイトが実装されるので、該当エラーが発生した時に明示的に変換をせずとも、自動的に目的のエラー型へ変換できるようになります。 RailwayResult 型 mod railway { // このユースケース専用のResult型 type RailwayResult<T> = Result<T, CreateUserUseCaseError>; } Use Case 専用のエラーをすべての関数に定義するのは大変なので、 RailwayResult 型という型エイリアスを定義して、戻り値だけ設定するようにしています。 railway モジュール mod railway { /// 入力値を検証し、値オブジェクトに変換します。 pub(super) fn validate_input( input: CreateUserInputData, ) -> RailwayResult<(Email, UserName)> { let email = Email::try_from(input.email) .map_err(|_| CreateUserUseCaseError::InvalidEmail)?; let name = UserName::try_from(input.name) .map_err(|_| CreateUserUseCaseError::InvalidUserName)?; Ok((email, name)) } /// メールアドレスが存在していないことを確認します。 pub(super) async fn check_email_not_exists( (email, name): (Email, UserName), impl_repository: &impl UsesUserRepository, ) -> RailwayResult<(Email, UserName)> { impl_repository .find_by_email(&email) .await .map_err(CreateUserUseCaseError::UserRepositoryError)? .map_or(Ok((email, name)), |_| Err(CreateUserUseCaseError::AlreadyExistsEmail)) } /// ユーザーを新規作成します。 pub(super) fn build_user( (email, name): (Email, UserName), impl_factory: &impl UsesUserFactory, ) -> RailwayResult<User> { impl_factory .build(UserFactoryParams { email, name }) .map_err(CreateUserUseCaseError::UserFactoryError) } /// ユーザーを保存します。 pub(super) async fn save_user( output: User, impl_repository: &impl UsesUserRepository, ) -> RailwayResult<User> { impl_repository .save(output) .await .map_err(CreateUserUseCaseError::UserRepositoryError) } /// 戻り値を返し、処理を終了します。 pub(super) fn end( output: User, ) -> CreateUserOutputData { CreateUserOutputData { user: output.into(), } } } railway というモジュールを作り、その中に「線路」となる関数群を定義していきます。 これは Railway Oriented Programming の流儀ではなく、単純にわたしたちが確認しやすいように目印として設けています。 この記事のコードの場合では以下の流れを想定しています。 入力値(メールアドレス・ユーザー名)の検証 メールアドレスの存在チェック User エンティティの生成 User エンティティの保存 保存した User エンティティを上位層に渡すための DTO に変換し、終了 前回の関数の戻り値が次の関数の入力値になるため、第一引数は output と命名しています。 ただし output がタプルだった場合は始めから展開しています。これはタプルのままだと変数の所有権の問題で取り扱いが面倒なためです。 基本的には前回の値だけがそのまま次の関数の入力値になることが望ましいとは思うのですが、バケツリレーのように不要な値まで渡し続ける必要が発生するなどデメリットの方が多いと判断し、各関数で新たな入力値を渡しても良いというルールにしています。 ワークフロー全体 原典では F# が使われていますが、Result 型や Either 型の概念があり、かつ関数を合成する機能がある言語(またはそれを補完するライブラリなど)であれば Railway Oriented Programming の導入は可能です。 Rust では幸い、Result 型以外にも Railway Oriented Programming を実現するのに欠かせない以下の機能が標準で備わっています。 ? 演算子:エラー発生時の処理停止を表現 map ・ and_then 関数:関数の合成 これらを組み合わせることで以下のようにパイプラインを構築することができます。 impl<T: CreateUserUseCase + Sync> UsesCreateUserUseCase for T { async fn handle( &self, input: CreateUserInputData, ) -> Result<CreateUserOutputData, CreateUserUseCaseError> { railway::validate_input(input) .map(|output| { railway::check_email_not_exists(output, self.user_repository()) })? .await .and_then(|output| railway::build_user(output, self.user_factory())) .map(|output| railway::save_user(output, self.user_repository()))? .await .map(railway::end) } } 実践して感じたメリット 以下、Railway Oriented Programming を実践して感じたメリットです。 処理の流れが明確になり、機能追加がしやすくなった ワークフローの中身がパイプラインで繋がっているので、どういう処理が行われているのかは一目である程度わかるようになりました。 もちろん複雑な仕様であればワークフローが長くなることは避けられませんが、それでも関数の流れを追えば、どこで何が行われているのかはだいたいの当たりをつけられるようになりました。 ワークフロー内の各処理も関数に切り出されていることで、それぞれの処理・変数のスコープも明確になりました。 このおかげで機能追加の場合は新たに関数を差し込むだけでよく、変更の場合は該当の関数のみ修正すれば良くなり、保守性も向上したように感じます。 処理の入出力を型で表現できるようになった これは Railway Oriented Programming と直接結びつく効果ではないと思いますが、各関数の引数・戻り値が何のデータであるかを型レベルでチェックできるようになりました。 コンパイルエラーで型の誤りを防げるようになり、処理途中で誤った値が渡ってしまうといった問題を回避できるようになりました。 単体テストが書きやすくなった ワークフローに対し正常系・異常系すべてのテストを実装するのは非常に大変だったため、各 railway 関数それぞれをしっかりテストして、ワークフローのテストではハッピーパスを通すというやり方を取っています。 Private な関数のテストコードが必要かどうかの是非はあると思いますが、それでも railway モジュールの各関数をテストできるのは個人的にメリットと感じました。いまのところは大きな問題も感じていません。 また、副次的効果として、機能追加があった場合でもその関数分のテストを追加し、既存のテストがパスすれば問題ないことが確認できるので、この点は良かったと思います。 実践して感じた課題 実践してメリットが得られた反面、やはりいくつか課題もありました。 Railway Oriented Programming の慣れが必要 普段から関数型言語に慣れている方であればそれほど違和感ない手法と思うのですが、もちろんわたし含めてそうでないメンバーもいます。そのため、この書き方に慣れるまではどうしても実装が難しくなりますし、実際、わたしも Rust で Railway Oriented Programming が実装できるか調べていた時はかなり苦戦しました。 現在は AI のおかげでかなり難易度は下がりましたが、できあがったものが適切な内容かどうかはやはりある程度の理解が必要です。そのため、メンバーに対してのフォローがどうしても必要になります。 実際のところ、このプロジェクトでも開発初期はどうしてもレビュー負荷が大きくなりました。そのため、開発規模や納期など、プロジェクトの状況・条件によっては Railway Oriented Programming の採用を見送ることも検討した方が良いかもしれません。 fatal runtime error: stack overflow が発生する場合がある 実装内容によっては実行時に Stack Overflow エラーが発生する場合があります。 コンパイルエラーとして検出されないのが非常に厄介で、かつ具体的にどの箇所が問題なのか、ソースコードを見るだけでは判断がつきません。 原因の探し方ですが、rust-lldb を使ってスタックトレースを確認することで、Stack Overflow エラーが発生したコードを特定することができます。 # LLDB でバイナリを起動する rust-lldb target/debug/your-bin # 実行 run # Stack Overflow が発生したらバックトレースを確認 thread backtrace all 解決が難しい場合の別案として、もっとも安全かつかんたんな解決策は map や and_then によるメソッドチェーンをやめ、1 行ずつ処理を書いていく形です。 async fn handle(&self, input: InputData) -> Result<OutputData, UseCaseError> { railway::begin(self.uow()).await?; let output = railway::validate_email(&input.email)?; let output = railway::authenticate(output, input.password, self.authenticator()).await?; let output = railway::update_last_access(output, self.user_repository()).await?; let output = railway::commit(output, self.uow()).await?; railway::end(output) } これはこれで悪くありませんが、メソッドチェーンによるパイプラインがなくなり、どうにでも書けてしまうという問題が発生します。なので本当にどうしても解決が難しい場合のみこの形式に置き換えるというのが安全と思います。 なお、他の方法としては RUST_MIN_STACK 変数の値を追加することでスタック領域を拡張できます。しかしこれは問題を先送りにしているだけで、いつの日か Stack Overflow エラーが再発しかねません。そのため、この解決方法はあまりおすすめできません。 ちなみにわたしの事例では、デバッグビルドの時に railway モジュール内に定義した関数の中で、非同期処理を並列実行する場合に起こるケースがありました。 async/await は Future 型の糖衣構文ですが、 rust-lang/rust#132050 を見ると実行時に Future 型の持つ状態がスタック領域へ展開されるため、多くの async 関数を実行する時に Stack Overflow エラーを引き起こしてしまうようです。 このケースでは、並列で処理したい Future 型のデータを Vec 型のデータへ格納することで対処できました( Vec 型の値はヒープ領域に格納される ためです)。 処理フローが明確になる代わりにコードは増える Rust で Railway Oriented Programming を導入すると、各関数を map と and_then でつなぎ合わせていく形になります。それに加えて、それぞれの関数を定義していく必要があるので、ふつうに書くより全体のコード量は増えます。 たとえば Railway Oriented Programming を適用しなかった場合の handle メソッドは impl<T: CreateUserUseCase + Sync> UsesCreateUserUseCase for T { async fn handle( &self, input: CreateUserInputData, ) -> Result<CreateUserOutputData, CreateUserUseCaseError> { // 入力値の検証 let email = Email::try_from(input.email) .map_err(|_| CreateUserUseCaseError::InvalidEmail)?; let name = UserName::try_from(input.name) .map_err(|_| CreateUserUseCaseError::InvalidUserName)?; // メールアドレスの重複チェック let existing_user = self .user_repository() .find_by_email(&email) .await .map_err(CreateUserUseCaseError::UserRepositoryError)?; if existing_user.is_some() { return Err(CreateUserUseCaseError::AlreadyExistsEmail); } // ユーザーの作成 let user = self .user_factory() .build(UserFactoryParams { email, name }) .map_err(CreateUserUseCaseError::UserFactoryError)?; // ユーザーの保存 let saved_user = self .user_repository() .save(user) .await .map_err(CreateUserUseCaseError::UserRepositoryError)?; // 結果の変換 Ok(CreateUserOutputData { user: saved_user.into(), }) } } となり、関数がなく代わりに handle メソッドの中(または部分的に関数を切り出すなど)で実装することになります。このため、場合によってはこの方がシンプルなこともあると思います。 なので、かんたんな処理・分岐がほとんどといったアプリケーションの場合、無理に Railway Oriented Programming を採用しない方が無難かもしれません。 余談:「リポジトリパターンはどこにある?」 この記事の本筋とは直接関係しませんが、「関数型ドメインモデリング」では「リポジトリパターンはどこにある?」という題でリポジトリパターンについて言及されていて、関数型のアプローチではリポジトリパターンを すべてを関数としてモデル化し、永続化を端に追いやることで、リポジトリパターンは必要なくなります。 と書かれています。 しかしわたしがこのことについての意図・方法を読み切れなかったため、この記事のコードおよびわたしたちのプロジェクトではリポジトリパターンを採用しています。 おわりに 以上、Railway Oriented Programming を Rust で実践した内容についての紹介でした。 Rust は非常に表現力が豊かで様々な機能を持つ言語ですが、Railway Oriented Programming を採用することでより強化できるのではないかと感じています。 もし同じように Rust で Railway Oriented Programming の採用を検討している方がいらっしゃいましたら、この記事が少しでも参考になれば幸いです。
アバター