Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
Programming

/

Web Development

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

ウェブ開発最低1年以上の学生及び実務者のための上級フロントエンド講座です。最も良い対象は現場で2〜3年以上の経験を積み、実力の停滞期または大企業で考慮すべき製品構造について学びたい方のために作られました。

41名 が受講中です。

  • hoonyhan
실습 중심
마스터과정
JavaScript
React
Functional Programming
oop
Next.js

こんなことが学べます

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

  • GoFオブジェクト構造とこれを実務的に適用した例

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

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


フロントエンドマスターコースは基本から始めて、現代のフロントエンド開発を構成するほとんどの骨格に該当するモジュール及びプログラミング方法論をすべて組み合わせました。この講義を通じてGoF方法論から始まり、ReactとNext.jsの現代的なコードパターンと使用法、状態管理戦略、デザインパターン、コード構造、アニメーションライブラリ及びテスティングツールまで、初級開発者を脱して中級、上級開発者へと発展できる内容を含んでいます。JavaScript、React、関数型プログラミング、オブジェクト指向、Next.jsなどを深く扱い、Vue.js及びSvelteはほとんど扱いません。

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

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

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


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

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


3. JavaScriptの深いスペックと開発パターンについて学習の必要がある方

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

詳細カリキュラム

JavaScript上級

  • ランタイム構造

  • コールバック関数とPromise

  • Web API

  • Map / WeakMap

  • Set / WeakSet

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

thisに関する説明の一部

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

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

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

  • 関数型プログラミング

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

ビルダーパターン講義

デザインパターン

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

  • Presentational & Container パターン

  • FSDパターン

  • Custom Hooks

  • Compound Components

  • Render Props パターン

  • Higher-Order Components(HOCs)

  • Memoization

  • 仮想化

  • Props Collections & Getters

  • スロット

  • State Reducer

  • Lifted State

メモ化講義

状態管理

  • 状態管理の登場背景

  • Redux状態管理

  • Recoil状態管理

  • Zustand状態管理

  • Jotai状態管理

  • Context API使用戦略

Jotaiの説明の一部

React/Next.js エコシステム

  • Reactバージョン別特徴

  • 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

  • Critical CSS

  • コード分割

  • Lazy Load

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

Safari

並列処理

  • Web Workerの使用方法

  • ブラウザ並列処理性能向上

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

ワーカーはセルフ

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

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

  • ARIAの使用例

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

  • i18n実装及び多言語管理

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

  • 現地化パフォーマンス戦略

Firefoxブラウザ開発ツール

開発ツール

  • 開発者ツールの活用法

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

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

レイアウト変更

膨大な講義資料

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

講義資料の一部

受講前の参考事項

実習環境

  • オペレーティングシステムおよびバージョン(OS):Windows、macOS、Linuxなど、すべてのOSに対応しています。

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

  • PC仕様:インターネット接続が可能な基本仕様のPC

学習資料

  • 提供する学習資料形式:Miro等

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

前提知識および注意事項

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

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

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

受講生の皆様へ


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


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


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


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


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


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


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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 実力の停滞期に入ったフロントエンド開発者

  • 最低1年以上のWeb開発経験とキャリアをお持ちの方

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

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

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

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

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

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

こんにちは
です。

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

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

カリキュラム

全体

434件 ∙ (56時間 10分)

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

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

¥82,497

似ている講座

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