🤳超便利と噂のJITERAを使って語学学習アプリの開発をしてみました！📱

綾沙汰

2024年9月11日 17:09

こんにちは。綾沙汰です。

今回は『JITERA』という、生成AIを活用したシステム開発のプロセス全体の効率化が可能なプラットフォームを紹介いたします。

また、当記事ではこのプラットフォームを使用して、実際に語学学習アプリを作成してみます！

✅️JITERAとは？

株式会社 Jitera が提供する開発AIエージェントです。

使い方は以下の３パターンが存在します。

Figmaのデザインデータをインポートする
GitHubリポジトリからコードをインポートする
直接要件定義（ユースケース）を入力する

例えば、Figmaのデザインデータをインポートすると、AIがデータを解析し、要件定義（ユースケース）を出力します。

その要件定義（ユースケース）からデータベース、ビジネスロジック、API（これらをまとめて『設計情報』と呼びます）をAIが生成し、最終的にコードの生成までを自動で行なってくれます！

しかも、要件定義（ユースケース）は文章形式であり、それを後から編集して自分好みの設計に書き換えることなんかもできちゃいます！

開発全体コストは『50%の削減』、開発全体スピードは『従来の3倍』、そして手戻りコストは『30%の削減』が期待される当サービスですが、もう少しだけ技術的な部分を掘り下げてみます。

JITERAは『GPT-4o』を利用します。また、OpenAI社が「学習・訓練に用いない」と利用規約で宣言しているAPIを介するため、データが学習されたり情報が漏洩するリスクは低いです。

JITERAが現在対応している言語ですが、バックエンドは PHP Laravel / Node.js（JavaScript）/ Ruby on Rails 、フロントエンドは React.js / React Native / Next.js をサポートしています。 また将来的に Java Spring / Python Flask もサポートを予定しているとのことです。

また、JITERAでは生成したシステム設計書とコードの情報をもとに、AIアシスタントが開発現場を最大限にサポートします。
このAIアシスタントは、エディター内でのリアルタイム支援も可能となっており、開発プロセスを圧倒的なスピードと精度で進化させます。

さらに、AIをビジネスで活用する上で多くの方々の懸念事項である「AIを正しく活用できているか？」をはじめとして、「AI活用のベストプラクティスを共有したい」、そして「AI導入によってどれほど生産性が向上したのか？」などといった疑問に応えるレポートの作成も可能となっています。

✅️コードの生成までやってみる

JITERAを使ったコード生成までの基本的な流れは以下のようになります。
（今回はFigmaデザインをインポートします）

プロジェクトの作成
JITERA内でプロジェクト名と、希望するフレームワークの指定
Figma で作成したインターフェースデザインのインポート
要件定義（ユースケース）からチケットを生成し、ユーザーストーリーに分割
設計情報（DB、ビジネスロジック、API）の生成
設計情報からコードを生成

１つずつ見ていきましょう。

📑1. プロジェクトの作成

JITERAを起動し、[Add Project] をクリックすると、新しくプロジェクトを作成できます。

プロジェクトの作成にあたり、ユーザは３種類のインプットの形式を選択可能です。今回は Figma でデザインしたデータを取り込むため [Import from Figma] を選択します。

今回のケース以外では、GitHubのリポジトリからコードを読み込んだり、JITERA内のAIアシスト機能を用いてユースケースを定義したりすることもできます。

ユーザーが選択できる３種類のインプット
（株式会社Jitera 公式Webサイトより）

📑2. JITERA内でプロジェクト名と、希望するフレームワークの指定

プロジェクト名、バックエンドフレームワーク、フロントエンドフレームワークを設定する画面に移ります。

今回は、バックエンドに「Ruby on Rails」、フロントエンドに「Next.js」を選択。複数種からフレームワークを選択できるのは嬉しいですね。

📑3. Figma で作成したインターフェースデザインのインポート

FigmaでデザインしたデータのURLを指定し、[Proceed with this link] をクリックすると、インポートを開始します。

なお、今回使用したFigmaのデザインデータは以下の３つとなります。

[Proceed with this link] をクリックした後に Figma で作成したデータが読み込まれるので、それらを選択し、[Generate Usecase] をクリックします。

これで要件定義（ユースケース）をJITERA内に作成できましたので、それを用いたチケットの出力準備が完了しました。

📑4. 要件定義（ユースケース）からチケットを生成し、ユーザーストーリーに分割

JITERAの画面上部のタブを [Usecase] に切り替えると、AIが生成したユースケースが表示されます。とりあえず１つを選択すると、そのユースケースの詳細が文章で表示されます。チケットを作成する前の段階となり、この内容は手動で書き換えることができます。

ユースケース「Interact with Conversation Chatbot」とその詳細

AIによって生成されたデフォルトのユースケースをそのまま使用することもできますし、JITERAが備える以下の機能を使用して、ユースケースを自分好みに作り変えることもできます。

翻訳機能
UX/UIエディター
JITERA AIチャット

以下、簡単に解説します。

「翻訳機能」は、ユースケース内の文章を一度日本語に直し、日本語で修正後、再度英語に変換する機能です。これは、ユースケースからチケットを作成する処理は英語で行なう必要があるのですが、この機能を使うことで英語が苦手な方でもユースケースの編集が可能です。

「UX/UIエディター」は、ユースケースを開いて右側にあるインターフェース画面を選択すると使用でき、各UIのコンポーネントの修正などができます。

「JITERA AIチャット」は、ユースケースなどの編集のヒントをAIに質問したり、作成そのものを実行させることができる機能です。使用法が分からなかったり、専門的で細かな指定をしたい場合は有用です。

今回は、特に編集を加えずに設計情報となるチケットを作成していきます。

📑5. 設計情報（DB、ビジネスロジック、API）の生成

ユースケースの画面右上にある [Generate] をクリックすると、チケットを作成できます。

しばらくするとチケットが作成されますので、[Ticket] タブを開き、ユーザーストーリーを確認していきます。

フロー上では以下の工程が完了したことになります。

各ストーリーの右下部分にある [Generate] をクリックすると、設計情報が生成されますが、まれにUI/UXの仕様を承認する必要があることを示すポップアップが表示されます。

というわけで、早速 [Approve UX/UI specifications] をクリックし、各コンポーネントについてチェックをします。

画面上の吹き出しを選択すると、右側の該当する各コンポーネントの説明がスクロールされて表示されます。１つ１つチェックし、問題がなければ [Approve all] をクリックします。

📑6. 設計情報からコードを生成

設計情報を作成すると、それと並行してコードも生成される場合があります。JITERAではコードの生成の際、GitHubの使用が必須のため、コード生成の前に GitHub のアカウントでログインする必要があります。

リポジトリを作成するために必要な情報を入力します。

全てのストーリーの [Generate] のクリックおよび処理が正常に完了し、設計情報またはコードに変換できました。

フロー上では以下の工程が完了したことになります。

残りの設計情報も全てコードに変換します。「Database, Business Logic, API」の一覧にある各設計情報の [Generate] をクリックしていきます。

全ての設計情報がコードに変換されました。

これでフローの最後の工程が完了したことになります。

＝＝気になった点＝＝
コード生成のプロセスにおいて、GitHubへのログインは必須となっており、生成後にリポジトリに自動でコードがアップロードされてしまうようなので（例えばお試しで使用したい場合でもアップロードされるため）、GitHub上でのデータ管理が煩雑になりやすい懸念があります。

また、外出先で第三者に実演などをする際にGitHubアカウント情報などの漏洩リスクの懸念もあり、正直言うと、この部分は改善点かと思いました。