このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

どもです。

風邪気味だなぁと思ったら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側の処理でも書いて行こうかなと。

ではではぁ。

またまた。