Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク
codecamp
Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。
初級
React, Next.js, expo
10分で바이브코딩で作れる単純なサービスはもう捨てましょう! '本当の'実務適用바이브코딩を学ぶことができます。 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt
受講生 590名
難易度 中級以上
受講期間 無制限
学習した受講者のレビュー
5.0
희소식
現在2セクションまで受講を完了し、講義がとても良いので途中でレビューを残します。 2セクションまでしか見ていないのに、この講義をどれほど一生懸命準備してくださったのかが十分に分かりました。プロンプトをどのようにすればより効率的に使用できるのかが分かりましたし、教えてくださるプロンプトがとても有用だと思います。 私が見たバイブコーディング講義の中で現在まで最も満足のいく講義です。質問を投稿すると素早く回答してくださるので、受講中に問題が発生しても無理なくうまく続けることができました。 進度をどんどん進めていたところ、カーソルの使用量制限にかかってしまい、やむを得ず進行を止めましたが、後でまた続きから楽しく受講します。 良い講義をありがとうございます。
5.0
항상배우는아이
Live チャレンジの後半にある追加講義だけを別途販売していただけると嬉しいです。バックエンド部分の講義もお願いします~~
5.0
blessthy
Cursor AIバイブコーディングを体験したくて受講したのですが、思いがけずこれまで勉強してみたかったフロントエンドも一緒に体験してしまいました。超お得!元々フロントエンドをやっていた方はすぐに受講できそうですが、私は基礎を身につけるのに少し時間がかかりました。講師の方が初めて触れる方を基準に簡潔に継続して分かりやすく説明してくださったのが良かったし、プロンプトをどのように運用すべきかよく学べました。最近はGemini 3が出てからAntigravityがCursorの対抗馬として浮上してきているそうですね。業界は本当に速いですね。それでもここで学んだ本質は変わらないと思います。良い講義を作ってくださってありがとうございます。
バイブコーディングでFigmaデザインと100%同一にUI生成する方法
実際に適用可能なプロンプトの提供
バイブコーディングで機能中心の全体プロジェクト完成
バイブコーディング ポートフォリオ
会社で使用可能な実務中心のVibeCoding
現実:思い通りにならない 😭😭
コードキャンプの講義を受けた後の私 = 望む形のページが完成!
なぜバナナが代表イメージなのですか?バナナといえばVibe Coding思考の流れに沿ってVibe Codingらしく選びました。しかし、開発者のためのVibe Codingは感覚だけでは進められません。体系的で設計ベースで進める必要があります。
この講座は開発者のための真剣なVibe Codingです。実務に適用可能なレベルのVibe Codingです。
特に、ジュニア開発者であればAI時代に必ず知っておくべき必須スキルです。
Figmaを扱えるProject Manager、UIUX designer、サービス企画者が学習するにも十分な難易度で進めています。一人起業やN jobを望むなら挑戦してみてください!
Vibe Codingでは、Figmaデザインを100%実装できず、もどかしい思いをされていませんか?
私たちのチーム、または自分が作りたい正確な
Figmaデザインを、Vibe Codingで
100%正確に、素早く生成する秘訣を公開します。
不完全な初期Figma MCPの成果物 → 正確に生成する(ヤノルジャホームページの例)
5分で作れる単純なバイブコーディングサービスではなく、
本格的なサービスを作りたかったのではないですか?
このコースの後は、実際の実務でも完全自動化バイブコーディングを適用して作業できます!
もっともらしい機能ではなく、本当に実務で必要な機能を作ります!
「感情日記帳」プロジェクトでVibeCodingのほぼすべての方法論を学習します!
Figmaデザインをそのままに UI を生成する
実務開発のように共通コンポーネントを作る
バイブコーディングのための開発順序を決める
様々な機能の実装とAPI連携
ログインと権限分岐処理
開発者らしい並列処理方法
AIがミスをした時に安全に元に戻す
私の意図通りに120%の成果物を得るプロンプト提供及び作成法を学習します!
カーソルルールの設定方法
再利用可能なプロンプトの提供
100%安定した結果を得るためのルール
バイブコーディングのためのフォルダ構造
AIが生成するバイブコーディング方式は、コードの衝突を避けるための開発順序が重要です!
AIが生成するバイブコーディング方式は、コードの衝突を避けるために並列可能な範囲を把握する必要があります!
バイブコーディングに特化した開発原理・概念を含めて、非開発者でも十分に学習可能です。
開発者がバイブコーディングで自主的に成長できるようにロードマップを提案します。
バイブコーディングの特性上、毎回異なる結果物が出る可能性があるため、カリキュラムの完成が難しかったです。
誰もが同じ結果物が出るように修正及び結果物を再検討する方法を見つけました!
実務に沿った明確なカリキュラムをご確認ください。
講義プロジェクトの感情日記帳と有名ブログサービス「Velog」の原理は同じです!
より複雑な旅行プラットフォーム「マイリアルトリップ」も原理は同じです!
感情日記帳(講義実習プロジェクト)
日記保管箱 → 写真保管箱への移動
日記カード
全体フィルター
検索ロジック
すべてのページ遷移ロジック
二重モーダルおよびプロバイダーロジック
Velog(有名なブログサービス)
トレンディング → 最新・フィード移動
ブログカード
今週のフィルター
検索ロジック
すべてのページ遷移ロジック
二重モーダルおよびプロバイダーロジック
日記保管箱 → 写真保管箱への移動:トレンディング → 最新・フィードへの移動と同じ
日記カード:ブログカード同一
全体フィルター:今週フィルター機能は同一
検索ロジック同一
すべてのページ遷移ロジックは同一
二重モーダルおよびプロバイダーロジック同一
今ではどんなサービスでも実務適用バイブコーディングで素早く簡単に
フロントエンドをAtoZ実装できます。
HTMLからデザインソースを直接取得するHTML to Designプラグインの使い方も扱っています!
プロンプトを修正して、様々なデザインでバイブコーディングを練習してみてください。
1人起業または収益化サービスのためのプロジェクトを実装してみてください。
Velog Figma
マイリアルトリップ Figma
29cm Figma
最善の結果を出すために、Cursor AIの有料プランを使用しています。Claude 4.0基準でAI生成を行うため、トークン消費がある点にご注意ください。
バイブコーディングでプロジェクトを作成する際は、Figmaの有料サービスであるDevモードがなくても可能です!提供されたデザインを皆さんのページにコピペして使用してください。
基礎的なHTML、CSS、Javascriptの知識があると良いです。
Reactの基礎知識があれば、バイブコーディングがもっと簡単になります!
プロンプトの書き方と開発の概念を一緒に学ぶことができます。
バイブコーディングでフロントエンドを素早く作りたい開発者なら
Figmaで企画及びデザインが可能な方、特にUI/UXデザイナー&PMなら
毎月入ってくる「第2の給料」を退勤後に簡単に作りたいなら
スタートアップで素早い成果物が必要なら
この講義がぴったりだと思います。
これまでいただいたノウォンドゥ様のキーワードと受講レビューをまとめました。
この講義を通じてノウォンドゥ様と共にアプリ開発者として成長してみてください🚀
#親切な講義
#細かい
#パワフル
#耳にすっと入る
#本物の開発者
#メンターのメンター
#コーヒー豆
#いいねいいね
React.jsまたはNext.jsの基礎知識をお持ちの方に最適化された講座です。
プロンプトベースのバイブコーディングで、開発サイクル全体を学習できる核心講座です。
working promptを提供するため、プロンプトを応用して個別プロジェクトに適用できます。
私たちが経験した試行錯誤を皆さんがしなくて済むよう、できる限り多くの内容を盛り込みました。
より確実な結果を得るために、より賢いAIを選択することが望ましいと判断しています。講義ではCursorの有料プランを使用しており、Claude 4.0とo3で開発を進めています。したがって、トークン消費が多少発生している点を必ずご確認ください。
学習対象は
誰でしょう?
バイブコーディングで実サービスを構築したい誰でも
バイブコーディングを会社で使いたい誰でも
バイブコーディングのポートフォリオが必要な誰でも
精巧な1人起業サービスをVibeCodingで作りたい誰でも
自分のサービスを作りたいUIUXデザイナー
自分のサービスを作りたい企画者またはPM
前提知識、
必要でしょうか?
React基礎
HTML、CSS基礎
インフラン認証
15,869
受講生
502
受講レビュー
232
回答
4.8
講座評価
15
講座
"Try anything, Try everything!"
コードキャンプは有能なエンジニアを養成し、開発の未来を変えるという目標を掲げています。社会的、経済的、教育的な背景に関わらず、誰にでもキャリア転換の機会を提供するために、インフラン(Inflearn)に登場しました。コードキャンプと一緒にキャリアアップに挑戦しましょう!
全体
57件 ∙ (23時間 36分)
講座資料(こうぎしりょう):
15. [3-1] レイアウトUI生成
38:01
16. [3-2] 検索バーUI生成
43:47
17. [3-3] カードリストUI生成
16:58
19. [3-5] 詳細ページUI生成
24:15
21. [3-7] モーダルUI生成
18:27
全体
57件
4.8
57件の受講レビュー
受講レビュー 1
∙
平均評価 5.0
受講レビュー 3
∙
平均評価 5.0
受講レビュー 5
∙
平均評価 5.0
修正済み
5
現在2セクションまで受講を完了し、講義がとても良いので途中でレビューを残します。 2セクションまでしか見ていないのに、この講義をどれほど一生懸命準備してくださったのかが十分に分かりました。プロンプトをどのようにすればより効率的に使用できるのかが分かりましたし、教えてくださるプロンプトがとても有用だと思います。 私が見たバイブコーディング講義の中で現在まで最も満足のいく講義です。質問を投稿すると素早く回答してくださるので、受講中に問題が発生しても無理なくうまく続けることができました。 進度をどんどん進めていたところ、カーソルの使用量制限にかかってしまい、やむを得ず進行を止めましたが、後でまた続きから楽しく受講します。 良い講義をありがとうございます。
受講レビュー 1
∙
平均評価 5.0
5
会社で私の目の前に迫った状況に本当にぴったり合う救世主のような講義です..!
実務で役に立てて良かったです!今後もさらに高度化して使ってみてください!
はい、積極的に応用してみます!Claude Codeに関してもし何かコツがあれば、講座にしてください!
受講レビュー 15
∙
平均評価 5.0
5
Cursor AIバイブコーディングを体験したくて受講したのですが、思いがけずこれまで勉強してみたかったフロントエンドも一緒に体験してしまいました。超お得!元々フロントエンドをやっていた方はすぐに受講できそうですが、私は基礎を身につけるのに少し時間がかかりました。講師の方が初めて触れる方を基準に簡潔に継続して分かりやすく説明してくださったのが良かったし、プロンプトをどのように運用すべきかよく学べました。最近はGemini 3が出てからAntigravityがCursorの対抗馬として浮上してきているそうですね。業界は本当に速いですね。それでもここで学んだ本質は変わらないと思います。良い講義を作ってくださってありがとうございます。
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!