📑

アプリ開発におけるAIサービス活用の実践的アプローチ

に公開

はじめに

こんにちは😀Linc’wellアプリチームFlutterエンジニアのsugayaです。

近年、AI技術の急速な発展により、ソフトウェア開発の現場でもAIツールの活用が当たり前となってきました。以前も社内でのCursor活用促進のための社内整備が寄稿され、社内でのAI活用促進について紹介しました。本記事では、アプリ開発チームにおけるAIサービスの活用事例と、効率的な開発を実現するためのルール統一の取り組みについてご紹介します。

利用中のAIサービスとその役割

Cursor/Claude Code/GitHub Copilot/Gemini CLI

これらのAIサービスは、主にAIエディタとしての開発補助機能を担っています。
メインで使用するサービスはメンバーによって様々ですが、個人的にはオールインワンが備わっているCursorを使用しています。

エディタとしての開発補助

  • コードの自動補完機能によりタイピング効率が大幅に向上
  • リアルタイムでのコード修正の提案
  • 複雑なロジックの実装時における適切なアルゴリズムの提案

Agentモードを活用した自動開発

  • より複雑なタスクに対して、AIが自律的にコードを生成・修正
  • 機能要件を与えるだけで、実装を自動で行う
  • 開発者の意図を理解し、プロジェクト全体の整合性を保った開発を実現

特にAgentモードは編集するファイルを明示しなくても自律的にプロジェクト全体から検索し、関連するファイルを特定してくれます。freezedやriverpodなどを使用した際に必要となるコードの自動生成もAIが必要と判断し自動で行います。機能開発とともにテストコードの実装も行われ、実装後はテストを実行することで保守性も担保されます。
AIのモデルは主にClaude Sonnet 4を使用しています。

また、自分のタスクだけでなく、メンバーが作成した実装の確認やPR(Pull Request)のレビューでもAIサービスを活用しています。

PRレビューの効率化

  • PRレビューにあたってAIによる要約を作成し、レビュー時間を短縮
  • 変更の影響範囲を洗い出し、実装の考慮漏れを防ぐ

GitHubでのAsk CopilotやClaude Codeのreviewコマンドが簡単に使用でき、PRレビューを補助してくれます。

新しいAIサービスが登場した場合は社内ですぐに利用可能かを検討し試せるようにしています。AIサービスに関してはどれでもいいのでまずは業務で使ってみること、業務レベルで体験してみて判断することが大切です。

Devin

Devinは独立したタスクの実行とPR作成において重要な役割を果たしています。
完全に自立してサーバー上で動き、AIエディタのようなローカル環境とは独立しているため、ローカル環境での開発を妨げることなく並行開発ができます。

独立したタスクを実行しPRを作成

  • 明確に定義されたタスクに対して、完全な実装からテストまでを自動実行
  • PR作成時には適切なコミットメッセージとドキュメントも自動生成
  • 人手を介さずに完結するタスクの処理により、開発者のリソースをより重要な作業に集中可能

レビューを通した内容の改善

  • PRレビューで指摘された内容が自動的に反映される
  • レビュワーのフィードバックを学習し、より良いコードの生成が可能

以前はAIエディタよりもDevinのほうが賢かった印象ですが、現在はAIエディタのほうが賢くなってきている印象です。
そのためDevinは小さく独立したタスクの実行やプロジェクトの整備に特化させて使用しています。

DevinはSlackからでも実行できるため、開発時の他のメンバーの悩みや質問内容が自然と共有されます。それによりチーム内全員に知識が届いたり、チームで抱えていた悩みが明らかになるなど、チーム全体で使用するメリットもあります。

ChatGPT/Gemini

一般的な質問への対応

  • 技術的な疑問や設計に関する相談に活用
  • 新しい技術トレンドや最適解についての情報収集

具体的な開発によらない一般的な知識の獲得や壁打ちに使用しています。
ググる代わりに使用することが多いですが、最近はAIエディタの利用率が高くなっています。

AIサービスのルール統一

rulesyncによる自動整備

複数のAIサービスを使い分ける中で、それぞれに適したルールフォーマットの管理が課題となっていました。そこで、rulesyncを活用することで以下が可能になりました。

  • 統一されたルールセットから各AIサービスに最適化されたフォーマットを自動生成
  • サービス固有の設定や制約を考慮した自動変換処理
  • 手動でのルール更新作業を大幅に削減

大元のルールファイルのみを編集し、それを各AIサービスに複製し適用することで、ルールの管理が容易になりました。新たなAIサービスが登場してルールファイルが必要になっても、同一フローで簡単に追加できます。

GitHub Actionsとの連携

rulesyncの更新はGitHub Actionsで自動化することで、ルールの更新を簡単に行うことができます。

自動更新の仕組み

  • ルールセットの変更をトリガーとして、GitHub Actionsが自動実行
  • 各AIサービスへのルールの適用までを完全自動化

FigmaMCPサーバーとの連携

デザインからの自動実装

FigmaMCPサーバーを活用することで、デザインから実装までのワークフローの効率化を目指しています。FigmaではMCPサーバーを公式で提供しており、FigmaのDev Mode権限とFigmaのデスクトップアプリがあれば利用できます。
https://help.figma.com/hc/ja/articles/32132100833559-Dev-Mode-MCPサーバー利用ガイド

主な機能

  • Figmaデザインを解析し、対応するUIコンポーネントを自動生成
  • デザインシステムとの整合性を保った実装の自動化
  • デザイナーとエンジニア間のコミュニケーションコストの削減

FigmaMCPサーバーはCursorなどのエディタと連携して使用します。
これまではFigmaのデータを見ながらWidgetを構築していましたが、FigmaMCPサーバーを使用することでそれらが自動化されViewの実装が容易になりました。
また、ルールファイルを整備し、設計や実装の注意点を言語化することでFigmaのデータを意図したコードに落とし込めます。

今後の課題

  • コンポーネントに関するルールの整備がまだ不十分
  • より複雑なUIパターンへの対応強化が必要
  • デザインとコードの双方向同期機能の拡充

Figmaとプロジェクトのコードでコンポーネントの1対1対応が行えていないため、適切なコンポーネントを使用してくれず、無駄に重複した実装になるケースがあります。
Figmaの整備とともに、ルールの拡張を行うことで次の実装時には意図したコードが生成される仕組みを目指しています。

AIによる開発環境の自動構築

課題:Flutter開発の参入障壁

Linc’wellではアプリだけでなくWebサービスも展開しており、Flutterエンジニア以外にも他言語を使用するバックエンドエンジニアやフロントエンドエンジニアが多数在籍しています。アプリ開発になじみのないエンジニアでもFlutter開発が簡単に行えるようにしたいという課題がありました。

大きなネックとなっていたのが、最初の環境構築とビルドの作成までに必要な専門知識です。Flutter開発には以下のような複雑な環境設定が必要になります

  • 適切なバージョンのFlutter/Dartのインストール
  • Android StudioやSDKの設定
  • Xcodeのインストールや証明書の設定
  • シミュレーターの起動やアプリのビルドフロー

さらに、ドキュメントの維持管理も大きな課題でした。丁寧にドキュメントを作成してもFlutterのアップデートやフローの変更とともにドキュメントの改修が常に必要です。手動でのドキュメント管理の難しさを感じていました。

AIによる自動環境構築の取り組み

この課題を解決するため、ルールファイルを活用したAIによる自動環境構築に取り組んでいます。

実装アプローチ

  • ルールファイルに環境構築の手順や方法を詳細に記載
  • AIがそのルールに沿って環境を自動構築してくれる仕組みを構築
  • 適切なバージョンのFlutter/Dartのインストールから、Android StudioやSDKのインストール、最終的にはビルドして実行まで一連の流れを自動化

以下はAIによる環境構築のためのルール(一部抜粋)です。

# Flutter開発環境構築ガイド

このガイドは、AI Agent(Cursor、Claude Code等)がFlutter開発環境を自動で構築するためのルールファイルです。
新しい開発者がこのルールファイルを使用してAgentを動かすことで、自動でアプリの起動まで確認できることを目指します。

## 環境構築手順

### asdfのインストール
...
### Flutterのインストール
...
### Android Studioのインストール
...
### Android Emulatorの起動
...
### アプリケーションのビルドと起動
...

目指している自動化の範囲

  • 開発環境の初期セットアップの完全自動化
  • プロジェクト固有の設定や依存関係の自動解決
  • ビルド・実行確認までの一連の流れを無人で実行
  • 新しいエンジニアのオンボーディング時間の大幅短縮

これにより、Flutter開発の経験がないエンジニアでも、AIの支援によって迅速に開発環境を整え、プロジェクトに参画できる環境を目指しています。
実際にはまだ動作テストを行なっている段階ではありますが、こういったタスクの自動化もAIのサポートによる恩恵があると考えています。

作成したAIのルールとその整備方法

AI活用におけるルールの重要性

AI活用、特にVibe Codingにおいて適切なルール設計は不可欠です。「AIに迷わせない設計作り」を基本方針として、以下のような取り組みを行っています。

羅針盤をベースとしたルール設計

アプリチーム独自の設計羅針盤を作成し、これをAIルールの基盤としています。
また、設計のルールだけでなく、Widgetの実装方針、命名ルールなど、これまで暗黙の了解であった内容を言語化しました。
以下にルールの例を紹介します。

Widgetの実装ルール

### 1. 既存コンポーネントの活用
- 新しいウィジェットを作成する前に、`ui/components`内の既存コンポーネントを確認すること
- 既存コンポーネントで実現できない場合のみ、新規作成を検討すること
- 既存コンポーネントの拡張が必要な場合は、既存コンポーネントをベースに作成すること

### 2. ウィジェットの種類
- `ui/components`以下のウィジェットは`StatelessWidget`を使用すること
- 画面(Page)のウィジェットは`ConsumerWidget`を使用すること
- Hooksの機能を利用する場合のみ`HooksConsumerWidget`を使用すること

など

命名ルール

### 変数命名規則
- **lowerCamelCase**: 変数、関数、メソッド名はlowerCamelCaseを使用する
  // 良い例
  String userName;
  int itemCount;
  void calculateTotal() {}
  
  // 悪い例
  String UserName;  // クラス名のような命名
  int item_count;   // スネークケース

など

現在は13種類のルールを整備しており、下記のプロセスを通して随時更新しています。

効率的なルール作成プロセス

AIによる初期ルール生成

  • プロジェクト全体をAIに分析させ、基本となるルールセットを自動生成
  • 既存コードベースのパターンを学習した最適なルールの提案
  • 手動でのルール作成時間を大幅に短縮

ルール導入時はプロジェクト内を一度全て分析させ、それを元にAIにルールファイルを作成してもらいました。どのようなルールが効果的かわからなかったため、まずは内容が間違っていないかを重視しました。1から自分で考えるよりもまずは草案をAIに作成してもらうことでベースとなるルールがすぐに整備できました。

レビュープロセスを活用したルール進化

  • PRレビューのタイミングを新しいルール化のチャンスとして活用
  • DevinにPRレビューを参照させ、新しいルールの追加を自動で提案
  • レビューを通した継続的なルール改善サイクルの確立

PRのレビューはメンバー間で行っており、設計に関する議論なども行われます。その際にルールの見直しや新しいルールの追加が行われます。Devinにレビューを元にルールファイルを更新するようなタスクを実行させ、さらに全員でそのルールのレビューを行うことでルールの改善とともにルールの浸透も行えています。

持続可能なAI活用のための設計思想

昨今、AIサービスは目まぐるしく変化していますが、以下の原則は変わらないと考えています

  • AIが開発しやすいプロジェクト設計:明確な構造と一貫性のあるコードベース
  • ルールの言語化:暗黙知を形式知に変換し、誰でも理解できる状態に
  • 普遍的な品質向上:人が読みやすいコードはAIも読みやすく、期待に沿ったアウトプットを実現

これからの時代はルールの整備や言語化がより重要になってきます。開発者がルールを守りながら作るよりも、ルールを守ったコードを生成してもらう方が効率的に開発できるようになるかもしれません。
そんな状況であっても、何が正しいとするかは開発者の判断に委ねられるため、知識のアップデートやメンバー間での議論による開発方針の統一化は怠らずに行っていくべきです。

チーム内でのAI活用共有会の実施

アプリチームでは定期的に昨今のAIサービス事情や具体的な活用事例の紹介を行い、全員がある程度の知識をキャッチアップできるようにしています。せっかくAI活用の基盤を整えてもメンバーが実際にそれを活用できなければ意味がありません。個人が独善的に動くのではなく、チームでの経験を共有することでより良い開発環境を作っています。

まとめ

アプリチームでのAI活用、特にVibe Codingの取り組みについてご紹介しました。
最新のAI技術のキャッチアップは必要ですが、それだけではなく、基盤となっていくルールの整備や言語化も必要です。
特に人がミスしやすい項目や環境はAIもミスしやすいため、それらを軽減し、人にもAIにもやさしい開発環境を整えていきたいですね。

Linc’wellでは、AIサービスを積極的に活用した開発を行っています。
最新のAIサービスをただ使うだけでなく、AIサービス自体がより効果的に働く環境を整えています。
少しでも話を聞いてみたいと思った方は採用サイトへ!
https://recruit.linc-well.com/contact

Linc'well, inc.

Discussion