DOM + Web Component
根本を変えてこそ、流れが見えてきます。
ユーザー中心の動的なアプリケーションを実装するには、ユーザーの行動を認識する必要があります。Element、Document、Windowオブジェクトで発生する、あるいは発生させるすべてのDOMイベントによって、これを実現できます。
Web Componentは、HTML、CSS、DOM、そしてJavaScriptを組み合わせたコンポーネント開発の基盤です。この流れを正しく理解することで、動的アプリケーション開発の思考を広げることができます。
深く、広く、そして詳細に扱うために、3つの講義に分けて解説します。
フレームワークやライブラリを使用しているものの、根本的な技術に物足りなさを感じてはいませんか？皆さんがバニラコーディングで動的なウェブプログラムを完全に開発できるようになれば、ライブラリやフレームワークを知らなくても、習得にそれほど時間はかかりません。この講義で学ぶ内容もまた、そのようなライブラリやフレームワークの土台となります。
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年以上ソフトウェアを開発してきた経験、時間が経って初めて感じられる感覚的なもの、そして動物的な勘となったものを講義に込めました。
DOM講義は、HTML、CSS、DOM、JavaScriptが連携した形式です。そのため、イベントやプロパティ、メソッドを一つ説明するのにも10〜30行のコードを記述する必要があります。しかし、ライブコーディングを行うと時間がかかり、学習者を待たせることになってしまいます。
このような問題を防ぐために、事前に作成されたコードを提示して説明します。その後、皆さんが直接コーディングを完了させることで、全体像が見え、流れを把握できるようになります。ウェブプログラムを開発する際、講義のコードを自身の開発環境に合わせて適用できるよう実力が向上します。講義では前後の基本コードを提供しますので、それを活用して部分的なコードを完成させることができるでしょう。
💾 実習環境および学習資料
Q. 「DOM完全攻略：基本」という講義がありますが、先にその講義を受講すべきですか？
受講しなくても視聴いただけますが、本講義ではDOMの基本概念については扱わないため、受講することをお勧めします。講義を完全に理解できなかったり、内容がつながらなかったりする可能性があります。スペック（仕様書）に記載されている用語を使用するため、一般的に知られている用語とは異なる場合もあります。
Q. 受講前に知っておくべき内容はありますか？
HTML、JavaScriptの基本は知っておく必要があります。CSSは扱わないため、知らなくても大丈夫です。
Q. DOMに初めて触れる初心者ですが、受講可能でしょうか？
DOMで使用される用語や概念があります。これらを「DOM完全攻略：基本」で扱っていますので、先にその講義を受講することをお勧めします。
Q. DOMを学べば、フレームワークやライブラリを使わずにウェブプログラムを開発できますか？
HTML、CSS、JavaScriptを知っていれば開発できます。
