inflearn logo
강의

講義

知識共有
inflearn logo
BEST
Programming

/

Web Development

フロントエンド・マスタークラス

Web開発の経験が最低1年以上の学生および実務者のための、上級フロントエンド講座です。実務で2〜3年以上の経験があり、スキルの停滞期を感じている方や、大企業で考慮すべき製品構造について学びたい方に最適な内容となっています。

（4.7）受講レビュー 13件

受講生 229名

難易度 中級以上

受講期間 無制限

JavaScript
JavaScript
React
React
Functional Programming
Functional Programming
oop
oop
Next.js
Next.js
JavaScript
JavaScript
React
React
Functional Programming
Functional Programming
oop
oop
Next.js
Next.js

学習した受講者のレビュー

学習した受講者のレビュー

4.7

5.0

관태

33% 受講後に作成

自分だけが見たい利己的な講義.. フロントエンド志望、ジュニアレベルにいる段階ならレベルアップできる講義 基礎的な部分よりは応用に集中している講義 視野が広がり、ただ動くコードを書く人の中でもより良いコードを書きたい方におすすめ！

5.0

mike1124

100% 受講後に作成

連休中に完走しようと思ったのですが、本当に量が多いですね。文字通りフロントエンド全体を一目で見ることができる総合ギフトセットのような講義です。全体的な流れを掴むことができ、核心的な内容や重要な内容は実務例題中心で説明してくださるので「これは連休明けにすぐ会社で使ってみよう」と思うほど没頭して聞くことができました。 バックエンドをある程度やったことがあるので理解するのにより役立ちました。 難しい部分も講義資料がよくできているので良かったです。 そして全般的に概念的な説明も一緒にしてくださるのでAI時代に適した良い講義だと感じました。この講義を聞いた後、以前は見えなかった不足している部分が見え、これはこのように改善することもできそうだという考えも浮かびました。この講義の目標がコードを見る以前と違う目を持てるようになることなのですが、本当に一つのコードを見ても多くの考えができるようになりました。良い講義をありがとうございます。

5.0

왕감자

100% 受講後に作成

普段悩んでいたリファクタリングの方向性など、深化した内容を総まとめしてくれる気分です

受講後に得られること

  • 高度なフロントエンド開発手法

  • GoFのデザインパターン構造と、それを実務的に適用した例

フロントエンドマスタークラスへようこそ

多くの開発者の方は、ある時点から成長が止まってしまっている自分自身に気づくことがあります。何をさらに勉強すべきか、自分に足りないものは何なのか、大企業や全く異なるサービスを提供している会社で働く開発者たちは、どのような考慮事項に基づいて開発しているのか。


フロントエンドマスターコースは、基礎から始まり、現代のフロントエンド開発を構成する主要な骨組みとなるモジュールおよびプログラミング手法をすべて網羅しています。この講義では、GoFのデザインパターンから始まり、ReactやNext.jsの現代的なコードパターンと使い方、状態管理戦略、デザインパターン、コード構造、アニメーションライブラリ、そしてテスティングツールまで、初級開発者を脱して中級・上級開発者へと成長できる内容を盛り込んでいます。JavaScript、React、関数型プログラミング、オブジェクト指向、Next.jsなどを深く扱い、Vue.jsおよびSvelteはほとんど扱いません。

KakaoTalk_20260116_200748796

2025年最強ルーキー選定、受講生の皆様に心より感謝申し上げます。

どのような方のための講義ですか？

1. 最低1年以上のフロントエンド学習または実務経験がある方

基本的なHTML、CSS、JavaScriptを理解しており、簡単なウェブアプリケーションの開発経験がある方のための深化過程です。すでに学んだ基礎知識をもとに、より深いフロントエンド開発能力を身につけたい方に適しています。


2. 繰り返されるコードパターンによって成長を感じられずにいる現職の方々

毎日似たようなコードを書きながら、成長が停滞していると感じていませんか？この講義は、実務で頻繁に直面する複雑な問題を効率的に解決できる、多様なパターンとアプローチを提示します。コードの品質を高め、開発生産性を向上させる高度な技法を学ぶことができます。


3. JavaScriptの深い仕様と開発パターンについて学ぶ必要がある方

JavaScriptを単に使うことから脱却し、言語への深い理解に基づいてより効率的なコードを書きたいと思いませんか？この講義では、JavaScriptの内部動作原理、非同期プログラミング、関数型プログラミング、デザインパターンなどの高度な概念を、実践的な例とともに詳しく解説します。

詳細カリキュラム

JavaScript深層学習

  • ランタイム構造

  • コールバック関数とPromise

  • Web API

  • Map / WeakMap

  • Set / WeakSet

  • クロージャとメモリ管理

스크린샷 2025-08-09 오전 11.47.08

thisに関する説明の一部

プログラミングパラダイム

  • オブジェクト指向プログラミング

  • GoF プログラミングデザインパターン

  • 関数型プログラミング

  • ジェネレーターの活用法

스크린샷 2025-08-09 오후 12.00.23

ビルダーパターン講義

デザインパターン

  • アトミックデザインパターン

  • Presentational & Container パターン

  • FSD パターン

  • カスタムフック (Custom Hooks)

  • Compound Components

  • Render Props パターン

  • Higher-Order Components(HOCs)

  • メモイゼーション

  • バーチャライゼーション（Virtualization）

  • Props Collections & Getters

  • スロット

  • State Reducer

  • リフティングステート (Lifted State)

스크린샷 2025-08-09 오전 11.59.48

メモイゼーション講義

状態管理

  • 状態管理の登場背景

  • Redux 状態管理

  • Recoil 状態管理

  • Zustand 状態管理

  • Jotai 状態管理

  • Context API 使用戦略

스크린샷 2025-08-09 오전 11.46.32

Jotaiの説明の一部

React/Next.js エコシステム 

  • Reactのバージョン別特徴

  • Next.jsのバージョン別特徴

  • Fetching戦略(React-query, SWR, Axios)

  • CSRデータフェッチ戦略

  • SSRデータフェッチ戦略

  • ISR データフェッチ戦略

  • Next.jsのSEO

스크린샷 2025-08-09 오전 11.47.44

Reactの発展方向の一部

スタイリング

  • デザインシステム構築方式

  • Tailwind

  • Emotion.js

  • CSS Modules

스크린샷 2025-08-09 오후 12.05.57

スタイリング

フォーム管理

  • フォームハンドリング

  • 同期/非同期バリデーション戦略

  • フォームユーザーのUX

스크린샷 2025-08-09 오후 12.07.25

フォーム管理

テスティング

  • ユニットテスト

  • Integration テスト戦略

  • E2E テスト戦略

스크린샷 2025-08-09 오전 11.49.01

テスティング

アニメーション

  • GSAP 使用法

  • Motion の使い方

  • Anime.js 使用法

  • アニメーションUXの最適化

스크린샷 2025-08-09 오후 12.10.05

サノス・スナップ

認証およびセキュリティ

  • OAuth 2.0, NextAuth.js, OpenID Connect

  • セッションおよびトークン管理

  • Next.js トークン戦略

  • 双方向暗号化 Payload

스크린샷 2025-08-09 오후 12.15.38

NextAuth.js

パフォーマンス最適化

  • Core Web Vitals

  • Critical CSS

  • コードスプリッティング

  • 遅延読み込み (Lazy Load)

  • 画像/フォント/バンドル最適化

스크린샷 2025-08-09 오후 12.12.22

サファリ

並列処理

  • Web Worker の使い方

  • ブラウザの並列処理による性能向上

  • ブラウザのオフライン戦略

스크린샷 2025-08-09 오후 12.14.43

ワーカーはセルフ

アクセシビリティおよび国際化

  • WCAG 2.1 ウェブアクセシビリティ

  • ARIAの使用事例

  • アクセシビリティテストツール

  • i18nの実装および多言語管理

  • フォーマッティング/RTL/通貨処理

  • ローカライズ・パフォーマンス戦略

스크린샷 2025-08-09 오후 12.13.28

Firefoxブラウザ開発ツール

開発ツール

  • デベロッパーツールの活用法

  • ウェブ分析ツールの活用法

  • バンドル評価ツールの活用法

스크린샷 2025-08-09 오후 12.12.52

レイアウト変更

膨大な講義資料

数多くのコード例と説明、および予想される質問への回答で講義資料が構成されています。

스크린샷 2025-08-09 오전 11.44.56

講義資料の一部

受講前のご注意事項

実習環境

  • OSおよびバージョン（OS）：Windows、macOS、Linuxなど、すべてのOSが可能です。

  • 使用ツール：Cursorおよびインターネットブラウザ

  • PCスペック：インターネット接続が可能な基本スペックのPC

学習資料

  • 提供する学習資料の形式：Miroなど

  • 分量および容量：各セクションごとに学習資料を提供

事前知識および注意事項

  • 自らプログラミング問題を解決するために悩んだ経験が多いほど、講義を受ける際に役立ちます。

  • フロントエンドを越えて、バックエンドおよびDevOpsに関する経験があれば、より大きな助けになります。

  • 本講義の著作権は講師に帰属し、無断配布および複製を禁止します。学習資料も著作権があり、個人的な学習目的以外での使用を禁止します。

受講生の皆様へ


こんにちは、ハン・サンフンです。


私が初めて製品を作ったのは中学2年生の時です。その時作ったウェブサイトが人生の転換点になるとは思いもしませんでした。初めて作ったウェブサイトに初日で1,000人以上が訪れ、その時、数十人以上の見知らぬオンラインユーザーから励ましと称賛を受けました。その経験が忘れられず、私はその後もウェブ分野で数多くの挑戦を続けてきました。


甘い瞬間を味わってからは、果てしない挑戦と失敗を繰り返してきました。望む製品を作るために数年間、部屋に閉じこもって開発を続けてきました。その過程で、一人で開発することの苦しみや困難を誰よりもよく知っています。その感情と孤独をよく知っているからこそ、私は自分が歩んできた道を10年以上コツコツと記録し、世の中に発信してきました。私と同じように孤独な環境で、教えてくれる人がいない環境で働いている人たちにメッセージを伝えたかったのです。「あなたは一人ではない」と伝えたかったのです。


私は現場で開発会社を運営しながら、数十社の企業と出会い、数多くの取引を行い、多くの製品を作ってきました。その過程で、会社ごとの開発の方向性や哲学、重要視していることを見ることができました。また、小規模で一部の権威的な開発者の下で、質の低いコードパターンや開発文化に苦しんでいる方々も見てきました。韓国の開発市場は、このように同じ開発をしているように見えても、全く異なる方式で成長しています。


もしこの記事を読んでいる方が、小さな企業でプロジェクトをリードしていたり、あるいはこれまで自分自身が開発してきた方式に対して疑問や不安を感じているのであれば、この講義が役に立つはずです。私は自分が教える方法だけを固執することはありません。私がこれまで生きてきながらコードについて学び、考え、より良いコードについて悩んできた記録を、先に経験した一人の開発者の物語としてお伝えしたいと思います。


真理のようなコードはありません。開発者は数え切れないほどのトレードオフを繰り返し、状況に応じてより良い選択肢を見つけなければなりません。その過程において、ジュニア開発者が数少ない選択肢だけを見て決定を下すとすれば、シニアになればより深い洞察力で問題を解釈できるようになります。同じ動作のように見えても、異なる形で作成し、より読みやすい形で作成することは、悩みと経験を通じて得られるものです。


この講義を通じて、皆さんがこれまで書いてきた過去のコードを振り返る際、以前とは違う目で見ることができるようになるはずです。以前とは違う目でコードを見れば、以前は考えもしなかった悩みが生まれ、その悩みを解決する過程でより良いコードを創造することができます。 数多くの先輩開発者たちが歩んできた悩みと解決策をこの講義に込めました。先に悩んできた人たちの解決策を見ながら、皆さんだけの洞察を得られることを願っています。

こんな方に
おすすめです

学習対象は
誰でしょう？

  • 実力の停滞期が訪れたフロントエンドエンジニア

  • 最低1年以上のウェブ開発経験と経歴がある方

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

  • プログラミングの基礎知識

  • 最低1年以上のウェブ開発経験

  • 基本的なHTML、CSS文法に対する理解

  • バニラJavaScriptに関する基礎的な理解

  • 最低6ヶ月以上のReact.jsおよびNext.jsの使用経験

こんにちは
hoonyhanです。

229

受講生

13

受講レビュー

13

回答

4.7

講座評価

1

講座

フルスタックエンジニアのハン・サンフンです。

YouTube: https://www.youtube.com/@hoony_han

カリキュラム

全体

436件 ∙ (56時間 33分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

13件

4.7

13件の受講レビュー

  • wavyroom님의 프로필 이미지
    wavyroom

    受講レビュー 98

    ∙

    平均評価 5.0

    5

    88% 受講後に作成

    連休に休む暇もなく走り続けましたね。フロントエンドの流れを一目で見たい方のための講義です！

    • jackson52723404님의 프로필 이미지
      jackson52723404

      受講レビュー 1

      ∙

      平均評価 5.0

      5

      100% 受講後に作成

      普段悩んでいたリファクタリングの方向性など、深化した内容を総まとめしてくれる気分です

      • y2jnwo20031님의 프로필 이미지
        y2jnwo20031

        受講レビュー 3

        ∙

        平均評価 5.0

        5

        8% 受講後に作成

        まだ1章程度しか進んでいないので総評ではありませんが、良かったです。 JavaScriptのDeep Diveという本がありますが、似たような感じです。この本も好き嫌いが分かれるのが、プロジェクト型実習を真似しながら勉強することを求める方々に評価が良くないということですが、この講義も理論と主要例題中心の講義です。

        • knoa0405님의 프로필 이미지
          knoa0405

          受講レビュー 3

          ∙

          平均評価 5.0

          5

          100% 受講後に作成

          連休中に完走しようと思ったのですが、本当に量が多いですね。文字通りフロントエンド全体を一目で見ることができる総合ギフトセットのような講義です。全体的な流れを掴むことができ、核心的な内容や重要な内容は実務例題中心で説明してくださるので「これは連休明けにすぐ会社で使ってみよう」と思うほど没頭して聞くことができました。 バックエンドをある程度やったことがあるので理解するのにより役立ちました。 難しい部分も講義資料がよくできているので良かったです。 そして全般的に概念的な説明も一緒にしてくださるのでAI時代に適した良い講義だと感じました。この講義を聞いた後、以前は見えなかった不足している部分が見え、これはこのように改善することもできそうだという考えも浮かびました。この講義の目標がコードを見る以前と違う目を持てるようになることなのですが、本当に一つのコードを見ても多くの考えができるようになりました。良い講義をありがとうございます。

          • tkyoun12409907님의 프로필 이미지
            tkyoun12409907

            受講レビュー 5

            ∙

            平均評価 5.0

            修正済み

            5

            33% 受講後に作成

            自分だけが見たい利己的な講義.. フロントエンド志望、ジュニアレベルにいる段階ならレベルアップできる講義 基礎的な部分よりは応用に集中している講義 視野が広がり、ただ動くコードを書く人の中でもより良いコードを書きたい方におすすめ！

            似ている講座

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

            ウェブフロントエンドのためのJavaScript第一歩講義サムネイル

            ウェブフロントエンドのためのJavaScript第一歩

            hyobin

            ￥4,290

            入門 / JavaScript, DOM

            4.8

            (98)

            1,500+
            頻繁な回答
            頻繁な回答

            Webフロントエンドエンジニアを目指すなら？ 面白いJavaScript講座で第一歩を踏み出しましょう✨

            入門

            入門

            JavaScript, DOM

            ウェブフロントエンドのためのJavaScript第一歩講義サムネイル

            ウェブフロントエンドのためのJavaScript第一歩

            hyobin

            ￥4,290

            入門 / JavaScript, DOM

            4.8

            (98)

            1,500+
            頻繁な回答
            頻繁な回答

            フロントエンド ビルド システム 完璧ガイド - Part.1: モジュール システム

            Rafael

            ￥7,330

            初級 / JavaScript, Node.js, Webpack, vite, esm

            5.0

            (23)

            200+

            "JSビルドシステム、まだ混乱していますか？" 聞いてもピンとこなかったJSビルドシステムの概念と実践をひとつに！

            初級

            初級

            JavaScript, Node.js, Webpack

            フロントエンド ビルド システム 完璧ガイド - Part.1: モジュール システム

            Rafael

            ￥7,330

            初級 / JavaScript, Node.js, Webpack, vite, esm

            5.0

            (23)

            200+
            フロントエンド開発の際に必ずやるべき実務例 Part.1講義サムネイル

            フロントエンド開発の際に必ずやるべき実務例 Part.1

            usefulit

            ￥6,257

            初級 / JavaScript

            4.6

            (27)

            22,900+

            これ以上JavaScriptとES6を別々に勉強する必要はありません。 このレッスンは、JavaScriptプログラミング言語を最新のES6文法で学習するように計画されたコースです。

            初級

            初級

            JavaScript

            フロントエンド開発の際に必ずやるべき実務例 Part.1講義サムネイル

            フロントエンド開発の際に必ずやるべき実務例 Part.1

            usefulit

            ￥6,257

            初級 / JavaScript

            4.6

            (27)

            22,900+
            Cursor AIで作りながら学ぶWeb & Javascript講義サムネイル

            Cursor AIで作りながら学ぶWeb & Javascript

            weekendcode

            ￥13,765

            入門 / HTML/CSS, JavaScript, LLM, AI, Cursor AI

            5.0

            (7)

            Update
            Update
            頻繁な回答
            頻繁な回答

            自分だけのスキルを身につけたい方、ウェブ開発を段階的に学んでみたい方におすすめです。ウェブブラウザと言語の歴史からお教えします。

            入門

            入門

            HTML/CSS, JavaScript, LLM

            Cursor AIで作りながら学ぶWeb & Javascript講義サムネイル

            Cursor AIで作りながら学ぶWeb & Javascript

            weekendcode

            ￥13,765

            入門 / HTML/CSS, JavaScript, LLM, AI, Cursor AI

            5.0

            (7)

            Update
            Update
            頻繁な回答
            頻繁な回答
            [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る講義サムネイル

            [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る

            nybs

            ￥3,575

            入門 / React

            ミッション
            ミッション

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

            入門

            入門

            React

            [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る講義サムネイル

            [PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る

            nybs

            ￥3,575

            入門 / React

            ミッション
            ミッション
            JavaScript + jQueryの基礎から実務まで：高度なPart.1講義サムネイル

            JavaScript + jQueryの基礎から実務まで：高度なPart.1

            usefulit

            ￥5,363

            中級以上 / JavaScript, jQuery

            4.8

            (32)

            55,100+

            理論と実習を通じてJavaScriptを習得できる講義です。 JavaScriptにある程度慣れた方のための講義です。 Part 1はJavaScriptのクラスとオブジェクト指向プログラミングの内容を扱っています。

            中級以上

            中級以上

            JavaScript, jQuery

            JavaScript + jQueryの基礎から実務まで：高度なPart.1講義サムネイル

            JavaScript + jQueryの基礎から実務まで：高度なPart.1

            usefulit

            ￥5,363

            中級以上 / JavaScript, jQuery

            4.8

            (32)

            55,100+
            JavaScript+jQuery の基礎から実務まで: 基礎 Part.1講義サムネイル

            JavaScript+jQuery の基礎から実務まで: 基礎 Part.1

            usefulit

            ￥4,290

            入門 / JavaScript, jQuery

            4.8

            (186)

            107,600+

            理論と実践を通じて、JavaScript を習得できる講義です。コーディングを初めて触れる方でも、段階的に説明するので簡単に理解できます。Part 1 では、JavaScript の概要、変数、データ型、演算子、制御文、jQuery の基礎を扱います。

            入門

            入門

            JavaScript, jQuery

            JavaScript+jQuery の基礎から実務まで: 基礎 Part.1講義サムネイル

            JavaScript+jQuery の基礎から実務まで: 基礎 Part.1

            usefulit

            ￥4,290

            入門 / JavaScript, jQuery

            4.8

            (186)

            107,600+
            Reactマスタークラス：Part 3 - 実務の核心ライブラリ攻略 (TypeScript, Zustand, React Hook Form, TanStack Query)講義サムネイル

            Reactマスタークラス：Part 3 - 実務の核心ライブラリ攻略 (TypeScript, Zustand, React Hook Form, TanStack Query)

            nhcodingstudio

            ￥4,290

            初級 / JavaScript, React, TypeScript, frontend, zustand

            100+
            Update
            Update
            頻繁な回答
            頻繁な回答

            AIが生成した断片的なコードと複雑なReactエコシステムの間で制御権を失っていく問題を、Zustand、TanStack Query、React Hook Form、Zod、React Compilerなど、主要なReactライブラリの内部動作原理を工学的に分析することで根本的に解決します。 ツールの単純な活用を超え、Reactエンジンのパフォーマンスとデータフローを直接制御する方法を習得することで、いかなる危機的状況でも即座に対応できる強固な「エンタープライズ・アーキテクチャ設計の筋肉」を身につけることができます。

            初級

            初級

            JavaScript, React, TypeScript

            Reactマスタークラス：Part 3 - 実務の核心ライブラリ攻略 (TypeScript, Zustand, React Hook Form, TanStack Query)講義サムネイル

            Reactマスタークラス：Part 3 - 実務の核心ライブラリ攻略 (TypeScript, Zustand, React Hook Form, TanStack Query)

            nhcodingstudio

            ￥4,290

            初級 / JavaScript, React, TypeScript, frontend, zustand

            100+
            Update
            Update
            頻繁な回答
            頻繁な回答
            # [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）講義サムネイル

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

            dakgangjung123

            ￥4,290

            初級 / React, Electron, GUI, cross-platform, zustand

            5.0

            (3)

            100+
            ミッション
            ミッション

            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

            ￥4,290

            初級 / React, Electron, GUI, cross-platform, zustand

            5.0

            (3)

            100+
            ミッション
            ミッション
            純粋関数型フロントエンド言語 Elm ガイド講義サムネイル

            純粋関数型フロントエンド言語 Elm ガイド

            hatemogi

            無料

            初級 / elm, Functional Programming, SPA, Web Application

            5.0

            (5)

            300+

            純粋な関数型プログラミングでフロントエンドWebアプリを作成するElmプログラミング言語ガイドのドキュメントを3時間で勉強します。

            初級

            初級

            elm, Functional Programming, SPA

            純粋関数型フロントエンド言語 Elm ガイド講義サムネイル

            純粋関数型フロントエンド言語 Elm ガイド

            hatemogi

            無料

            初級 / elm, Functional Programming, SPA, Web Application

            5.0

            (5)

            300+
            フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]講義サムネイル

            フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]

            John Ahn

            ￥5,542

            初級 / React, Firebase, Web Application

            4.7

            (43)

            1,000+

            この講義を通じてリアクトとファイアベースを利用してチャットアプリケーションを作成することができます。

            初級

            初級

            React, Firebase, Web Application

            フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]講義サムネイル

            フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]

            John Ahn

            ￥5,542

            初級 / React, Firebase, Web Application

            4.7

            (43)

            1,000+
            AI時代、半日でWebサイト開発からデプロイまで バイブコーディング with MCP & Gemini CLI講義サムネイル

            AI時代、半日でWebサイト開発からデプロイまで バイブコーディング with MCP & Gemini CLI

            codebridge

            ￥6,972

            入門 / Git, Next.js, AI, Vibe Coding

            4.5

            (18)

            ミッション
            ミッション

            最近話題のバイブコーディング！AIツールを活用してカチッ！クリックだけでウェブサイト(Next.js)を開発してデプロイする方法を学べます。Google Gemini proを無料で利用して開発する方法までお教えします。

            入門

            入門

            Git, Next.js, AI

            AI時代、半日でWebサイト開発からデプロイまで バイブコーディング with MCP & Gemini CLI講義サムネイル

            AI時代、半日でWebサイト開発からデプロイまで バイブコーディング with MCP & Gemini CLI

            codebridge

            ￥6,972

            入門 / Git, Next.js, AI, Vibe Coding

            4.5

            (18)

            ミッション
            ミッション
            [フルスタック入門] Firebaseより10倍良いSupabase講義サムネイル

            [フルスタック入門] Firebaseより10倍良いSupabase

            lopun

            ￥2,860

            初級 / PostgreSQL, Next.js, TailwindCSS, supabase

            4.9

            (108)

            2,000+

            フルスタック開発を加速させるSupabase！Firebaseの上位互換のSupabaseで、フルスタック開発を2時間で完成させます。

            初級

            初級

            PostgreSQL, Next.js, TailwindCSS

            [フルスタック入門] Firebaseより10倍良いSupabase講義サムネイル

            [フルスタック入門] Firebaseより10倍良いSupabase

            lopun

            ￥2,860

            初級 / PostgreSQL, Next.js, TailwindCSS, supabase

            4.9

            (108)

            2,000+
            コードで学ぶReact 19 with スプリングブートAPIサーバー講義サムネイル

            コードで学ぶReact 19 with スプリングブートAPIサーバー

            zk202308a5410

            ￥9,654

            24%

            ￥7,330

            中級以上 / React, TypeScript, Spring Boot, JPA, JWT

            4.7

            (118)

            1,400+

            Spring Boot（Spring Boot ver3.4.x）で作成されるAPIサーバーと React 19（with TypeScript） 連携プロジェクトを完成させる！ バックエンドポートフォリオにフロントエンドを適用！ 実務者を対象に作成された講義（初級者向け講義ではありません。）

            中級以上

            中級以上

            React, TypeScript, Spring Boot

            コードで学ぶReact 19 with スプリングブートAPIサーバー講義サムネイル

            コードで学ぶReact 19 with スプリングブートAPIサーバー

            zk202308a5410

            ￥9,654

            24%

            ￥7,330

            中級以上 / React, TypeScript, Spring Boot, JPA, JWT

            4.7

            (118)

            1,400+

            Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

            ggangcoding162118

            ￥11,084

            初級 / Interactive Web, JavaScript, HTML/CSS

            4.7

            (26)

            300+

            Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

            初級

            初級

            Interactive Web, JavaScript, HTML/CSS

            Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT

            ggangcoding162118

            ￥11,084

            初級 / Interactive Web, JavaScript, HTML/CSS

            4.7

            (26)

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

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

            IT s Dev

            ￥4,290

            入門 / React, React Native, react.js, Python, FastAPI

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

            入門

            入門

            React, React Native, react.js

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

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

            IT s Dev

            ￥4,290

            入門 / React, React Native, react.js, Python, FastAPI

            まだ生きている不死の jQuery - 基礎から実務まで講義サムネイル

            まだ生きている不死の jQuery - 基礎から実務まで

            ezweb

            ￥2,145

            初級 / HTML/CSS, JavaScript, jQuery, jquery-selector

            5.0

            (2)

            全世界のウェブサイトで75%以上が使用しているJavaScriptライブラリ、jQuery！華麗な効果よりも原理を理解し、基礎を固められるように構成しました。jQueryの基礎から活用まで学習し、あなただけのポートフォリオを完成させたり、現場で即活用してみてください。

            初級

            初級

            HTML/CSS, JavaScript, jQuery

            まだ生きている不死の jQuery - 基礎から実務まで講義サムネイル

            まだ生きている不死の jQuery - 基礎から実務まで

            ezweb

            ￥2,145

            初級 / HTML/CSS, JavaScript, jQuery, jquery-selector

            5.0

            (2)

            クリーンアップ JavaScript：ベースビルドアップ！講義サムネイル

            クリーンアップ JavaScript：ベースビルドアップ！

            tonextday

            ￥2,145

            初級 / JavaScript, Interview, Tech Interview

            4.8

            (4)

            100+

            思考を扱います。JavaScriptの核心と根本を論理的に整理できます。JavaScriptの経験や考えを自ら整理できるようになります。JavaScriptの技術論理を確立できます。JavaScript全体を見渡す視野を広げることができます。JavaScriptの技術面接対策ができます。

            初級

            初級

            JavaScript, Interview, Tech Interview

            クリーンアップ JavaScript：ベースビルドアップ！講義サムネイル

            クリーンアップ JavaScript：ベースビルドアップ！

            tonextday

            ￥2,145

            初級 / JavaScript, Interview, Tech Interview

            4.8

            (4)

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

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

            codecamp

            ￥6,078

            初級 / React, Next.js, expo, React Native

            4.4

            (5)

            100+

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

            初級

            初級

            React, Next.js, expo

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

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

            codecamp

            ￥6,078

            初級 / React, Next.js, expo, React Native

            4.4

            (5)

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

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

            ludgi

            ￥715

            初級 / Next.js, FastAPI, whisper, openai-whisper

            3.0

            (8)

            100+

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

            初級

            初級

            Next.js, FastAPI, whisper

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

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

            ludgi

            ￥715

            初級 / Next.js, FastAPI, whisper, openai-whisper

            3.0

            (8)

            100+

            ￥106,011