강의

N
챌린지

멘토링

N
클립

커뮤니티

BEST
Programming

/

Front-end

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

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

（5.0）受講レビュー 13件

受講生 427名

이론 실습 모두
코드캠프
코딩독학
React
Next.js
GraphQL
React Native
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. 노원두 소개이미지

こんな方に
おすすめです

学習対象は
誰でしょう？

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

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

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

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

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

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

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

こんにちは
です。

15,485

受講生

458

受講レビュー

227

回答

4.8

講座評価

15

講座

"Try anything, Try everything!"

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

共同知識共有者

カリキュラム

全体

444件 ∙ (162時間 6分)

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

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

受講レビュー

全体

13件

5.0

13件の受講レビュー

  • jolo님의 프로필 이미지
    jolo

    受講レビュー 4

    ∙

    平均評価 5.0

    5

    30% 受講後に作成

    • saintjoker040059님의 프로필 이미지
      saintjoker040059

      受講レビュー 6

      ∙

      平均評価 4.5

      5

      60% 受講後に作成

      • abcd123123님의 프로필 이미지
        abcd123123

        受講レビュー 327

        ∙

        平均評価 5.0

        5

        5% 受講後に作成

        • devwon1004님의 프로필 이미지
          devwon1004

          受講レビュー 8

          ∙

          平均評価 5.0

          5

          30% 受講後に作成

          • topjhoh20님의 프로필 이미지
            topjhoh20

            受講レビュー 1

            ∙

            平均評価 5.0

            5

            30% 受講後に作成

            期間限定セール、あと3日日で終了

            ￥297,000

            25%

            ￥48,988

            codecampの他の講座

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

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

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

            codecamp

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

            Intermediate

            Intermediate

            React, Next.js, cursor

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

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

            codecamp

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

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

            codecamp

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

            Beginner

            Beginner

            NestJS, Node.js, JavaScript

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

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

            codecamp

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

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

            codecamp

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

            Basic

            Basic

            HTML/CSS

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

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

            codecamp

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

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

            codecamp

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

            Beginner

            Beginner

            JavaScript

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

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

            codecamp

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

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

            codecamp

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

            Beginner

            Beginner

            HTML/CSS, JavaScript

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

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

            codecamp

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

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

            codecamp

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

            Basic

            Basic

            React, Next.js, expo

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

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

            codecamp

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

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

            codecamp

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

            Beginner

            Beginner

            HTML/CSS, JavaScript, vanilla-javascript

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

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

            codecamp

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

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

            codecamp

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

            Basic

            Basic

            JavaScript

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

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

            codecamp

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

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

            codecamp

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

            Beginner

            Beginner

            React, Next.js, GraphQL

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

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

            codecamp

            似ている講座

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

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

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

            codecamp

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

            Beginner

            Beginner

            React, Next.js, GraphQL

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

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

            codecamp

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

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

            aftercamp

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

            Intermediate

            Intermediate

            React, react-usememo, Tech Interview

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

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

            aftercamp

            手につくNext.js - ブログを作るCourse Thumbnail

            手につくNext.js - ブログを作る

            hajoeun

            Next.jsで個人的なブログを作成し、Next.jsを手に入れてください！

            Basic

            Basic

            Next.js, React, Blog

            手につくNext.js - ブログを作るCourse Thumbnail

            手につくNext.js - ブログを作る

            hajoeun

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

            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、露出作業をどのように進行するか 開発者が直接参加した時と外注を任せた時のコスト/効率の差 この部分を通じて単純に技術を超えて実際の現業でどのように活用されるか、どのようなコスト構造で動くかまで感覚を身につけることができます。 一行まとめ 「実装 → 最適化 → 配布 → インデックス」の流れに沿って、 実際の検索露出と現業市場構造まで繋がるウェブ制作プロセスを学びます。

            Beginner

            Beginner

            React, Node.js, cursor

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

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

            ludgi

            Next.jsとSpring BootCourse Thumbnail

            Next.jsとSpring Boot

            zk202308a5410

            従来のReact開発方式とNext.jsを利用して開発する方式は全く異なります。この講義は最新のNext.js 16の核心を貫き、「本物の」Next.jsらしい開発方式をお教えします。就職ポートフォリオから実務プロジェクトまで、パフォーマンスと効率の両方を掴む方法を体験してください。 Next.jsらしく開発しましょう!Next.jsの機能をどのように適用すべきか、実際の例題を作りながら体で学べるように構成されています。サーバーコンポーネントを中心に見て、サーバーアクションとキャッシング戦略などを理論よりも実際にコードを通してより速く学習します。 講義の目標はできるだけ早くNext.jsの雰囲気についていくことであるため、講義自体はJavaScriptを利用して進行します。しかし、各講義の例題はTypescriptで制作されたものを追加で授業資料として提供します。 2025年12月18日 - Next.js 16バージョンにアップデート

            Intermediate

            Intermediate

            JavaScript, React, Spring Boot

            Next.jsとSpring BootCourse Thumbnail

            Next.jsとSpring Boot

            zk202308a5410

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

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

            codecamp

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

            Intermediate

            Intermediate

            React, Next.js, cursor

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

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

            codecamp

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

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

            ref63184917

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

            Beginner

            Beginner

            HTML/CSS, JavaScript, Next.js

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

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

            ref63184917

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

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

            codecamp

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

            Basic

            Basic

            React, Next.js, expo

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

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

            codecamp

            [リニューアル] ReactでNodeBird SNSを作成するCourse Thumbnail

            [リニューアル] ReactでNodeBird SNSを作成する

            zerocho

            リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。 最後に、検索エンジンの最適化後にAWSにデプロイします。

            Intermediate

            Intermediate

            React, Redux, Node.js

            [リニューアル] ReactでNodeBird SNSを作成するCourse Thumbnail

            [リニューアル] ReactでNodeBird SNSを作成する

            zerocho

            非開発者が4週間で収益化サービスを作る：AIバイブコーディング ウェブ + アプリ ALL IN ONE

            dingcodingco

            コーディング知識不要！ あなたのアイデアをたった4週間で実際の収益に変えてみませんか。 AIと最新ツールを活用して、ウェブサイトとアプリを同時に作り、すぐにサービスまで連携します。

            Beginner

            Beginner

            Flutter, Next.js, cursor

            非開発者が4週間で収益化サービスを作る：AIバイブコーディング ウェブ + アプリ ALL IN ONE

            dingcodingco

            Inflearn クローンコーディング Part 2: 受講から配布まで、本物の Inflearn 完成させるCourse Thumbnail

            Inflearn クローンコーディング Part 2: 受講から配布まで、本物の Inflearn 完成させる

            lopun

            🔥 講義受講から決済、デプロイまで、受講生が経験する全過程をそのまま実装してみる実践フルスタック講義です。講義探索、詳細ページ、受講申込、動画視聴、受講レビュー・質問、カート・実決済、続きを見る、Docker + AWSデプロイまで、すべて自分で作り、実サービスに近いユーザーフローと構造設計を学び、高度なフルスタック経験を完成させます。

            Intermediate

            Intermediate

            AWS, Docker, Next.js

            Inflearn クローンコーディング Part 2: 受講から配布まで、本物の Inflearn 完成させるCourse Thumbnail

            Inflearn クローンコーディング Part 2: 受講から配布まで、本物の Inflearn 完成させる

            lopun

            React Native with Expo: ゼロチョから正しく学ぶCourse Thumbnail

            React Native with Expo: ゼロチョから正しく学ぶ

            zerocho

            Web開発者が(特にReact開発者であれば)本当に簡単にアプリをリリースできる時代になりました。Expoと一緒なら、より一層速くAndroidとiOSアプリの両方をリリースできます。Expoを通じて迅速にアプリまでリリースできる開発者になりましょう。

            Basic

            Basic

            React, React Native, Hybrid App

            React Native with Expo: ゼロチョから正しく学ぶCourse Thumbnail

            React Native with Expo: ゼロチョから正しく学ぶ

            zerocho

            アバターコミュニティアプリ作成 (React Native Expo)Course Thumbnail

            アバターコミュニティアプリ作成 (React Native Expo)

            Kyo

            React Nativeでアバターベースのコミュニティアプリを開発します。投稿作成だけでなく、コメント/返信、いいね、投票、アバター生成など、完成度の高いコミュニティアプリを構築する過程を学びます。

            Basic

            Basic

            React Native, TypeScript, expo

            アバターコミュニティアプリ作成 (React Native Expo)Course Thumbnail

            アバターコミュニティアプリ作成 (React Native Expo)

            Kyo

            真似して学ぶNode、Reactシリーズ - ショッピングモールサイト作り[全面リニューアル]Course Thumbnail

            真似して学ぶNode、Reactシリーズ - ショッピングモールサイト作り[全面リニューアル]

            John Ahn

            この講義を通じてショッピングモールウェブサイトを最初から一つ一つ作ってみることができます。

            Intermediate

            Intermediate

            React, Redux, Node.js

            真似して学ぶNode、Reactシリーズ - ショッピングモールサイト作り[全面リニューアル]Course Thumbnail

            真似して学ぶNode、Reactシリーズ - ショッピングモールサイト作り[全面リニューアル]

            John Ahn

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

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

            dakgangjung123

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

            Basic

            Basic

            React, Electron, GUI

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

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

            dakgangjung123

            完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶCourse Thumbnail

            完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

            IT s Dev

            完全なエンドツーエンド開発者ジャーニー — FastAPI、React、そしてVibe Coding技術を使用して、超高速API、モダンフロントエンドインターフェース、実際のプロジェクト、認証システム、ダッシュボード、そして完全なデプロイメントを構築する。

            Beginner

            Beginner

            React, React Native, react.js

            完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶCourse Thumbnail

            完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

            IT s Dev

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)Course Thumbnail

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

            ludgi

            Next.jsフルコースをディップして食べよう！ GraphQL、Redis、RabbitMQ、Prisma、TailwindCSS、Docker Compose、Cypress、Prometheus、Grafanaなど、最新技術で実践プロジェクトを完成させ、App RouterとPage Routerの両方を経験できます。

            Intermediate

            Intermediate

            Next.js, React, GraphQL

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)Course Thumbnail

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

            ludgi

            Claude Code完全マスター：AI開発ワークフロー基礎から実戦まで（with Cursor AI）

            gymcoding

            探索 → 計画 → 実装 → コミット。検証されたAI開発ワークフローをClaude Codeでマスターしましょう。 MCP、サブエージェント、プロンプトエンジニアリングまで23個のミッションで習得し、3個の実戦プロジェクトを完成します。

            Beginner

            Beginner

            React, Next.js, cursor

            Claude Code完全マスター：AI開発ワークフロー基礎から実戦まで（with Cursor AI）

            gymcoding

            公式文書で学ぶ本番タイプスクリプトCourse Thumbnail

            公式文書で学ぶ本番タイプスクリプト

            sowhatcoding

            タイプスクリプトを正しく理解するには、公式文書を一度見てください。 文書の重要な部分だけがコックを拾い、分かりやすく伝えます。 実戦に必要な内容も一緒にお知らせする講義です！

            Beginner

            Beginner

            TypeScript, JavaScript, ES6

            公式文書で学ぶ本番タイプスクリプトCourse Thumbnail

            公式文書で学ぶ本番タイプスクリプト

            sowhatcoding

            SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門Course Thumbnail

            SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

            ehtjd339667

            ReactフロントエンドとSpringBootバックエンドをAWSクラウドに直接デプロイするポートフォリオ中心の講座！ 素早く自分のポートフォリオにフロント、バックエンドプロジェクトをデプロイしたい方に役立つ講座です！デプロイに必要な知識を、サーバー設定からDocker、Domain接続、Nginx、HTTPS適用まで段階別に短期間で実習できるようになります！

            Basic

            Basic

            React, Java, AWS

            SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門Course Thumbnail

            SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

            ehtjd339667