JITERAを使って読書管理アプリの開発をしてみた
JITERAを触る機会があったので、試しに読書管理アプリ（いわゆるkindle的な）を作ってみました。
結論、すごい！
AIがぱぱぱっとやってくれるので人間いらず！（便利というか、開発仕事の危機感🫠）
AIでのノーコードの世界ってほんとすごいですね。
JITERAってなに？
そもそもJITERAって？
という方もいるかもしれないので簡単に説明しますが、JITERAはAIを活用したノーコード開発プラットフォームです。
ただAIがプログラムコードを書いてくれるだけではなく
- ユースケース生成
- ユースケースからユーザーストーリーごとのチケット生成
- ユーザーストーリーから設計ドキュメント生成
- テストケース生成
といった上流も含めた開発プロセス全体をAIがサポートしてくれるプラットフォームです。
（サポートというか基本AIに丸投げできる）
もちろんコーディングもしてくれます。
JITERAを使うことで、マウスをカチカチするだけでどんどん開発が進んでいき、最後には生成されたコードをGitHub・GitLabに上げるところまで出来ます。
JITERAのインプットとしては、Figmaや既存のGitHub・GitLabコードがあれば開発知識なしでもアプリが作れちゃいます！
AIでの自動生成範囲は以下のイメージです。ほとんどJITERAによる自動生成！
興味ある方は公式サイト（株式会社 Jitera）を見てみてください。
それでは今回JITERAを使って読書管理アプリを開発した様子を紹介していきます。
プロジェクトの準備
まずプロジェクトを作っていきます。
プロジェクト一覧画面の右上の青い + Add Project ボタンをクリックします。
するとプロジェクトの始め方を聞かれるので以下から選択します。
- Figma からインポート
- GitLab からインポート
- GitHub からインポート
- ユースケースを定義
JITERAのプロジェクトはインポートだけではなく、ユースケースの定義から行うことも出来ます。
その際はAIのサポートを受けつつ進められます。
今回は以下のFigmaを用意しておいたので、こちらをインポートしました。
プロジェクトの詳細を設定
プロジェクトの素を指定したら、プロジェクト名と利用するフレームワークを指定します。
フレームワークはバックエンドとフロントエンドでそれぞれ選択します。
バックエンドフレームワーク（NestJS / Ruby on Rails / Laravel）
フロントエンドフレームワーク（Next.js / Vite / React Native）
今回は以下の設定でプロジェクトを作りました。
プロジェクト名：Readingadminapps
バックエンドフレームワーク：Ruby on Rails
フロントエンドフレームワーク：Next.js
JITERAとFigmaの接続
次にJITERAからFigmaへの接続を許可し、JITERAに読み込むFigmaのリンクを設定します。
Figmaのデータを取り込めたら、JITERAで開発対象にする画面を選択し右下の Generate Usecases ボタンをクリックします。
ユースケースからチケットの生成
Figmaの画像を指定しJITERAへ取り込みが完了すると、JITERAのメインの画面に戻ります。
メインの画面には上部に以下のタブがあります。
- Chat：JITERAのAIとのチャット（よくある生成AIのチャットの形）
- Usecase：生成されたユースケースのドキュメントを表示（詳しくは後述）
- Testcases：テストケースを表示（今回は使っていません）
- Tickets：チケットを表示（詳しくは後述）
- Databese：ER図を表示（詳しくは後述）
- Business Logic：ビジネスロジックのドキュメントを表示（詳しくは後述）
- API：APIのドキュメントを表示（詳しくは後述）
Usecase タブをクリックすると、左側にFigmaの画像を取り込んで 自動生成された ユースケース一覧が並んでいます。（名前も勝手につきます！）
一覧のユースケースをクリックすると右にそのドキュメントが表示されます。
内容は以下の通りで、詳細も一部紹介すると
（ユースケース：Viewing a Specific Book Designの場合）
- Actors（ユースケースの中での登場人物）
- User
- Mobile Application
- Preconditions（ユースケースの前提条件）
- The user has accessed the detailed view of a specific book within the "My Collection" section of the mobile application.
- Main Flow（ユースケースのメインの流れ）
- The user is presented with a detailed view of the selected book.
- The UI displays a large cover image of the book at the top of the screen.
- Below the cover image, the title of the book is prominently displayed.
（省略）
- Alternative Flows（ユースケースのメインの代替の流れ）
- If the user taps on the search icon in the top right corner, they may initiate a search within the book details.
- （省略）
- Postconditions（ユースケースの完了条件/状態）
- The user has read or reviewed the detailed information about the book.
すごい！😲 ハンパない
ユースケースの内容で問題がなければ、各ユースケースのドキュメントごとにある右上の青い Generate ボタンを押しチケットを生成します。
Testcasesタブでテストケースの設定を行わずにGenerateボタンを押すと以下のアラートが出ますが、今回はテストは飛ばすので Generate just tickets ボタンでチケット生成に進みます。
チケットから設計ドキュメントを生成
ユースケースから生成されたチケットは Tickets タブで確認できます。
チケットはユースケースをもとにユーザーストーリー単位で生成されます。
ユースケースをユーザーストーリーに分けずに一塊りで生成してしまうと非常に大きなPull Requestとなってしまうため、一定のユーザーストーリーごとに生成するようになっているようです。
Ticketsタブの画面の左側にユーザーストーリーが並んでいるので、それぞれ Generate ボタンをクリックして設計ドキュメントを生成します。
その際にUX/UIの確認が必要なユーザーストーリーは以下の表示がされ、Approve UX/UI specifications ボタンクリックで確認画面に遷移します。
確認画面ではこのように取り込んだFigmaの画像に対して、確認箇所に印がつき、右側にコメントのように確認内容が並びます。
確認箇所をクリックすることで以下の動画のようにコメントにジャンプすることも可能です。
各ユーザーストーリーの Generate → ボタンをクリックすると、Ticketsタブ画面の中央に設計ドキュメント（ER図、ビジネスロジック、API）のチケットが生成されます。
Ticketsタブ画面全体としては以下のような列の構成になっています。
- 左の列：ユーザーストーリーのチケット
- 真ん中の列：ユーザーストーリーから生成される設計ドキュメントのチケット
- 右の列：設計ドキュメントから生成されるコードのチケット
すべてのユーザーストーリーの設計ドキュメントチケット生成が終わったら、このような形で左の列のユーザーストーリーのチケットは空っぽになります。
真ん中の列の生成された設計ドキュメントチケットの中身は各タブ（Databese、Business Logic、API）で確認できます。
設計ドキュメントに問題がなければ、Ticketsタブの各設計ドキュメントチケットのGenerate →ボタンを押しコード生成します。
（設計ドキュメントが生成中の時は、該当ドキュメントのタブに読み込みアイコンが表示されます。）
Databaseタブ
ユーザーストーリーから生成されたデータベースの設計情報はER図で表示されます。
普通にこの自動生成だけでもめちゃくちゃ便利ですね！
Business Logicタブ
ユーザーストーリーから生成されたビジネスロジックの設計情報はBusiness Logicタブ画面で表示されます。
各ロジックが左側に一覧で並び、クリックすることで右側に設計情報が表示されます。
内容としては、Input、Flow、Responseという形になっています。
APIタブ
APIのドキュメントもとても素敵に生成してくれます。
一部拡大するとこのような表示になっています。
そして右側にはAPIのサンプルが載っています。
こんな綺麗なドキュメントが揃っている開発チームもなかなかないのではないでしょうか。
そしてこれが人間のコストゼロで作られているのが本当にすごいです。
GitHub / GitLabにPush
コード生成まで完成したら、JITERAから直接GitHub / GitLabに上げることが出来ます。
画面左上に Connect to Git ボタンをクリックし選択します。
選択すると接続の許可が求められ、接続に成功したらリポジトリを作成（もしくは既存のリポジトリに接続）する画面になります。
新規でリポジトリを作成する場合は、バックエンドとフロントエンドそれぞれのリポジトリ名を指定し作成します。
今回はGitHubに上げたので、GitHub上でも確認してみましたがちゃんとコードが上がっていますね。
キーボードを一切触っていないのにコードのファイルが！（実際はリポジトリ名入力とかで触りましたが・・）
以上で完了です！
まとめ
JITERAで読書管理アプリを開発してみましたがいかがでしたでしょうか？
とてもAIのサポートが強力でしたね。優秀な部下に丸投げ感！😁
実際にコーディングは全くしていないので、開発者以外のPMやデザイナーでもアプリ開発が可能だと思います。
また、開発者が使った場合でもAIに大部分をお任せできるので、かなり開発全体の効率化ができると思います。
これならば気軽にデモ作成やPoCも行えるので、手戻りの少ない開発環境づくりにも役立つのではないでしょうか。
AIの進化と活用は驚くばかり。漫画や映画の世界のロボットとかも、もう夢の世界だけの話ではないのかもしれませんね。
Discussion