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

0:00 はいどう皆さんこんにちはしです今回は ですねカーソル入門ということでま皆さん の開発速度2倍3倍に上げてくれるま魔法 のようなエディターカーソルをあの徹底 解説してまこの動画1本で全てを理解して いただくという動画を撮っていきたいと 思いますま私カコでこのカーソルの エディターを1年くらい使っておりますの でまこういう使い方便利だよねとかま 新しくアップデートされたので新しい機能 ね出てきましたまカーソルの初期設定から まカーソルルールの設定だったりとかえま コパイロット機能とかシンボル機能とかま ドキュメント読み込ませる方法とかまあと はコンポーザー機とあとエージェント機能 ですねまあとMCPサーバー接続したり 結構ねアップデートされましたなのでま 今回入門ということでエディターについて 全て解説していくということにしていき ますこの動画最後まで見ればまWeb エンジニアの方は解説速度2倍3倍になっ たりとかまこれから非エンジニアの方がま

0:45 個人開発始めてみようとか自分の プロダクト作ろうってなった時にえこの カースルってのは結局必須になりますはい ま結構な企業でま採用されてるエディター だとと思いますのでこれをまちゃんと学ん でおくとAI駆動開発っていう基本がま 全て学べるような動画にしますのでま是非 最後までご覧くださいえこのチャンネルで はエンジニアとしての幅広い知識を学学ん でいただくためのチャンネルになっており ますので気になる方今のうにチャンネル 登録よろしくお願いしますということで 早速始めていきましょうじゃあカーソル 学んでいく前にこのカーソルを使った アプリケーションどんなもの作れるの かっていうのを手本をちょっと見せていき たいんですけども私が最近作った個人開発 のノトプっていうアプリケーションですね これ前のYouTube動画で説明してる んですけどまこんなLP作ったりとかま アプリケーションですね作ることはできる しま今だとですねま今ユミで作ってるま カーソルとかいろんなAIツール使ってま

1:31 Xクローン作ってみるっていうやつとかえ 作れますしまYouTubeでも紹介した YouTubeクローンですねまこういっ たものもまサクサク作れるっていう形に なりますなのでカーソル使いこなせれば皆 さんが今頭の中に思いついてるアイデア ですねまこれをWEB上に表現できるって いったこはできますのでま是非ともね カーソル学んでいただきたいと思っており ますはいということで導入これまでにして まずはカーソルのインストールから始めて いきたいと思いますはいこれからカーソル 触っていきたいよという方向けにですね ちょっと紹介していきましょうはい カーソルと検索していただくと1番上に出 てきますのでこれクリックしてくださいで Windowsの方はダウンロfor WindowsでMacでアクセスすると ダウンロードforMacと出てきますの でまこのボタン押していただけるとま ダウンロードされるのでまセットアップ ウィザードとか開いてですねま インストールを進めていってくださいま そこら辺はね簡単にできますのでま皆さん

2:17 各自でやっておいてくださいま進むボタン 押していくとですね簡単にインストール できますのでまそこはちょっと皆さんで やってみてください簡単なのではいでこれ でインストール完了するとですねま アイコンがデスクトップ上におそらく出て くるのでまこれダダブルクリックすると 開くことができますはいまこんな感じの エディタと言われてるものが出てきますの でまとれでとりあえず簡単にインストール ができたと思いますはいはいで初めて カーソル導入した方はこのね左上のタブ ですねこれ英語になってると思うので日本 語に直していきましょうえどうすればいい のかというとですねま表示っていうとこ ですねまディスプレイですかねおそらくで コマンドパレット1番上のとこですねこれ クリックしてでここにですね コフィギュアセット するっていう

3:12 コンフィギュレーターの使い方なんです けどCB押すとこの左側のですねえま サイドバーこれ出すことができますま ファイルディレクトリー見たりとかま ファイルを検索したりとかま エクステンション拡張機能入れたりとか ですねそういったものが色々出てきますの ではいえCBで開閉できるということを 覚えていてくださでえターミナル開きたい という場合はCJですねWindowsの 方はそうするとまこんな感じではい デバッグだったりとかまターミナルとか出 てきますのでまちょっとショートカット キー覚えておいてくださいで後で コンポーザーとかチャット機能も紹介する んですけどまその時のショートカットキー ていうのはCLですねこれを押すと チャットが出てきますまAIにこうま チャットGPTみたいにこう質問したり できるチャットですねであとはCIですね これ押すとコンポーザーっていうのが出て きますまこれちょっとコンポーザー紹介

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

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

5:31 と思いますまちょ1個1個丁寧に見ていき ますねはいvsコードイポートっていうの は以前vsコードエディター使ってた方の ま拡張機能ですねえこれを全てインポート できますのでまインポートしたいそのまま 引き続きたいという方はこのコンファーム ボタンで確認ボタンを押しといてください はい私は以前やりましたはいこれはでこの 下のルズforAIっていうのはまこれ からコンポーザーとか使ってあのペア プログラミングしていく時にどういった 出力どういったルールを守って欲しい かっていうのを決めることができますま 今回私は日本語でお願いしますっていう ところだけで打ち込みましたはいなので 全ての回答結果は日本語で出力されますで この設定がプロジェクト全体の設定なん ですけどじゃ個別でカーソルのルールを 設定したい場合ですねまそれはえカーソル ルールズっていうファイルを作ってま個別 であの詳細にまこういう風な出力にして くださいねって決めることができますこれ

6:16 チェック入れといてくださいデフォルトで チェック入ってると思いますでこの チェックを入れた状態でプロジェクト ルールズていうとこのアニュルールこの 青いボタンを押すとプロジェクトごとに ですねカーソルルールの設定ができますで これに関してはえちょっとカーソル ルールズの使い方のところで説明しますの でまとりあえずこれ一旦スルーでいき ましょうはいでまこれ以降のエディターと かなんですけどこれはまそのエディター 自体の設定ですねフントをどれくらい 大きくするのかとかえタブを押したらどれ くらいスペースを開けるのかみたいなこれ はエディター上の設定になりますこれは vsコードでもできた設定ですねこれは 各自ちょっと適当に開発しやすいように 設定していてくださいで続いて プライバシーモードですねまこれ私は エナブルでプライバシーモードにしており ますま質問がある方はここに聞いてくださ いていうことですねはいこれが一般的な 初期設定になりますじゃ続いてモデルズタ

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

7:49 なるかもしれないのでまその場合はこちら とかに移行するかもしれないですまそこら 辺はねちょっと使ってみようかなと思い ますのでちょっとチェック入れときますね いくつかまここら辺使ってみますねはい じゃあ続いてオOpenAPIキーの設定 とかねなんたらキーの設定ってあるんです けどま今回は皆さん設定しなくて大丈夫 ですでえカーソルのプロプランに入ってる 方はまこんなAPI設定せずともまクも 使えますしまO3ChatGPTのモデル も使えますなのでこのAPI機は設定し なくて皆さん大丈夫ですでこれ設定し なきゃいけない時っていうのはえ例えばま これカーソルに課金していない方ですね 課金していない方でアンソロPICAPI clodの会社なんですけどこれに既に 課金してる方APIに例えば20$課金し てる方はそのクで課金しているAPIの APIキーですねこれを貼り付けるとま そちらで課金しているお金を消費してえ

8:35 このカーソルを動かすことができ るっていうものなのでますでにオAI社と かにAPI課金してる方はまそちら 貼り付けていただいて使ってもいいですま ですけど私の場合はこのカーソル自体に 課金してるのでこの設定はま必要ないと いう形になりますまザAPIとかも使っ てる方はこちらでもカーソルに課金せずに 使えますよということでまもし持ってたら これ使ってみてくださいという感じですま これがモデルの設定でしたじゃ続いて チャーズセクション見ていきますま ちょっと重要なとこだけ見ていきますねで これまずカーソルタのとこなんですけども えこれはコド保管を勝手にしてくれます AIがまGコパイロットと同じ効果が得 られるものですねはいま今から書こうとし ているコードを良きしてま保管してくれる というものになりますこれがカーソルタブ になりますのでま使いたい方はチェック 入れといてください私はね講座とか動画の

9:21 関係でちょっとこれチェック入れちゃうと あの説明しにくくなるので私はチェック 外してるんですけどGパイロットみたいな 感じでねコード保管して欲しい方はこれ チェック入れててくださいまデフォルトで チェック入ってると思いますでチャット コンポーザーに関する設定なんですけどま ここら辺はねもうデフォルトの状態のまま で大丈夫ですうんまこれ例えばどういう 設定できるかって言うとこれですねオート スクロールとまつまりこうまメッセージが 追加されていくごとに自動的にスクロール してくれたりとかそれを許可するか許可し ないかとか例えば2番目だと今聞いている ファイルじゃないファイルですね他の ファイルに対してもまファイあのコードの 変更を許可するかどうかみたいなそういう 設定ができますなでこれデフォルトのまま で大丈夫ですはいでまその下のイナブヨロ モードっていうのがあるんですけどこの 養老モードドっていうのはま僕たちが レビューとかもしないとつまりAIが自動

10:06 的にもうコド生成を全部してくれるって 感じですね例えばtoodアプリ作って くださいっていう風に1回指出しすると もうそのtoアプリ完成まで全部ねあの 作ってくれるっていうのがヨロモードです これ後で試してみますはい今チェック外れ てると思いますねでこのヨロモード チェック入れるとエージェントモードが 使えますのでまそういったものもね私たち を何もコード書かなくてもま アプリケーション作れるっていうモードに なりますまですけど細かいカスタマイズし たい時とかはですね全部エージェントに 任せるとま出戻りが大きくなっちゃいます ので私は基本的にはチェックを外して エージェントモードをあまり使わない形で やってますはいまですけどコードの リファクタリングとかちょっとしたあの ファイルのあの綺麗にしてくださいとか そういったえ使い方であればま全然使える かなっていう形ですこれ後で試してみ ましょうまで他にもちょっといろんなね あのチェックリストあるんですけどま基本 的にデフォルトで大丈夫でま例えばラージ

10:53 コンテキストだったらこれチェック外れ てるんですけどこれはま要はAIがどれ だけコンテキスト長く読み取ってもっと 正確なものをえ出してくれるのかっていう 設定ですねまですけどこれ使うとまその トークンの使用量ってのが結構増えちゃい ますので基本的にはこれチェック外して いただいて大丈夫かなと思いますはいあと は細かい設定なのでまそのままで大丈夫 ですま気になる方はちょっと1個ずつ調べ てみてくださいじゃ続いての設定なんです けどコードベースインデクシンググって いうのがあるんですけど私100%になっ てますこれはAIがプロジェクトコードの 全体を検索してえまより精度の高いあの レスポンスを返してくれるような設定を する時にこのコドベースっていうのは インデックスしとかないといけないって とこですねなので皆さんこれを インデックスしておいてくださいはいま インデックスボタンみたいなのが多分ある と思うのでえこれを100%にしておくと

11:38 より精度の高い回答があるのでまこれ 100%にしておきましょうでその下の MCPサーバーズってのがあるんですけど これ後で実際に使ってみるんですけどこれ 一言で言うとまYouTubeのAPI だったりとかまGmailのAPIで作っ たMCPサーバーを用意しておいてまそれ と連携することによってま例えば YouTubeの何々のデータを引っ張っ てきてくださいとかGmailのMCP サーバーだったらまそのGmailの送信 をカーソル上でできるってことですねはい まコンポーザーと組み合わせてMCP サーバーを連携させてま事前に用意して いるMCPサーバーをここに登録できるん ですよね青いボタンでまそのMCP サーバーまでのURLを貼り付けてま 例えばYouTubeのデータ取得用のま サーバーを自分で作ったりとかもうすでに 用意されてるものがあるのでそういった ものを連携しておくとそのYouTube

12:23 のデータ取得も簡単にできるしそのデータ を使ってえカーソルでも開発を続けること ができるみたいなですねまYouTube の他にもノーションとかのサーバーMCP サーバーを使ってノーションで自分でメモ しているえ内容を開発に読み込ませたりと かそういった開発の可能性がもっと広がる ようなえ機能を提供してるのがこのMCP なのでまこれは後で詳しくあの具体例とか 交えて説明していきますま思ったより ちょっと初期設定の説明が長くなっちゃっ てるんですけどまサクサクいきましたで ドキュメントなんですけどこれはもうその 名の通りねドキュメントを記憶させること ができます例えば僕NEXTJSのね ドキュメント買わせてるんですけどサード パーティーのライブラリーだったりとかえ フレームワークを使時に最新のデータが やっぱり必要になりますねま例えば NEXTJSの今バージョン15が安定し てるのにじゃバージョン12とか13の 使ってもらったら困るわけじゃないですか なので最新のドキュメントに対応させる

13:10 ためにまこうやってドキュメントを自分で あの追加することができるってのが ドキュメントですはいでまエディターとか あるんですけどまここもデフォルトで 大丈夫です細かいとこなのでここはスルー しますでターミナルもそのままで大丈夫 ですでベータのとこなんですけどまこれは まだベタ版なので説明はしなくていいかな という形ですま余裕があればノートパッド も説明するかもですですという感じでえ カーソルの初期設定以上になりますお疲れ 様でしたじゃ早速カーソルの強みあのどん だけすごいのかっていうのをお見せしたい と思いますまずははいじ簡単に AmazonChromeということで ECサイトですねこちらをまちょっとUI とか外観を作りながらまこのカーソルの すごさえこちらをお見せしていきたいと 思いますはいままず今どこのディレクトリ にいるのかを確認したいと思います今 デベロップメントっていうディレクトリの 中にいるのでまここはねプロジェクト作る 場所ではないのでちょっと移動したいと

13:57 思いますでま適当にテストというね ディレクトリ作ってますのでここで ちょっとAmazonCHRを作っていき ます本当にあの本格的なものではないです ま今回サンプルで作っていきたいと思い ますじゃカーソルの使いどろちょっと見て いきましょうまずNEXTJっていうのを 使っていきますのでえターミナル上でです ねコトロKをしてみてくださいそうすると 下にですねこんな感じでえ打ち込むところ が出てきましてここでね例えばNEXT JSっていうフレームワークがあるので NEXTJSを使ってAmazonのよう なECサイトですねを作りたいですとはい えまずは初期初期セットアップですねを 開始してくださいという風に打ち込んで いきましょうでこれでねエンター機をして くださいそうすると自動的にターミナルが

14:42 実行されると思いますでえこれをコントロ +Lボタンを押していきますまエンター キーでも大丈夫ですで色々聞かれますので まこれはエンターキー自分で押していき ますねでま色々聞かれるんですけどこれは 全てエンターキーで進めていきますまここ ら辺はNEXTJSの知識なのでえXJS 知りたいという方は私の無料の YouTube動画もしくはユミ講座で しっかり解説しておりますのでぜひあの 概要欄除いてみてくださいまもしくは新 コードキャンプのオンラインスクールも やっておりますので是非概要欄除いてみて くださいま月額プランと買い切りプラン2 つね用意していこうと思いますので見てみ てくださいはいということでNEXJSの 準備できたみたいですじゃあですねCD コマンドで移動しましょうAmazon クーに移動してCARAドで立ち上がるか なあ環境パス通ってないのでえまちょっと ディレクトリは手動で立ち上げていきます

15:28 フォルダーラからえデブビルはいテストの Amazonクロですねここ選択して フォルダーを選択すると立ち上がります皆 さんも試しに作ってみるといいと思います 今AIでここまで簡単にできるのっていう のが分かると思いますはいプロジェクトの 雛型立ち上がりましたのでちょっと試しに ローカルサーバーを立ち上げてみたいと 思いますNPMRdebで立ち上がります のでローカルホスト3000番でブラウザ で開いてみてくださいはいまこれがトップ ページになるわけですねここに Amazonのようなものを作っていき たいと思いますカーソルののすごさ見て いきましょうえまずですねじゃ コンポーザーとえチャット機能ですねこれ どっちよく使うのかえどういう風に 使い分けるのかって言うと基本的に私は このコンポーザーというものを優先的に 使ってファイルを作成したりコーディング したりとかまAI駆動で全て作ってもら

16:14 うっていう手法を取っていますでチャット はどういう時に使うのかって言うと例えば まファイルの探索だったりとかえまこれ これれの実装しているファイルを探してみ てくださいとかこのファイルの説明をして くださいみたいな感じでま調べ物とか探索 の時にチャットを使いますであの基本的に コーディングを書くっていうものに関して は全部コンポーザーに任せています僕の 場合はねはいなのでチャットはちょっと後 で使いましょうかチャットは1回閉じて しまいます閉じる時はまこんな感じで右側 に全部やればいいですでコンポーザーに 聞いていくんですけどまずここのモデルで 選択することができますで私はあの基本的 にクロード3.5ソネットを使っており ます別に他のモデル使っていられても構い ませんですけど私使ってみたところ結局は クロード3.5ソネットが非常に精度が いいので結局はこちらを使っております デフォルトでもこちらになってると思い ますでこの右下ちょっと見づらいんです

17:00 けどもノーマルかエージェントこちら 選べるんですけどもまエージェント機能 っていうのはもうAIが全部アプリ作って くれるっていうモードですねま養老モード をチェック入れないと使えないのでこれ後 で使っていきますうんまずはノーマル モードデフォルトのモードにした状態で ちょっと聞いていきましょうはい Amazonクローを作りたいですとまず はUIだけを作っていきますとま後で ちょっとカーソルルールズっていう ファイルも置くのでまとりあえずこの カーソルのすごさ見てみてくだ コンポーネントはなるべく分けるようにし てくださいはいでえっと画像もね配置する ことができますこれ右に右下にイメージっ ていうのがあるのでここからね参考となる 画像を選択して見せることもできます ちょっと試しにやってみましょうちょっと Amazonのねあの参考となるページを

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

18:34 デフォルトでTAILwndCSSって いうNEXTJSのライブラリーが使われ ていてプラスUIライブラリーですね SHADCNUIっていう高品質な ライブラリーがありますのでまそういった ものを指定していただいても大丈夫です はいまそこら辺は別の私の動画見て いただいても構いませんということで ちょっと色々出してくれましたこれが ディレクトリ構造になっていてまず ヘッダーコンポーネントを作りましょうと いうことでここですねこのファイルの ところクリックしたらそのファイル該当 ファイルが開きますこんな感じで コンポーザーを右寄せにするとま見やすい と思いますねはいで緑のところが新しく 追加したものなのでCshifYもしくは ここをクリックすると承認することができ ますはいこれ私コーディングしてないです けどコンポーザーが自動的に書いてくれ ましたファイルも作ってくれました 素晴らしいですねじゃ続いて見ていきたい 時はもちろんこちら右側のえグローバル

19:22 CSSとかこのサブヘッダーを押して いただいてもいいんですけどまいちいち 押すのが面倒くさい場合はこの左下ですね ねえサブヘッダーTSXがありますので こちら押すと次に進むことができますま これも許可していきますでグローバル CSSも許可していきますHomeTSX も許可していきますでTAIL Windowjsファイルはえっとですね JSなんですけどこれ元々TSファイルが あるんですよねなのでconfigJSに 関しては今回はらないかなという形です はいこれでどうでしょうかまですけどまだ エラーがありますとサーチバーとロゴが えっと追加されていませんよということで ちょっと続いてやってもらいましょうか これも用意してという風に言ってみ ましょうこれも用意してくださいとはい私 のちょっと顔で見づらいかもしれませんが

20:07 まこんな感じで日本語でまペア プログラミングしていきながらえ自分たち は承認していくだけっていう作業になるの がまこのカーソルのAI駆動開発になり ますま基本的に僕個人開発でもほとんど 日本語とと日本語とのやり取りで全て コードを完成させていますま プログラミングの知識がない方はしっかり とコードの内容を理解した方がいいと思い ますま僕はまある程度NEXTの使用歴が 長いのでま別にレビューせずとも大型ね オッケー出しちゃうんですけどもまだ ちょっとちゃんと理解できていない方は 理解しながらやっていくといいと思います ま細かい修正とかも結局必要になるので その時にAIがじゃちゃんと使えるの かって言うとやっぱり基礎となる知識が ないと美修正ってのがしにくいので例えば CSSの基礎知識知識とかがないとあの UIの変更とかで詰まったりするので ちゃんと基礎は学ぶべきだなと思いますま

20:54 ちょっと待ったんですけどちょっとエラに なっちゃいましたねえもう1回聞いていき ましょうロゴとサーチバーの追加お願いし ますと適当に画像は置いていい ですはい修正してくれましたまサーチバー がちょっとエラになってるんですけどこれ はま相対パスもう1回読み込めばエラーは 消えますで今の状態確認するんですけどま こんな感じになっていてまこんな感じで Amazonクンのような形にはなって なくてちょっとおかしくなおかしな形に 塗ってますまこれはんでかって言うとま アップディレクトリ配下のPTSXの修正 が全然できていないっていうところですね なのでそれも尋ねていきます本当は最初 からカーソルルールで指定しておいた方が いいんですけどNEXTJS14以降の バージョンでおねお願いしますとでま今回

21:43 このページTSXを修正して欲しいので その胸も聞きたいという場合はですねこれ ねちょっとしたテクニックなんですけども アトマークを押すとですねファイルとか フォルダーとか色々指定できますまこれ後 でね1つずつ説明するんですけどまず ファイルズですねファイルズの修正したい ととろですねペジTSXなのでこれ選択 するとこれを指定できますはいこれを修正 してAmazonクローに近づけて くださいという風にしましょうはいという ことで見ていきましょうまCSHIFT+ Yでも承認することができるのでまどんな やり方でも大丈夫ですま私はこんな感じで クリックで承認していこうかなとは思って おりますはいまもしくはま全部一括で承認 したい場合は私の顔で見づらいんですけど

22:28 右下にアクセプトオルっていうのがあり ますボタンがこれ押すと全部一括で許可 できますはいでこの状態で確認するとはい どうでしょうかいい感じじゃないでしょう かまAmazonクのヘッダーだけ用意 できてる状態なんですけどもえーま結構 近い形で実装できたと思いますはいま せっかくなので商品一覧も出力したいと 思いますはいということで商品ダミー データとか置いてですねちょっと修正して みましたでこれ確認してみるとこんな感じ になりましたねまちょっとAmazon ぽくなったんじゃないかなと思いますま もちろんまるまるAmazonからコピー するとですね著作権的にダメなのでま色味 の修正とかですねデザインの変更は適やっ ていくとまいいんじゃないかなと思います まとりあえずコンポーザーのすさ皆さん 分かっていただけたと思いますほんの数分 でまこのAmazonのような見た目も

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

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

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

25:32 ですこれどういうことが書かれてるの かって言うとまちょっとこれもねえ和訳し ていきたいのでまこの場合はチャットとか ね聞いてみましょうかせっかくなのでま クロードとか使ってあげてもいいんです けどこれを早してみてという風にチャット で聞いてみましょうだからこんな感じで 簡単な質問とか実装も全てカーソルリダで 完結するっていうのがますごい良さですよ ねはいはいこちらコーディング規約がなさ れていてまエキスパートとしての規約です と例えばコードスタイルだったらタイプ スクリプトコードを書くとはいでえっと クラスはえクラスの仕様は避けるとはいえ 命名規則とかねあの配分をつけたファイル 名にしてくださいとか名前付き エクスポートにしてくださいとかはい デフォルトエクスポートではない名前付き エクスポートとコンポーネントはねみたい なえそういうものが事前に用意されてる

26:18 ルールになりますま適ここは修正して いただいて構いません皆さんの プロジェクトごとに修正しましょううんで これそのまま使うのでもいいですしま ちょっと修正したいこれいらないルールだ なっていう場合は外してあげても大丈夫 です今回の場合だとここ書いてありますね RSCを優先して利用してくださいとはい まユスエフェクトとかユスクライアント これは最小限に抑えてサバー コンポーネント利用してくださいねとか みたいな感じで設定されていますのでま とりあえずこれをつけていけばいいんじゃ ないかなと思いますネクスJS使ってる方 ははいじゃせっかくなのでこのルールが 守れているかどうかっていうのをチェック してみたいと思いますえっとですね今 ページTSX除いていくんですけどま デフォルトではサーバーコンポーネントで 実装さされていますでは商品の詳細ページ 作ってみましょうか商品リンクを商品の

27:05 ページへ移動するようにしてくださいと いう風にちょっと聞いてみましょう ちゃんとルール守ってくれるかどうか見て いき ますはいということで修正してくれました ので見ていきましょうかはいえまずページ TSXですね詳細ページなんですけどま とりあえずサーバーコンポーネント使っ てるみたいですねはいじゃに見ていきます ねでプロダクトカードも見ていきます プロダクトカードもはいまとりあえず サーバーコンポーネントのままにはなって いますねはいで最後にペジTSXで言われ てるのではいこんな感じでちょっと見て いきますねで今の状態で確認してみると どうなっているのか見ていきますちょっと 押してみますね商品ページをあ移動でき ましたねはいまAmazonのような

27:51 ちょっとページではないんですけどUIね 決めてないのでですけど詳細ページには 飛べるようになりましたはいルールが守れ てるかどうかなんですけどもちょっと 分かりづらいですよねま聞いてみましょう かちゃんとルールは守りましたかとはい ちょっと聞いてみましょうこれで確認 できるか分からないんですけどあ行けて ますねはいちょっと聞いてみたところ タイプスクリプトやってますえクラス使用 してませんと分割してますと命名規則従っ てますとでえ規約に従ってファイル構造を 作成していますということでまルールは ある程度守れてるみたいですはいま共通が できてなかったのでやってみますという風 にあったのででちょっと省略していきます でこうしてみるとあちゃんとAmazon クのヘッダーも映っている状態ですはい 例えばスマートウォッチ押すとスマート

28:37 ウォッチの商品ページに行けるようになり ましたはいAmazonの色になってます ねはいまそのままこのECサイト使っ ちゃうと著作権的にアウトなのでま色味 だったりとかえそこら辺はちゃんとね修正 するようにはしてくださいま今回サンプラ なのではいデプロイはしませんえま ヘッダーが2つ重なっちゃったんですけど まこれははいまAIに聞いてもいいですし 手動で修正できる方は手動でやってもいい ですま例えばここのヘッダーですよねここ のヘッダーが出てるのでこれをただ 取り除くだけでおそらく治ると思います 知識がある方だったらもうすぐにAI聞か ずに直せますはいというのがカーソル ルールの使い方ですでファイルごとに ルールを決めたいっていう場合は先ほど 説明したんですけどこの歯車マークのこの アニュルールですねこれ押してください

29:23 はいそうするとま適当にねルール名決める ことができてじゃ例えばテストのルール 決めたいんだたらまテストみたいな名前に つけてあげてまテストコード用のま カーソルのルールですよねこれを決定し たいとつまりこのグロブスっていうのが あるんですけどちょっと見づらいですかね ここのグロブスっていうところがあるん ですけどこれファイル指定できるのでま 例えばま例えばスペックファイルとかです かねはいまスペック拡張子使う場合は こんな感じで書いたりとかでえまテストに 関するここにルールを決めてあげるという 形ですまこれに関してはですねまちょっと この全の記事ですねえまちょっと具体例が ありましたのでこういうの見ていただけれ ばいいかなと思いますはいま例えばなん ですけどテスト以外にもプルリクエストを 自動作成する時のルールとかはいクリエイ

30:09 プルリクエストMDCファイルを新しく 作成してまちょっと1回テストはまこんな 感じでいいかなという形ですねで新しく 作りたい場合はもうここのルールズ ファイルがディレクトリが作成されてるの でまここにね例えばクリエイPRMDC ファイルを作ってま適当にデスク決めて あげてまグローブスファイル指定なしでも いけるみたいですでまここら辺コピーして ま日本語でもいけるみたいですねはいえ PRプルリクエストまGUPの リポジトリーにままプルリクエストっての を出すことができるんですけどそれを出す 前のまルールみたいなのを決めることが できるっていうとこですねなのでこれで PR出してくださいって言うとこのルール に従ってあのコンポーザーとかプル リクエスト出してくれるという形ですと いう感じで皆さんもカーソルルール作って みてくださいはいということで続いての

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

31:44 が少ないのであれなんですけどもま例えば ホームコンポーネントを指定したい時は ページ指定もできますしホームの関数自体 を指定することもできますなんか他のユィ ユーティリティ関数がある場合はそちらの え関数名ですね例えばゲットブログとか 関数がある場合はこちら指定して修正する ことももちろんできますはいで ドキュメントですねドキュメントに関して はえ公式で用意されてるものもあります 例えばAmazonEC2とかS3に 関するオフィシャルのドキュメントでこれ で最新のドキュメントを反映させることも できますしドキュメントNEXTJS反映 させたいという場合は私はすでに インデックスしていますNEXTJSの 公式のでこれを指定することもできるわけ ですねはいじゃどうやって自分で公式 ドキュメントを噛ませることができるのか というとまこちらはね最初の初期設定で

32:29 ちょっとね説明したんですけど フューチャーズのところですかね フューチャーズのところのドックてあり ますはいここにですね例えばえそうですね じゃ他にNEXT10さも既にしてるので ま例えばリアクトの公式をえかませたいの であればリアクトドキュメントで検索して まAPIリファレンスでもいいと思います しまリアクトを学ぶでもいいと思いますえ まリファレンスの方がいいかなうんで こちらをですねえコピーしてきてこれと 19の安定版ですねでこちらに貼り付け ますこんな感じではいでエンターキー押す わけですねはいネームはリアクトで プレフィックスはまこうなっているとこの 状態で確認ボタンをしていきましょうとえ pleaschosediffrentと じゃあ19にしましょうでこの状態で

33:15 コンファーム押すとインデックスが開示さ れますすぐにインデックスできましたねで この右の本のマーク押すとどこをですね ドキュメントを認識しているのかを見る ことができます例えばサスペンスのとこ見 てみるとはいこちらのページを参照しまし たよっていう風に出てきますはいえつまり 最新版に対応できるわけですねじゃあこれ を使ってみたいと思います実際にえじゃあ コンポーザーに聞いてみますねまNEXT JSでもいいしまリアクトを指定しても いいと思いますドックスのじゃ例えば リアクトを指定してこれを元にじゃ ストリーミングデータフェッチを実装して みてくださいとえデータは置きで大丈夫 ですとこんな感じでえことももちろんでき ますはいでこんな感じではいデータ

34:02 ニューっていうのをちょっと仮置きで ディレイかけたものを用意しておいてで他 にもまプロダクトリストとかねはい カテゴリーリストとかねはいで フューチャープロダクトとかねはい設置し ましたとでこの実装ではデータフェッチは えそれぞれのサスペンスでラップしてい ますという風に出てきていますサスペンス のちゃんとドキュメント対応してくれて ますねうん実際のサスペンスのとこを ちょっと見たいんですけどここですねはい カテゴリー一覧おすめ商品サスペンスで ちゃんとラップされてますとなのでなので ストリーミングデータフェッチができると 思いますちょっと見ていきましょうかま ちょっと商品一覧の表がおかしくなっ ちゃったんですけどもまこれはちょっと 意図しない形なんですけどもまUIはその ままにして欲しいですねまちょっと先ほど のに戻していただきましたで今さっきの見

34:49 てみてま画像リンク切れちゃってるんです けどリロードするとこんな感じで スケルトン表示になってますよねはい スケルトン表示でストリーミングデータが できているという形になりますま商品一覧 はストリーミングにはまだなってないん ですけどもまよく見るストリーミングの データフェッチができていますみたいな 感じでドキュメントを使っていけばいいと 思いますだから実際の開発ではまあんまり 有名じゃないAPI使う時とかネットに 情報が落ちていないAPIサービスで使う 時があると思うんですけどそれで実装 しようとするとそのAIは昔の情報で実装 しちゃったりしてなかなかうまく実装進ま ないとかあるんですよねだからその時は 実際にじゃあ例えばノーションのAPI 使いたいっていう場合ですねま農場API のドキュメント持ってきて最新バージョン にドキュメント噛ませてからちゃんと実装 していくっていうのが1番いいんじゃない

35:35 かなと思ってますうんまAPI リファレンスのとこかました方がいいいか もですねはいAPIリファレンスのところ をこれをコピーしてえ全部対応させ るっていう方法の方がま出戻りが少なくて いいんじゃないかなと思ってますはいこう いう使い方ができますでちなみにこの ドキュメントなんですけどコンポーザーで も使えますしチャットでも使えますま チャットこれですねまこれでシンボリック 機能をもちろん指定すすることもできます しまドキュメントもはい指定することも できますでプラスルールにもね適用できた と思いますえカーソルルーズルールズの こちらでは対応はまだできてないかもしれ ないんですけども個別のルールに対しては 対応できたんじゃないでしょうかはい ドキュメント自体はちょっとあの指定は できないみたいですねカーソルルールで ああなるほどまヘッダーとかまファイルは

36:22 シンボリック機能で指定はできるみたい ですはいま一応覚えておきましょう続いて のシンボル機能見ていきますシンボリッ クって言ってんですけどシンボル機能です ねすいませんはいまシンボル機能なんです けど他にもまギットってありますねでギッ 何ができるのかっていうとプルリクエスト コミットとかせっかくなのでギットア リポジトリ簡単に作ってみたいと思います Windowsの方であればコントロール SHIFTPを押してですね出てきますの でパブリッシュtogitHUBでえ ちょっとパブリッシュでリポジトリ作って みますねはいまリポジトリ初期化してまG ハブ上に作ることができますま持ってない 方は別にやらなくて大丈夫ですでこれを ですねじゃPRしていきたいと思います nitのPRdifffwithメイン ブランチはいこれでちょっとやっていき ましょうかこ何してくれるんでしょうかま

37:07 PRを実際にしてくれるわけではなくて PRの内容をまとめてくれるみたいですね ま何を実装したのか変更点と詳細とテスト 項目とか影響範囲とかまプルリの際の コミット分書きたい時とかはこれ参考に すればいいんじゃないかなと思いますじゃ 実際にどうやってPR出すのかって言うと ターミナル上でまコマンド系でいいんじゃ ないかなと思いますねまG@comit PRプッシュかなをしてくださいという風 に出せばまこちらで実行してくれるかなと いう形ですねままとめてやってくれると いう形なんですけどもえもうすでに私 プシュしちゃったのでちょっとこのような エラになっちゃったんですけどプル リクエスト出す時はターミナル上でやる 感じですかねまそういう使い方ができる みたいですねま他にも多分いい使い方が

37:53 あると思うのでまちょっと皆さんに教えて 欲しいですねま例えば分を出してくれたり とかもできるのかなコミットにすると コミットメッセージを書いてくれるって形 ですねまちょっとあのgitHUB使っ てる方はちょっとこれ色々やってみてやっ てみると面白いかなと思いますはいじゃ他 の機能もちょっと見ていきますねまgit の下にノートPadっていうのがあるん ですけどまこれちょっと軽く説明するん ですけどこの左のサイドバーのとこに ノートPadドってのが出てきてると思い ますはい設定で有効にしてる方はですねで ここにプラスボタンがありますでプラス ボタン押すとまこんな感じでえっとノート Padまメモ帳ですねこれが出てきますで このメモ帳どういう時に使うのかって言う とまチーム全体でプロジェクトの内容を 共有したい時とかまそういう時に使います とはい公式ドキュメントにはそう書かれて いましたまちょっと見ていきますねえま

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

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

40:11 きた時とか頭整理したい場合はこういった 機能使うとますっと理解できると思います はいじゃ他のシンボル機能も紹介していく んですけどえカーソルルールズがあります ねこれはそのままカーソルルールを検索し てくれるものになりますはいまそのまま 直接クリエイトMDCとしても大丈夫です はいはいじゃあシンボル機能あと2つです ねはい紹介していきますコードベースって のがあるんですけどこれ何かって言うと これすごくてえ例えばなんですけどま コンポーザーよりもチャットがいいかな チャットにコードベースでこの プロジェクトは全体的にどのような実装に なっていますかとこのような質問してみ ましょうかそうするとはい今まで作ってき たファイルですねこれ全部見てくれます はい例えば28個のファイルとゴロー

40:56 ベースコンテですねもうこれを全て見た上 でえこのプロジェクトの構造がどうなって いるのかっていうのを吐き出してくれると まレイアウトがここですよヘッダー部分が ここですよとかね商品カートがここになり ますよみたいな形でえ全部吐き出して くれる形ですねじゃあ例えばこれをこせず に説明することはできますかとちょっと 画像いけますかね画像というかマーメード 図ですかねマーメイド2を使ってちょ 吐き出して欲しいんですけどま画像は 吐き出してくれないのでちょっと分かり づらいですけどまこれを全てコピーしてま クロードでこのプロジェクト全体の例えば これ全部コピーしますねコピーをして クロードとか使うわけですよねま例えば ここにパンと貼り付けてこれをえ図にして くださいとま別のAIツールに聞くと

41:43 ちゃんとずっとしてまプロジェクト全体を 把握できたりとか途中で開発に携わった人 とかま全部コードリーティングしなきゃ いけない場面ってあると思うんですけどま 何がどうなってるのか把握しづらいのでま こういったコードベースの機能を使えばま そのプロジェクト全体がどうなってるの かってのは大型把握できるんじゃないかな と思ってますうんままずは全体の構成図を 把握して1つ1つの詳細なファイルを除い て理解していくっていうのがま1番理解が 深まると思いますのでそういった時に コードベースとか使えばいいんじゃないか なと思いますま他に使い方知ってる方が いらっしゃいましたら教えてくださいじゃ 最後のシンボル機能説明しましょう最後が WEBになりますはいまこれはその名の 通りま実際のGoogleに落ちてある 情報を元にあの回答してくれるっていう ものになりて例えばNEXTJSの最新版

42:30 のえっとPPRパーテルパーシャル プリレンダについて教えてくださいとはい そうするとWeb検索してくれますパプレ とま似たような機能ですねなので Google検索でちょっとね最新の API探してくるの面倒くさいとかえて いう場合は全部カーソル内で完結してくれ ますねはいこんな感じで実装方法だったり とかパフォーマンス最適化の説明をして くれますもちろんコンポーザーでもWEB を使えますのでまここで実装したい場合は まここでそのまま聞けばいいと思いますま こんな感じで解説してくれますねま一応 このリンクも出してくれるのでま参照元も ちゃんとチェックすることができます NEXT13.5からま議論されてる内容 なんじゃないかなということですねま 例えばマニアなドキュメント探してきたい 時とかはこれWEB検索すればいいんじゃ

43:16 ないかなと思います例えばノーション APIの最新のリファレンス を探してきてくださいとこのような検索の 仕方もできると思いますま検索された結果 には含まれていないっていう風に怒られた んですけどもまどこ探してきたのかって いうのがあのリンクで渡されるのでま 例えば公式ドキュメントってま自分で検索 したら早いかもしれないんですけどまここ ですね先ほど見たAPIリファレンスが あるんですけどここのリンクをコピーして じゃ設定の方のドキュメントにかませて じゃ毎回最新のAPIをえっと認識して 認識してもらうっていうこともまもちろん できるわけですねこんな感じでノーション で決めてまノーションAPIとかねはい こんな感じでドキュメントを噛ませること

44:02 ももちろんできますとまそういう使い方も あります例えばエラーが起きた場合は 例えばWebのアトマークをつけた状態で エラー分を貼り付けてま最新情報を元に このエラーの解決を試みてくださいとかま そういったいう風に聞くのもま1つの手か もしれませんという感じがまシンボル機能 の全てになりますはいということで コンポーザーとかチャットシンボル機能 説明できたので続いてエージェント機能 ですね使っていきたいと思いますま養老と 言われているものですま分かりやすいよう にちょっと新しいプロジェクトを用意し ますねじゃ新しくNEXTJSの日型作り ましたじゃここでエージェントモード使っ ていきましょうこの右下にノーマルか エージェント選べるのでエージェントを クリックしましょううんそしたら エージェントモードになりますでヨロ モードにしなきゃいけないって言ったん ですけどもうヨロモードチェック入れなく てもできるみたいですねヨロモードの場合

44:49 はあの確認ボタンね承認ボタン押さずとも 多分どんどんアプリ作ってくれるみたいな モードなんじゃないかなと思いますはいま まとりあえず養老モードなしで エージェント機能だけ使っていきたいと 思いますでエージェント機能ここ出ないと いう方はですね新しくコンポーザーねこれ 開かないとエージェント出てきませんので 最初からエージェント機能選択しとか なきゃいけないのでまそれは気をつけて くださいま定番ではありますけどもじゃ todoアプリケーションですねトーブ アプリケーションをえ作ってくださいま データベースもローカルで使えるものを 使ってみてくださいという風にして ちょっとエージェントモードで作ってみ ましょうまクド3.5ソネット以外にも 使えるんですけどもまこのままで サブミッシブ

45:57 まランコマンドをしていきますはい マイグレーションできましたまこれSQL でやってるみたいですねはいで インスタンス化しますということではい アクセプトしますまただ承認してるだけ ですね僕ははいじゃ続いてAPI作って ますとはいということで承認しますメイン ページのコンポーネントを作成しますとま 本当に最低限動くものかなと思いますね はいじゃあアクセプトしますそしたら完成 かなNPMランデしてくださいとことで ランコマンドしてみますはいじゃローカル サーバー開いましたま3000番使われ てるので30001番開きますってあるん ですけどもう既に私はサーバー開いてるの でいいかなじゃこの場合ではいリロードし てみるとこんな感じでtodoリスト作れ ましたまありふれたものなんですけども 例えばカーサとはい追加することができ

46:43 ましたねはいじゃあエージェントとはい 追加できますとでチェック入れるとこんな 感じで取り消し線がつくようになりました で削除とは削除することもできます データベース使ってるのでこれリロードし てもデータが保存されてますね はいこんな感じで作れましたね新コード ですデミア新コードキャンプ運営中概要欄 チェックしてみてくださいはいという感じ ではいでリロードすても大丈夫とはい 素晴らしいんじゃないでしょうかま ちょっとサ系なのでじゃUIも変更して いきましょうという提案をしていきます はいサプ系なのでもっとリッチなUIをて くださいという風にエージェントモードで てみますま僕今手打ちでタイピングして

47:29 聞いてるんですけどまMacの方だったら 多分音声入力できると思いますMac あんま使ったことないんでわかんないん ですけどそしたらタイピングせずにその ままねここのまプロンプと打ち込むところ に音声入力できるのでもうAIと会話する だけでまアプリケーションが作れていく みたいなこともできると思います Windowsの方はその音声入力みたい な多分アプリケーションみたいなのを別で 入れないと多分難しいと思うので私はまだ それはやってないんですけどまそういった こともできます喋ってる間にちょっとして くれましたということでアクセプトして いきますはいランコマンドとフレーマー モーションでアニメーションつつけると はいデザイン改善しましたよっていう風に なりましたのでちょっと見ていきますはい どうでしょうかあこれダークモード 切り替えもいけたみたいですね素晴らしい と思いますはいしかもtodoが左から出

48:14 てくるっていよくわからない仕様があり ましてあでもすごいですね思ってたより すごいですこれ消したらふわっとなると ええいいですねこれちょっと驚いてます はいまもちろん簡単なこういったアプリ しか使うようとはないと思うんですけど 全然いいですはいいや僕思ってるより なんか使えてびっくりしてますいやこの ダークモードができるっていうのが驚いて ますねこういうのやるともしかしたら エンジニアいらないんじゃないかなみたい なまワクワク感とまちょっと残念な感じが 入り混じる笑いが込み上げるという形です ねはい他にもリッチな機能をけつけてみて くださいとくださいえっとユーザーに使っ てもらいますそま後でクラインっていう 拡張機能も紹介するんですけどまこれと似

49:00 たような機能を提供してくれてるものです プリズマスキは更新しますとはいはい プライオリティかはいマイグレーションし ますとマイグレーションの更新もでき ちゃうはいこれアクセプトしていきます じゃ見ていきましょうエラーですエラーが 出てくれましたよかったですはい エンジニアはまだ必要なようですねはい これでこういうエラーが出てるよとはい はいということでエラー解決できましたの で見ていきますまあね検索もできるとで 新しいタスクはこんな感じで追加すること ができますまかなりリッチなものになり ましたまワーク中ですよとでハイレベル ですよとでカレンダーに追加する日付を 入れることができますま時間も指定が できるとそしてここに追加ボタン押すと はいちゃんと追加ができるといった感じに なりますはいで編集こんな感じで完了も

49:46 できるし削除することもできるとでタスク 検索もできるのかなあできますねはい テストはいテストとすると検索できるしで も検索できるノンだとありませんよとで 優先度ははいだけ表示してくださいとか こういったこともえできるようになりまし た完了済みを非表示もできますと 素晴らしいですねこれまエンジニアいら ないので退場し ますというのは冗談ですこれは素晴らしい とうんまなんかこれ押しちゃったら自動的 にねライトモードが解除されたりするん ですけどまここもね修正をあの指示すれば 勝手に治るということですまそこまで大 規模じゃないアプリケーションであれば もう全部エージェントで作れるかもしれ ないなっていう印象がありましたま プロジェクトの途中からエージェント

50:32 モードに切り替えるっていうのはま ちょっと怖い部分ありますよね今まで書い てきた内容が全部えエージェントで全部 書き変わっちゃうのでまちょっとブラック ボックス化しやすいか印象は受けるかも しれないんですけどまかなりクオリティの 高いものにもまどんどん聞いていけば できるんじゃないかなっていう印象です はいま一応養老モードもオンにして試して みたいと思いますちょっとね動画長くなっ ちゃってるんですけどまカーソルのね魅力 をやっぱお伝えするとなるとやっぱこれ ぐらい時間かかりますのでお許しください という感じですねはいでこれねチェック 入れるとまここにヨロプロンプトっていう ことでまちょっと簡単な指示出しですする こともできましてまNPMインストール 許可しますよとか許可リストもできますと 許可リスト入れられますでま実行したく ないコマンドも入れられますま削除の コマンドだったりとかま権限のための

51:17 コマンドだったりは自行しないでください とかねはいデリートファイル プロテクションにチェック入れるとえ自動 的にファイルは消さなくなりますまです けどチェック外してるのでま不必要な ファイルは消してくれるという形になり ますということでこれでヨロモードでやっ てみますねえでは認証機能を作ってみて くださいとえtodo以外にもえ機能が あるようなサース形式で作ってみて くださいという風にちょっと出してみます 養老モードでやってみます私何も触って ないんですけどおそらくあの勝手に認証さ れていくんじゃないかなと思いますはいま エラーとかリトエラーを発見して自動的に エラー修正してくれてますねあ実際認証し てくれてますねうんどうなんだろうそう

52:03 ですねNPMインストールも自動的にやっ てくれるのかなま一応アクセプト押さない と進まないかもしれないですねちょっと 押してみます養老モードなんですけど ちょっと認証していかないと進まない みたいですねなんかちょっと挙動が分から ないんですけどもまもしかしたら途中で 養老モードに切り替えたからこういうこと になってるかもしれないですねま今の段階 ではちょっとアクセプト押さないといけ ないみたいですねあんま変わってないです ねエージェントモドの時とああでも結構 作ってくれますねで今回使ってるのが NEXTオース使ってますねまNEXT オースもバージョン結構変わってるので ちゃんと対応してくれてるのかわかんない んですけどもはいまそのままちょっと見 ときましょうま一応ちょっと覗いてみ ましょうかどんな感じでペジTSX作っ てるのかまユスクライアントなので リアクトでの実装に近いですかねサーバ アクションとかは使ってないみたいですま

52:49 今回のプロジェクトはカーソルルールズ 設定してないのでえそういったことは守っ てくれないかもしれないんですけどま全然 動く形にはなると思いますようやく終わり ましたねはいということでちょっと アクセプトオールしてみますまほぼユス クライアントなのでNEXTJSの強みは 発揮されてないんですけどはいこんな感じ でユーザー認証でできましたとで データベース連携できてますセキュリティ もできてますとこれでちょっと見ていき ましょうかま多分ログインページに移動 すればああ実際作ってくれてますねオス ログインページに行ったらログインが できるようになっているとアカウント持っ てなかったらサインインできるみたいです ねはいはいで登録登録中にエラーが発生し ましたインターナルサーバーエラーですよ とまここら辺はレジスターかなレジスター

53:35 でAPIを叩いた時にあこのユーザー モデルがなんかおかしくなってるなま実際 にまだねエラーは発生する形にはなるん ですけどおそらくバリデーションとかの エラーなんですかねまそこはちょっとね あのまたねエージェント機能に手聞いて いけばいいと思いますみたいな感じでま 思ってるよりちゃんとしたものが作れる なっていう印象ですよねなんかそのその 転職時のポートフォリオとかでなんかフル スタックアプリケーション作んなきゃいけ ないとかそういう時になんかこれ エージェント機能で1週間とかかけて なんかちゃんとした様になるもの作れるん じゃないかなっていう印象がありますねま ぶっちゃけ個人会のMVPの段階ですね 最低限動き機能であればま認証機能とか 必要ないのであればもうエージェント機能 でサクサク作ってもらってですぐ市場に 出せるっていうこともできるかなっていう

54:20 ことを思いましたもちろんこうやってねま 正直そのUIとかデザインに関してはま 微妙だと思うんですけどまそこもちゃんと uuiライブラリーを指定したりとか ちゃんとこういう風なスタイルにして くださいとかちょっとダサいですみたいな あとは参考となるページとか貼り付けて こんな感じにしてくださいって エージェントモードに聞いたらま結構いい ところまで行くんじゃないかなっていうの を思いましたうんまもちろんWebでも 使えますしスマホアプリ開発とかねXPと かリアクトネイティブとかで開発してる方 もエージェント機能使えると思うので スマホアプリくらいだったらUIの部分 だったら結構サクサク作れるんじゃないか なって思いますね僕も今はWebで開発し てるんですけどま今年後半とかになったら スマホアプリ開発とかしてるかもしれない のでそのその時も使おうかなって思いまし たはいはいということでエージェント機能 の紹介でしたはいで今からねクラインに ついての拡張機能も説明しようと思ったん

55:07 ですけどもうこのエージェント機能と ほとんど変わらないのでま別のネットの 記事とか他のYouTube動画ちょっと 見ていただきたいと思いますですけども ほとんど同じだと思いますま気になる方は ねクラインで検索してあげてえこちらです ねこの各所機の有効にしていただくとま 自分でAPI用意してまDEEPシークと かからのAPI安いAPI用意してま今今 さっき紹介したエージェントみたいな感じ でね自動で作ってくれるっていうのがあり ますはいえまこのカーソルのエージェント とどれくらいねあのクオリティに差がある のかっていうのはちょっと比較してみて くださいまこの例でもtodoリスト作っ てますけどもま僕はカーソルの エージェント機能の方を利用しますはいで YouTube動画長すぎてもあれなので 最後にMCPサーバーですねこちら説明し てまカーソル入門終わりにしようと思い ますはいまほとんどの昨日紹介しましたの でまそれで十分かなという形ですという

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

56:38 ノーションに対してメモを残したいとかえ ブログを自動で執筆したいとかそういう 場合はえノーションのMCPサーバーを 用意してカーソルと連携すればそういった ものをカーソルから遠隔でできるっていう ところですねえそういったイメージです うんなのでちょっと探していきましょうか でまMCPサーバーがまとまっサイトが ありますのでそちら見ていきましょうか モデルコンテキストプロトコルでま例えば お天気情報のMCPサーバーとかお天気用 とかもっといろんなサーバー知りたい方は こちらのサイト除いていただいて exampleサーバーってのがあります はいまgitHUBとかもありますし Googleドライブとかありますし パティアとかもありますしこれ スクレイピング用のライブラリーですね こういったのMCPサーバーで接続したい 場合はどうすればいいのかという とここにですねNPXで行できるコマンド

57:27 があるんですよねでこれを使ってあげると いいですだからこれコピーしてあげてで MCPサーバーのアですねここに貼り付け ますで先頭にNPXYっていう風にして こうやってねサーバーURL設定して 例えばこうやって指定してあげるといいと でタイプをsseからコマンドに変えると そしてここにアをしてあげますADDの クリックするとえま皆さんだったらね ちゃんと繋がると思うんですけど私の環境 ではちょっとうまくね繋がらないんですよ ねまちょっとデフォルトのターミナルの 設定がおかしいんですかねなぜか分かり ませんが私の場合はちょっとパティアが 繋がらなくて困ってるんですけどあの 繋がったらここが緑色になります緑色の ランプでまNPXを起動するのでまNPX

58:12 コマンドを使うのでまデフォルトで設定し てるコマンドプロンプトですねノーJSの コマンドプロンプトにまちゃんとノードが 入ってたりとかNPXが入ってるかをこう 確認していてくださいね私の場合は ちゃんと入ってるんですけどえなぜかか 分からないんですけどちょっと繋がらない といった状態ですはいちゃんとできてる 場合お見せしたいのでまちょっとね動く やつをちょっとつけてみますえこれですね NPXhyのサーバーシークエンシャル シンキングってやつですね シークエンシャルシンキングっていう MCPサーバー使えたのでこれアッドして みますこんな感じでなんか何個も ターミナル出ちゃうので皆さんほならない と思うんですけどま本来でやればえこんな 感じでねこの緑のランプですね出てると 思いますなのでこれでこの シークエンシャルシンキングっていう

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

59:44 でMCPサーバーで例えばノーション スラックとかえそういったものを使う場合 は環境変数を設定する必要があるのでその 場合はエブの例えばノーションのまAPI キーが必要なのであればAPIキーとして まここにAPIキーを挿入してま ノーションのサーバーをねま立ち上げると まなんかわかんないんですけどこんな感じ のま用意されてるのであればなんか サーバーノーションなんかよくわかんない んですけどこういうのがもしあるならえ 先頭に環境編成をこのようにつつけると 多分動くと思いますここちゃんとコマンド にしといてくださいねまというのがMCP サーバーの説明でしたじゃ一通りカーソル について説明をありましたけども最後に 結局どの機能がま1番優れてるのかって いうか頻繁に使うのかについてなんです けどま私はこのコンポーザーですね コントロールIで開くコンポーザーの機能

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

1:01:16 エージェント機能なんですけど エージェント機能は例えばコード全体の リファクタリングに使ったりとかまだ1 からこうま中規模から大規模な アプリケーション作るのは難しいと思うの でえエージェント機のはそういったあの 補助的な役割で使うていうのがまこれから 私やっていこうかなと思ったところです はいという感じで以上になりますはいと いうこと ですごいなこれはいということでちょっと 長くなっちゃいました1時間超えたんです けどまこの動画でカーソルの基本ですね これを抑えることができたと思いますま僕 も自分のホームページだったり ポートフォリオだったりとか個人化発の アプリケーションは全部カーソルのAI 駆動で作ってます今はえーだからま半年と か1年前は全部半音形式で色々yoube とかで紹介してきたんですけどもう時代も ねAI時代に変わってますのでハゾンで 何か教えるっていうのは少なくなるかも

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

1:02:47 けどま2つプランあった方が皆さんも 選べるのでちょっと2つ用意しておきまし たはいあとはAI駆動開発マスターコー スってのも今作ってますまその講座は実際 に僕僕がこれから個人開発を0からも アイデアを思いつくところから始めてで リリースまでその0から100までって いうのをお見せするようなマスターコース になっておりますので気になる方はぜひ 概要欄の方チェックしてみてくださいま 完成予定は春の4月とか5月とかえそこら 辺でとりあえずリリースしようかなと思っ ておりますということで最後宣伝で申し訳 ございませんでしたまこれからの エンジニアがどうなるのかとかねえどう いうスキルが求められていくのかえ資本 初期がどうなっていくのかみたいなそう いうお話はねまたベッYouTubeで あの語るだけの動画で撮影しようと思って おりますのでま是非ともその時はよろしく お願いいたしますという感じで皆さんも カーソルを使って何か個人開発やってみて

1:03:33 くださいアプリケーション作ってみて くださいそしてもし何か形にすることが できたという方はですねま是非ともSNS の方でまこの動画をシェアしていただい たりとかえ何か参考になった僕の動画講座 シェアしたりレビューしてくださると非常 に嬉しく思いますということでねキャッチ アップちょっと大変なんですけど健康に気 をつけて皆さんもやっていきましょうと いうことでバイバイDET