|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
|
|
|
"translation_date": "2025-10-24T15:02:41+00:00",
|
|
|
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
|
|
|
"language_code": "ja"
|
|
|
}
|
|
|
-->
|
|
|
# DOM要素調査課題
|
|
|
|
|
|
## 概要
|
|
|
|
|
|
DOM操作の力を実際に体験した今、DOMインターフェースの広い世界を探求する時が来ました。この課題では、ドラッグ操作だけでなく、さまざまなウェブ技術がDOMとどのように連携するかを深く理解することを目指します。
|
|
|
|
|
|
## 学習目標
|
|
|
|
|
|
この課題を完了することで、以下を達成します：
|
|
|
- **調査**：特定のDOMインターフェースを深く理解する
|
|
|
- **分析**：DOM操作の実際の実装を分析する
|
|
|
- **接続**：理論的な概念を実践的な応用に結びつける
|
|
|
- **開発**：技術文書作成と分析のスキルを向上させる
|
|
|
|
|
|
## 指示
|
|
|
|
|
|
### ステップ1: DOMインターフェースを選ぶ
|
|
|
|
|
|
MDNの包括的な[DOMインターフェース一覧](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)を訪問し、興味のあるインターフェースを1つ選びましょう。以下のカテゴリから選ぶとバリエーションが広がります：
|
|
|
|
|
|
**初心者向けオプション:**
|
|
|
- `Element.classList` - CSSクラスを動的に管理する
|
|
|
- `Document.querySelector()` - 高度な要素選択
|
|
|
- `Element.addEventListener()` - ポインターイベントを超えたイベント処理
|
|
|
- `Window.localStorage` - クライアントサイドのデータ保存
|
|
|
|
|
|
**中級者向けチャレンジ:**
|
|
|
- `Intersection Observer API` - 要素の可視性を検出する
|
|
|
- `MutationObserver` - DOMの変更を監視する
|
|
|
- `Drag and Drop API` - ポインター操作の代替
|
|
|
- `Geolocation API` - ユーザーの位置情報にアクセスする
|
|
|
|
|
|
**上級者向け探求:**
|
|
|
- `Web Components` - カスタム要素とシャドウDOM
|
|
|
- `Canvas API` - プログラムによるグラフィック描画
|
|
|
- `Web Workers` - バックグラウンド処理
|
|
|
- `Service Workers` - オフライン機能
|
|
|
|
|
|
### ステップ2: 調査と文書作成
|
|
|
|
|
|
300～500語の包括的な分析を作成してください。以下を含めること：
|
|
|
|
|
|
#### 技術概要
|
|
|
- **定義**：選んだインターフェースが何をするのか、初心者にも分かりやすい言葉で説明する
|
|
|
- **説明**：提供される主要なメソッド、プロパティ、またはイベントを解説する
|
|
|
- **問題解決**：そのインターフェースが解決するために設計された問題の種類を記述する
|
|
|
|
|
|
#### 実際の実装
|
|
|
- **発見**：選んだインターフェースを使用しているウェブサイトを見つける（コードを調査するか、例を調べる）
|
|
|
- **文書化**：可能であればコードスニペットを使って具体的な実装を記録する
|
|
|
- **分析**：開発者がそのアプローチを選んだ理由を分析する
|
|
|
- **説明**：それがどのようにユーザー体験を向上させるかを説明する
|
|
|
|
|
|
#### 実践的な応用
|
|
|
- **比較**：選んだインターフェースをテラリウムプロジェクトで使用した技術と比較する
|
|
|
- **提案**：そのインターフェースがテラリウムの機能をどのように強化または拡張できるかを提案する
|
|
|
- **識別**：そのインターフェースが役立つ他のプロジェクトを特定する
|
|
|
|
|
|
### ステップ3: コード例
|
|
|
|
|
|
選んだインターフェースを実際に動作させる簡単なコード例を含めてください。以下を満たす必要があります：
|
|
|
- **機能的**：コードが実際にテストすると動作すること
|
|
|
- **コメント付き**：各部分が何をするかを説明する
|
|
|
- **関連性**：現実的な使用例に関連すること
|
|
|
- **初心者向け**：ウェブ開発を学んでいる人が理解できること
|
|
|
|
|
|
## 提出形式
|
|
|
|
|
|
提出物を明確な見出しで構成してください：
|
|
|
|
|
|
```markdown
|
|
|
# [Interface Name] DOM Investigation
|
|
|
|
|
|
## What It Does
|
|
|
[Technical overview]
|
|
|
|
|
|
## Real-World Example
|
|
|
[Website analysis and implementation details]
|
|
|
|
|
|
## Code Demonstration
|
|
|
[Your working example with comments]
|
|
|
|
|
|
## Reflection
|
|
|
[How this connects to our terrarium project and future applications]
|
|
|
```
|
|
|
|
|
|
## 評価基準
|
|
|
|
|
|
| 基準 | 優秀 (A) | 良好 (B) | 発展途上 (C) | 改善が必要 (D) |
|
|
|
|------|----------|----------|--------------|----------------|
|
|
|
| **技術的理解** | 正確な説明と適切な用語で深い理解を示す | 主に正確な説明でしっかりとした理解を示す | 一部誤解があるが基本的な理解を示す | 重大な誤りがある限定的な理解 |
|
|
|
| **実際の分析** | 実際の実装を特定し、具体的な例で徹底的に分析する | 実例を見つけ、十分な分析を行う | 実例を特定するが分析が浅い | 実際の関連性が曖昧または不正確 |
|
|
|
| **コード例** | 動作する、よくコメントされたコードでインターフェースを明確に示す | 機能するコードで十分なコメント付き | コードは動作するが文書化が不十分 | コードにエラーがあるか説明が不十分 |
|
|
|
| **文章の質** | 明確で魅力的な文章で構造が整い、技術的なコミュニケーションが優れている | 良い技術的文章で十分に整理されている | 十分な組織化と明確さ | 組織化が不十分または不明瞭なコミュニケーション |
|
|
|
| **批判的思考** | 概念間の洞察に満ちた関連性を示し、革新的な応用を提案する | 良好な分析的思考と関連性を示す | 一部分析があるが深さが不足している | 批判的思考の証拠が限定的 |
|
|
|
|
|
|
## 成功のためのヒント
|
|
|
|
|
|
**調査戦略:**
|
|
|
- **始める**：MDNドキュメントで信頼性の高い情報を探す
|
|
|
- **探す**：GitHubやCodePenでコード例を探す
|
|
|
- **確認する**：ブラウザの開発者ツールを使って人気のウェブサイトを調査する
|
|
|
- **視聴する**：チュートリアル動画で視覚的な説明を得る
|
|
|
|
|
|
**文章作成ガイドライン:**
|
|
|
- **自分の言葉**で文書化をコピーせずに説明する
|
|
|
- **具体例**とコードスニペットを含める
|
|
|
- **技術的な概念**を友人に教えるように説明する
|
|
|
- **インターフェース**をウェブ開発の広範な概念に結びつける
|
|
|
|
|
|
**コード例のアイデア:**
|
|
|
- **簡単なデモ**を作成してインターフェースの主要な機能を紹介する
|
|
|
- **テラリウムプロジェクト**の概念を活用する
|
|
|
- **機能性**を重視し、デザインは二次的にする
|
|
|
- **コードをテスト**して正しく動作することを確認する
|
|
|
|
|
|
## 提出期限
|
|
|
|
|
|
[締切日を記入してください]
|
|
|
|
|
|
## 質問はありますか？
|
|
|
|
|
|
課題のいかなる側面についても明確化が必要な場合は、遠慮なく質問してください。この調査は、私たちが毎日使用するインタラクティブなウェブ体験を可能にするDOMの理解を深めるものです。
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責事項**:
|
|
|
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当社は一切の責任を負いません。 |
