1. AIコーディングツール比較の導入と目的 [0]

  1. 動画の形式と目的:

    1. 本動画は、凝った設定のない、座って撮影し、実際にコーディングを行う非常に率直な形式である [0]。
    2. 具体的には「Vibe Coding」を行うことを目的としている [3]。
    3. 開発者の中には「Vibe Coding」という言葉に抵抗感を持つ者もいるが、本動画ではその言葉をあえて使用している [4]。

  2. 比較対象のツール:

    1. 以下の3つのツールをテストする: Lovable、Ripple、Cursor [10]。
    2. Lovableの選定理由:
    3. まだ完全に試したことがないため [11]。
    4. ニュースで話題になっており、多額の資金調達を行い、大きな注目を集めているため、その実際の能力を確認したい [12]。
    5. Rippleの選定理由:
    6. 以前は頻繁に使用していたが、長い間使用しておらず、メジャーアップグレードがあったことを知っているため [15]。
    7. Cursorの選定理由:
    8. 普段から頻繁に使用しているツールである [18]。
    9. CursorではAIがアシスタントとしての役割が強く、主導権を握っているわけではないと感じているため [18]。

  3. 比較の核心的な関心事:

    1. LovableとRippleでは、AIがユーザーをリードするのか、それともユーザーがAIをリードするのか、というAI主導型とユーザー主導型のアプローチの違いに関心がある [19]。

  4. 視聴者へのメッセージと課題:

    1. 視聴者が技術的経験がゼロであっても、今日紹介するツールの中には適したものがあるため問題ない [21]。
    2. 今日の最大の課題は、コーディングや構築ではなく、ユニークなアイデアを思いつき、注目を集めることである [24]。
    3. 視聴者のスキルレベルに基づいて最適なツールを見つけるため、同じプロンプトを3つのツールすべてに使用して結果を比較する [25]。

2. Lovableによる最初のテストと機能分析 [31]

  1. Lovableの概要と背景:

    1. Lovableは最近ニュースで多く取り上げられており、スウェーデン発のツールである [31]。
    2. 記事によると、Lovableは目覚ましい成長を遂げた後、1,500万ドルを調達した [37]。
    3. 筆者はLovableを少し使ったことがあり、非常にユーザーフレンドリーだと感じている [40]。

  2. プロンプトの実行:

    1. 3つのツールすべてに使用するプロンプトを決定する:
    2. 「犬版YouTubeのようなウェブアプリを作成してください。UIはモダンでありながら温かみがあり、フレンドリーにしてください。ユーザーが自分の犬の動画をアップロードできるようにすることが目標です。」 [59]。
    3. Lovableの料金体系を確認したところ、エンタープライズ、ビジネス、プロのプランがあり、無料プランから開始するが、クレジットはすぐに消費されることが分かった [69]。
    4. Lovableの利点として、Supabaseとのデータベース連携オプションがあり、本格的なアプリ構築に実用的である点が挙げられる [76]。

  3. Lovableの初期構築結果 (約2分後):

    1. Lovableは11秒間思考した後、デザインアプローチと実装する機能を非常に分かりやすく提示した [78]。
    2. 構築が開始され、デザインシステムから美しい犬の動画プラットフォームが構築され始めた [80]。
    3. アプリの左上隅には「Bark Flix」という名前が表示された [81]。
    4. 構築には約2分かかったと推定される [85]。
    5. 構築された要素は、デザインシステム、ヒーローセクション、動画グリッド、アップロードモーダル、レスポンスヘッダーなど、主にUIであった [89]。
    6. Lovableは次にすべきこととして、洗練とカスタマイズ、プロンプトの習熟を提案した [92]。
    7. Supabaseへの接続が可能であることも示された [96]。

  4. 初期機能テストと追加プロンプト:

    1. 検索機能（例: corgi検索）はまだ機能しない [98]。
    2. アップロードモーダルは存在し、実際にファイルをアップロードする画面（動画タイトル、犬種など）が表示される [99]。
    3. 動画カードをクリックしても何も起こらない [106]。
    4. チャットモードをオンにし、以下の追加プロンプトを入力した:
    5. 「犬を検索できるようにし、カードをクリックして犬の動画を視聴できるようにしたい」 [110]。
    6. 筆者はAPI接続は行わないが、コーディング経験のないユーザーが入力するであろうプロンプトを試している [111]。
    7. Lovableは、検索機能と動画視聴機能を追加する計画を提示し、モックデータに実際の動画ソースを含めることで対応すると説明した [116]。
    8. この実装計画の実行により、筆者の無料クレジットが残り2つになった [125]。

3. RippleとCursorの初期テストとLovableの機能追加 [129]

  1. Rippleの初期テスト:

    1. Lovableが思考中にRippleに切り替える [127]。
    2. Rippleにも同じプロンプトを入力した [131]。
    3. Rippleのバージョンは「Bark Tube」と名付けられた（YouTube版というプロンプトに忠実である） [137]。
    4. Rippleの興味深い点: 構築を開始する前に、ユーザーにビジュアルプレビューを承認するよう求めてくる [140]。
    5. Lovableとの比較:
    6. Lovableはすぐに構築を開始するのに対し、Rippleは承認を求める [144]。
    7. 筆者はすぐに構築を開始するLovableのアプローチを個人的には好む [145]。
    8. しかし、RippleはLovableよりもはるかに早くプレビューを提供したため、ユーザーはすぐに構築中のものを見られるという即時的な満足感を得られる [146]。
    9. Rippleはアプリの準備ができたときに通知する機能がある [150]。

  2. Cursorの初期テスト:

    1. Cursorにも同じプロンプトを入力したが、かなり前からプロンプトを入力していたにもかかわらず、まだ構築中であった [155]。
    2. Cursorは、言語やフレームワークを指定しなかったにもかかわらず、Reactを選択したと見られる [162]。
    3. また、Tailwindを使用している [170]。

  3. Lovableの機能追加結果:

    1. Lovableに戻ると、検索と動画視聴機能が追加されていた [174]。
    2. ページをリフレッシュすると、検索機能（corgi検索）が動作し、カードをクリックすると動画が再生されることが確認された [178]。
    3. 筆者は、これらの動画がどこから来ているのかは不明だが、機能としては動作していることに驚きを示した [202]。
    4. コーディングスキルがないユーザーでも、特定の動画が必要な場合はURLを含めるか、犬の動画に接続するAPIを見つけることができると説明した [206]。

4. RippleとCursorの最終結果とツールの比較分析 [210]

  1. Rippleの最終結果:

    1. Rippleの「Bark Tube」はまだ準備ができていない状態が続いており、Lovableよりもはるかに時間がかかっている [215]。
    2. 筆者は、承認したUIとは異なるUI（ランディングページ）が表示されたことに不満を示した [223]。
    3. しばらくしてRippleの構築が完了し、「Pup Tube」という名前でアプリが完成した（ただし、上部には「Bark Tube」と表示されている） [241]。
    4. Rippleの機能:
    5. ランディングページ、ユーザー認証、簡単なアップロード、ログインユーザー向けの動画フィード付きホームページ、個別の動画視聴ページなど、多くの機能が最初から組み込まれていた [245]。
    6. RippleはLovableよりも構築に時間がかかったが、Lovableで具体的に要求しなければならなかった機能の多くを最初から組み込んでいた [254]。

  2. Cursorの最終結果と技術的要件:

    1. Cursorは、他のツールよりもはるかに技術的な知識を必要とする [228]。
    2. ユーザーは、インストール、run devの実行、パッケージや依存関係のインストール、ローカルでの実行開始など、多くの手順を踏む必要がある [229]。
    3. 技術的なバックグラウンドを持たない一般の人々にとって、Cursorは適していない [233]。
    4. Cursorの利点: 開発者にとっては、より多くの制御が可能であり、実用的である [237]。
    5. 筆者は、Cursorの実行は技術的な知識が必要なため、今回はローカルでの実行を省略した [238]。

  3. スキルレベルに基づくツールの推奨:

    1. Lovable:
    2. コーディングや技術的なバックグラウンドがない人に適している [255]。
    3. 「Vibe Code」をしたい人、舞台裏で何が起こっているかを知らないかもしれない人向けである [256]。
    4. AIがユーザーをリードし、ガイドするツールである [267]。
    5. Ripple:
    6. 次のステップアップのツールであり、技術的なバックグラウンドを持つが、クールで迅速な構築を望む人向けである [257]。
    7. 筆者自身（約10年の開発経験を持つ）も、週末に深く考えずに面白いものを構築するのに適していると感じている [260]。
    8. Cursor:
    9. 最も技術的なレベルにあり、AIはアシスタントとしての役割が強く、主導権を握らない [263]。
    10. 開発者にとってより多くの制御を提供する [237]。

  4. 結論:

    1. これらのツールはすべて非常に興味深く、筆者がコーディングを学び始めた頃（ToDoリストの構築に苦労していた時代）と比較すると、技術の進化は驚異的である [271]。
    2. 筆者は、率直なツールテスト動画を今後も継続したい意向を示し、視聴者に次にテストしてほしいツールをコメントで提案するよう求めた [278]。