강의

멘토링

커뮤니티

Programming

/

Front-end

DOMインタラクション

DOMは動的アプリケーションの必須要素であり、基盤です。 Element、Document、Windowオブジェクトで発生する、あるいは発生させるすべてのイベントを、基本から応用まで扱います。Web Component(Custom Element、Shadow DOM、Template)を完全に習得し、活用できるようになります。 開講中の「DOM完全攻略:基本」講座とあわせて、DOMの集大成を飾ることができます。

難易度 初級

受講期間 無制限

  • tonextday
DOM
DOM
JavaScript
JavaScript
HTML/CSS
HTML/CSS
DOM
DOM
JavaScript
JavaScript
HTML/CSS
HTML/CSS

受講後に得られること

  • Element、Document、Windowのすべてのイベント

  • Web Components: Custom Element, Shadow DOM, <template>

  • クリップボード、ドラッグ&ドロップ、Mutation Observer

DOM + Web Component
根本を変えてこそ、流れが見えてきます。

動的アプリケーションのためのDOMの終止符。

ユーザー中心の動的なアプリケーションを実装するには、ユーザーの行動を認識する必要があります。Element、Document、Windowオブジェクトで発生する、あるいは発生させるすべてのDOMイベントによって、これを実現できます。

Webコンポーネントを完全に学ぶべき理由とは?Lý do tại sao phải học Web Component một cách hoàn chỉnh?

Web Componentは、HTML、CSS、DOM、そしてJavaScriptを組み合わせたコンポーネント開発の基盤です。この流れを正しく理解することで、動的アプリケーション開発の思考を広げることができます。

深く、広く、そして詳細に扱うために、3つの講義に分けて解説します。

  • 最初の講義「DOM基本」では、DOMの基本とWindowオブジェクトを扱います。
  • 本講義は2番目の講義で、「DOMインタラクション」です。
  • 3番目の講義は「DOM: CSSOM」で、CSS中心のDOM処理を扱います。

特定のフレームワークやライブラリに依存しない根本技術を見抜く

フレームワークやライブラリを使用しているものの、根本的な技術に物足りなさを感じてはいませんか?皆さんがバニラコーディングで動的なウェブプログラムを完全に開発できるようになれば、ライブラリやフレームワークを知らなくても、習得にそれほど時間はかかりません。この講義で学ぶ内容もまた、そのようなライブラリやフレームワークの土台となります。

DOMをより簡単に、そして完全に学ぶことができます。動的なウェブアプリケーションを開発しようとしている開発者、イベントのすべてを知りたい開発者の方ですか?この講義を通じて、根本から変わる経験をぜひ体感してください。

前回のDOM講座(推奨される事前学習)


DOMを完全に学ぶ
最も深く正確な道。

DOMスペックの95%以上を扱います。DOMの学習に終止符を打つことができます。
広く(Wide)、深く(Deep)、詳細(Detail)です。時間、費用、努力を無駄にしません。

講義を開発するたびに、常に要件に対する実装方法について悩むことになります。実装方法を決定するには、まずサポートされているもの(メソッド、プロパティなど)を知る必要があります。

以前の「JavaScript完全攻略」シリーズもそうですが、今回の講義もDOMインタラクション仕様の95%以上を扱っています。前回の「DOM完全攻略:基本」講義も同様です。このように内容を網羅するためには、実力と経験のある講師が多大な時間をかけて講義を作る必要があります。しかし、それは講師側の事情であり、学習者は全体像を把握できる必要があります。

「DOM完全攻略」講座の第2編を制作するのに、1年以上かかりました。70%程度の内容に留めていれば、もっと短い時間で講座を作ることができたでしょう。しかし、それでは講師側が楽なだけで、学習者は残りの30%を埋めるために多大な時間を費やすことになります。問題は、その30%が何であるかさえ分からないという事実です。

学習者の皆様がDOMの全体像を把握し、動的アプリケーションへの思考を広げられるよう、「95%」という原則を貫き、長い時間をかけて準備した講義であると自負しております。

チェックリスト
提供します。

インターフェースのプロパティやメソッドを漏れなく確認できるよう、下の画像のようにインターフェースのプロパティとメソッドをチェックリスト形式で作成しました。Để không bỏ sót các thuộc tính và phương thức của interface, tôi đã tạo một danh sách kiểm tra (check list) các thuộc tính và phương thức của interface như hình ảnh bên dưới.

このリストはPDFファイルで提供されます。セクション「HTMLElementインターフェース」の最初のレッスンから資料をダウンロードしてご確認いただけます。

プロパティ、メソッド講義順序マッチリスト

講義全体が
完全な一つの
シナリオです。

シリーズ全体が一つのシナリオになっています。機能を暗記するのではなく、全体の感覚を掴む形式です。順番に一つずつ進めていけば、自然と全体を学ぶことができます。内容の重複がないため、それに伴う労力、時間、費用を無駄にすることはありません。講義を進めていくことで、自然と森、木、枝、花を隈なく眺めながら、基礎の深みをしっかりと固めることができます。

開講されている4つのJavaScript講座とともに、ウェブ開発の土台となる基盤技術を完全にマスターすることができます。イベント、プロパティ、メソッドの一つひとつを深く広く扱いますが、あわせてこれらが実行される前後のコードをシナリオ化して解説します。Cùng với 4 khóa học JavaScript đã được mở, bạn có thể hoàn thiện một cách trọn vẹn các công nghệ nền tảng cốt lõi của phát triển web. Chúng tôi không chỉ khai thác sâu và rộng từng sự kiện (event), thuộc tính (property) và phương thức (method), mà còn xây dựng các kịch bản mã nguồn trước và sau khi chúng thực thi để cùng tìm hiểu. turnover_rate: 0.00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

40年以上
経験から生まれます。

40年以上ソフトウェアを開発してきた経験、時間が経って初めて感じられる感覚的なもの、そして動物的な勘となったものを講義に込めました。

thoughtful 本物の実力
養うことができます。
Bạn có thể nâng cao thực lực thực sự
.

DOM講義は、HTML、CSS、DOM、JavaScriptが連携した形式です。そのため、イベントやプロパティ、メソッドを一つ説明するのにも10〜30行のコードを記述する必要があります。しかし、ライブコーディングを行うと時間がかかり、学習者を待たせることになってしまいます。

このような問題を防ぐために、事前に作成されたコードを提示して説明します。その後、皆さんが直接コーディングを完了させることで、全体像が見え、流れを把握できるようになります。ウェブプログラムを開発する際、講義のコードを自身の開発環境に合わせて適用できるよう実力が向上します。講義では前後の基本コードを提供しますので、それを活用して部分的なコードを完成させることができるでしょう。

💾 実習環境および学習資料

  • 最新のブラウザで講義のコードをそのまま実行できます。講義はWindows環境、Google Chromeブラウザのバージョン100で作成されました。
  • 講義資料としてインターフェース、プロパティ、メソッドのリストのPDFファイルを提供します。セクション2の最初のレッスンでダウンロードいただけます。

Q&A 💬

Q. 「DOM完全攻略:基本」という講義がありますが、先にその講義を受講すべきですか?

受講しなくても視聴いただけますが、本講義ではDOMの基本概念については扱わないため、受講することをお勧めします。講義を完全に理解できなかったり、内容がつながらなかったりする可能性があります。スペック(仕様書)に記載されている用語を使用するため、一般的に知られている用語とは異なる場合もあります。

Q. 受講前に知っておくべき内容はありますか?

HTML、JavaScriptの基本は知っておく必要があります。CSSは扱わないため、知らなくても大丈夫です。

Q. DOMに初めて触れる初心者ですが、受講可能でしょうか?

DOMで使用される用語や概念があります。これらを「DOM完全攻略:基本」で扱っていますので、先にその講義を受講することをお勧めします。

Q. DOMを学べば、フレームワークやライブラリを使わずにウェブプログラムを開発できますか?

HTML、CSS、JavaScriptを知っていれば開発できます。


一緒に受講すると良い
関連講座をチェックしてみてください。

金永保(キム・ヨンボ)JavaScriptシリーズ

JavaScriptロードマップはこちら (40%割引)

キム・ヨンボDOMシリーズ

DOMロードマップはこちら (40%割引)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 動的ウェブアプリケーションを学ぼうとする開発者

  • イベントのすべてを学ぼうとする開発者

  • ユーザー中心のUI/UXを実現しようとする開発者

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

  • JavaScriptエンジニア

  • DOMの基本

こんにちは
です。

9,737

受講生

407

受講レビュー

337

回答

4.8

講座評価

13

講座

ソフトウェア開発を愛する開発者です。

メール: tonextday@gmail.com

動画:11本
Rustビルドアップ:完全な基礎作り

クリーンアップ JavaScript:ジャンプアップ
クリーンアップ JavaScript:ベースビルドアップ
JavaScript ビギナー
JavaScript 中上級
モダン JavaScript (ES6+) 基本
モダン JavaScript (ES6+) 深化
DOM 基本
DOM インタラクション
React ビギナー、React 完全攻略
要求分析の実装方法
JavaScript 機械学習 TensorFlow.js

著書:9冊
没入!JavaScript
ECMAScript 6
HTML5
DOMスクリプティング
JavaScript正規表現
要求分析のためのEvent Processモデリング
機械学習 TensorFlow.js、
Ajax活用、prototype.js完全分析
9冊のうち8冊は国内初の著者です。
特に、「機械学習 TensorFlow.js」は出版時点でamazon.comに関連書籍がありませんでした。

カリキュラム

全体

131件 ∙ (21時間 3分)

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

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

受講レビュー

全体

2件

5.0

2件の受講レビュー

  • solideo님의 프로필 이미지
    solideo

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    • mandala52469358님의 프로필 이미지
      mandala52469358

      受講レビュー 9

      平均評価 5.0

      5

      31% 受講後に作成

      DOMを詳しく知れて良いです。

      ¥2,793

      tonextdayの他の講座

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

      似ている講座

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