神AIエディタ「Cursor」を使った最新フロントエンド開発手法がすごすぎる【Tldraw、UI Sketcher】

Рет қаралды 110,763

Күн бұрын

2024/8/2に著書「ChatGPT/Copilotの教科書」の発売決定！ → amzn.asia/d/1nE4Xbo
4,600人以上が所属するAIを学べる無料コミュニティ「AIラボ」：note.com/merilinc/n/n054c1f94...
本気でブログで学びたい人のための無料メール講座：affi-note.com/online_mail_cou...
初著書「ブログライティングの教科書」：amzn.to/3D9InX9
●目次
0:00 神AIエディタ「Cursor」を使った最新フロントエンド開発手法がすごすぎる
1:47 今日使うツールを紹介
2:13 Tldraw
2:36 Make Real
2:49 Cursor
4:06 UI Sketcher
4:25 GitHub Copilot
5:06 実演1：Tldraw/Make Real
8:36 実演2：Cursor+UI Sketcher
15:18 エラーの改善案を教えてくれる
17:45 お金はかかるの？
19:56 エンディング
●なかじの運営メディア
ブログ：meril.co.jp/affi-note/
Voicy：voicy.jp/channel/2014
twitter： / ds_nakajima
インスタ： / ds_nakajima
ブログ相談ドットコム：blog-soudan.com/
無料コミュニティ：note.com/merilinc/n/n7b96a66e...
●なかじのプロフィール
中島大介
株式会社メリル代表取締役
1986年生まれ、三重県出身。
2005年の大学1年生からウェブ業界で働き始める。卒業後は広告代理店に勤務後、2014年に独立。翌年、株式会社メリルを創業。現在は、子育てに悩むユーザーと専門家のマッチングサービス「子育て相談ドットコム」や名古屋でコワーキングスペース「ABCスペース」を運営。
#なかじ
#ウェブ職TV
#ブログ
#アフィリエイト
※概要欄に記載しているアマゾンのURLはアソシエイトリンクを使用しています。

Пікірлер: 87

@webshokutv 7 ай бұрын

●目次 0:00 神AIエディタ「Cursor」を使った最新フロントエンド開発手法がすごすぎる 1:47 今日使うツールを紹介 2:13 Tldraw 2:36 Make Real 2:49 Cursor 4:06 UI Sketcher 4:25 GitHub Copilot 5:06 実演1：Tldraw/Make Real 8:36 実演2：Cursor+UI Sketcher 15:18 エラーの改善案を教えてくれる 17:45 お金はかかるの？ 19:56 エンディングブログ・アフィリエイトを体系的に学べる無料メール講座もやってます。KZbinでは話していない内容もあるので、ぜひ登録してください🙆‍♀ meril.co.jp/affi-note/online_mail_course?blog_nm=youtube_comment_20231124

@cecilehonda2234 5 ай бұрын

情報ありがとうございます。でも、著作権問題を考えると現時点多分Copliot Plus一択ですね。

@musekining2 7 ай бұрын

最近「まだ○○使ってるの？」系の煽りコピーが鼻について仕方がない。。。

@kone2018 7 ай бұрын

ただの新しい物好きのゴミエンジアだよな

@semidesu 4 ай бұрын

伸びるから仕方ないね… 鼻について離脱する人より、煽られて見にくる人の方が多いんだよきっと。

@tsubuyakichan 7 ай бұрын

凄いです😳

@beckkids 7 ай бұрын

これはホンマにすごい！

@user-ob1uo9he9e 7 ай бұрын

めちゃくちゃ便利！

@RT-fb2iz 2 ай бұрын

勉強になりました！

@it510 7 ай бұрын

「○○がヤバ過ぎた」似たような文言が多過ぎて本当にヤバイのが埋もれる。

@_p8623 7 ай бұрын

凄いですね、でも、プログラミングをある程度習得した方が使うべきツールなのかなと思いました。

@user-jd2hd5xj3r 7 ай бұрын

「Make Real」ボタンを押した後、操作が途中で止まってしまった場合、どのように対処すれば良いのか悩んでいます。

@user-nb7tl8ru7o 7 ай бұрын

意地でも漫画例えをする強い意志を感じる

@user-lm7wt9bf8t 5 ай бұрын

画面後ろのライオンさんとスターさんとクマさんも動き出したら買いますか？？？1台10万で、サポート料5万でどう思います？？？

@nthdthdyjsehsnw4ethwbt 7 ай бұрын

現状まだバグが多いのですが、相当良いですね。

@KafujiSato 7 ай бұрын

CursorはVSCodeのフォークに過ぎないし、それを参考にVSCodeがより良い形でAIインテグレーションを進めるんじゃないかな。あと、今のところCursorよりCopilotのほうが的確なコードを出す感じがする。自分の分野だけかもしれませんが。

@steveruizok 7 ай бұрын

Hi this is Steve from tldraw, awesome video. Ask me anything!

@yoooo4177 7 ай бұрын

フロントエンドエンジニアです。 lp制作などには有効かもしれませんが、webアプリ開発とかに使うにはまだまだですね、、

@kone2018 7 ай бұрын

ほんとこれ

@ziroura 7 ай бұрын

モック制作だけに使えますね

@suica2k4 7 ай бұрын

iOSのアプリ開発でもっと使いやすくなればな～

@cloudandwater 5 ай бұрын

Github Copilot では、学習元となるデータセットの作成に、元のコードのライセンスを無視してAIを学習させていることが問題になりましたが、この Cursor ではどうなんでしょうか。 Cursor のフォーラムなど当たってみましたがわかりませんでした。どなたかご存知ないですか？

@user-vg1mb8yz7q 7 ай бұрын

使用する以前の話になりますが、cursorエディタの立ち上がりが毎回とんでもなく遅くて、結局vscode使ってます💦なんでだろう

@komiyamma 7 ай бұрын

VSCodeからのフォークに過ぎないCursorでどうやったらVSCodeが終わるのか... Cursorが巨大で強靭なExtensionのエコシステムやGithubのエコシステムそのものを提供しているのですか？ CursorはVSCodeをフォークし、OpenAIと繋げているだけです。 VSCodeが終了したら即日Cursorも終了ですが、Cursorが終了してもVSCodeには影響はありません。

@sushiya_jp 7 ай бұрын

ちょっと大袈裟に表現しただけでガチで言ってるわけではないと思うよ笑そんな本気にならないで

@nthdthdyjsehsnw4ethwbt 7 ай бұрын

@@sushiya_jp こういうアスペは時代から取り残されていくんだから放っておこう

@mokemoke768 5 ай бұрын

@@sushiya_jp OSSプロジェクトをforkする自由は誰にでもありますが、fork先にリスペクトを欠くとその人は尊重を得られません。ユーザやKZbinrであってもそれは同じ。

@flycamtest 7 ай бұрын

昔メモ帳で手書きのhtml作っていましたが、原始時代をみるようですね

@rmjtajpdjwj 5 ай бұрын

凄い人だ。VSコードでも苦戦するのに

@user-le8kw6lx7q 5 ай бұрын

サクラエディタとかつかってたなぁ

@aocchi1638 7 ай бұрын

バックエンドとのやりとりはできるのでしょうかね？　ちょっと難しそうな気もしますが、htmlやcssを書く手間は省けそうです

@kone2018 7 ай бұрын

あとはreactでかけるとかな

@ziroura 7 ай бұрын

否定的な意見多いけど用途考えるのが人の役割なんではこれからもっと発展するだろうし楽しみ

@Sabuji. 7 ай бұрын

コードの事は全くわからないですが、凄いのは伝わります

@hajime-morimoto 7 ай бұрын

今はまだVSCodeの方がいいです。

@tachicomans 3 ай бұрын

何か少しAIから離れてたらすげー進んでるー。でもまだ、プロンプトでファイルごと自動生成してリンク繋げてくれる神IDEないのかな🐑

@yumeato 7 ай бұрын

ベジータ「まるで革命のバーゲンセールだな」

@cecilehonda2234 5 ай бұрын

「革命は加速する！」

@kitaoka2012 7 ай бұрын

VSCodeもコパイロット実装してくるし。AIは当たり前の機能になるんだろうね。逆にAI搭載できない中小のツールは淘汰されちゃう。

@yurimiura5137 7 ай бұрын

twitterで評判っぽかったけどスルーしていました。　すごいです。　float:left だ rightだのころからコーディングしていたのでなおさらです。bootstrapもちょいちょいバージョンかわるし結局スクラッチかよってなってリニュの予定のLPがあったのですが。面倒ですすんでいませんでした。この動画みてこれじゃんってなりました大優勝！　　紹介ありがとうございます！

@kone2018 7 ай бұрын

君はコーダー？

@470rz 5 ай бұрын

すごいけど、表面上の部分しかコーディングしてくれないなら大して役に立たないかもしれない。できればDBの処理などのロジック的な部分を処理してほしい。

@I-Love-yon-so-lets-go-to_bed 2 ай бұрын

ロジック部分を処理できたらロジック考える楽しさが無くなっちまう

@tetu6708 4 ай бұрын

Visual Studio Codeは、AIを活用することが主目的ではありませんよ。 Microsoftは独自技術路線と言うイメージが強いので、Microsoftは標準化団体に協力したり、ライバル会社に技術協力をするようになった。その流れでライバル視してきた企業達も含めて協力し合えるようにした開発環境がVisual Studio Codeです。

@chickenheart7615 4 ай бұрын

これは楽だな−、ちょっと画面作りたいけど、デザイナいなくてCSS書くのがタルいエンジニアには恩恵が。一方でフロントのフレームワークでも仕事してくれるのかな？そうじゃなかったら、ホームページかそれに小さいプログラム仕込んだレベルの仕事が楽になる話かな、とも思わんでもない。

@ninjabolt666 Ай бұрын

🎯 Key points for quick navigation: 00:00 *🔥 AIコードエディターの進化がフロントエンド開発に影響* 01:38 *💻 主要ツールの紹介と役割特徴* 04:08 *🛠️ TLドロー、メイクリアル、カーソル、UIスケッチャーの実演* 09:12 *🖌️ UIスケッチャーの使い方とデザインカスタマイズ* 12:56 *✏️ カーソルのAIチャットでコーディング支援* 17:16 *💲 カーソルとUIスケッチャーの料金プランと注意事項* Made with HARPA AI

@tohruohno4635 2 ай бұрын

Make real良いですね。常々、PSDとか作成されたデザインカンプからHTML,CSSとコーディングしてるの生産性が低いなと思っていました。 PSDが既にあるんで直接HTML,CSSにならないかなとあるいはExcelとか描かれたポンチ絵から同じようにHTML, CSSとかにするのもめんどいなと思ってました。ラフ図からまずはHTMLとCSSが出来るだけでもかなり重宝しますね。打ち合わせしながらざざっと構成してから、HTMLにして、これをベースにコーディングを進めると効率が爆上がりですね。

@user-vf8kk3ev7f 5 ай бұрын

lpとか作るのには便利かもね

@user-st8os3cg4i 7 ай бұрын

まぁ凄いんやけど多分、開発のどの工程を短縮するのが賢いのかを手探りしていく時期なのかとは思いますね。正直、ラフからプレーンなhtml, cssを起こすってあまり重要性は感じないかなと思います。どの道後でreactとかに書き換える事になるとなるとこの工程はあまり重要ではないと思います。逆にこれをほぼそのまま納品物に流用するってのでいいならもう、仕事として成り立たない気もしますね。

@kone2018 7 ай бұрын

ほんとこれ html,cssが作られたところでなwww まあコーダーは消え失せるだろうけどね

@ziroura 7 ай бұрын

モック作成の工数が激減しますね

@user-eq2dh7fm1m 7 ай бұрын

革命的なすげーもん出ても、それ使う人間はベトナム人とかパキスタン人とか日本人の 1/3 の給料でやってくれるやつアサインするからいまさら日本人が覚える必要もない希ガス(´・ω・`)

@kone2018 7 ай бұрын

reactで生成できるようになったら動画つくってもらっていい？

@user-fm5tk7pc1g 7 ай бұрын

指定されたデザインカンプをまるまるコードに起こしてくれるAIはまだ開発されてないですよね。とはいっても、webに関する案件自体がこれからはすべて一人でこなすような仕事が増えてくるでしょう。それでも、これからどんな案件に集中してスキルを磨いていけばいいか、それが分からないというのが今の正直なところです。

@hayatastic0224 7 ай бұрын

画像からhtmlにしてくれるChat GPTのプラグインもありますし、Screenshot to Codeというサービスもありますよ！

@user-fm5tk7pc1g 7 ай бұрын

@@hayatastic0224 さまその手のchat gptのプラグインというものは見つけられなかったのですけど、Screenshot to Codeで生成したコードをベースに作成を進めるのは良いかなと思いました。問題は生成されたスタイルがtailwindだけなのかなということと、生成されたコードを見本となるデザインに近づけたときに、返って手数が多くなってしまうのではないかということです。まぁ、物は試しですよね、やっぱり 😅

@kone2018 7 ай бұрын

@@hayatastic0224 ただのこーだーやん

@chickenheart7615 4 ай бұрын

正直言ってプログラムができるというのはもはやスキルじゃない、そんな気がします。しかも他人の仕事をやる限りはどんどんジリ貧になるしかないですね。自分でこの世の中の課題を見出して、その解決をシステムに落とし込んでビジネス組成する。それが楽になるってことでしかないので、外に出してAIが楽にしてくれた部分をやる人のしごとの価値って０に向かって低くなるしかないですよね。そこを考えないで、漫然と他人の仕事を受ける人には明るい未来は無いと思いますね。本当に凄い時代です、恐怖と同時にチャンスですね。