Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
Programming

/

AI Coding

これが本当のバイブコーディング - 開発者のためのバイブコーディング編

No Code, Only Prompt 10分でバイブコーディングで作れる単純なサービスはもう捨てましょう! 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作る 「本物の」実務適用バイブコーディングを学ぶことができます。

29名 が受講中です。

  • codecamp
AI 활용법
실습 중심
바이브코딩
커서
AI 코딩
React
Next.js
cursor
prompt engineering
Vibe Coding

こんなことが学べます

  • バイブコーディングでFigmaデザインと100%同一にUI生成する方法

  • 実際に適用可能なプロンプトの提供

  • バイブコーディングで機能中心の全体プロジェクト完成

  • バイブコーディング ポートフォリオ

  • 会社で使用可能な実務中心のVibeCoding

失敗しないバイブコーディング
Figma企画・デザイン通りに100%実装する方法を公開します。


バイブコーディングで作って途中で投げ出したことある?
今度はちゃんと体系的にやる方法を学んでみましょう。


初.公.開
YouTubeでも教えてくれない本当の実務適用バイブコーディングのすべて

「バナナ描いて〜」みたいな感じではなく、実務バイブコーディングを表現するバナナ画像

この講義は
開発者のためのバイブコーディングです。

なぜバナナが代表イメージなのですか?バナナといえばバイブコーディングという思考の流れに従って、バイブコーディングらしく選択しました。しかし、開発者のためのバイブコーディングは感覚だけでは行えません。体系的で設計ベースで進める必要があります。

この講義は開発者のための真剣なバイブコーディングです。実務に適用可能なレベルのバイブコーディングです。
特に、ジュニア開発者であればAI時代に必ず知っておくべき必須スキルです。

Figmaを扱えるProject Manager、UIUX designer、サービス企画者が学習するにも十分な難易度で進めています。1人起業やN職を望むなら挑戦してみてください!

この講義の後は、

1. どんなFigmaデザインも100%実装

バイブコーディングでFigmaデザインを100%実装できず、もどかしい思いをされていませんか?
私たちのチーム、または自分が作りたい正確なFigmaデザインを、バイブコーディングで100%正確かつ迅速に生成する秘訣を公開します。

中途半端な初期Figma MCP成果物 → 正確に生成する(ヤノルジャホームページ例)

2. 私の企画意図通りに機能を100%実装

5分で作れる単純なバイブコーディングサービスではなく、しっかりとしたサービスを作りたいと思いませんでしたか?
私たちのチーム、または私が作りたい正確なFigma企画をバイブコーディングで100%正確に実装する方法とプロンプトを公開します。

この講義の後は、本当に実務でも完全自動化バイブコーディングを適用して作業できるようになります!

本当にバイブコーディングのための
講義は違わなければなりません。

開発者・非開発者問わず、状況に応じて実務適用可能なバイブコーディングを学習することができます。

  • バイブコーディングに特化した開発原理・概念を含めて、非開発者でも十分に学習可能です。

  • 開発者がバイブコーディングで自主的に成長できるようにロードマップを提案します。

コード一行なしに、
プロンプトで実務サービス構築


「感情日記帳」プロジェクトでバイブコーディングのほぼすべての方法論を学習します!

  • Figmaデザイン通りにUI生成する

  • 実務開発のように共通コンポーネントを作る

  • バイブコーディングのための開発順序を決める

  • 様々な機能実装およびAPI連携

  • ログインおよび権限分岐処理

  • 開発者らしい並列処理方法

  • AIが間違えた時に安全に元に戻す



金のように貴重なAI、
言うことを聞かせるプロンプトを提供


私の意図通りに120%の結果を得るプロンプト提供及び作成法を学習します!

  • カーソルRule設定方法

  • 再利用可能なプロンプトの提供

  • 100%安定した結果を得るためのルール

  • バイブコーディングのためのフォルダ構造




私の意図通り
120%の成果物を得る開発手順


AIが生成するバイブコーディング方式は、コードの衝突を避けるための開発順序が重要です!

プロンプトは全て同一
並列処理はCursor AIの長所


AIが生成するバイブコーディング方式は、コードの衝突を避けるために並列可能な範囲を把握する必要があります!

どの講義よりも、
制作するのが困難でしたが、結局自信のあるカリキュラムを完成

バイブコーディングの特性上、毎回異なる結果物が出る可能性があるため、カリキュラムの完成が困難でした。
皆が同じ結果物が出るように修正及び結果物を再検討する方法を見つけました!

  • 実務に沿った明確なカリキュラムを確認してみてください。

講義を聞き終えたら
すべてのプロジェクトをバイブコーディングで作ることができます!

プロンプトを修正するだけで作ってみてください!

  • 講義プロジェクトと有名ブログサービス「Velog」の原理は同じです!

  • より複雑な旅行プラットフォーム「マイリアルトリップ」も原理は同じです!

1. 有名ブログサービス「Velog」のUIとほぼ全て同じです。

  • 日記保管庫 → 写真保管庫 移動 : トレンディング → 最新・フィード 移動と同一

  • 日記カード:ブログカード同一

2. 有名なブログサービス「Velog」の機能とほぼすべてが同じです。

  • 全体フィルター:今週フィルター機能は同一

  • 検索ロジック同一

  • 全ページの移動ロジックが同一

  • デュアルモーダルおよびプロバイダーロジック同一

3. 旅行プラットフォーム「マイリアルトリップ」のフロントエンドの原理とほぼ同じです。
今ではどんなサービスでも実務適用バイブコーディングで素早く簡単にフロントエンドをAtoZ実装できます。

練習できる
様々なFigmaデザインを提供しています。

直接欲しいデザインソースを取得するHTML to Designプラグインの使用法も扱っています!

  • プロンプトを修正して様々なデザインでバイブコーディングの練習をしてみてください。

  • 1人起業または収益化サービスのためのプロジェクトを実装してみてください。

Velog Figma

マイリアルトリップ Figma

29cm Figma

受講前の参考事項

Cursor AI 有料プランが必要です。

最良の結果を出すために、Cursor AIの有料プランを使用しています。Claude 4.0基準でAI生成するため、トークン消費がある点をご了承ください。

Figmaは無料プランで利用できます。

バイブコーディングでプロジェクトを作る時は、Figmaの有料サービスであるデブモードがなくても可能です!提供されたデザインを皆さんのページにコピペして使用してください。

前提知識および注意事項

  • 基礎的なHTML、CSS、Javascriptの知識があると良いです。

  • Reactの基礎知識があれば、バイブコーディングがより簡単になります!

  • プロンプトの書き方と開発概念を一緒に学ぶことができます。

このような方におすすめします

  • バイブコーディングでフロントエンドを素早く作りたい開発者なら

  • Figmaで企画・デザインが可能な方、特にUIUXデザイナー&PMなら

  • 毎月入ってくる「第2の給料」を退勤後に簡単に作りたいなら

  • スタートアップを夢見るなら迅速な成果が必要

この講義がぴったり合うでしょう。

もしかして노원두가
初めてですか?

これまでいただいたノウォンドゥさんのキーワードと受講レビューをまとめました。
この講義を通じてノウォンドゥさんと一緒にアプリ開発者として成長してみてください🚀

#Kindな講義
#丁寧な
#パワフル
#耳にすっと入る
#本物の開発者
#メンターのメンター


#コーヒー豆
#いいねいいね

ご質問は
ございますか?

Q. どの程度の前提知識が必要ですか?

React.jsまたはNext.jsの基礎知識をお持ちの方に最適化された講義です。
プロンプトベースのバイブコーディングで全体の開発サイクルを学習できる核心講義です。
working promptを提供するため、プロンプトを応用して個別プロジェクトに適用することができます。
私たちが経験した試行錯誤を皆さんがしなくて済むよう、できるだけ多くの内容を盛り込みました。

Q. カーソルはどのプランに入るべきですか?

より確実な結果を得るために、より賢いAIを選択することが望ましいと判断しています。講義はCursorの有料プランを使用しており、Claude 4.0とo3で開発を進めています。したがってトークン消費がかなり進んでいる点を必ずご確認ください。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • バイブコーディングで実サービスを構築したい誰でも

  • バイブコーディングを会社で使いたい誰でも

  • バイブコーディングのポートフォリオが必要な誰でも

  • 精巧な1人起業サービスをVibeCodingで作りたい誰でも

  • 自分のサービスを作りたいUIUXデザイナー

  • 自分のサービスを作りたい企画者またはPM

前提知識、
必要でしょうか?

  • React基礎

  • HTML、CSS基礎

こんにちは
です。

13,420

受講生

383

受講レビュー

193

回答

4.8

講座評価

12

講座

"Try anything, Try everything!"

코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!

カリキュラム

全体

50件 ∙ (18時間 10分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

期間限定セール

¥52

38%

¥12,931

codecampの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!