【Cursor入門】初心者OK！AIを使ってアプリ開発する方法を全て解説します ~AI駆動開発入門~

はい、どうも皆さんこんにちは、しです。今回はですね、カーソル入門ということで、ま、皆さんの開発速度2倍3倍に上げてくれる、ま、魔法のようなエディター、カーソルを、あの、徹底解説して、ま、この動画1本で全てを理解していただくという動画を撮っていきたいと思います。

私、カコでこのカーソルのエディターを1年くらい使っておりますので、ま、こういう使い方便利だよねとか、ま、新しくアップデートされたので新しい機能ね、出てきました。ま、カーソルの初期設定から、ま、カーソルルールの設定だったりとか、え、ま、コパイロット機能とかシンボル機能とか、ま、ドキュメント読み込ませる方法とか、ま、あとはコンポーザー機能と、あとエージェント機能ですね。ま、あとMCPサーバー接続したり、結構ね、アップデートされました。なので、ま、今回入門ということで、エディターについて全て解説していくということにしていき

ます。

この動画最後まで見れば、ま、Webエンジニアの方は解説速度2倍3倍になったりとか、ま、これから非エンジニアの方が、ま、個人開発始めてみようとか、自分のプロダクト作ろうってなった時に、え、このカーソルってのは結局必須になります。はい。ま、結構な企業で、ま、採用されてるエディターだと思いますので、これを、ま、ちゃんと学んでおくと、AI駆動開発っていう基本が、ま、全て学べるような動画にしますので、ま、是非最後までご覧ください。

え、このチャンネルでは、エンジニアとしての幅広い知識を学んでいただくためのチャンネルになっておりますので、気になる方、今のうちにチャンネル登録よろしくお願いします。ということで、早速始めていきましょう。

じゃあ、カーソル学んでいく前に、このカーソルを使ったアプリケーション、どんなもの作れるのかっていうのを手本をちょっと見せていきたいんですけども、私が最近作った個人開発のノトプっていうアプリケーションですね。これ前のYouTube動画で説明してるんですけど、ま、こんなLP作ったりとか、ま、アプリケーションですね、作ることはできるし、ま、今だとですね、ま、今ユミで作ってる、ま、カーソルとかいろんなAIツール使って、Xクローン作ってみるっていうやつとか、作れますし、ま、YouTubeでも紹介したYouTubeクローンですね、ま、こういったものも、ま、サクサク作れるっていう形になります。

なので、カーソル使いこなせれば、皆さんが今頭の中に思いついてるアイデアですね、ま、これをWEB上に表現できるって言ったことはできますので、ま、是非ともね、カーソル学んでいただきたいと思っております。

はい、ということで導入これまでにして、まずはカーソルのインストールから始めていきたいと思います。はい、これからカーソル触っていきたいよという方向けにですね、ちょっと紹介していきましょう。はい、カーソルと検索していただくと、一番上に出てきますので、これクリックしてください。で、Windowsの方はダウンロードfor Windowsで、Macでアクセスすると、ダウンロードforMacと出てきますので、ま、このボタン押していただけると、ま、ダウンロードされるので、ま、セットアップウィザードとか開いてですね、ま、インストールを進めていってください。ま、そこら辺はね、簡単にできますので、ま、皆さん各自でやっておいてください。ま、進むボタン押していくとですね、簡単にインストールできますので、ま、そこはちょっと皆さんでやってみてください。簡単なので。はい。で、これでもインストール完了するとですね、ま、アイコンがデスクトップ上におそらく出てくるので、ま、これダブルクリックすると開くことができます。はい。ま、こんな感じのエディターと言われてるものが出てきますので、ま、これでとりあえず簡単にインストールができたと思います。はい。

はい、で、初めてカーソル導入した方は、このね、左上のタブですね。これ英語になってると思うので、日本語に直していきましょう。え、どうすればいいのかというとですね、ま、表示っていうとこですね。ま、ディスプレイですかね、おそらく。で、コマンドパレット、一番上のとこですね。これクリックして、で、ここにですね、コンフィギュアセットするっていう、コンフィギュレーターの使い方なんですけど、CBを押すと、この左側のですね、え、ま、サイドバー、これ出すことができます。ま、ファイルディレクトリー見たりとか、ま、ファイルを検索したりとか、ま、エクステンション、拡張機能入れたりとかですね、そういったものが色々出てきますので、はい。

え、CBで開閉できるということを覚えていてください。で、ターミナル開きたいという場合は、CJですね。Windowsの方はそうすると、ま、こんな感じで、はい、デバッグだったりとか、ま、ターミナルとか出てきますので、ま、ちょっとショートカットキー覚えておいてください。で、後でコンポーザーとかチャット機能も紹介するんですけど、ま、その時のショートカットキーというのは、CLですね。これを押すと、チャットが出てきます。ま、AIにこう、ま、チャットGPTみたいにこう質問したりできるチャットですね。であとは、CIですね。これ押すと、コンポーザーっていうのが出てきます。ま、これちょっとコンポーザー紹介する時に説明しますので、とりあえず、こういったショートカットキーがあるっていうのは覚えておいてください。

じゃ、早速カーソルの初期セットアップを始めていきます。右上にですね、歯車のマークがあると思います。はい。え、こちら押してください。ま、カーソルの細かい設定ができます。で、初めて使う方はアカウントまだね、ログインしていない、作ってないと思うので、私もね、サインインしてみます。はい。ま、GitHubとかとね、あの、連携開発者の方はGitHubで連携すればいいと思います。はい。GitHub、ま、持ってない方はGoogleとかでも、ま、いいんじゃないかなと思います。はい。ま、私はGitHubでサインしていきます。はい。イエスログインと。ま、そうすると、こんな感じで自分のメールアドレスが表示されてると思います。私はプロプランに入っております。で、どのくらい今使ってるのか確認した時は、このマネージボタンを押していただくとですね、今どれくらい使ってるのかってのが分かります。私は、え、プレミアムモードが300341今使っていて、あと2日後にまた更新されるってことになります。

で、せっかくなので料金プラン見てみるんですけど、このプライシングのところで見てみますね。ま、ホビープランでもね、あの、え、2週間のプロの無料トライアル使えますし、ま、普通にAIとペアプログラミングできます。はい。ま、モデルによっては無料でね、あのAIとペアプロできますので、ま、無料でも全然使えます。で、私は20ドル払っておりますので、ま、500リクエストであれば、ま、ファストプレミアムリクエストと、ま、AIの回答速度がめちゃくちゃ早くなるっていうところですね。ま、こういった恩恵が得られるようになります。ま、個人開発がっつりしたいとか、ジムでがっつり使いたいって方は、この20ドルに課金すればいいと思います。ま、会社だったらね、AIツールの導入は、ま、無料で提供されてるかもしれません。ま、それは企業によると思います。ま、ちょ、1個1個丁寧に見ていきますね。

はい、VSコードインポートっていうのは、以前VSコードエディター使ってた方の、ま、拡張機能ですね。これを全てインポートできますので、ま、インポートしたい、そのまま引き継ぎたいという方は、このコンファームボタンで確認ボタンを押しといてください。はい。私は以前やりました。

はい、これは、で、この下のルールズforAIっていうのは、ま、これからのコンポーザーとか使って、あの、ペアプログラミングしていく時に、どういった出力、どういったルールを守って欲しいか、っていうのを決めることができます。ま、今回私は日本語でお願いしますっていうところだけで打ち込みました。はい。なので、全ての回答結果は日本語で出力されます。

で、この設定がプロジェクト全体の設定なんですけど、じゃ、個別でカーソルのルールを設定したい場合ですね、ま、それは、カーソルルールズっていうファイルを作って、ま、個別で、あの、詳細に、ま、こういう風な出力にして下さいね、って決めることができます。これチェック入れといてください。デフォルトでチェック入ってると思います。で、このチェックを入れた状態で、プロジェクトルールズっていうとこのアニュルール、この青いボタンを押すと、プロジェクトごとにですね、カーソルルールの設定ができます。で、これに関しては、え、ちょっとカーソルルールズの使い方のところで説明しますので、まとりあえずこれ一旦スルーでいきましょう。

はい、で、ま、これ以降のエディターとかなんですけど、これは、ま、そのエディター自体の設定ですね。フォントをどれくらい大きくするのかとか、え、タブを押したらどれくらいスペースを開けるのかみたいな。これはエディター上の設定になります。これはVSコードでもできた設定ですね。これは各自、ちょっと適当に開発しやすいように設定していてください。

で、続いてプライバシーモードですね。ま、これ私はエナブルでプライバシーモードにしております。ま、質問がある方はここに聞いてください、っていうことですね。はい。これが一般的な初期設定になります。

じゃ、続いてモデルズタブを押してですね、モデルの設定をしていきましょう。で、デフォルトでこのようなチェックマークが入ってると思います。クロード3.5ソネットとか、スモールとか、GPT4。ま、最近だとO3ですね。ChatGPT O3 miniがProに入ってる方は無料で使えます。うん。ま、私まだ試してないんですけど、え、ま、O3もかなりあの賢いというので、これ使ってみてもいいと思います。私は普段はクロード3.5ソネットでコード生成とかしております。で、他にもDEEPシークとか、最近だとR1とかが、え、流行ってるので、ま、これチェック入れると、これが使えるようになるという形になります。ま、個人的にね、新しいモデルが出てきたとしても、そこまで回答精度の質の良さってあんま変わらないかなって正直思ってます。クロード3.5ソネット、結局私使ってるので、ま、デープシークとか使っていただいてもいいんですけど、ま、そんなに大差ないんじゃ

ないかなって思ってます。ま、DEEP civeの方が安価であの、早い出力結果になるかもしれないので、ま、その場合はこちらとかに移行するかもしれないです。ま、そこら辺はね、ちょっと使ってみようかなと思いますので、ちょっとチェック入れときますね。いくつか。ま、ここら辺使ってみますね。はい。

じゃあ続いて、OpenAPIキーの設定とか、なんたらキーの設定ってあるんですけど、ま、今回は皆さん設定しなくて大丈夫です。で、え、カーソルのプロプランに入ってる方は、ま、こんなAPI設定せずとも、ま、クロードも使えますし、ま、O3、ChatGPTのモデルも使えます。なので、このAPIキーは設定しなくて皆さん大丈夫です。で、これ設定しなきゃいけない時っていうのは、え、例えば、ま、これカーソルに課金していない方ですね。課金していない方で、アンソロPICAPI、クロードの会社なんですけど、これに既に課金してる方、APIに例えば20ドル課金してる方は、そのクロードで課金してるAPIのAPIキーですね、これを貼り付けると、ま、そちらで課金してるお金を消費して、え、このカーソルを動かすことができ

るっていうものなので、ま、既にOpenAI社とかにAPI課金してる方は、ま、そちら貼り付けていただいて使ってもいいです。ま、ですけど、私の場合はこのカーソル自体に課金してるので、この設定は、ま、必要ないと、いう形になります。ま、ザAPIとかも使ってる方は、こちらでもカーソルに課金せずに使えますよということで、ま、もし持ってたらこれ使ってみてください、という感じです。ま、これ

がモデルの設定でした。

じゃ、続いてチャットセクション見ていきます。ま、ちょっと重要なとこだけ見ていきますね。で、これまずカーソルチャットのとこなんですけども、え、これはコード保管を勝手にしてくれます。AIが、ま、GitHub Copilotと同じ効果が得られるものですね。はい。ま、今から書こうとしているコードを良きして、ま、保管してくれるというものになります。これがカーソルチャットになりますので、ま、使いたい方はチェック入れといてください。私はね、講座とか動画の関係で、ちょっとこれチェック入れちゃうと、あの、説明しにくくなるので、私はチェック外してるんですけど、GitHub Copilotみたいな感じでね、コード保管して欲しい方は、これチェック入れててください。ま、デフォルトでチェック入ってると思います。

で、チャットコンポーザーに関する設定なんですけど、ま、ここら辺はね、もうデフォルトの状態のままで大丈夫です。うん。ま、これ例えばどういう設定できるかって言うと、これですね、オートスクロールと、ま、つまりこう、ま、メッセージが追加されていくごとに自動的にスクロールしてくれたりとか、それを許可するか許可しないかとか、例えば2番目だと、今聞いているファイルじゃないファイルですね、他のファイルに対しても、ま、ファイル、あの、コードの変更を許可するかどうかみたいな、そういう設定ができます。なので、これデフォルトのままで大丈夫です。

はい。で、ま、その下のイナブルヨロモードっていうのがあるんですけど、このヨロモードっていうのは、ま、僕たちがレビューとかもしないと、つまりAIが自動的にもうコード生成を全部してくれるって感じですね。例えばTODOアプリ作ってくださいっていう風に1回指示出しすると、もうそのTODOアプリ完成まで全部ね、あの、作ってくれるっていうのがヨロモードです。これ後で試してみます。はい。今チェック外れてると思いますね。で、このヨロモードチェック入れると、エージェントモードが使えますので、ま、そういったものもね、私たちを何もコード書かなくても、ま、アプリケーション作れるっていうモードになります。ま、ですけど、細かいカスタマイズしたい時とかは、全部エージェントに任せると、ま、出戻りが大きくなっちゃいますので、私は基本的にはチェックを外して、エージェントモードをあまり使わない形でやってます。はい。ま、ですけど、コードのリファクタリングとか、ちょっとしたあの、ファイルの、あの、綺麗にしてくださいとか、そういったえ、使い方であれば、ま、全然使えるかなっていう形です。これ後で試してみましょう。で、他にもちょっといろんなね、あの、チェックリストあるんですけど、ま、基本的にデフォルトで大丈夫で、ま、例えばラージコンテキストだったら、これチェック外れてるんですけど、これは、要はAIがどれだけコンテキスト長く読み取って、もっと正確なものを、え、出してくれるのかっていう設定ですね。ま、ですけど、これ使うと、ま、そのトークンの使用量ってのが結構増えちゃいますので、基本的にはこれチェック外していただいて大丈夫かなと思います。はい。あと、細かい設定なので、ま、そのままで大丈夫です。ま、気になる方は、ちょっと1個ずつ調べてみてください。

じゃ、続いての設定なんですけど、コードベースインデクシンググっていうのがあるんですけど、私100%になっています。これは、AIがプロジェクトコードの全体を検索して、え、ま、より精度の高い、あの、レスポンスを返してくれるような設定をする時に、このコードベースっていうのはインデックスしとかないといけないってとこですね。なので、皆さんこれをインデックスしておいてください。はい。ま、インデックスボタンみたいなのが多分あると思うので、え、これを100%にしておくと、より精度の高い回答があるので、ま、これ100%にしておきましょう。

で、その下のMCPサーバーズっていうのがあるんですけど、これ後で実際に使ってみるんですけど、これ一言で言うと、ま、YouTubeのAPIだったりとか、ま、GmailのAPIで作ったMCPサーバーを用意しておいて、ま、それと連携することによって、ま、例えばYouTubeの何々のデータを引っ張ってきてくださいとか、GmailのMCPサーバーだったら、ま、そのGmailの送信をカーソル上でできるってことですね。はい。ま、コンポーザーと組み合わせてMCPサーバーを連携させて、ま、事前に用意しているMCPサーバーをここに登録できるんですよね。青いボタンで、ま、そのMCPサーバーまでのURLを貼り付けて、ま、例えばYouTubeのデータ取得用の、ま、サーバーを自分で作ったりとか、もう既に用意されてるものがあるので、そういったものを連携しておくと、そのYouTubeのデータ取得も簡単にできるし、そのデータを使って、え、カーソルでも開発を続けることができるみたいな。ま、YouTubeの他にもノーションとかのサーバー、MCPサーバーを使って、ノーションで自分でメモしている、え、内容を開発に読み込ませたりとか、そういった開発の可能性がもっと広がるような、え、機能を提供してるのが、このMCPなので、ま、これは後で詳しく、あの、具体例とか交えて説明していきます。

思ったよりちょっと初期設定の説明が長くなっちゃってるんですけど、ま、サクサクいきました。で、ドキュメントなんですけど、これはもうその名の通りね、ドキュメントを記憶させることができます。例えば僕NEXTJSのね、ドキュメント買わせてるんですけど、サードパーティーのライブラリーだったりとか、え、フレームワークを使時に、最新のデータがやっぱり必要になりますね。ま、例えばNEXTJSの今バージョン15が安定してるのに、じゃ、バージョン12とか13の使ってもらったら困るわけじゃないですか。なので、最新のドキュメントに対応させるために、ま、こうやってドキュメントを自分で、あの、追加することができるってのが、ドキュメントです。はい。で、ま、エディターとかあるんですけど、ま、ここもデフォルトで大丈夫です。細かいとこなので、ここはスルーします。で、ターミナルもそのままで大丈夫です。で、ベータのとこなんですけど、ま、これは、まだベータ版なので、説明はしなくていいかな、という形です。ま、余裕があればノートパッドも説明するかもです。です、という感じで、え、カーソルの初期設定以上になります。お疲れ様でした。

じゃ、早速カーソルの強み、あの、どんだけすごいのかっていうのをお見せしたいと思います。まずは、はい、じゃ、簡単にAmazonクローンということで、ECサイトですね。こちらを、ま、ちょっとUIとか外観を作りながら、ま、このカーソルのすごさ、こちらをお見せしていきたいと

思います。はい。

ま、まず今どこのディレクトリにいるのかを確認したいと思います。今、デベロップメントっていうディレクトリの中にいるので、ま、ここはね、プロジェクト作る場所ではないので、ちょっと移動したいと思います。で、ま、適当にテストというね、ディレクトリ作ってますので、ここでちょっとAmazonクローンを作っていきます。本当に、あの、本格的なものではないです。ま、今回サンプルで作っていきたいと思い

ます。

じゃ、カーソルの使いどころ、ちょっと見ていきましょう。まずNEXTJっていうのを使っていきますので、え、ターミナル上でですね、コントロールKをしてみてください。そうすると、下にですね、こんな感じで、え、打ち込むところが出てきまして、ここでね、例えばNEXTJSっていうフレームワークがあるので、NEXTJSを使ってAmazonのようなECサイトですね、を作りたいですと。はい。え、まずは初期、初期セットアップですね、を開始してください、という風に打ち込んでいきましょう。で、これでね、エンターキーを押してください。そうすると、自動的にターミナルが実行されると思います。で、え、これをコントロール+Lボタンを押していきます。ま、エンターキーでも大丈夫です。で、色々聞かれますので、ま、これはエンターキー自分で押していき

ますね。で、ま、色々聞かれるんですけど、これは全てエンターキーで進めていきます。ま、ここら辺はNEXTJSの知識なので、え、XJS知りたいという方は、私の無料のYouTube動画、もしくはユミ講座でしっかり解説しておりますので、是非、概要欄除いてみてください。ま、もしくは新コードキャンプのオンラインスクールもやっておりますので、是非、概要欄除いてみて

ください。ま、月額プランと買い切りプラン、2つね、用意していこうと思いますので、見てみて

ください。

はい、ということでNEXTJSの準備できたみたいです。じゃあですね、CDコマンドで移動しましょう。Amazonクローンに移動して、CARAドで立ち上がるかなあ。環境パス通ってないので、え、ま、ちょっとディレクトリは手動で立ち上げていきます。フォルダーラから、え、デブビル、はい、テストのAmazonクローンですね。ここ選択して、フォルダーを選択すると立ち上がります。皆さん、も試しに作ってみるといいと思います。今、AIでここまで簡単にできるのっていうのが分かると思います。はい。プロジェクトの雛型立ち上がりましたので、ちょっと試しにローカルサーバーを立ち上げてみたいと思います。NPMRDEBで立ち上がりますので、ローカルホスト3000番でブラウザで開いてみてください。はい。ま、これがトップページになるわけですね。ここにAmazonのようなものを作っていきたいと思います。

カーソルののすごさ、見ていきましょう。え、まずですね、じゃ、コンポーザーと、え、チャット機能ですね。これ、どっちよく使うのか、え、どういう風に使い分けるのかって言うと、基本的に私はこのコンポーザーというものを優先的に使って、ファイルを作成したり、コーディングしたりとか、ま、AI駆動で全て作ってもらうっていう手法を取っています。で、チャットはどういう時に使うのかって言うと、例えば、ま、ファイルの探索だったりとか、え、ま、これこれれの実装しているファイルを探してみてくださいとか、このファイルの説明をしてください、みたいな感じで、ま、調べ物とか探索の時にチャットを使います。であの、基本的にコーディングを書くっていうものに関しては、全部コンポーザーに任せています。僕の場合はね。はい。なので、チャットはちょっと後で使いましょうか。チャットは1回閉じてしまいます。閉じる時は、ま、こんな感じで右側に全部やればいいです。

で、コンポーザーに聞いていくんですけど、まずここのモデルで選択することができます。で、私はあの基本的にクロード3.5ソネットを使っております。別に他のモデル使っていられても構いませんですけど、私使ってみたところ、結局はクロード3.5ソネットが非常に精度がいいので、結局はこちらを使っております。デフォルトでもこちらになってると思います。で、この右下、ちょっと見づらいんですけども、ノーマルかエージェント、こちら選べるんですけども、ま、エージェント機能っていうのは、もうAIが全部アプリ作ってくれるっていうモードですね。ま、ヨロモードをチェック入れないと使えないので、これ後で使っていきます。うん。まずはノーマルモード、デフォルトのモードにした状態で、ちょっと聞いていきましょう。はい、Amazonクローンを作りたいです。と、まずはUIだけを作っていきます。と、ま、後でちょっとカーソルルールズっていうファイルも置くので、ま、とりあえずこのカーソルのすごさ見てみてくだ。コンポーネントはなるべく分けるようにしてください。はい。で、えっと、画像もね、配置することができます。これ右に右下にイメージっていうのがあるので、ここからね、参考となる画像を選択して見せることもできます。ちょっと試しにやってみましょう。ちょっとAmazonのね、あの、参考となるページをちょっとスクショ取っていきたいと思い

ます。

Amazonで検索して、ま、ちょっと私の住所情報とか見せたくないので、適当な郵便番号とかになってます。で、え、ちょっとスクショだけ取らせてください、という形ですね。新着情報で、例えばこんな感じの見た目にしたい場合は、え、Windowsであれば、ま、スクショ取れますよね。はい。ま、Macでも取れると思います。こんな感じでパッと取ってきてあげて、で、CVで貼り付けられます。で、こんな感じで、え、忠実に再現してください、という風にして、ちょっと聞いてみましょう。はい。で、エンターキー押していきます。ポンと。ま、もちろんUIに関してはね、ボルトニューっていうものが非常に優れてるので、そちらでUIを作っていただいても構いませんし、ま、カーソルでも全然UIの吐き出し、まあまあ綺麗なもの出せますので、ま、全てカーソルで完結させていただいても大丈夫です。で、UIに関しては今だと、ま、デフォルトでTAILwndCSSっていう、NEXTJSのライブラリーが使われていて、プラスUIライブラリーですね、SHADCNUIっていう高品質なライブラリーがありますので、ま、そういったものをしていただいても大丈夫です。はい。ま、そこら辺は別の私の動画見ていただいても構いません。

ということで、ちょっと色々出してくれました。これがディレクトリ構造になっていて、まずヘッダーコンポーネントを作りましょう、ということで、ここですね。このファイルのところクリックしたら、そのファイル該当ファイルが開きます。こんな感じで、コンポーザーを右寄せにすると、ま、見やすいと思いますね。はい。で、緑のところが新しく追加したものなので、Cshift+Yもしくは、ここをクリックすると承認することができます。はい。これ私コーディングしてないですけど、コンポーザーが自動的に書いてくれました。ファイルも作ってくれました。素晴らしいですね。

じゃ、続いて見ていきたい時、もちろんこちら右側の、え、グローバルCSSとか、このサブヘッダーを押していただいてもいいんですけど、まいちいち押すのが面倒くさい場合は、この左下ですね。え、サブヘッダーTSXがありますので、こちら押すと次に進むことができます。ま、これも許可していきます。で、グローバルCSSも許可していきます。HomeTSXも許可していきます。で、TAILWindowjsファイルは、えっとですね、JSなんですけど、これ元々TSファイルがあるんですよね。なので、configJSに関しては、今回はらないかな、という形です。はい。

これでどうでしょうか。ま、ですけど、まだエラーがあります。と、サーチバーとロゴが、えっと、追加されていませんよ、ということで、ちょっと続いてやってもらいましょうか。これも用意してください、とはい。私のちょっと顔で見づらいかもしれませんが、ま、こんな感じで日本語で、ま、ペアプログラミングしていきながら、え、自分たちは承認していくだけっていう作業になるのが、ま、このカーソルのAI駆動開発になります。ま、基本的に僕個人開発でもほとんど日本語と、と日本語とのやり取りで全てコードを完成させています。ま、プログラミングの知識がない方は、しっかりコードの内容を理解した方がいいと思います。ま、僕は、ま、ある程度NEXTの使用歴が長いので、ま、別にレビューせずとも大型ね、OK出しちゃうんですけども、まだちょっとちゃんと理解できていない方は、理解しながらやっていくといいと思います。ま、細かい修正とかも結局必要になるので、その時にAIが、じゃ、ちゃんと使えるのかって言うと、やっぱり基礎となる知識がないと、美修正ってのがしにくいので、例えばCSSの基礎知識知識とかがないと、あの、UIの変更とかで詰まったりするので、ちゃんと基礎は学ぶべきだなと思います。ま、ちょっと待ったんですけど、ちょっとエラーになっちゃいましたね。え、もう1回聞いていきましょう。ロゴとサーチバーの追加お願いします、と。適当に画像は置いていいです。はい。

修正してくれました。ま、サーチバーがちょっとエラーになってるんですけど、これは、ま、相対パス、もう1回読み込めばエラーは消えます。で、今の状態確認するんですけど、ま、こんな感じになっていて、ま、こんな感じでAmazonクローンのような形にはなってなくて、ちょっとおかしくなおかしな形に塗ってます。ま、これはなんでかって言うと、ま、アップディレクトリ配下のPTSXの修正が全然できていないっていうところですね。なので、それも尋ねていきます。本当は最初からカーソルルールで指定しておいた方がいいんですけど、NEXTJS14以降のバージョンでね、お願いします、と。で、ま、今回このページTSXを修正して欲しいので、その胸も聞きたいという場合はですね、これね、ちょっとしたテクニックなんですけども、アットマークを押すとですね、ファイルとかフォルダーとか色々指定できます。ま、これ後で、1つずつ説明するんですけど、まずファイルズですね。ファイルズの修正したいとろですね。ページTSXなので、これ選択すると、これを指定できます。はい。これを修正して、Amazonクローンに近づけてください、という風にしましょう。はい。

という、ことで見ていきましょう。ま、CSHIFT+Yでも承認することができるので、ま、どんなやり方でも大丈夫です。ま、私はこんな感じでクリックで承認していこうかなとは思っております。はい。ま、もしくは、ま、全部一括で承認したい場合は、私の顔で見づらいんですけど、右下にアクセプトオールっていうのがあります。ボタンが、これ押すと全部一括で許可できます。はい。で、この状態で確認するとはい、どうでしょうか。いい感じじゃないでしょうか。ま、Amazonクローンのヘッダーだけ用意できてる状態なんですけども、え、ま、結構近い形で実装できたと思います。はい。ま、せっかくなので、商品一覧も出力したいと

思います。はい。

ということで、商品ダミーデータとか置いてですね、ちょっと修正してみました。で、これ確認してみると、こんな感じになりましたね。ま、ちょっとAmazonぽくなったんじゃないかなと思います。ま、もちろんまるまるAmazonからコピーするとですね、著作権的にダメなので、ま、色味の修正とかですね、デザインの変更は適宜やっていくと、いいんじゃないかなと思います。ま、とりあえずコンポーザーのすごさ、皆さん分かっていただけたと思います。ほんの数分で、ま、このAmazonのような見た目も作ることができます。

じゃあ、もっとカーソルを精度良く使いたいとか、良さを引き出すために、ちょっといろんな機能を紹介していきたいと思います。まず紹介するのが、カーソルルールズっていうですね、え、ものを紹介していきます。じゃ、カーソルルールズって何かって言うと、ま、これね、最初の初期設定のところで見たんですけど、ここの、ま、プロジェクトルールズっていう、この青のボタンですね、え、これを押せばファイル後のルールを決めることができるんですけど、じゃ、このプロジェクト、今作ってるAmazonクローンプロジェクト自体にルールを設定したいっていう場合は、どうすればいいのか説明します。え、ちなみにここのRSforAIの日本語にしてるの は、これはこのプロジェクトだけじゃなくて、他の全てのプロジェクトですね、に適用されるルールになります。はい。なので、基本的に、ま、ここはいじらなくて、プロジェクトごとに私はルールを決めてます。うん。

じゃ、具体的にどうやって決めるのかと言うと、プロジェクトのルートディレクトリに、カーソルルールズファイル、を設置します。はい。え、プロジェクトのルートディレクトリっていうのは、ここの、ね、これを選択した状態で、左側のサイドバー、ね、選択した状態で、新しいファイルですね。ここに、ちょっと見づらいんですけど、カーソルルールズですね。はい。こういったファイルを、作成してください。このファイル名は、ちゃんと合わせるようにしてください。はい。で、ここにですね、このプロジェクト用の、え、ルールを決めることができます。うん。ま、じゃ、例えばなんですけど、なるべく、え、コンポーネントはファイルに分けてくださいとか、ま、SHADCNUIのライブラリー使いたいのであれば、それを積極的に使ってくださいとか、ま、例えばNEXTJS、今回使ってるので、RSCっていう、え、ま、サーバーコンポーネントを積極的に活用してください、みたいな、ま、そういうルールを設けることができます。ま、こうやって手打ちでね、あの、ルールを決めていってもいいんですけども、ま、ルール考えるの面倒くさいという場合は、既に用意されてるカーソルルールズディレクトリっていうサービスがありますので、そちらからちょっとコピー&ペーストして設定していきたいと思います。

ということで、ちょっと調べていきますね。え、カーサルールズの、え、ディレクトリと検索してみてください。はい。そうすると、一番上に出てきます。カーソルディレクトリというのが出てくるので、これはいろんなカーソルルールを用意してくれているサービスになりまして、今回はNEXTJS使ってますので、NEXTJSで検索するとですね、ま、10件候補が出てきます。で、こちらお好きなものを使っていくというスタイルですね。で、ま、おすすめなのが、こちらですね。ポンタアブラハムソンさんの、え、こちらのルールになります。ま、ちょっと英語なので分かりづらいので、ちょっとコピーしてておきますね。で、コピーして、ま、ここにそのまま貼り付けるだけで大丈夫です。

これどういうことが書かれているのかって言うと、ま、ちょっとこれもね、え、和訳していきたいので、ま、この場合はチャットとかね、聞いてみましょうか。せっかくなので、ま、クロードとか使ってあげてもいいんですけど、これを早してみて、という風にチャットで聞いてみましょう。だから、こんな感じで簡単な質問とか実装も全てカーソルリダで完結するっていうのが、ますごい良さですよ。ね。はい。はい、こちらコーディング規約がなさられていて、ま、エキスパートとしての規約です。と、例えばコードスタイルだったら、TypeScriptコードを書くとはい。えっと、クラスは、え、クラスの仕様は避ける。はい。命名規則とかね、あの、配分をつけたファイル名にしてくださいとか、名前付きエクスポートにしてくださいとか、はい。デフォルトエクスポートではない、名前付きエクスポートとコンポーネントはね、みたいな、え、そういうものが事前に用意されてるルールになります。ま、適宜ここは修正していただいて構いません。皆さんのプロジェクトごとに修正しましょう。うんで、これそのまま使うのでもいいですしま、ちょっと修正したい、これいらないルールだなっていう場合は外してあげても大丈夫です。今回の場合だと、ここ書いてありますね。RSCを優先して利用してください、とはい。ま、ユースエフェクトとかユースクライアント、これは最小限に抑えてサーバーコンポーネント利用してくださいね、とか、みたいな感じで設定されていますので、ま、とりあえずこれをつけていけばいいんじゃないかなと思います。NEXTJS使ってる方は、はい。

じゃ、せっかくなので、このルールが守れているかどうかっていうのをチェックしてみたいと思います。えっとですね、今ページTSX除いていくんですけど、ま、デフォルトではサーバーコンポーネントで実装されています。では、商品の詳細ページ作ってみましょうか。商品リンクを商品のページへ移動するようにしてください、と、いう風にちょっと聞いてみましょう。ちゃんとルール守ってくれるかどうか見ていき

ます。はい。

ということで、修正してくれましたので、見ていきましょうか。はい。え、まずページTSXですね。詳細ページなんですけど、ま、とりあえずサーバーコンポーネント使ってるみたいですね。はい。じゃ、に見ていきますね。で、プロダクトカードも見ていきます。プロダクトカードも、はい。ま、とりあえずサーバーコンポーネントのままにはなっていますね。はい。で、最後にページTSXで言われているので、はい、こんな感じでちょっと見ていきますね。で、今の状態で確認してみると、どうなっているのか見ていきます。ちょっと押してみますね。商品ページを。あ、移動できましたね。はい。ま、Amazonのようなちょっとページではないんですけど、UIね、決めてないので、ですけど、詳細ページには飛べるようになりました。はい。ルールが守れているかどうかなんですけども、ちょっと分かりづらいですよね。ま、聞いてみましょうか。ちゃんとルールは守りましたか、と。はい。ちょっと聞いてみましょう。これで確認できるか分からないんですけど、あ、行けてますね。はい。ちょっと聞いてみたところ、TypeScriptやってます。え、クラス使用してません。と、分割してます。と、命名規則従ってます。と、で、え、規約に従ってファイル構造を作成しています。ということで、ま、ルールはある程度守れてるみたいです。はい。ま、共通ができてなかったので、やってみます、という風にありましたので、で、ちょっと省略していきます。で、こうしてみると、あ、ちゃんとAmazonクローンのヘッダーも映っている状態です。はい。例えばスマートウォッチ押すと、スマートウォッチの商品ページに行けるようになりました。はい。Amazonの色になってますね。はい。ま、そのままこのECサイト使っちゃうと、著作権的にアウトなので、ま、色味だったりとか、え、そこら辺はちゃんとね、修正するようにはしてください。ま、今回サンプルなので、はい、デプロイはしません。え、ま、ヘッダーが2つ重なっちゃったんですけど、ま、これははい、ま、AIに聞いてもいいですし、手動で修正できる方は手動でやってもいいです。ま、例えばここのヘッダーですよね。ここ

のヘッダーが出てるので、これをただ取り除くだけでおそらく治ると思います。知識がある方だったら、もうすぐにAI聞かずに直せます。はい。

というのが、カーソルルールの使い方です。で、ファイルごとにルールを決めたいっていう場合は、先ほど説明したんですけど、この歯車マークのこのアニュルールですね。これ押してください。はい。そうすると、ま、適当にね、ルール名決めることができて、じゃ、例えばテストのルール決めたいんだたら、ま、テストみたいな名前に付けてあげて、ま、テストコード用の、ま、カーソルのルールですよね。これを決定したいと。つまり、このグロブスっていうのが、あるんですけど、ちょっと見づらいですかね。ここのグロブスっていうところがあるんですけど、これファイル指定できるので、ま、例えば、ま、例えばスペックファイルとかですかね。はい。ま、スペック拡張子使う場合は、こんな感じで書いたりとか、で、え、ま、テストに関する、ここにルールを決めてあげて、という形です。ま、これに関してはですね、ま、ちょっとこの全の記事ですね、ま、ちょっと具体例がありましたので、こういうの見ていただければいいかなと思います。はい。ま、例えばなんですが、テスト以外にもプルリクエストを自動作成する時のルールとか、はい。クリエイトプルリクエストMDCファイルを新しく作成して、ま、ちょっと1回テストは、ま、こんな感じでいいかな、という形ですね。で、新しく作りたい場合は、もうここのルールズファイルがディレクトリが作成されてるので、ま、ここにね、例えばクリエイトPRMDCファイルを作って、ま、適当にデスク決めてあげて、ま、グローブスファイル指定なしでもいけるみたいです。で、ま、ここら辺コピーして、ま、日本語でもいけるみたいですね。はい。え、PR、プルリクエスト、ま、GitHubのリポジトリに、まま、プルリクエストっていうのを出すことができるんですけど、それを出す前の、ま、ルールみたいなのを決めることができるっていうとこですね。なので、これでPR出してくださいって言うと、このルールに従って、コンポーザーとかプルリクエスト出してくれるという形です。と、いう感じで、皆さんもカーソルルール作ってみてください。

はい、ということで続いての便利な機能紹介していきます。コンポーザーに関してなんですけども、シンボリック機能というものを紹介していきます。じゃ、シンボリック機能なんですけど、先ほど説明したんですけど、アットマークで、ま、いろんなファイルだったりを指定することができる、このアットマークですね。これシンボリック機能って言います。で、例えばPTSXについてとかですね、こちらのファイルに何か修正したい時は、ファイルをこうやって指定したりとか、ま、複数指定もできます。はい。ま、例えば、ま、ファイルで検索していくこともできますね。サブヘッダーに対して何かしたい時とか、こんな感じで、え、ま、レイアウト修正してください、みたいな指示出しももちろんできます。これが基本的な使い方ですね。はい。でも、ファイルだけじゃなくてフォルダーもして、もできますし、コードの指定もできます。はい。こんな感じでいろんなものがあるんですけど、例えば、ま、今回の場合だと、ちょっと関数が少ないので、あれなんですけども、ま、例えばホームコンポーネントを指定したい時は、ページ指定もできますし、ホームの関数自体を指定することもできます。なんか他のユーティリティ関数がある場合は、そちらの、え、関数名ですね。例えばゲットブログとか関数がある場合は、こちら指定して修正することももちろんできます。はい。

で、ドキュメントですね。ドキュメントに関して は、え、公式で用意されてるものもあります。例えばAmazonEC2とかS3に関するオフィシャルのドキュメントで、これ で最新のドキュメントを反映させることも できますし、ドキュメントNEXTJS反映 させたいという場合は、私は既にインデックス しています。NEXTJSの公式のでこれを指定する こともできるわけです。はい。じゃ、どうやって自分で公式ドキュメントを噛ませる ことができるのかというと、ま、こちらはね、最初の初期設定で、ちょっとね、説明したんですけど、フューチャーズのところですかね。フューチャーズのところのドックてあります。はい。ここにですね、例えば、え、そうですね、じゃ、他にNEXT10さも既にしてるので、ま、例えばリアクトの公式を、かませたいのであれば、リアクトドキュメントで検索して、ま、APIリファレンスでもいいと思いますし、ま、リアクトを学ぶでもいいと思います。え、ま、リファレンスの方がいいかな。うんで、こちらをですね、え、コピーしてきて、これと19の安定版ですね。で、こちらに貼り付けます。こんな感じで、はい。エンターキー押すわけですね。はい。ネームはリアクトで、プレフィックスは、ま、こうなっていると。この状態で確認ボタンをしていきましょう。と、pleaschosediffrentと、じゃあ19にしましょう。で、この状態でコンファーム押すと、インデックスが開示されます。すぐにインデックスできましたね。で、この右の本のマーク押すと、どこをですね、ドキュメントを認識しているのかを見ることができます。例えばサスペンスのとこ見てみると、はい、こちらのページを参照しましたよ、っていう風に出てきます。はい。え、つまり最新版に対応できるわけですね。じゃあ、これを使っていきたいと思います。実際に、え、じゃあコンポーザーに聞いてみますね。ま、NEXT JSでもいいしま、リアクトを指定してもいいと思います。ドックスの、じゃ、例えばリアクトを指定して、これを元に、じゃ、ストリーミングデータフェッチを実装してみてください。と、え、データは置きで大丈夫です。と、こんな感じで、え、ことももちろんできます。はい。で、こんな感じで、はい、データニューっていうのを、ちょっと仮置きでディレイかけたものを用意しておいて、で、他にも、ま、プロダクトリストとかね、はい。カテゴリーリストとかね、はい。フューチャープロダクトとかね、はい。設置しました。と、で、この実装では、データフェッチは、え、それぞれのサスペンスでラップしています。という風に出てきています。サスペンスのちゃんとドキュメント対応してくれてますね。うん。実際のサスペンスのとこをちょっと見たいんですけど、ここですね。はい。カテゴリー一覧、おすめ商品、サスペンスでちゃんとラップされてます。となので、なので、ストリーミングデータフェッチができると

思います。ちょっと見ていきましょうか。ま、ちょっと商品一覧の表がおかしくなっちゃったんですけども、ま、これはちょっと意図しない形なんですけども、ま、UIはそのままでして欲しいですね。ま、ちょっと先ほどの戻していただきました。で、今さっきの見

てみて、ま、画像リンク切れちゃってるんですけど、リロードすると、こんな感じでスケルトン表示になってますよね。はい。スケルトン表示でストリーミングデータができて

いるという形になります。ま、商品一覧はストリーミングにはまだなってないんですけども、ま、よく見るストリーミングのデータフェッチができています。みたいな感じ

で、ドキュメントを使っていけばいいと

思います。だから、実際の開発では、ま、あんまり有名じゃないAPI使う時とか、ネットに情報が落ちていないAPIサービスで使う時があると思うんですけど、それで実装しようとすると、そのAIは昔の情報で実装しちゃったりして、なかなかうまく実装進まないとかあるんですよね。だから、その時は実際に、じゃあ、例えばノーションのAPI使いたいっていう場合ですね、ま、ノーションAPIのドキュメント持ってきて、最新バージョンにドキュメント噛ませてから、ちゃんと実装していくっていうのが、一番いいんじゃないかなと思ってます。うん。ま、APIリファレンスのとこかました方がいいかもですね。はい。APIリファレンスのところ、これをコピーして、え、全部対応させるっていう方法の方が、ま、出戻りが少なくていいんじゃないかなと思ってます。はい。こう いう使い方ができます。で、ちなみにこのドキュメントなんですけど、コンポーザーでも使えますし、チャットでも使えます。ま、チャットこれですね。ま、これでシンボリック機能をもちろん指定すすることもできますし、ま、ドキュメントもはい、指定することもできます。で、プラスルールにもね、適用できたと思います。え、カーソルルールズの、こちらでは対応はまだできてないかもしれないんですけども、個別のルールに対しては対応できたんじゃないでしょうか。はい。ドキュメント自体は、ちょっと、あの、指定はできないみたいですね。カーソルルールで。ああ、なるほど。ま、ヘッダーとか、ま、ファイルはシンボリック機能で指定はできるみたいです。はい。ま、一応覚えておきましょう。

続いてのシンボル機能見ていきます。シンボリックって言ってんですけど、シンボル機能です。ね、すいません。はい。ま、シンボル機能なんですけど、他にも、ま、Gitってありますね。で、Git何ができるのかっていうと、プルリクエスト、コミットとか。せっかくなので、Gitリポジトリ簡単に作ってみたいと思います。Windowsの方であれば、コントロールShift+Pを押してですね、出てきますので、パブリッシュto GitHubで、ちょっとパブリッシュでリポジトリ作ってみますね。はい。ま、リポジトリ初期化して、ま、GitHub上に作ることができます。ま、持ってない方は別にやらなくて大丈夫です。で、これをですね、じゃ、PRしていきたいと思います。nitのPRdiffwithメインブランチ。はい。これでちょっとやっていきましょうか。こ何してくれるんでしょうか。ま、PRを実際にしてくれるわけではなくて、PRの内容をまとめてくれるみたいですね。ま、何を実装したのか、変更点と詳細とテスト項目とか、影響範囲とか、ま、プルリの際のコミット分書きたい時とかは、これ参考にすればいいんじゃないかなと思います。じゃ、実際にどうやってPR出すのかって言うと、ターミナル上で、ま、コマンド系でいいんじゃ

ないかなと思いますね。ま、GitHub@commit PRプッシュかな、をしてください、という風に出せば、ま、こちらで実行してくれるかな、という形ですね。ま、まとめてやってくれるという形なんですけども、え、もう既に私プッシュしちゃったので、ちょっとこのようなエラーになっちゃったんですけど、プルリクエスト出す時はターミナル上でやる感じですかね。ま、そういう使い方ができるみたいですね。ま、他にも多分いい使い方が

あると思うので、ま、ちょっと皆さんに教えて欲しいですね。ま、例えば、分を出してくれたりとか、もできるのかな。コミットにすると、コミットメッセージを書いてくれるって形ですね。ま、ちょっとあの、GitHub使ってる方は、ちょっとこれ色々やってみてやると面白いかなと思います。

はい、じゃ、他の機能もちょっと見ていきますね。ま、Gitの下にノートパッドっていうのがあるんですけど、ま、これちょっと軽く説明するんですけど、この左のサイドバーのところ

に、ノートパッドってのが出てきてると思います。はい。設定で有効にしている方はですね、で、ここにプラスボタンがあります。で、プラスボタン押すと、ま、こんな感じで、えっと、ノートパッド、ま、メモ帳ですね。これが出てきます。で、このメモ帳どういう時に使うのかって言うと、ま、チーム全体でプロジェクトの内容を共有したい時とか、ま、そういう時に使いますと。はい。公式ドキュメントにはそう書かれていました。ま、ちょっと見ていきますね。え、ま、公式ドキュメントにもあるんですけど、ま、何を書けばいいですか、て書かれてるんですけども、例えば、ま、アーキテクチャーの決定と開発ガイドラインと、え、コードテンプレートとか、ドキュメント頻繁に参照するドキュメント、え、ルールとか、え、そういったものをメモに書いておけば、ま、チーム内で共有できるっていうのが、ノートパッドになります。で、ノートパッドは、コンポーザーでアクセスすることができて、ま、もし作った場合ですね、例えば、ま、ちょっと使い方は正直よくわからないんですけど、ま、正直カーソルルールズのね、あまり使い方はそんな変わらないかなって形だと思うんですけど、これで、え、先ほど作ったノートパッドに対して、ま、コンポーザーで何かしら、え、質問したりとか、え、することができます。ま、カーソルルールズのチーム共有バージョンみたいな感じで思っていただければいいんじゃないかなと思います。はい。ま、僕は使ったことがないです。

で、続いてサマライコンポーザーっていうのがあるんですけども、ま、コンポーザーで履歴がどんどん溜まっていくんですよね。プラスボタンを押すと、ま、新しいコンポーザーが始まりますよね。で、履歴っていうのもね、もちろん見ることができて、え、例えばチャットで、この履歴のマークがあるんですけど、ここにどんどん履歴が溜まっていくわけですね。ま、チャットGPTみたいな感じで。で、履歴が溜まったものを、に対して、ま、アクセスできるっていうのが、ま、サマライでコンポーザーになりまして、例えば、ま、こんな感じで、今まで聞いてきたコンテキストの履歴に対して、ま、要約してくれると、これを要約して、とすることも、ま、できるわけですね。ま、これはチャットに聞いた方がいいかな。要約してみて、とはい。そうすると、ま、こういうことやってきましたよ、っていうのをね、サマライ予約してくれるだけですね。ま、ちょっとプロジェクトがごちゃごちゃしてきた時とか、頭整理したい場合は、こういった機能使うと、ますっと理解できると思います。

はい、じゃ、他のシンボル機能も紹介していくんですけど、え、カーソルルールズがありますね。これはそのままカーソルルールを検索してくれるものになります。はい。ま、そのまま直接クリエイトMDCとしても大丈夫です。はい。

はい、じゃあシンボル機能あと2つですね。はい、紹介していきます。コードベースっていうのがあるんですけど、これ何かって言うと、これすごくて、え、例えばなんですけど、ま、コンポーザーよりもチャットがいいかな。チャットにコードベースで、このプロジェクトは全体的にどのような実装になっていますか、と、このような質問してみましょうか。そうすると、はい、今まで作ってきたファイルですね。これ全部見てくれます。はい。例えば28個のファイルとゴローベースコンテですね。もうこれを全て見た上で、え、このプロジェクトの構造がどうなっているのかっていうのを吐き出してくれると、ま、レイアウトがここですよ、ヘッダー部分がここですよ、とかね、商品カートがここになりますよ、みたいな形で、え、全部吐き出してくれる形ですね。じゃあ、例えばこれを、こ、せず に説明することはできますか、と、ちょっと画像いけますかね。画像というか、マーメイド図ですかね。マーメイド図を使って、ちょ、吐き出して欲しいんですけど、ま、画像は吐き出してくれないので、ちょっと分かりづらいですけど、ま、これを全てコピーして、ま、クロードで、このプロジェクト全体の、例えばこれ全部コピーしますね。コピーをして、クロードとか使うわけですよね。ま、例えば、ここ

にパンと貼り付けて、これを、図にしてください。と、ま、別のAIツールに聞くと、ちゃんと図にして、ま、プロジェクト全体を把握できたりとか、途中で開発に携わった人とか、ま、全部コードリーディングしなきゃいけない場面ってあると思うんですけど、ま、何がどうなってるのか把握しづらいので、ま、こういったコードベースの機能を使えば、ま、そのプロジェクト全体がどうなってるのかってのは大型把握できるんじゃないかなと思います。うん。ま、まずは全体の構成図を把握して、1つ1つの詳細なファイルを除いて理解していくっていうのが、ま、一番理解が深まると思いますので、そういった時にコードベースとか使えばいいんじゃないかなと思います。ま、他に使い方知ってる方がいらっしゃいましたら教えてください。

じゃ、最後のシンボル機能説明しましょう。最後がWEBになります。はい。ま、これはその名の通り、ま、実際のGoogleに落ちてある情報を元に、あの、回答してくれるっていうものになりて、例えばNEXTJSの最新版の、えっと、PPRパーテルパーシャルプリレンダについて教えてください、と。はい。そうすると、Web検索してくれます。パプレと、似たような機能ですね。なので、Google検索でちょっとね、最新のAPI探してくるの面倒くさいとか、ていう場合は、全部カーソル内で完結してくれますね。はい。こんな感じで実装方法だったりとか、パフォーマンス最適化の説明をしてくれます。もちろんコンポーザーでもWEBを使えますので、ま、ここで実装したい場合は、ま、ここでそのまま聞けばいいと思います。ま、こんな感じで解説してくれます。ま、一応このリンクも出してくれるので、ま、参照元もちゃんとチェックすることができます。NEXT13.5から、ま、議論されてる内容なんじゃないかな、ということですね。ま、例えばマニアなドキュメント探してきたい時とかは、これWEB検索すればいいんじゃないかなと思います。例えばノーションAPIの最新のリファレンスを探してきてください、と、このような検索の仕方もできると思います。ま、検索された結果には含まれていない、という風に怒られたんですけども、ま、どこ探してきたのかって いうのが、あのリンクで渡されるので、ま、例えば公式ドキュメントって、自分で検索したら早いかもしれないんですけど、ま、ここですね、先ほど見たAPIリファレンスがあるんですけど、ここのリンクをコピーして、じゃ、設定の方のドキュメントにかませて、じゃ、毎回最新のAPIを、えっと、認識して、認識してもらうっていうことも、ま、もちろんできるわけですね。こんな感じでノーションで決めて、ま、ノーションAPIとかね、はい。こんな感じでドキュメントを噛ませることも、もちろんできますと。ま、そういう使い方もあります。例えばエラーが起きた場合は、例えばWebのアットマークをつけた状態で、エラー分を貼り付けて、ま、最新情報を元に、このエラーの解決を試みてください、とか、ま、そういったいう風に聞くのも、ま、1つの手かもしれません。という感じが、ま、シンボル機能の全てになります。

はい、ということでコンポーザーとかチャット、シンボル機能説明できたので、続いてエージェント機能ですね、使っていきたいと思います。ま、ヨロと言われているものです。ま、分かりやすいように、ちょっと新しいプロジェクトを用意しますね。じゃ、新しくNEXTJSの日型作り

ました。じゃ、ここでエージェントモード使っていきましょう。この右下にノーマルかエージェント選べるので、エージェントをクリックしましょう。うん、そしたらエージェントモードになります。で、ヨロモードにしなきゃいけないって言ったんですけど、もうヨロモードチェック入れなくてもできるみたいですね。ヨロモードの場合は、あの確認ボタンね、承認ボタン押さずとも、多分どんどんアプリ作ってくれるみたいなモードなんじゃないかなと思います。はい。ま、とりあえずヨロモードなしで、エージェント機能だけ使っていきたいと

思います。で、エージェント機能ここ出ないと、いう方はですね、新しくコンポーザーね、これ開かないとエージェント出てきませんので、最初からエージェント機能選択しとかないといけないので、ま、それは気をつけてください。ま、定番ではありますけども、じゃ、TODOアプリケーションですね。TODOアプリケーションを、え、作ってください。ま、データベースもローカルで使えるものを

使ってみてくださいという風にして、ちょっとエージェントモードで作ってみましょう。ま、GPT-3.5-turbo以外にも使えるんですけども、ま、このままでサブミッシブ、ランコマンドをしていきます。

はい、マイグレーションできました。ま、これSQLでやってるみたいですね。はい。で、インスタンス化しますということではい、アクセプトします。まただ、承認してるだけです。僕は。

はい、じゃ続いてAPI作ってます。とはい、ということで承認します。メインページのコンポーネントを作成します。と、ま、本当最低限動くものかなと思いますね。はい。

じゃ、アクセプトします。そしたら完成かな。NPMランデしてください。とことで、ランコマンドしてみます。

はい、じゃローカルサーバー開きました。ま、3000番使われてるので、30001番開きますってあるんですけど、もう既に私はサーバー開いてるのでいいかな。

じゃ、この場合、はい、リロードしてみると、こんな感じでTodoリスト作れました。ま、ありふれたものなんですけども、例えばカーサとはい、追加することができましたね。はい。

じゃ、エージェントとはい、追加できます。で、チェック入れると、こんな感じで取り消し線がつくようになりました。で、削除とは、削除することもできます。データベース使ってるので、これリロードしてもデータが保存されてますね。はい。

こんな感じで、作れましたね。新コードです。デミア新コードキャンプ運営中。概要欄チェックしてみてください。はい。

という感じで、はい、リロードしても大丈夫。とはい、素晴らしいんじゃないでしょうか。ま、ちょっとサ系なので、じゃUIも変更していきましょう。という提案をしていきます。

はい、サ系なので、もっとリッチなUIをてください。という風にエージェントモードでてみます。ま、僕今手打ちでタイピングして聞いてるんですけど、ま、Macの方だったら多分音声入力できると思います。Macあんま使ったことないんでわかんないんですけど、そしたらタイピングせずに、そのままね、ここのまプロンプト打ち込むところに音声入力できるので、もうAIと会話するだけで、ま、アプリケーションが作れていくみたいなこともできると思います。Windowsの方はその音声入力みたいな、多分アプリケーションみたいなのを別で入れないと多分難しいと思うので、私はまだそれはやってないんですけど、ま、そういったこともできます。

喋ってる間にちょっとしてくれました。ということで、アクセプトしていきます。はい、ランコマンドとフレーマーモーションでアニメーションつつけると、はい、デザイン改善しましたよ。という風になりましたので、ちょっと見ていきます。

はい、どうでしょうか。あ、これダークモード切り替えもいけたみたいですね。素晴らしいと思います。はい。しかもTodoが左から出てくるっていう、よくわからない仕様がありまして。あ、でもすごいですね。思ってたよりすごいです。これ消したらふわっとなると。ええ、いいですね。これちょっと驚いてます。はい。

ま、もちろん簡単なこういったアプリしか使うようとはないと思うんですけど、全然いいです。はい。いや、僕思ってるよりなんか使えてびっくりしてます。いや、このダークモードができるっていうのが驚いてますね。こういうのやると、もしかしたらエンジニアいらないんじゃないかな。みたいな、ま、ワクワク感と、ま、ちょっと残念な感じが入り混じる笑いが込み上げるという形です。はい。

他にもリッチな機能をけつけてみてください。とください。えっと、ユーザーに使ってもらいます。そま、後でクラインっていう拡張機能も紹介するんですけど、ま、これと似たような機能を提供してくれてるものです。プリズマスキは更新します。とはい、はい、プライオリティか、はい、マイグレーションします。と、マイグレーションの更新もできちゃう。はい、これアクセプトしていきます。

じゃ、見ていきましょう。エラーです。エラーが出てくれました。よかったです。はい、エンジニアはまだ必要なようですね。はい。

これでこういうエラーが出てるよ。とはい、はい、ということで、エラー解決できましたので見ていきます。ま、ね、検索もできると。で、新しいタスクはこんな感じで追加することができます。ま、かなりリッチなものになりました。ま、ワーク中ですよ。と、ハイレベルです。と、カレンダーに追加する日付を入れることができます。ま、時間も指定ができると。そしてここに追加ボタン押すと、はい、ちゃんと追加ができるといった感じになります。

はい、で編集、こんな感じで完了もできるし、削除することもできると。で、タスク検索もできるのかな。あ、できますね。はい。テスト、はい、テストとすると検索できるし、で、も検索できる。ノンだとありませんよ。と、優先度は、はい、だけ表示してください。とか、こういったこともえできるようになりました。完了済みを非表示もできます。と、素晴らしいですね。これ。

ま、エンジニアいらないので退場します。というのは冗談です。これは素晴らしいと。うん、ま、なんかこれ押しちゃったら自動的にね、ライトモードが解除されたりするんですけど、ま、ここもね、修正をあの指示すれば勝手に治るということです。ま、そこまで大規模じゃないアプリケーションであれば、もう全部エージェントで作れるかもしれないなっていう印象がありました。ま、プロジェクトの途中からエージェントモードに切り替えるっていうのは、ま、ちょっと怖い部分ありますよね。今まで書いてきた内容が全部え、エージェントで全部書き変わっちゃうので、ま、ちょっとブラックボックス化しやすいか印象は受けるかもしれないんですけど、ま、かなりクオリティの高いものにも、ま、どんどん聞いていけばできるんじゃないかなっていう印象です。

はい、ま、一応養老モードもオンにして試してみたいと思います。ちょっとね、動画長くなっちゃってるんですけど、ま、カーソルのね、魅力をお伝えするとなると、やっぱこれぐらい時間かかりますので、お許しください。という感じですね。

はい、でこれね、チェック入れると、ま、ここにヨロプロンプトっていうことで、ま、ちょっと簡単な指示出しですることもできますし、ま、NPMインストール許可しますよとか、許可リストもできます。と、許可リスト入れられます。で、ま、実行したくないコマンドも入れられます。ま、削除のコマンドだったりとか、ま、権限のためのコマンドだったりは実行しないでください。とかね。はい、デリートファイルプロテクションにチェック入れると、え、自動的にファイルは消さなくなります。ま、ですけど、チェック外してるので、ま、不必要なファイルは消してくれるという形になります。

ということで、これでヨロモードでやってみますね。え、では認証機能を作ってみてください。と、え、Todo以外にも、え、機能があるようなSaaS形式で作ってみてください。という風にちょっと出してみます。養老モードでやってみます。私何も触ってないんですけど、おそらくあの勝手に認証されていくんじゃないかなと思います。はい。ま、エラーとかリトエラーを発見して、自動的にエラー修正してくれてます。あ、実際認証してくれてますね。うん、どうなんだろう。そうですね。NPMインストールも自動的にやってくれるのかな。ま、一応アクセプト押さないと進まないかもしれないですね。ちょっと押してみます。養老モードなんですけど、ちょっと認証していかないと進まないみたいですね。なんかちょっと挙動がわからないんですけど、ま、もしかしたら途中で養老モードに切り替えたからこういうことになってるかもしれないです。ま、今の段階ではちょっとアクセプト押さないといけないみたいです。あんま変わってないです。エージェントモードの時と。ああ、でも結構作ってくれますね。で、今回使ってるのがNEXT-AUTH使ってます。NEXT-AUTHもバージョン結構変わってるので、ちゃんと対応してくれてるのかわかんないんですけど、はい、ま、そのままちょっと見ておきましょう。ま、一応ちょっと覗いてみましょうか。どんな感じでページTSX作ってるのか。ま、USE CLIENTなので、Reactでの実装に近いですかね。サーバーアクションとかは使ってないみたいです。ま、今回のプロジェクトはカーソルルールズ設定してないので、そういったことは守ってくれないかもしれないんですけど、ま、全然動く形にはなると思います。ようやく終わりましたね。はい。

ということで、ちょっとアクセプトオールしてみます。ま、ほぼUSE CLIENTなので、NEXTJSの強みは発揮されてないんですけど、はい、こんな感じでユーザー認証でできました。と、データベース連携できてます。セキュリティもできてます。と、これでちょっと見ていきましょうか。ま、多分ログインページに移動すれば、ああ、実際作ってくれてますね。OSログインページに行ったらログインができるようになっていると。アカウント持ってなかったらサインインできるみたいです。はい。はい。で、登録、登録中にエラーが発生しました。インターナルサーバーエラーですよ。と、ま、ここら辺はレジスターかな。レジスターでAPIを叩いた時に、あ、このユーザーモデルがなんかおかしくなってるな。ま、実際にまだね、エラーは発生する形にはなるんですけど、おそらくバリデーションとかのエラーなんですかね。ま、そこはちょっとね、あのまたね、エージェント機能に手聞いていけばいいと思います。みたいな感じで、ま、思ってるよりちゃんとしたものが作れるな。っていう印象ですよね。なんかその、その転職時のポートフォリオとかで、なんかフルスタックアプリケーション作んなきゃいけないとか、そういう時になんかこれエージェント機能で1週間とかかけて、なんかちゃんとした様になるもの作れるんじゃないかなっていう印象があります。ま、ぶっちゃけ個人開発のMVPの段階ですね。最低限動き機能であれば、もうエージェント機能でサクサク作ってもらって、すぐ市場に出せるっていうこともできるかなっていうことを思いました。もちろんこうやってね、ま、正直そのUIとかデザインに関しては、ま、微妙だと思うんですけど、ま、そこもちゃんとUIライブラリーを指定したりとか、ちゃんとこういう風なスタイルにしてくださいとか、ちょっとダサいです。みたいな、あとは参考となるページとか貼り付けて、こんな感じにしてくださいってエージェントモードに聞いたら、ま、結構いいところまで行くんじゃないかなっていうのを思いました。うん、ま、もちろんWebでも使えますし、スマホアプリ開発とかね、XPとかReact Nativeとかで開発してる方もエージェント機能使えると思うので、スマホアプリくらいだったらUIの部分だったら結構サクサク作れるんじゃないかなって思います。僕も今はWebで開発してるんですけど、ま、今年後半とかになったらスマホアプリ開発とかしてるかもしれないので、その時も使おうかなって思いました。はい。

はい、ということで、エージェント機能の紹介でした。はい、で、今からね、クラインについて、拡張機能も説明しようと思ったんですけど、もうこのエージェント機能とほとんど変わらないので、ま、別のネットの記事とか他のYouTube動画ちょっと見ていただきたいと思います。ですけども、ほとんど同じだと思います。ま、気になる方はね、クラインで検索してあげて、え、こちらです。ね、この各所機の有効にしていただくと、ま、自分でAPI用意して、ま、DeepSeekとかからのAPI、安いAPI用意して、ま、今今さっき紹介したエージェントみたいな感じでね、自動で作ってくれるっていうのがあります。はい。え、ま、このカーソルのエージェントとどれくらいね、あのクオリティに差があるのかっていうのは、ちょっと比較してみてください。ま、この例でもTodoリスト作ってますけども、ま、僕はカーソルのエージェント機能の方を利用します。はい。

で、YouTube動画長すぎてもあれなので、最後にMCPサーバーですね。こちら説明して、ま、カーソル入門終わりにしようと思います。はい。ま、ほとんどの機能紹介しましたので、ま、それで十分かなという形です。

ということで、MCPサーバー見ていきます。はい、フューチャーズの、ま、先ほど最初の初期設定で見たと思うんですけど、これですね、MCPサーバー。これ何なのかって言うと、例えばSlackとかNotionとかGmailとか、そういった他の外部サービスあると思うんですけど、そういったサービスとカーソルを紐付けるみたいなイメージです。例えばNotion用のMCPサーバーと接続すると、自分がNotionにメモしてる内容です。ね、例えばこれはちょっと高段者で僕が今執筆してるNEXTJS入門書なんですけど、ま、これはちょっとやめましょう。例えば、ま、クラシックブログっていうのの、このノプとこのクラシックブログを連携して、ブログ執筆とかやってるんですけど、例えば、ま、ここに書いてるブログの全部の内容ですね。例えばこんな感じでね、記事書いてるんですけど、こういった内容も、ま、カーソルの開発に組み込んでいきたいとか、逆に、ま、カーソル上でこういった、え、Notionに対してメモを残したいとか、え、ブログを自動で執筆したいとか、そういう場合は、え、NotionのMCPサーバーを用意して、カーソルと連携すれば、そういったものをカーソルから遠隔でできるっていうところです。え、そういったイメージです。

なので、ちょっと探していきましょうか。で、ま、MCPサーバーがまとまったサイトがありますので、そちら見ていきましょうか。モデルコンテキストプロトコルで、ま、例えばお天気情報のMCPサーバーとか、お天気用とか、もっといろんなサーバー知りたい方は、こちらのサイト除いていただいて、Exampleサーバーっていうのがあります。はい。ま、GitHubとかもありますし、Googleドライブとかありますし、パティアとかもありますし、これスクレイピング用のライブラリーです。こういったのMCPサーバーで接続したい場合はどうすればいいのかと言うと、ここにですね、NPXで行できるコマンドがあります。で、これを使ってあげるといいです。だからこれコピーしてあげて、で、MCPサーバーのアドレスに、ここに貼り付けます。で、先頭にNPXYっていう風にして、こうやってね、サーバーURL設定して、例えばこうやって指定してあげるといいと。で、タイプをSSEからコマンドに変えると、そしてここにアッドしてあげます。ADDのクリックすると、え、ま、皆さんだったらね、ちゃんと繋がると思うんですけど、私の環境ではちょっとうまくね、繋がらないんですよ。ね、ま、ちょっとデフォルトのターミナルの設定がおかしいんですかね。なぜか分かりませんが、私の場合はちょっとパティアが繋がらなくて困ってるんですけど、繋がったらここが緑色になります。緑色のランプで、ま、NPXを起動するので、ま、NPXコマンドを使うので、ま、デフォルトで設定してるコマンドプロンプトですね。Node.jsのコマンドプロンプトに、ま、ちゃんとNodeが入ってたりとか、NPXが入ってるかをこう確認していてください。私の場合はちゃんと入ってるんですけど、え、なぜか分からないんですけど、ちょっと繋がらないといった状態です。はい。

ちゃんとできてる場合お見せしたいので、ま、ちょっとね、動くやつをちょっとつけてみます。え、これですね、NPXhyのサーバーシークエンシャルシンキングっていうやつです。シークエンシャルシンキングっていうMCPサーバー使えたので、これアッドしてみます。こんな感じでなんか何個もターミナル出ちゃうので、皆さんほならないと思うんですけど、ま、本来でやれば、え、こんな感じでね、この緑のランプですね、出てるとと思います。なので、これでこのシークエンシャルシンキングっていうMCPサーバーと繋がるので、ま、例えばコンポーザーでね、色々聞けます。ま、例えばシークエンシャルシンキングを使って、アプリケーション構造を体系的に、ま、分析することもできます。はい。実際にコールMCPトールってのを呼び出してると思い。ま、多分論理的に考えてくれるようなモデルなんですかね。ま、複雑な問題を扱いやすいステップに分解するような、なんかそういう機能を持ってるサービスみたいで、ま、全体構図を解析したりとか、え、することができました。ま、本当はね、パティアとかね、起動したかったんですけど、今の段階だとちょ僕動かなかったので、ま、ちょっとお見せできなかったんですけど、皆さんの環境だと動くと思いますので、え、是非例えば何かウェブスクレイピングしてくださいとか、そういう風にコンポーザーとかチャットに聞くと、MCPサーバで色々実行してくれると思いますので、是非試してみてください。はい。

で、MCPサーバーで例えばNotion、Slackとか、え、そういったものを使う場合は、環境変数を設定する必要があるので、その場合はエブの例えばNotionの、ま、APIキーが必要なのであれば、APIキーとして、ま、ここにAPIキーを挿入して、ま、Notionのサーバーをね、ま、立ち上げると、ま、なんかわかんないんですけど、こんな感じの、ま、用意されてるのであれば、なんかサーバーノーションなんかよくわかんないんですけど、こういうのがもしあるなら、え、先頭に環境編成をこのようにつける。と、多分動くと思います。ここちゃんとコマンドにしといてくださいね。ま、というのがMCPサーバーの説明でした。

じゃ、一通りカーソルについて説明をありましたけども、最後に結局どの機能が、ま、一番優れてるのかって言うか、頻繁に使うのかについてなんですけど、ま、私はこのコンポーザーですね。コントロールIで開くコンポーザーの機能。ま、これにもう自然言語日本語でね、実装したい内容を気絶して、ま、個人開発はあのやってるという感じですね。私としては最近の個人開発ではもうほとんどコード書くよりも日本語を書くっていう割合が多くなりました。はい。で、細かい修正とかAIだと、え、どうして解決できないものに関しては、ま、自分の頭で考えて、自分の持ってる知識とか経験によって解決していくっていうのが、ま、今の、あの開発の流れだなっていうのが印象としてあります。で、コンポーザープラスこのシンボル機能ですね。ま、ファイルを特定のファイルを指定したりとか、ま、特定のファンクションを指定したりとか、はい、え、そういうものを指定して、これを高行してください。みたいな感じでふわっと聞くんじゃなくて、特定の関数とかページに絞って聞くっていうのをやると、ま、より解決する確率が上がりますのでお勧めです。はい。

ま、エージェント機能なんですけど、エージェント機能は例えばコード全体のリファクタリングに使ったりとか、まだ1からこう、ま、中規模から大規模なアプリケーション作るのは難しいと思うので、え、エージェント機能のはそういった、あの補助的な役割で使うていうのが、ま、これから私やっていこうかなと思ったところです。はい。

という感じで以上になります。はい、ということで、すごいなこれ。はい、ということで、ちょっと長くなっちゃいました。1時間超えたんですけど、ま、この動画でカーソルの基本ですね。これを抑えることができたと思います。ま、僕も自分のホームページだったり、ポートフォリオだったりとか、個人開発のアプリケーションは全部カーソルのAI駆動で作ってます。今は、え、だから、ま、半年とか1年前は全部ハゾン形式で色々YouTubeとかで紹介してきたんですけど、もう時代もね、AI時代に変わってますので、ハゾンで何か教えるっていうのは少なくなるかもしれません。はい、少なくなって、ま、動画の方向性とかも、ちょっと変わっていくかもしれないですけども、ま、今後ともよろしくお願いしします。

うんで、このカーソルとかAIを駆除してもなかなか個人開発できません作れませんとか、NEXTJSの基礎知識が知りたいですとか、Webの基本から学びたいって言う方は、僕の過去のYouTube動画全部無料で見れるので見ていただいたりとか、ま、Udemyとかね、あのクーポンいっぱい出してます。で、講座数も20講座とか30講座も作ってますので、是非ね、概要欄にクーポン置いておきますので、あの見てみてください。で、Udemy以外のオリジナル講座だったら、ま、新コードキャンプとかやってます。うん、ま、Udemyの講座全部見れるのと、僕のオリジナルコンテンツとかね、ま、ビジネスとかね、あの副業について学べる内容も入ってます。で、月額プランだったら1980円で、買い切りプランも2つ用意しました。ま、月額プラン中止しましたよって言ったんですけど、ま、2つプランあった方が皆さんも選べるので、ちょっと2つ用意しておきました。はい。

あとはAI駆動開発マスターコースってのも今作ってます。ま、その講座は実際に僕僕がこれから個人開発を0からもアイデアを思いつくところから始めて、で、リリースまでその0から100までっていうのをお見せするようなマスターコースになっておりますので、気になる方は是非概要欄の方チェックしてみてください。ま、完成予定は春の4月とか5月とか、え、そこら辺でとりあえずリリースしようかなと思っております。

ということで、最後宣伝で申し訳ございませんでした。ま、これからのエンジニアがどうなるのかとかね、え、どういうスキルが求められていくのか、え、資本初期がどうなっていくのかみたいな、そういうお話はね、また別のYouTubeで、あの語るだけの動画で撮影しようと思っておりますので、ま、是非ともその時はよろしくお願いいたします。

という感じで、皆さんもカーソルを使って何か個人開発やってみて、アプリケーション作ってみてください。そしてもし何か形にすることができたという方はですね、ま、是非ともSNSの方で、ま、この動画をシェアしていただいたりとか、え、何か参考になった僕の動画講座シェアしたりレビューしてくださると非常に嬉しく思います。

ということでね、キャッチアップちょっと大変なんですけど、健康に気をつけて皆さんもやっていきましょう。ということで、バイバイDET