【JITERA】システム開発生成AIツールを使って健康管理アプリに機能を追加してみた。
はじめに
この記事でわかる・できること
- 株式会社JITERAが開発した生成AIシステム開発ツール【JITERA】を使ったアプリ開発JITERAで何ができるのか
- JITERAでアプリ開発する時の手順
この記事の対象者
- 開発の効率を上げたいソフトウェア開発会社
- ユーザサイドで開発を一括でおこないたいという会社
- 個人事業主で、開発案件をもっと増やしたい方
動作環境・使用するツールや言語
- OS バージョン
- Windows 11
- ツール
- jitara
- 対応する言語
- PHP Laravel・Node.js（JavaScript）・Ruby on Rails・React.js、
- フレームワーク
- Next.js・React Native
JITERAとは何か
JITERA（ジテラ）は、株式会社JITERが開発した、ノーコード・ローコード開発ツールでWebアプリケーションのソースコードを自動生成できます。エディタ（GUIベース）を使用して、アプリケーションの要件定義を設定したり、Figmaでデザインした画面デザインをインポートして、コードを生成することができます。（生成できるのはフロントエンドからバックエンドまで幅広く生成します。
生成AIには最新のAIであるGPT-4oを使用していて、独自で高精度のコードを生成しますし、セキュリティも確保されてます。（GPT-4oはデータを「学習・訓練に用いない」としており、情報の漏洩されるがリスクが低いです。）
実際にJITERAを使ってアプリ開発してみる。【健康管理アプリのデータ同期機能追加】
では、実際にJITERAを使ったアプリ開発の流れを書いていきたいと思います。今回は、Figmaでデザインしたものを読み込んで、ユースケース作成、詳細設計、データベース、API、ビジネスロジック、コード作成までの流れの実践例になります。
1.FigmaでUIデザインを作成する
Figmaを知らない方のために説明いたしますが、Figmaは、クラウドベースのツールで、デザインとプロトタイピングを行えます。主に「ウェブデザイン」・「アプリケーションデザイン」に使用されます。クラウドベースなので、チームでリアルタイムに編集したりコメントを送ることができます。
2.JITERAでFigmaデザインを読み込んで、ユースケース作成、詳細設計、データベース、API、ビジネスロジック、コード作成まで一気に作成する。
それでは実際に、JITERAを使ってみます。
2.1Figmaデザインを読み込ませて、ユースケースを作成します。
読み込ませたいFigmaのURLを指定して、ボタンを押し、読みこませます。うまくいったか確認をしてユースケースを作成のボタンを押下します。
2.2作成されたユースケースを確認して、「Generate Ticket」ボタンを押下
作成されたユースケースで必要なものを、基本的には上流のものから選択して内容を確認して「Generate Ticket」ボタンを押下します。※修正が必要なら修正します。
2.3作成されたTicketから設計情報を作成します。
Ticketsタブをクリックして、作成されたTicketを確認します。問題がないならばGenerateボタンをクリックして、設計情報（データベース・API・ビジネスロジック）を作成します。
2.4作成された設計情報を確認していきます。
2.4.1データベースの設計情報を確認する。
データベースタブをクリックして、データベースの設計情報（ER図）を確認します。
2.4.2ビジネスロジックの設計情報を確認する。
ビジネスロジックタブをクリックして、ビジネスロジックの設計情報を確認します。ビジネスロジックはINPUT・Flow・Responseから構成されてます。
2.4.3APIの設計情報を確認する。
APIタブをクリックして、APIの設計情報を確認します。
2.5ソースコードが生成されているのを確認します。
Githubボタンを押すと、自動的に生成されたソースコードの確認ができます.
コードは自動的に生成されGithubリポジトリに登録されます。
JITERAに興味がある方は、こちらからお問い合わせください。
JITERAのAIチャット機能
JITERAのAIチャットのプラットフォームを使うと、特定のプロジェクトに関連する質問をAIがプロダクトオーナー、フロントエンドエンジニア、バックエンドエンジニア、プロジェクトマネージャーの視点から回答してくれます。
役割の違い：
プロダクトオーナー：ユースケースや設計文書についての質問
バックエンド：バックエンドのコードと関連する設計についての質問 (DB/ビジネスロジック/API)
フロントエンド：フロントエンドのコードについての質問
プロジェクトマネージャー：フロントエンドとバックエンドのエンジニアに関連するタスク、または誰に尋ねるべきかわからない質問
例えば、プロダクトマネージャーに以下のようなプロンプトを投入して、ユースケースを生成することも可能です。
プロンプト例
~~勤怠管理システムの「タイムシート閲覧機能」のユースケース
を作成して、できるだけ詳細に検証ルールを記述して。
テンプレート
#アクター
#前提条件
#メインフロー
#代替フロー
#事後条件
#検証ルール~~
バックエンド/フロントエンド/フルスタック開発者には以下のようなプロンプトを投入します。
プロンプト例
添付画像を基に〇〇スクリーンのコードを改善して
APIエンドポントのリストを提示して
この機能は試していないので、実際例はありません。
感想
以上でFigmaでのデザインの読み込ませから、ソースコードの作成までできましたが、Figmaでのデザイン作成の工程は除いて、jteraにFigmaでのデザインを読み込ませてから、ソースコードができるまで僅かに15分しかかかりません。
なので、開発工程が短縮できて、その工数分を他のもっと別のアプリケーションの構想にまわしたり、より、クリエイティブなことに時間を使えるなと思います。
また、プログラムの知識があまりない人でも簡単にコードを作れるので、アプリケーションの発想さえあれば簡単にアプリケーションが作れる時代になってきたなと思います。
おわりに
株式会社JITERAの公式ページには、開発工数が40％減・開発スピード3倍・粗利率30％UPと書かれています。
実績としても、GMO-Z.com RUNSYSTEMという開発会社では2021年以降、開発プラットフォームのJITERAを利用したプロジェクトをいくつも進めていて、100画面以上あるアプリケーションを2ヶ月で開発したりと、JITERAがあるからこそできた開発事例も増えてきています、他にも、JITERA導入で年間3億円の売上達成／株式会社VERTEX Technologies・JITERAを導入した予約システムのアプリ開発／株式会社東急リゾート＆ステイなど実績があります。
ご興味があれば、是非、お問い合わせをしてみてはいかがでしょうか？