Tauri(Rust) × AI で作る GitGUIクライアントアプリ その2
2025.04.07
どもです。
風邪ひきました。完全に風邪引いちゃいました。
最近、ピークに太ってしまい再びプールに通い出したのですが、近くの健康センターが改修中ということで、ちょっと遠くまでいかないとプール施設がなく、そこまで向かっているのですが、完全に原因はそれだ。寒気がする。
ということで、今回は前回の「Tauri(Rust) × AI で作る GitGUIクライアントアプリ その1」の続きとなります。
今回は、前回作成されたデザインを元にTauriでのUIに適応していきたいと思います。
Tauri構築
まずはプロジェクト作成
# npm npm create tauri-app@latest # または Yarn yarn create tauri-app
プロジェクト名はbranchieとする。
その他はこんな感じで設定。
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun) ✔ Choose your package manager · npm ✔ Choose your UI template · Vue - (https://vuejs.org/) ✔ Choose your UI flavor · TypeScript
何ら至って普通。
cd branchie npm install
コマンド入力、
npm run tauri dev
で、はい。問題なくTauri GUI起動。
レポジトリも作成したので一旦こちら「webcyou-org/branchie」 にコミット。
で、今回はコーディングもがっつりAIにしてもらうので、前回の記事、Rustで創る MOS 6502 CPU その3 （Cursorと共に）でも使用している「Cursor」にガッツリ頼って作成しています。
まず、前回作成したデザインファイルを「Cursor」でComposer画面開きチャットに添付し、
「こちらがGUIのHome画面となりますので、デザイン適応のため、フロントエンド側の実装を行ってください。」と指示。
一発で行くかと思いきや、ちょっと意図した感じとは大幅に逸れている様子。
どうも、「Cursor」確認すると、体験期間が終了しComposerが課金しないと使えない様子で、これまでのチャット形式ぽい。（多分）
まずは、そもそもダークモードでもないことから、ダークモードを適応しつつ、ヘッダーの作成を依頼。
お。近い感じになりましたね。続けてサイドナビゲーションの作成。
おぉいいですね。ですが、項目が足りていないので、足りていない項目を指示して追加を試みる。
良いですね！追加されました。
細かいところはデザインと異なりますが、今の状況では大まかに実装できていればOKとします。
続けて、なんかLPぽい内容が入ってしまっているメインコンテンツ領域にコミットログなどのリストを表示させる。
良いですね！追加されました。
最後はフッターの領域。高さが妙に高かったりと、スクロールバーも表示したまんまになっていたりと
主に気になるところを修正してもらう。
ということで、それっぽい見た目に変更できました！
全くコーディングせずに瞬時にここまでできるのはありがたいですね ＞＜
ちなみに、生成されたソースは全く見ていないです。
このまま使用していくのではなく、あくまで、最初のボイラーテンプレート扱いとして扱っていきます。
詳細なデザインの適応やUXなどは手動で調整して行くし、現状Viewにガッツリ処理が入っている初心者実装みたいになっているので、きちんと最低限ドメイン層は分けるアーキテクチャを適応しようかと思います。
正直、商用でもなんでもないのでその辺は適当で良いかもしれませんが、やっぱりもしもの拡張を考慮し、きちんと作って行こうかなと。
むしろ、商用でかなり売上上げているプロダクトなのに、令和になってもユニットテストが無い、アーキテクチャが存在しないなど見受けられ、心配になったりもします。。
その辺ってやっぱり企業文化、エンジニア文化に依存するところがありますよね。
というわけで、今回は取り敢えず、ホーム画面が作成されたので、
次回はログイン、git クローンの画面を修正しつつ作り上げていきたいと思います。
ではではぁ。
またまたぁ。
