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

/

Web Development

イベントからSPAまで、インタラクティブWebの必須エンジン - [DOM完全攻略 Part 2]

この講座では、単純なDOM操作に留まらず、実際のユーザーとのインタラクションの中でWeb UIを動的に構築し、反応する方法を深く学びます。イベントシステムのしくみ、バブリングとキャプチャリング、イベント委譲、リアルタイムUXフィードバック、そしてthrottle & debounceを活用したパフォーマンス最適化まで、実務で頻繁に遭遇する課題を実際に実装しながら習得できるように構成しました。DOMツリーの構造理解に基づいて、イベントの流れと状態の変化を柔軟に連携させる能力を身につけることができます。

19名 が受講中です。

  • nhcodingstudio
실습 중심
웹개발
풀스택
이론 실습 모두
시각화
HTML/CSS
JavaScript
React
Web API
DOM

こんなことが学べます

  • addEventListenerとremoveEventListenerの実務的な使用法

  • イベントフロー: キャプチャ→ターゲット→バブリング構造の完全理解

  • event.target、currentTarget、thisの違いと活用

  • preventDefault、stopPropagationの実際の動作方式

  • イベントデリゲーション(event delegation)で動的要素を効率処理

  • リアルタイムバリデーションとUXフィードバックシステム実装

  • Proxyオブジェクトを活用したリアクティブ状態連結構造設計

  • throttleとdebounceを利用した高頻度イベント制御

  • 動的に生成・削除されるDOMにイベントをアタッチする方法

  • SPA構造で状態変化とDOMイベントを同期する方法

🚀ワンクリックで反応するインタラクションの秘密、DOMイベントのすべて

🚦入力値を間違って入力した時に赤い枠線で知らせてくれて
🖱 マウスを乗せるとツールチップが自然に付いてきて
🗑 ボタン一つで数十個の動的項目をきれいに削除して…

このようなUIはどのように作られるのでしょうか?
私たちは毎日ウェブサイトとインタラクションしていますが、その中で起こる'イベントシステムの精巧な動作原理'についてはよく知らない場合が多いです。

この講義では、まさにその原理を基礎から性能最適化まで全て視覚化し実習しながら完全に身につけることができます。


DOMイベントシステムの動作原理とこれを活用した動的UI実装技法全般を扱う実戦中心の講義です。単純な概念説明に留まらず、マウスイベントからキーボード入力、イベントフロー制御、イベント委譲、そして性能最適化技法まで一段階ずつ実装しながら学んでいきます。

特にtargetcurrentTargetstopPropagationmouseovermouseenterなど混同しやすいイベント要素を視覚的に比較し、デバッグしながら実習することが講義の核心です。実習例題に従って目で確認し、手で構造を直接組み立てる過程の中で、DOMイベントはもはや理論ではなく「慣れ親しんだツール」になります。

最後にはProxyを活用した状態ベースのUIまで拡張し、実際のフレームワークで使用されるイベント-状態構造を事前に体験することになります。この構造を理解すれば、React、Vueのようなライブラリの内部フローもより簡単に受け入れることができるようになります。

初心者から中級者まで、単純なイベント登録を超えて「ウェブインタラクションの本質とパフォーマンス最適化戦略」まで学びたい方なら必ず受講すべきDOMイベント完全攻略講座です。

📌こんな方におすすめです

🎯 JavaScriptでウェブサイトをより動的にしたい初心者

HTML/CSSには慣れているけれど、クリック、入力、マウスイベントなどのインタラクション実装に戸惑っている方のための初めてのイベント入門書です。

🧱 ボタンクリック、リスト削除のようなUIを設計したいパブリッシャー

デザインを実際に動作させるイベント連結法を学びたいデザイナー/パブリッシャーに適しています。

🧪 単純暗記ではなく目で確認しながら学びたい実習型学習者

mouseovermouseenterの違いのように、言葉だけでは混乱しやすい概念を実際の例とデバッグを通じて明確に理解することができます。

🔀 React、Vueは学んだけれど、イベントフローが混乱するフロントエンド学習者

targetcurrentTargetstopPropagationのような概念がまだ頭の中で整理されていないなら、この講義が基準点を作ってくれます。

debounceとthrottleを直接実装してみたいパフォーマンス重視の開発者

暗記して書くコードではなく、イベント性能最適化の本当の原理と動作方式が気になる方のための実戦コード中心講義です。

🧩 イベント委譲の効率性と構造を体感したいプロジェクト経験者

liをクリックするたびに個別にイベントを登録する方式から脱却し、一つのリスナーで数十個を制御する構造を体で覚えます。

🧠 DOMとイベントをデバッグしながら深く理解したい中級開発者

単純なAPI呼び出しではなく、ブラウザ内部でイベントがどのように流れて処理されるかをコンソールを通じてリアルタイムで追跡します。

🏗 自作のSPA構造を通じてフレームワーク以前の概念をマスターしたい開発者

Proxyを利用した状態追跡、UI自動反映構造を通じてReact/Vueが内部で行っていることを直接体験してみます。

🧼 実務でよく使われるUX構造を実装してみたい実務志向の学習者

入力値が間違っている場合の枠線色の変更、メッセージ出力、ボタン条件の有効化など、実務で繰り返されるパターンを実習します。

🔍 イベントは全て知っているつもりだったが、いざ使おうとすると途方に暮れる全ての開発者

form.submitpreventDefaultを使う理由すら明確でなかったり、イベントフローが曖昧だったりするなら、この講義が最も明快な整理書になるでしょう。

この講義の特徴

📌 100% ビジュアル中心の説明:addEventListenerの構造、バブリング/キャプチャリングの流れ、イベント委譲まで視覚化して説明

📌 実習70%、実装30%:すべての概念をHTML/CSS/JSで直接実習し、目で確認

📌 途中途中で実践ミッション提供:入力検証、リスト削除、動的UI実装、状態連結など反復訓練

📌 フレームワーク移行前の必須知識:React/Vueに移る前のイベントフローと状態-レンダリング連携構造の習得

📌 単純な概念暗記ではなく「インタラクション感覚」の訓練:UX中心の視点制御、ユーザー行動フロー分析

🎓 受講後には

  • addEventListenerすべてのオプションと流れを自由自在に活用できます。

  • マウス、キーボード、入力欄などの入力イベントを完璧に制御することができます。

  • targetcurrentTargetstopPropagationなどの混乱しやすい概念を完全に視覚的に区別することができます。

  • mouseovermouseentermousemove違いと選択基準を正確に説明できます

  • イベント委譲(event delegation)構造を実戦プロジェクトに設計できます

  • パフォーマンス最適化のためのdebounceとthrottle関数を直接実装して適用することができます

  • リアルタイム入力検証、境界線の色フィードバック、動的リスト削除などUX中心のイベント構造を実装することができます

  • Proxyベースの自動状態-UI連携構造を直接作成できます

  • 一つのstateで複数のDOM要素を同時に操作するSPA基礎構造を理解できます

  • 全体のイベント構造をデバッグしてコンソールで追跡できる目と感覚が身につきます

🎯 このような内容を学びます

イベントオブジェクト構造の理解

targetcurrentTargettypeなどのイベントオブジェクトのすべてのプロパティを分析し、実際に活用する方法を学びます。

🐭 マウスイベントの微妙な違い

mouseovermouseentermousemoveはいつどのように異なるのでしょうか?実際の流れを視覚化して正確に比較してみます。

イベント伝播制御技術

stopPropagationstopImmediatePropagationの違いと実際のDOM フローでどのように動作するかを実験と共に理解します。

📝 入力値検証設計

input[[/CODE_2]]、[[CODE_2]]focus[[/CODE_3]]、[[CODE_3]]blurイベントを活用して入力値検証ロジックを設計し、実務的なフォームバリデーション構造を作成してみます。

🎨 リアルタイム視覚フィードバックUI

入力値に応じてボーダー色の変更、エラーメッセージの出力など、ユーザーフレンドリーなUXパターンをCSS + JSで実装します。

🪢 イベント委譲パターンマスター

動的に追加された項目にも自動的に適用されるイベント委譲構造を設計し、実戦プロジェクトに適用してみます。

🕵 イベントフローのデバッグと可視化

キャプチャリング → ターゲット → バブリング段階でイベントがどのように伝播するかをブラウザデバッガーとツールを利用して追跡します。

🔁 Proxyベースの状態-UIバインディング

状態が変わると自動的にUIが更新される構造をProxyオブジェクトで直接作ってみて、Reactのようなフレームワークの内部を体験します。

🧠 throttle vs debounce 完全理解

パフォーマンス最適化のためのイベント制御技法であるthrottledebounceを直接実装し、いつ、なぜ使うべきかを体で覚えます。

🧩 DOMイベントベースのSPA構造設計

SPA環境で状態、イベント、レンダリングがどのように連携するかを実際のミニプロジェクトで構成しながら構造を学びます。

🧩 このようなミッションを扱います

Mission A – リアルタイム入力フィードバックミッション
実習目標: ユーザーの入力値に応じて即座に視覚的に反応するUXを実装します。
内容要約: inputblurfocus イベントを活用して入力値を検査し、無効な場合は赤い枠線とエラーメッセージ、有効な場合は緑の枠線に変わるようにします。リアルタイムフィードバックを通じてユーザーエクスペリエンスを改善する構造を学びます。

Mission B – イベント委譲によるリスト削除ミッション
実習目標: 動的要素に効率的にイベントを適用する構造を学習します。
内容要約:

    に単一のリスナーのみを登録した後、クリックされたボタンの位置をevent.targetclosest()で把握して該当項目のみを削除します。繰り返しレンダリングでもリスナーを維持できるイベント委譲戦略を実習します。

    Mission C – パフォーマンス最適化ミッション
    実習目標: 状態オブジェクトの変化に応じて画面が自動的に更新される構造の実装
    内容要約: Proxyを使用して状態オブジェクトの値を検知し、この値が変わるとdisplay.textContentを自動的に更新します。リレンダー関数なしでも動的に反応する画面を作成し、SPAの核心原理を学習します。

    Mission D – 状態連動型SPA構造ミッション
    実習目標: 状態とイベント委譲を組み合わせて動的リストを安定的に管理
    内容要約: Proxyで管理されるtodos状態に応じてリストをレンダリングし、完了ボタンを押すと状態を変更するだけで画面が自動的に反応するよう構成します。イベント委譲を通じて動的に生成された項目も問題なく制御できます。

    Mission E – イベントフロー追跡およびデバッグミッション
    実習目標: 重いイベントに対する処理量制御を通じてパフォーマンスを維持
    内容要約: scrollmousemoveinput のような頻繁なイベントにthrottledebounce関数を適用して不要な処理回数を減らし、ブラウザの負荷を最小化します。UXとパフォーマンスを同時に考慮する実戦最適化戦略を学びます。

受講前の参考事項

学習資料

  • すべての講義には要約PDF実習用コードファイル練習問題およびミッション課題が一緒に提供されます。

  • 各資料は講義の流れに合わせて段階別に構成されているため、復習と実習の両方を効率的に行うことができます

前提知識および注意事項

  • HTML/CSSの基本構造JavaScriptの基礎文法をご存知でしたら、スムーズについてこられます。

  • 特にaddEventListenerif/elseforEach、オブジェクトアクセス方式程度は知っておくと良いでしょう。

  • Mac/Windows環境のどちらでも受講可能で、別途インストールは不要でウェブブラウザさえあれば実習できます。

  • 最新のChromeブラウザの使用を推奨します。

  • (選択)Part 1: DOM構造とAPIの基礎概念受講完了

こんな方に
おすすめです

学習対象は
誰でしょう?

  • DOMイベントフローを構造的に理解したい初級〜中級開発者

  • リアルタイムなインタラクションが多いUIを自ら設計してみたいフロントエンド開発者

  • イベント委譲、ターゲット検出、状態連携に苦戦する学習者

  • ジャバスクリプトで効率的なイベントシステムを作りたい方

  • 検索窓、チェックリスト、リアルタイムエラー検知など、実務UIの実装が目標の方

  • イベント重複実行問題で性能ボトルネックを経験した開発者

  • フレームワークなしでピュアJSでUIの状態を制御したい方

  • ProxyとSPAの構造の内部動作の仕組みを学習したい方

  • リアルタイムフォームフィードバックおよび自動レンダリング構造を理解したいデザイナー/プランナー

  • 重複するDOMイベント処理コードを改善したいチーム開発者

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

  • HTML/CSS 基礎タグとDOM構造に関する基本理解

  • JavaScript 基本文法

  • querySelector および DOM要素 選択/操作 経験

  • (任意) Part 1: DOM構造とAPIの基礎概念 受講完了

こんにちは
です。

147

受講生

6

受講レビュー

4.3

講座評価

9

講座

안녕하세요, 우리동네코딩 스튜디오에 오신 것을 환영합니다!

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, Google, Microsoft, Meta 등 글로벌 IT 기업에서 실무 경험을 쌓은 개발자들이 함께 만든 교육 그룹입니다.

처음에는 미국과 캐나다의 컴퓨터공학 전공자들끼리 함께 공부하며 성장하고자 만든 스터디 모임에서 시작되었습니다. 각기 다른 대학, 다른 시간대에 있었지만 함께 문제를 해결하고 서로에게 배운 그 시간은 매우 특별했고, 자연스럽게 이런 생각이 들었습니다.

“우리가 공부하던 이 방식, 그대로 다른 사람에게도 전하면 어떨까?”

그 물음이 바로 우리동네코딩 스튜디오의 출발점이었습니다.

현재는 약 30명의 현직 개발자와 컴퓨터공학 전공 대학생들이 각자의 전문 분야를 맡아, 입문부터 실전까지 아우르는 커리큘럼을 직접 설계하고 강의합니다. 단순한 지식 전달을 넘어, 진짜 개발자의 시선으로 배우고 함께 성장할 수 있는 환경을 제공합니다.

“진짜 개발자는, 진짜 개발자에게 배워야 합니다.”

저희는 웹 개발의 전 과정을 처음부터 끝까지 체계적으로 다루되, 이론에 머무르지 않고 실습과 실전 중심의 피드백을 통해 실력을 키워드립니다.
수강생 한 사람, 한 사람의 성장을 함께 고민하고 이끌어가는 것이 우리의 철학입니다.

🎯 우리의 철학은 분명합니다.
"진정한 배움은 실천에서 오고, 성장은 함께할 때 완성된다."

개발을 처음 시작하는 입문자부터, 실무 능력을 키우고 싶은 취업 준비생, 진로를 탐색 중인 청소년까지.
우리동네코딩 스튜디오는 모두의 출발점이자, 함께 걷는 든든한 동반자가 되고자 합니다.

이제, 혼자 고민하지 마세요.
우리동네코딩 스튜디오가 여러분의 성장을 함께하겠습니다.


Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

“What if we shared this way of learning with others?”

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We’re not just here to teach—we’re here to help you see through the lens of real developers and grow together.

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learner’s growth and are committed to supporting your path every step of the way.

🎯 Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.

You don’t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

カリキュラム

全体

59件 ∙ (3時間 11分)

講座資料(こうぎしりょう):

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

受講レビュー

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

¥4,709

nhcodingstudioの他の講座

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

似ている講座

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