blob: e86950456152ebf1c034bbb93a306abf5abf5865 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
---
title: 'スキルテスト: オブジェクトの基本'
slug: 'Learn/JavaScript/Objects/Test_your_skills:_Object_basics'
translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_Object_basics'
---
<div>{{learnsidebar}}</div>
<p>このスキルテストの目的は、<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の理解度をテストすることです。</p>
<div class="blockIndicator note">
<p><strong>注意</strong>: 以下のインタラクティブなエディターでソリューションを試すこともできますが、コードをダウンロードし、<a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>や<a href="https://glitch.com/">Glitch</a>のようなオンラインツールを使用してタスクを実行すると役立つ場合があります。<br>
<br>
行き詰まった場合は、助けを求めてください — このページの下部にある評価またはさらなる支援セクションを参照してください。</p>
</div>
<div class="blockIndicator note">
<p><strong>注意</strong>: 以下の例では、コードにエラーがある場合、ページの結果パネルに出力され、答えを見つけ出すのに役立ちます（ダウンロード可能なバージョンの場合は、ブラウザーのJavaScriptコンソールに）</p>
</div>
<h2 id="オブジェクトの基本_1">オブジェクトの基本 1</h2>
<p>このタスクでは、オブジェクトリテラルが与えられます。あなたのタスクは下記です。</p>
<ul>
<li><code>catName</code>変数に、<strong>角括弧記法</strong>を用いて、<code>name</code>プロパティの値を保存する</li>
<li><strong>ドット記法</strong>を用いて、<code>greeting()</code>メソッドを使う</li>
<li><code>color</code>プロパティを<code>black</code>に変更する</li>
</ul>
<p>以下のライブコードを更新して、完成した例を再現してみてください。</p>
<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/object-basics/object-basics1.html", '100%', 400)}}</p>
<div class="blockIndicator note">
<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/object-basics/object-basics1-download.html">このタスクの開始点をダウンロード</a>して、お好きなエディターまたはオンライン・エディターで作業してください。</p>
</div>
<h2 id="オブジェクトの基本_2">オブジェクトの基本 2</h2>
<p>次のタスクでは、お気に入りのバンドの1つを表す、自分だけのオブジェクトリテラルを作成してみましょう。必要な要素は次のとおりです。</p>
<ul>
<li><code>name</code>: バンドの名前を表す文字列</li>
<li><code>nationality</code>: バンドの出身国を表す文字列</li>
<li><code>genre</code>: バンドが演奏する音楽の種類</li>
<li><code>members</code>: バンドのメンバー数を表す数字</li>
<li><code>formed</code>: バンドが結成した年を表す数字</li>
<li><code>split</code>: バンドが解散した年を表す数字、まだ活動している場合は<code>false</code></li>
<li><code>albums</code>: そのバンドによってリリースされたアルバムを表す配列。それぞれの配列の要素は、下記の要素を含んだオブジェクトであること
<ul>
<li><code>name</code>: アルバムの名前を表す文字列</li>
<li><code>released</code>: リリースされた年を表す数字</li>
</ul>
</li>
</ul>
<p><code>albums</code> 配列には、少なくとも2つのアルバムを含めること。</p>
<p>これが終わったら、変数<code>bandInfo</code>に、名前、国籍、活動年数、スタイル、最初のアルバムのタイトルと発売日などの少しの詳細を書き込みます。</p>
<p><span style="">以下のライブコードを更新して、完成した例を再現してみてください。</span></p>
<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/object-basics/object-basics2.html", '100%', 400)}}</p>
<div class="blockIndicator note">
<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/object-basics/object-basics1-download.html">このタスクの開始点をダウンロード</a>して、お好きなエディターまたはオンライン・エディターで作業してください。</p>
</div>
<h2 id="オブジェクトの基本_3">オブジェクトの基本 3</h2>
<p>最後に、「オブジェクトの基本」のまとめとして、タスク＃1の<code>cat</code>オブジェクトリテラルに戻りましょう。 「<code>Hello, said Bertie the Cymric.</code>」と記録されるように、<code>greeting（）</code>メソッドを書き直してください。 ブラウザのDevToolsのコンソールにアクセスしますが、名前や品種に関係なく、同じ構造のすべての<code>cat</code>オブジェクトで機能します。</p>
<p>完了したら、<code>cat2</code>という独自のオブジェクトを作成します。このオブジェクトは、同じ構造、まったく同じ<code>greeting（）</code>メソッドを持ちますが、名前、品種、色が異なります。</p>
<p>両方の<code>greeting（）</code>メソッドを呼び出して、適切なあいさつ（greeting）がコンソールに記録されることを確認します。</p>
<p>コードはあまり<a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a>ではありません（それぞれは1回だけ定義すること）—たとえば、同じメソッドを2回定義しています。 どうすればもっとDRYにすることができますか？ よくわからない場合でも、心配しないでください。これは、シリーズの今後の記事で取り上げる予定です。</p>
<p>以下のライブコードを更新して、完成した例を再現してみてください。</p>
<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/object-basics/object-basics3.html", '100%', 400)}}</p>
<div class="blockIndicator note">
<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/object-basics/object-basics1-download.html">このタスクの開始点をダウンロード</a>して、お好きなエディターまたはオンライン・エディターで作業してください。</p>
</div>
<h2 id="まとめとヘルプ">まとめとヘルプ</h2>
<p>自分のコードの評価が欲しい、または行き詰まって助けを求めたい場合：</p>
<ol>
<li>CodePen、jsFiddle、Glitchなどのオンライン共有可能なエディターで作業をします。コードを自分で作成することも、上記のセクションでリンクされているスターティングポイントファイルを使用することもできます。</li>
<li><a href="https://discourse.mozilla.org/c/mdn/learn/250">MDNDiscourseフォーラムの学習カテゴリ</a>で評価や支援を求める投稿を書いてください。投稿には次のものを含める必要があります。</li>
</ol>
<ul>
<li>「オブジェクトの基本1 の スキルテスト を行ったので評価して欲しい」などの説明的なタイトル。</li>
<li>あなたがすでに試したことの詳細、そしてあなたが私たちに何をしてほしいか、例えば行き詰まって助けが必要な場合、または評価が必要な場合。</li>
<li>オンラインの共有可能なエディターで、評価したい、または支援が必要な例へのリンク（上記のステップ1で説明）。これは入門するのに良い習慣です—あなたが彼らのコードを見ることができないならば、コーディング問題で誰かを助けることは非常に難しいです。</li>
<li>実際のタスクまたは評価ページへのリンク。サポートが必要な質問を見つけることができます。</li>
</ul>
|
