Tauri(Rust) × AI で作る GitGUIクライアントアプリ その3
2025.04.08
どもです。
風邪気味だなぁと思ったら39度まで熱が上昇し、病院に行ったらインフルエンザに感染しておりました。
インフルエンサーです。
どもです。
では、今回は前回の「Tauri(Rust) × AI で作る GitGUIクライアントアプリ その2」の続きとなります。
今回も極力、Cursorさんにお任せし、ノーコーディングで作成していきたいと思います！
なんか、前回「Composerが見当たらなくなった」「体験期間が終わり、課金しないといけない？」とか書いたのですが、調べてみると、どうやら「Composer」自体がなくなり「Agent」という名称に変更されたようです。
なんと。。流れが早い。。
まーどちらにしろとにかく、Cursorさんに作っていただくということで。
ログイン、クローン画面作成
まずは、ログイン画面を作成していくことに。
「UxPilot」が出力したUIから「要らないな。」と思ったところをFigmaでちょっと添削したのが以下のとおり。usernameとPasswordだけにして、よりシンプルにしました。
Gitレポジトリをクローンする画面はそのまま利用することにしました。
というわけで早速、Cursorさんに指示を与えログインページとクローンページを作成していきます。
ログインページのデザインを添付し、以下の指示を
「こちらが、初期に表示されるログインフォームです。
先程のHome画面とは別に作成してくれますか。」
と、2行与えるだけで。
はい、ログインフォーム用のコンポーネントを新しく作成します。デザインを見ると、以下の特徴がありますね： 1.ダークテーマのログインフォーム 2.Branchieロゴとタグライン 3.ユーザー名とパスワードの入力フィールド 4.緑色のログインボタン 5.全体的に角丸のデザイン 新しいコンポーネントとしてLogin.vueを作成します：
次に、このログインコンポーネントをメインのアプリケーションに統合するために、App.vueを更新する必要があります。認証状態に基づいて、ログイン画面かメイン画面を表示するようにします：
ログインコンポーネントを作成し、メインアプリケーションに統合しました。主な特徴は以下の通りです： 1.デザイン ・ダークテーマに合わせた配色 ・角丸のカード型デザイン ・アイコン付きの入力フィールド ・モノスペースフォントのサブタイトル 2.インタラクション ・フォーカス時のフィールドハイライト ・ホバー時のボタンカラー変更 ・フォームのバリデーション 3.レイアウト ・中央配置 ・レスポンシブデザイン ・適切なスペーシング 4.機能 ・ユーザー名とパスワードの入力 ・フォーム送信処理 ・認証状態による画面切り替え ・リンターエラーを修正するために、Login.vueコンポーネントにdefault exportを追加する必要があります：
これでログインコンポーネントの実装が完了しました。主な変更点は： 1.イベント発行の追加 ・loginイベントの型定義 ・認証情報の親コンポーネントへの受け渡し 2.フォーム送信処理の改善 ・コンソールログの代わりにイベント発行 ・TypeScriptの型安全性の確保 ・リンターエラーはtsconfig.jsonの設定に関連していますが、これはプロジェクトの設定で解決できます。 ・アプリケーションを実行すると： 1.初期表示時にログイン画面が表示される 2.認証成功後にメイン画面に切り替わる 他に調整が必要な箇所はありますか？
あぁだ、こうだ言うとりますが完了したみたいです。確認してみると、
おおお！素晴らしい！今回は一発でイケました。
入力すると、きちんとHomeへの遷移も行ってくれます。
特に指示していないのにここまでやってくれます。
では、続いて、Gitクローンを行う（入力する）ページを作成しましょう。
今回は遷移を意識しつつ、
「いい感じです。
続いて、こちらはGitレポジトリをcloneする画面です。
先程のログイン後にこちらに遷移し、入力後 Home画面へ遷移してください。」
と指示します。すると、
はい、Gitリポジトリのクローン画面を実装し、ログイン→クローン→ホームという画面遷移を実装しましょう。 新しくClone.vueコンポーネントを作成します：
次に、App.vueを更新して、ログイン→クローン→ホームの画面遷移を実装します：
コンポーネントにデフォルトエクスポートを追加する必要があります。まずLogin.vueを更新します：
申し訳ありません。<script setup>を使用する場合、デフォルトエクスポートは自動的に処理されます。Login.vueを修正します：
defineEmitsをインポートする必要があります。修正します：
新しいリンターエラーは、TypeScriptの設定に関連しているようです。tsconfig.jsonファイルを確認して、必要な設定を追加する必要があります。
tsconfig.node.jsonも確認しましょう： エラーメッセージの詳細を確認させていただけますか？また、エラーが発生しているファイルとその周辺のコードも共有していただけると、より具体的な解決策を提案できます。 現在の設定を見る限り： 1.メインのtsconfig.jsonでは： ・strictモードが有効 ・noUnusedLocalsとnoUnusedParametersが有効 ・moduleResolutionが設定されていない可能性 2.tsconfig.node.jsonでは： ・moduleResolutionが"bundler"に設定 ・Vite設定ファイルのみを対象 エラーの内容によって、以下のような対応が考えられます： 1.モジュール解決の問題の場合： ・メインのtsconfig.jsonに"moduleResolution": "bundler"を追加 2.型定義の問題の場合： ・必要な型定義ファイル（@types/...）のインストール ・skipLibCheckの設定調整 3.パスエイリアスの問題の場合： ・baseUrlとpathsの設定追加 具体的なエラーメッセージを教えていただけますでしょうか？
先程と少し変わってなんかバタバタしている様子ですがw
取り敢えず確認してみましょう。
おお。出来ています。
しかもフォームに関してはしっかりとバリデーションも設定されております。
遷移もしっかりと、ログイン→クローン→ホーム と出来ております。
素晴らしいですね。
今回ここまでの作成するのに10分も掛からず出来ました。
いやぁ便利な世の中になったものだ。
では、次回はRust側の処理でも書いて行こうかなと。
ではではぁ。
またまた。
