강의

N
챌린지

멘토링

N
클립

로드맵

BEST
Programming

/

Front-end

【コードキャンプ】ブートキャンプで作った「完璧な」フロントエンドコース

数百人の開発者を輩出した「本物の」ブートキャンプの完璧なフロントエンドカリキュラムです。この講座一つで、皆さんは現場のジュニア開発者レベルまで成長可能であり、フロントエンド技術スタックの活用能力と知識を得ることができます。誰もが社会的、経済的、教育的背景に関係なくキャリアを築けるよう、[コードキャンプ]が準備しました😊

（5.0）受講レビュー 15件

受講生 463名

難易度 入門

受講期間 無制限

React
React
Next.js
Next.js
GraphQL
GraphQL
React Native
React Native
Hybrid App
Hybrid App
React
React
Next.js
Next.js
GraphQL
GraphQL
React Native
React Native
Hybrid App
Hybrid App

受講後に得られること

  • 上級コースに備える親切な[CSS&Javascript]

  • 最新技術スタックを活用した[Webフロントエンド]

  • 実務能力のための[ハイブリッドアプリフロントエンド]

  • ミニポートフォリオ2個、実務ポートフォリオ2個

  • 開発サイクル全体の完全理解

未経験者・非専攻者でも
⭐ フロントエンド開発者へのキャリアチェンジ ⭐

비주얼배너(격자 3개)

💥注目!

この講義はコーディングブートキャンプで実際に使用されている講義で、「現場感が一部感じられることがあります」。
初心者から非専攻者、そしてジュニア開発者まで、すべての方が受講可能なカリキュラムで構成されています。

「本物の」ブートキャンプで作った
[完璧なフロントエンドコース]とは

「コーディングの『コ』の字も知らない私...開発者として就職できるかな?」そんな心配は今すぐ置いておいてください。
この講義では、完全初心者でも現場の開発者レベルまで成長できるよう、しっかりとした基礎講義から始めますから!

オンライン・オフラインで2,000人を超える受講生が選んだ「高濃縮フロントエンドコース」
さらに強力にアップデートされ、「完璧なフロントエンドコース」として再び戻ってきました😀

🎯'完プ'の講座一つで基礎からWeb、そしてハイブリッドアプリまで学べる完璧な講座を提供します。

3. 시작은 프리캠프 커버이미지

スタートはプリキャンプ

  • 累計4,000人以上が受講した最高の超基礎講座です。

  • プログラミングって何？プログラムのインストールから基礎固めまで

  • ウェブ構造およびHTML、CSS、Javascriptの基本文法と活用を学びます。


    ✅ プロジェクト：会員登録、ミニホームページ


CSS&JS Master 커버이미지

CSS&JSマスター🆕

  • 基礎を超えて実務に適用可能なCSSとJavascriptを学びましょう。

  • 60以上の最新プロパティを通じてCSSをマスターできます。

  • 実務的な機能実装を通じてJavascriptをマスターできます。


    ✅ プロジェクト：トレンディなダッシュボード日記帳

WEB FRONT-END 커버이미지

ウェブフロントエンドブートキャンプ 🆕

  • コーディングブートキャンプ「コードキャンプ」の代表的なフロントエンド講義をそのまま提供

  • 2025年に向けた最新のReact、Next、そしてライブラリを学びましょう。


  • 100時間を超える綿密で体系的な段階式実務カリキュラム


    ✅ プロジェクト: 旅行者のためのコミュニティ及び商品購入「旅行プラットフォーム」

Hybrid App 커버이미지

ハイブリッドアプリブートキャンプ🆕

  • ブートキャンプ初！ハイブリッドアプリコースを提供します。

  • React.NativeとExpoを活用してハイブリッドアプリを実装します。

  • 最高のポートフォリオ構築と自分だけのハイブリッドアプリの師匠に会いましょう。


    ✅ プロジェクト:ハイブリッドアプリで完成する「旅行プラットフォーム」

このような方には
これ以上ないほどぴったりです

AからZ
10時間レベルの概念講義ではなく
「本物の」専門的な講義が欲しいです。

開発..?
何も分からないけど、就職レベルまでしっかり成長したいです。

え?! 禁止~
本当に細かく教えてくれる
自分だけの先輩が必要です。

より高いキャリアジャンプのために
ブートキャンプの授業資料と課題を提供します

オンライン講座を受講しているけれど...課題が足りないと思ったことはありませんか?
ブートキャンプで進行している学習資料と課題をそのまま提供しています。

講義、学習資料の復習、セクション別課題をしっかりとこなせば、驚くほどの成長が期待できます😁

섹션별 학습자료 이미지

丁寧な学習資料の提供（Notion）

📑セクション別学習資料

講義を受講しながら内容の理解を助ける資料です。実際のブートキャンプで使用する資料である分、うまく活用すれば、見逃した部分がないように大きな助けになるでしょう。

디자인 가이드

授業に必要なデザインの提供（Figma）

📑デザインガイド

フロントエンド授業に必須のデザインを提供しています。デザインをそのまま従いながらポートフォリオを作っていくことができ、追加機能をさらに加えることができれば、より大きな成長を遂げることができるでしょう。

섹션별 과제 이미지

セクション別に分けられた明確な課題

📑セクション別の明確な課題

自宅でブートキャンプを進めるように、セクションごとに明確な課題を案内しています。課題を忠実に進めながら、自分のポートフォリオに実務的なプロジェクトを追加してみてください!

✅基礎課題にはリファレンスコードも提供しています。

自分の手で書いたコードで
ポートフォリオを完成させましょう。

「完璧なフロントエンド」では、集中的に成長できるよう、各過程ごとにプロジェクトを完成できるようカリキュラムが構成されています。誰もが理解できる階段式カリキュラムで実際のプロジェクトを作りながら講義についていくと、達成感だけでなく実力も上がりますよね?

시작은 프리캠프 포폴 이미지 (1)

スタートはプリキャンプ

HTML、CSS、基礎JavaScriptの練習のためのサイワールドを完成させてみてください。

CSS&JS 포폴 이미지 (1)

# CSS&JSマスター

トレンディなダッシュボード日記帳を完成させて、自分の感情を記録してみましょう。

숙소예약 포폴 이미지 (1)

ウェブフロントエンドブートキャンプ

CRUDに忠実な旅行者掲示板「トリップトーク」と宿泊商品を購入できる「旅行プラットフォーム」を完成させてみましょう。

하이브리드앱 포폴 이미지 (1)

ハイブリッドアプリブートキャンプ

今は「旅行プラットフォーム」をハイブリッドアプリで完成させてみてください。

フロントエンドの核心技術
私たちはなぜReact.jsとNext.jsを使用すべきなのでしょうか?


Next.jsはReactライブラリのフレームワークです。Reactとは異なり、基本的にNext.jsはServer-Side Rendering (SSR)を行うため、検索エンジン最適化(SEO、Search Optimization)に優れています。また、pre-renderingを通じて事前にデータがレンダリングされたページを取得できるようにしてくれるため、ユーザー体験の面でも有利です。

この他にもページベースルーティング、画像最適化、built-in-cssなどを提供してプロジェクトのパフォーマンスを向上させ、開発者が開発しやすい環境を提供するため、効率的で高性能な開発ができます 😊

最後に、今やハイブリッドアプリの時代!
ReactとNextをベースにReact.NativeとExpoを活用して、より便利で効率的にハイブリッドアプリを開発し、AndroidとiOSにサービスを構築することができます。

しかも完プロ講義一つで
これだけのスタックを一気にゲット!

このOnline Classesでは、プロジェクトを通じてReactとNext.jsだけでなく、Typescript、Graphqlなど様々な主要スタックを活用しながら学習を進めます。一つの機能を実装しながら有機的に連携した言語の使用方法を習得し、自然に多様な技術スタックを理解できるようになります。

実際の実務では、様々な言語と技術スタックを適切に使用して最高の効率を出せなければなりませんからね!


*version: 講座で使用する主要なスタックのバージョンです。（必要に応じて参考にしてください!）

-"next": "14.2.13",
-"react": "^18",
-"react-dom": "^18",
-"typescript": "^5"
-"@apollo/client": "^3.11.8",
-"graphql": "^16.9.0",
-"react-hook-form": "^7.53.1",
-"zod": "^3.23.8",
-"zustand": "^5.0.0",
-"tailwindcss": "^3.4.1",

「Version」やこの技術スタックについての理解がなくても大丈夫です。講義で丁寧に分かりやすく説明いたします😊

隙間一つまで見逃さない
'一線を越える'フロントエンド・ブートキャンプ・カリキュラム

💡Reactの基礎から核心まで含まれています。ウェブカリキュラムの主要内容を確認してみてください💡

1. React와 Next.js

#01. ReactとNext.js

React18の基礎から核心まで大幅にアップグレードされた内容を学習できます。各種パッケージをインストールし、JavaScriptランタイム環境であるNode.jsを理解しながら、ReactとNextでプロジェクトを作成します。

2. JS와 비동기핵심

#02. JSと非同期の核心

ブラウザ実習で学ぶスコープ、クロージャ、ホイスティング、イベントループ、awaitとマイクロキューの関係、そしてstateレンダリングを学びましょう。

3. 컴포넌트 설계

#03. コンポーネント設計

TypeScriptとユーティリティ/ジェネリック型を活用した共通コンポーネント設計およびnpm配布を活用して、ユーザー/管理者プロジェクトを共有できるように実装します。

4. 캐시

#04. キャッシュ

フェッチポリシーに基づくサーバーデータキャッシュの実習と、ローカルデータキャッシュを効率化するためのShallow-Routingを学習します。

5. 로그인과 보안

#05. ログインとセキュリティ

accessTokenとrefreshTokenの活用、およびlocalStorageトークン窃取とXSS防御の実習、CORSとCSRFの理解に基づくproxy APIを作ってみることができます。

6. 심화기능1

# 06. 高度な機能

決済、地図および郵便番号、エディターを実習します。また、実際の練習のためのバックエンドAPIを提供しています。

7. 성능 최적화

# 07. パフォーマンス最適化

フロントエンドのための10種類のパフォーマンス最適化を学び、適用できます。（メモ化、プリフェッチ、プリロード、ウィンドウイングなど）

8. 프론트엔드 서버

#08. フロントエンドサーバー

SSR/CSRとハイドレーションの理解を基盤とする
React 18 RCC/RSCリファクタリングを進めてプロジェクトに適用します。

9. 테스트

#09. テスト

MSWを活用したAPIモッキングテストとplaywrightを活用したE2Eテストができます。

10. 웹 배포

#10. Web デプロイ

ブラウザの動作原理とネットワーク、Dockerを基盤にAWSのS3静的サイトデプロイ及びEC2動的サイトHTTPSデプロイ実習を進めます。

⭐今やハイブリッドアプリの時代！[Android/iOS] アプリカリキュラムの主要内容を確認してみてください⭐

11. 모바일 CSS 구조

# 01. モバイルCSS構造

様々なデバイスサイズ、共通ヘッダー、スクロールに応じたフッター対応、そしてタブレット拡張のためのCSS構造設計を学ぶことができます。

12웹_앱 통신

# 02. Web/アプリ通信

アプリとウェブの通信のためのAPI構造設計を学習し、適用する方法を学びます。

13. 심화기능2

#03. 高度な機能

アプリ通知、位置情報、デバイス情報、カメラ、Androidバックボタン、および権限変更について学び、実習することができます。

14. 마이크로 프론트엔드

#04. マイクロフロントエンド

様々なマイクロフロントエンド方式の理解に基づくWebViewのドメイン分離およびWebView間のキャッシュ共有を学習し、実習することができます。

15. 앱 로그인

#05. アプリログイン

accessTokenとrefreshTokenの活用およびルーティングを活用したasyncStorageトークン奪取実習とSharedPreferenceとkeychainに安全に保存する内容を学び、実習することができます。

16. 앱 배포

#06. アプリのデプロイ

ハイブリッドアプリの配布プロセスの理解とテスト配布実習を行います。

[完璧なフロントエンドコース]
受講後には私も開発者!

🙆🏻‍♀️ 実務ですぐに活用できるポートフォリオ2つ

👨🏻‍🎓 自ら成長できるしっかりとした開発知識の構築 (特に何をどんなキーワードで検索できるように成長!)

💁🏻‍♀️ 実務で円滑なコミュニケーションをするジュニア開発者

🙋🏻‍♀️ 一人でもできるWeb Platform開発

👨🏻‍💻 一人でもできるハイブリッドApp開発（Android、iOS）

より高いキャリアジャンプのために
実務適用[バイブコーディング]講義も準備しました。

関連おすすめ講座：

実習用APIを利用してフロントエンドの最新技術スタックと開発サイクルを理解したなら、今度は体系的なVibe Codingで速く安定的にフロントエンドを開発する方法を学ぶ番です!実務適用可能なVibe Codingは実務適用にも、就職ポートフォリオにも必須です🚀

ちょっと待って!
受講前に確認してください。

💡 コンピュータのスペックを確認してください。

· Mac OSはスペック不問です。
· Window OSを使用する場合、git-bashのインストールが必要です。
 - 授業資料 > 環境設定を参考にしてください。
 - Intel Core i5 第9世代以上 / AMD RYZEN 5 第2世代以上

- RAM 16GB以上推奨

💡日課表を作成して規則的に着実に学習することをお勧めします。
💡学習資料を受け取るために、コラボレーションツール「Notion」のアカウントを作成してください。
💡受講に必要な学習資料はNotion(リンク)で提供されます。
※ 学習資料の著作権はコードキャンプにあります。無断盗用・配布・複製を禁止します。

もし
気になることはありますか?

Q. 何の知識もなく受講しても大丈夫ですか？

はい。コーディングの「コ」の字も知らなくても大丈夫です。より深く広く理解できるよう、超基礎課程である「スタートはプリキャンプ」とブートキャンプに進むための中間課程である「CSS&JSマスターコース」を一緒に提供しています。


Q. 基礎知識がある場合、どこから受講すればよいですか？

基礎的なHTML、CSS、Javascriptだけ理解していれば、'CSS&JS マスターコース'から始めることをお勧めします。もし国費教育、その他のオンライン教育などでCSSとJavascriptがしっかりしているなら、すぐに'ウェブフロントエンドブートキャンプ'から始めても大丈夫です。


Q. ウェブフロントエンドブートキャンプ講義を効率的に受講する方法はありますか?

  1. セクション別に講義を受講してください! 平均的に1セクションあたり3~5個の小テーマに分かれています。体系的な授業である分、日課表を作って規則的に学習することをおすすめします!

  2. 学習課題がある場合は、課題を進めてください! 学習課題はあるセクションとないセクションに分かれています。ポートフォリオ課題を行う前に学習課題をやってみると役立つでしょう!

  3. 必須課題(ポートフォリオ課題)を進めてください!セクション内容を基に提供されるセクション別必須課題は、ポートフォリオ制作のために必ず行う必要があります!ただし、参考にできるリファレンスコードは中盤までしか提供されていません!それ以降は、すべてのコードを自分で書けるようにならなければ、本当のポートフォリオとして使用できないという点を心に留めておいてください。



Q. 階段式カリキュラムとは何ですか?

完璧なフロントエンドのカリキュラムは次々と繋がる連続的な講義構成になっています!
例えば[Section 26-02 リフレッシュトークン]を受講するためには、[Section 23-07]で作成したコードをコピーして授業を続けています。つまり、[Section 23-07]を受講してコードを作成しておく必要があり、また復習もして該当コードが何なのか理解しておく必要がありますよね?

特定のセクションを飛ばして気になるセクションを受講したくても心配しないでください!講師の授業コードを別途ダウンロードできるように提供されています!ただし、授業を通じて直接作成したコードではなくダウンロードしたコードだった場合、そのコードを理解できなければうまくついていけないという点は必ず、絶対に覚えておいてください!


Q. 受講中に疑問が生じました。

コミュニティに質問を残してください。できるだけ早くスッキリとした回答をお届けします😁

チームコードキャンプを
ご紹介します。

14.코드캠프 소개이미지
15. 노원두 소개이미지

こんな方に
おすすめです

学習対象は
誰でしょう？

  • 専門的なカリキュラムでしっかり成長したい全ての方

  • 国費または他の講義に物足りなさを感じた誰でも

  • 十分な課題で体系的なコーディング学習をしたい誰でも

  • 先輩が必要とするジュニア開発者

  • 就活生でトレンドに合ったポートフォリオを構築したい方

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

  • コーディングへの情熱と意志💪🏻

こんにちは
codecampです。

インフラン認証

15,869

受講生

502

受講レビュー

232

回答

4.8

講座評価

15

講座

"Try anything, Try everything!"

コードキャンプは有能なエンジニアを養成し、開発の未来を変えるという目標を掲げています。社会的、経済的、教育的な背景に関わらず、誰にでもキャリア転換の機会を提供するために、インフラン（Inflearn）に登場しました。コードキャンプと一緒にキャリアアップに挑戦しましょう！

もっと見る

共同知識共有者

カリキュラム

全体

444件 ∙ (162時間 6分)

講座資料（こうぎしりょう）:

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

受講レビュー

全体

15件

5.0

15件の受講レビュー

  • starmagic22066311님의 프로필 이미지
    starmagic22066311

    受講レビュー 21

    ∙

    平均評価 4.8

    5

    30% 受講後に作成

    他の講義よりもずっと丁寧に詳しく教えてくださったので、うまくついていくことができたと思います！！！今後の残りの講義も頑張ります！！！

    • arnold4778님의 프로필 이미지
      arnold4778

      受講レビュー 5

      ∙

      平均評価 5.0

      5

      50% 受講後に作成

      楽しく拝見しています！講義も残り50%ですが、最後までやり遂げたいと思います！

      • saintjoker040059님의 프로필 이미지
        saintjoker040059

        受講レビュー 6

        ∙

        平均評価 4.5

        5

        60% 受講後に作成

        • wltjd20268146님의 프로필 이미지
          wltjd20268146

          受講レビュー 2

          ∙

          平均評価 5.0

          5

          60% 受講後に作成

          • jolo님의 프로필 이미지
            jolo

            受講レビュー 4

            ∙

            平均評価 5.0

            5

            30% 受講後に作成

            codecampの他の講座

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

            [コードキャンプ]温かいJavascript講義サムネイル

            [コードキャンプ]温かいJavascript

            codecamp

            他の言語も多いのですが、なぜJavaScriptでなければならないのでしょうか。あるな！

            入門

            入門

            JavaScript

            [コードキャンプ]温かいJavascript講義サムネイル

            [コードキャンプ]温かいJavascript

            codecamp

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク講義サムネイル

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

            codecamp

            Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

            初級

            初級

            React, Next.js, expo

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク講義サムネイル

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

            codecamp

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)講義サムネイル

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

            codecamp

            10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

            中級以上

            中級以上

            React, Next.js, cursor

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)講義サムネイル

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

            codecamp

            [CSS&JS Master] - トレンドの感情記録日記を作成する講義サムネイル

            [CSS&JS Master] - トレンドの感情記録日記を作成する

            codecamp

            最新の CSS プロパティと実用的な Javascript をプロジェクトを進めながら楽しく学ぶことができます。

            入門

            入門

            HTML/CSS, JavaScript, vanilla-javascript

            [CSS&JS Master] - トレンドの感情記録日記を作成する講義サムネイル

            [CSS&JS Master] - トレンドの感情記録日記を作成する

            codecamp

            [コードキャンプ] 初心者向け Javascript アルゴリズム理論+実践講義サムネイル

            [コードキャンプ] 初心者向け Javascript アルゴリズム理論+実践

            codecamp

            とても難しく感じられるアルゴリズム... 数学にあまり詳しくない受講者でも、この講義 1 つでアルゴリズムの基礎を一度に終わらせることができます! アルゴリズムを解くために必要な基本概念を段階的に学び、さらに問題に適用するコードキャンプのノウハウもすべてお教えします :)

            初級

            初級

            JavaScript

            [コードキャンプ] 初心者向け Javascript アルゴリズム理論+実践講義サムネイル

            [コードキャンプ] 初心者向け Javascript アルゴリズム理論+実践

            codecamp

            [コードキャンプ]ブートキャンプで作られた高濃縮バックエンドコース講義サムネイル

            [コードキャンプ]ブートキャンプで作られた高濃縮バックエンドコース

            codecamp

            コーディングと恋に落ちた8年目のフルスタック開発者Captainの私心がいっぱいのカリキュラムです。バックエンドのすべてをすべてお知らせしたいCaptainの心が溶けます！このレッスンを聞くと、これまで教えてくれますか？＆＃x27;という考えを震えることができないでしょう。みんなが難しい部分までぜひ噛んで食い込んでくれるこの講義で始めましょうか？

            入門

            入門

            NestJS, Node.js, JavaScript

            [コードキャンプ]ブートキャンプで作られた高濃縮バックエンドコース講義サムネイル

            [コードキャンプ]ブートキャンプで作られた高濃縮バックエンドコース

            codecamp

            [コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース講義サムネイル

            [コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

            codecamp

            1年間で300人以上の開発者を輩出した「本物の」ブートキャンプの濃縮カリキュラムです。この講義1つで、実務のジュニア開発者レベルまで成長し、フロントエンド技術スタックの活用能力と知識を得ることができます。[InflearnXコードキャンプ]は、社会、経済、教育の背景に関係なく、誰もがキャリアを積めるように準備しました :)

            入門

            入門

            React, Next.js, GraphQL

            [コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース講義サムネイル

            [コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

            codecamp

            [コードキャンプ]強力なCSS講義サムネイル

            [コードキャンプ]強力なCSS

            codecamp

            CSSだけ執拗に集めた講義見ましたか？この講義では、合計2つのプロジェクトを進行しながら、最も基本的なレイアウト構成からレスポンス型まで実装することになります！それでは、準備ができたら始めましょうか？

            初級

            初級

            HTML/CSS

            [コードキャンプ]強力なCSS講義サムネイル

            [コードキャンプ]強力なCSS

            codecamp

            [コードキャンプ]スタートはフリーキャンプ講義サムネイル

            [コードキャンプ]スタートはフリーキャンプ

            codecamp

            コーディングブートキャンプのユニークなカリキュラムで作られた講義です。最も基礎的で実務で必ず必要な内容で構成されています。 ＆＃x27;誰でも可能な開発者へのキャリア切り替え＆＃x27;このレッスンで始めましょう。

            入門

            入門

            HTML/CSS, JavaScript

            [コードキャンプ]スタートはフリーキャンプ講義サムネイル

            [コードキャンプ]スタートはフリーキャンプ

            codecamp

            似ている講座

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

            [コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース講義サムネイル

            [コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

            codecamp

            1年間で300人以上の開発者を輩出した「本物の」ブートキャンプの濃縮カリキュラムです。この講義1つで、実務のジュニア開発者レベルまで成長し、フロントエンド技術スタックの活用能力と知識を得ることができます。[InflearnXコードキャンプ]は、社会、経済、教育の背景に関係なく、誰もがキャリアを積めるように準備しました :)

            入門

            入門

            React, Next.js, GraphQL

            [コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース講義サムネイル

            [コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

            codecamp

            一口サイズでかじり取るNext.js講義サムネイル

            一口サイズでかじり取るNext.js

            winterlood

            「ひとくちシリーズ」の第3弾！世界で最も親切で詳細なNext.js講座です。App Routerだけでなく、Page Routerまでプロジェクトを通じて学んでいきます。

            初級

            初級

            React, TypeScript, Next.js

            一口サイズでかじり取るNext.js講義サムネイル

            一口サイズでかじり取るNext.js

            winterlood

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク講義サムネイル

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

            codecamp

            Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

            初級

            初級

            React, Next.js, expo

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク講義サムネイル

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

            codecamp

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)講義サムネイル

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

            codecamp

            10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

            中級以上

            中級以上

            React, Next.js, cursor

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)講義サムネイル

            [VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

            codecamp

            iOS/Androidアプリ開発のための本番 React Native - Basic講義サムネイル

            iOS/Androidアプリ開発のための本番 React Native - Basic

            Wintho

            Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

            初級

            初級

            React Native, React, ES6

            iOS/Androidアプリ開発のための本番 React Native - Basic講義サムネイル

            iOS/Androidアプリ開発のための本番 React Native - Basic

            Wintho

            [フルスタック完成] Supabaseでウェブサイト3つをクローンする (Next.js 14)講義サムネイル

            [フルスタック完成] Supabaseでウェブサイト3つをクローンする (Next.js 14)

            lopun

            フルスタック開発に翼を授けるSupabase！ 3つのクローンプロジェクトを通じて、Next.js 14とSupabaseで実務レベルのフルスタック開発を行う方法を最速で学びます。

            初級

            初級

            Next.js, supabase, TailwindCSS

            [フルスタック完成] Supabaseでウェブサイト3つをクローンする (Next.js 14)講義サムネイル

            [フルスタック完成] Supabaseでウェブサイト3つをクローンする (Next.js 14)

            lopun

            非専門家のための真の入門オールインワン開発ブートキャンプ講義サムネイル

            非専門家のための真の入門オールインワン開発ブートキャンプ

            grab

            初心者でもできる、ウェブ、サーバー、モバイル アプリ、機械学習まで習得できるフルスタックの最終講義!! 開発をどこから始めたらよいかわからない場合は、この講義を強くお勧めします。Javascript 1 つで進めます!

            入門

            入門

            JavaScript, React, Node.js

            非専門家のための真の入門オールインワン開発ブートキャンプ講義サムネイル

            非専門家のための真の入門オールインワン開発ブートキャンプ

            grab

            SEO最適化ランディングページソリューション＆露出戦略：バイブコーディングで完成 with Nextjs講義サムネイル

            SEO最適化ランディングページソリューション＆露出戦略：バイブコーディングで完成 with Nextjs

            ludgi

            実戦バイブコーディングで会社紹介ランディングページを完成させます。 Cursor AI + Next.js + TypeScript + TailwindCSS + shadcn/ui + MCP スタックで、設計から配布まで一度に進行します。 核心は「高速実装 + 検索エンジンによく露出されるSEOベース」です。 🏁 講義目標 ランディング制作 → パフォーマンス最適化 → SEO反映 → 配布/インデックス リアルタイムコーディング（バイブコーディング）でセクション別完成品をすぐ確認 検索反映まで直接体験 🛠️ 実習スタック Cursor AI、Next.js（App Router）、TypeScript TailwindCSS、shadcn/ui、MCP ワークフロー 🔍 SEO実習 講師が提供するSEO最適化用MDファイル適用 メタデータ、OG/Twitterカード、robots/sitemap、構造化データ（JSON-LD） 多言語ルーティング選択適用 🎯 完成物 レスポンシブ会社紹介ランディング + お問い合わせフォーム Lighthouse 95+目標 Vercel配布後Search Console登録およびインデックス要請 📚 この講義で学ぶこと ヒーロー/信頼/機能/FAQセクションを素早く構成する方法 shadcn/uiできれいなUI構成 フォーム検証と基本コンバージョン追跡ポイント設計 構造化データ + 多言語ルーティングでSEOスコアを上げる 配布後Search Consoleを通じたインデックス過程の理解 💡 現業インサイト（講義特典） 単純にコード実装だけでなく、実際の市場で活用されるマーケティング・露出方式も簡単に触れます。 広告、ブログポスティング、コメント作業の現実的な単価範囲 外注・業務委託業者が実際にSEO、露出作業をどのように進行するか 開発者が直接参加した時と外注を任せた時のコスト/効率の差 この部分を通じて単純に技術を超えて実際の現業でどのように活用されるか、どのようなコスト構造で動くかまで感覚を身につけることができます。 一行まとめ 「実装 → 最適化 → 配布 → インデックス」の流れに沿って、 実際の検索露出と現業市場構造まで繋がるウェブ制作プロセスを学びます。

            入門

            入門

            React, Node.js, cursor

            SEO最適化ランディングページソリューション＆露出戦略：バイブコーディングで完成 with Nextjs講義サムネイル

            SEO最適化ランディングページソリューション＆露出戦略：バイブコーディングで完成 with Nextjs

            ludgi

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）講義サムネイル

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

            dakgangjung123

            React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。 慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

            初級

            初級

            React, Electron, GUI

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）講義サムネイル

            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

            dakgangjung123

            ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）講義サムネイル

            ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

            aftercamp

            Reactレンダリングの原則、最適化を習得し、実践的な活用とインタビューの準備をしましょう！

            中級以上

            中級以上

            React, react-usememo, Tech Interview

            ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）講義サムネイル

            ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

            aftercamp

            バイブコーディング With Claude Codeでウェブサービス作り講義サムネイル

            バイブコーディング With Claude Codeでウェブサービス作り

            ref63184917

            現職スタートアップCTOが実際のサービスと複数の外注を通じて得たバイブコーディング知識をお伝えします。

            入門

            入門

            HTML/CSS, JavaScript, Next.js

            バイブコーディング With Claude Codeでウェブサービス作り講義サムネイル

            バイブコーディング With Claude Codeでウェブサービス作り

            ref63184917

            HTML/CSS/JSさえ分かればOK！ReactとFirebaseで完成させる実践プロジェクト講義サムネイル

            HTML/CSS/JSさえ分かればOK！ReactとFirebaseで完成させる実践プロジェクト

            ezweb

            ReactとFirebaseを活用して、ログイン、投稿管理、ファイルアップロード、プロフィール管理など、実際のサービスで使用されるコア機能を実装するウェブアプリケーションを作成する講座です。 Firebase Authenticationを利用したメールログインとソーシャルログイン、Firestoreベースのデータ保存およびリアルタイムデータ処理、Firebase Storageを活用したファイルアップロード機能、そしてプロフィール管理機能まで段階的に実装しながら、一つの完成されたウェブサービスを作ることができます。 フロントエンド開発を学んでいる方が、複雑なサーバー構築なしにFirebaseを活用して素早くウェブサービスを実装する方法を理解できるように構成された講座です。

            初級

            初級

            React, Firebase, firebase-firestore

            HTML/CSS/JSさえ分かればOK！ReactとFirebaseで完成させる実践プロジェクト講義サムネイル

            HTML/CSS/JSさえ分かればOK！ReactとFirebaseで完成させる実践プロジェクト

            ezweb

            Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)講義サムネイル

            Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)

            pyhub

            Python/Djangoを使ったウェブサービス開発の基礎をしっかりと固めましょう。Djangoの学習には時間がかかりますが、繰り返しの開発の中で皆さんの生産性を最大化できます。皆さんの想像を現実のものにしてください。

            初級

            初級

            Python, Django, React

            Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)講義サムネイル

            Python/Djangoウェブサービス開発完璧ガイド with React (Django 4.2基準)

            pyhub

            GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]講義サムネイル

            GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]

            Indie Coder

            次世代API制御技術であるGraphQLの基本と高度な使い方、そしてGraphQLで作っていく仮想のキオスクサービスを通じて、実際のプロジェクト体験を学びます。 コースは、2024年2月現在の最新バージョンであるapollo-server v4でコースを部分的に更新しました。

            初級

            初級

            GraphQL, Svelte, MongoDB

            GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]講義サムネイル

            GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]

            Indie Coder

            実習で学ぶデータベース：服薬時間管理アプリ作成 (SQLite & React Native Expo)講義サムネイル

            実習で学ぶデータベース：服薬時間管理アプリ作成 (SQLite & React Native Expo)

            Kyo

            React Nativeで服薬時間通知アプリを開発します。データベースの基礎およびSQL文法の学習をもとに、SQLiteを使用してデータを扱うアプリを作成し、ストア配布まで進めます。

            初級

            初級

            React Native, SQLite, database

            実習で学ぶデータベース：服薬時間管理アプリ作成 (SQLite & React Native Expo)講義サムネイル

            実習で学ぶデータベース：服薬時間管理アプリ作成 (SQLite & React Native Expo)

            Kyo

            MVPから配布・収益化まで！Next.js × LLM API 実践シリーズ講義サムネイル

            MVPから配布・収益化まで！Next.js × LLM API 実践シリーズ

            dxers

            最近、LLMが開発環境を変えていますが、本当に重要なのは「コードを代わりに書くこと」ではなく、サービスに機能として組み込むことです。 この講座では、Next.js + OpenAI APIを使って、軽量ながらも完成度の高いタロット占いサービスを段階別に実装します。 最初のステップでは、バックエンドなしでも可能なMVPを作成し、ユーザー入力のフロー（質問/スレッド/カード選択）から結果の生成までを繋げます。 その後のステップで、バックエンドの構築、一般ログインとOAuth、コミュニティ機能、リーディングダッシュボードへと機能を拡張します。 最後に、AWSへのデプロイとGoogleアドセンスの連携まで行い、実際に運営可能な形で仕上げます。 また、LLM APIの使用料金が負担にならないよう、料金構造の理解とコスト最適化戦略もあわせて扱います。

            初級

            初級

            AWS, Google Ads, Next.js

            MVPから配布・収益化まで！Next.js × LLM API 実践シリーズ講義サムネイル

            MVPから配布・収益化まで！Next.js × LLM API 実践シリーズ

            dxers

            Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ講義サムネイル

            Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ

            ludgi

            Whisperをローカルで実行し、FastAPIとNext.jsを活用してAI音声認識アプリを迅速に開発する実践プロジェクトの講義です。リアルタイム音声認識まで実装し、短時間で簡単なポートフォリオとして活用できる成果物を完成させることができます。

            初級

            初級

            Next.js, FastAPI, whisper

            Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ講義サムネイル

            Vibe Coding: Next.js + FastAPI + Faster-Whisperで作る音声メモアプリ

            ludgi

            ゼロからTypeScriptでClaude Codeを作る講義サムネイル

            ゼロからTypeScriptでClaude Codeを作る

            Hiro Son

            「なぜAIがこんなコードを書いたのか？」、「なぜさっき言ったことを覚えていないのか？」 Claude CodeのようなAIツールを使っていると直面するもどかしさ。その原因は、ツールがどのように動作しているかを知らないことにあります。この講義は、そのブラックボックスを透明に解き明かします。 全25講を通じて、LLMにファイルを見る「目（Read）」、コードを直す「手（Edit）」、命令を実行する「足（Bash）」を直接持たせ、実際の現場で使われるツールと同じように動作する自分だけのCoding Agentをゼロから実装します。単にライブラリの使い方を学ぶのではありません。AIがどのようにプロジェクト構造を把握し、なぜ長い会話で記憶を失うのか、それを技術的にどう解決するのか（Sliding Window、Summary）を、直接コードで実装しながら体得します。 この過程を通じて、皆さんはAIツールの単なる「ユーザー」から、作動原理を見抜き、ツールを自分好みに改造・評価できる「AI供給者」の視座を手に入れることになるでしょう。

            初級

            初級

            React, TypeScript, vercel

            ゼロからTypeScriptでClaude Codeを作る講義サムネイル

            ゼロからTypeScriptでClaude Codeを作る

            Hiro Son

            [PROKIT] バイブコーディング/フロントエンド練習用問題集：タイマーアプリ作り講義サムネイル

            [PROKIT] バイブコーディング/フロントエンド練習用問題集：タイマーアプリ作り

            nybs

            開発プロジェクトのためのミッションコンテンツです。DevTimeというタイマーアプリを実際に実装しながらプロジェクトの実習ができるよう、PRD企画文書、Figmaデザイン、APIエンドポイントを提供します。実際のサービスに近いレベルのプロジェクトを実装しながら、これまで学習した知識を完璧に自分のものにしてください 🚀

            入門

            入門

            React

            [PROKIT] バイブコーディング/フロントエンド練習用問題集：タイマーアプリ作り講義サムネイル

            [PROKIT] バイブコーディング/フロントエンド練習用問題集：タイマーアプリ作り

            nybs

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）講義サムネイル

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）

            dodocoding

            Next.js + Cursor IDE でチャットプログラムを1時間で実装できる能力が身につきます。

            入門

            入門

            nextjs, ChatGPT, React

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）講義サムネイル

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）

            dodocoding