강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

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

Web開発の経験が最低1年以上ある学生および実務者のための上級フロントエンド講座です。最も適した対象者は、現場で2〜3年以上の経験を積み、スキルの停滞期を迎えている方、または大企業で考慮すべき製品構造について学びたい方のために作られました。

難易度 中級以上

受講期間 無制限

  • hoonyhan
실습 중심
실습 중심
마스터과정
마스터과정
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はほとんど扱いません。

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

どんな方のための講座ですか?

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

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


2. 繰り返されるコードパターンで成長を感じられない実務者の方々

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


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

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

詳細カリキュラム

JavaScriptの深化

  • ランタイム構造

  • コールバック関数とPromise

  • Web API

  • Map / WeakMap

  • Set / WeakSet

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

thisに関する説明の一部

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

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

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

  • 関数型プログラミング

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

ビルダーパターン講義

デザインパターン

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

  • Presentational & Container パターン

  • FSDパターン

  • カスタムフック

  • Compound Components

  • Render Props パターン

  • Higher-Order Components(HOCs)

  • メモ化

  • Virtualization

  • Props Collections & Getters

  • Slot

  • State Reducer

  • リフトアップされたステート

メモ化講義

状態管理

  • 状態管理の登場背景

  • Redux状態管理

  • Recoil 状態管理

  • Zustand 状態管理

  • Jotai 状態管理

  • Context API 使用戦略

Jotaiの説明の一部

React/Next.js エコシステム

  • リアクトバージョン別特徴

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

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

  • CSRデータフェッチング戦略

  • SSRデータフェッチング戦略

  • ISRデータフェッチング戦略

  • Next.jsのSEO

Reactの発展方向の一部

スタイリング

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

  • Tailwind

  • Emotion.js

  • CSS Modules

スタイリング

フォーム管理

  • Formハンドリング

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

  • FormユーザーのUX

フォーム管理

テスティング

  • Unit テスト

  • Integration テスト戦略

  • E2Eテスト戦略

テスティング

アニメーション

  • GSAP 使い方

  • Motion 使い方

  • Anime.jsの使い方

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

タノススナップ

認証とセキュリティ

  • OAuth 2.0、NextAuth.js、OpenID Connect

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

  • Next.jsトークン戦略

  • 双方向暗号化 Payload

NextAuth.js

パフォーマンス最適化

  • Core Web Vitals

  • クリティカルCSS

  • コード分割

  • Lazy Load

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

Safari

並列処理

  • Web Workerの使い方

  • ブラウザ並列処理のパフォーマンス向上

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

ワーカーはセルフ

アクセシビリティと国際化

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

  • ARIA使用事例

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

  • i18nの実装と多言語管理

  • フォーマット/RTL/通貨処理

  • ローカライゼーションのパフォーマンス戦略

ファイアフォックスブラウザ開発ツール

開発ツール

  • 開発者ツールの活用法

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

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

レイアウト変更

膨大な講義資料

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

講義資料の一部

受講前の参考事項

実習環境

  • オペレーティングシステムおよびバージョン(OS):Windows、macOS、Linuxなど、すべてのOSが利用可能です。

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

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

学習資料

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

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

事前知識および注意事項

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

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

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

受講生の皆様へ


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


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


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


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


もしこの文章をご覧になっている方が小さな企業でプロジェクトをリードしていたり、またはこれまで自ら開発してきた方式について疑問が生じ、不安を感じているのであれば、この講義がお役に立つでしょう。私は自分がお伝えした方法だけにこだわりません。私は自分が生きてきた中でコードについて学び、考え、より良いコードについて悩んだ記録を、先に経験した一人の開発者の話としてお伝えしたいと思います。


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


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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • スランプに陥ったフロントエンド開発者

  • 最低1年以上のWeb開発経験と経歴をお持ちの方

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

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

  • 最低1年以上のWeb開発経験

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

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

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

こんにちは
です。

215

受講生

13

受講レビュー

11

回答

4.7

講座評価

1

講座

풀스택 개발자 한상훈입니다.

유튜브: https://www.youtube.com/@hoony_han

カリキュラム

全体

434件 ∙ (56時間 10分)

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

受講レビュー

全体

13件

4.7

13件の受講レビュー

  • tkyoun12409907님의 프로필 이미지
    tkyoun12409907

    受講レビュー 5

    平均評価 5.0

    修正済み

    5

    33% 受講後に作成

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

    • knoa0405님의 프로필 이미지
      knoa0405

      受講レビュー 3

      平均評価 5.0

      5

      100% 受講後に作成

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

      • jackson52723404님의 프로필 이미지
        jackson52723404

        受講レビュー 1

        平均評価 5.0

        5

        100% 受講後に作成

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

        • y2jnwo20031님의 프로필 이미지
          y2jnwo20031

          受講レビュー 3

          平均評価 5.0

          5

          8% 受講後に作成

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

          • wavyroom님의 프로필 이미지
            wavyroom

            受講レビュー 98

            平均評価 5.0

            5

            88% 受講後に作成

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

            ¥102,821

            似ている講座

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