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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
---
title: Console.table()
slug: Web/API/console/table
tags:
- API
- DOM
- Debugging
- Method
- Web Development
- web console
translation_of: Web/API/Console/table
---
<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
<p><span class="seoSummary">表形式のデータを、表で表示します。</span></p>
<p>この関数は必須の引数 <code>data</code> があり、これは配列またはオブジェクトでなければなりません。また、省略可能な引数 <code>columns</code> もあります。</p>
<p><code>data</code> を表として出力します。配列の各要素 (<code>data</code> がオブジェクトである場合は、列挙可能なプロパティ) が、表の行になります。</p>
<p>表の 1 番目の列に、<code>(添字)</code> というラベルがつきます。<code>data</code> が配列である場合、この値は配列の添字になります。<code>data</code> がオブジェクトである場合、この値はプロパティ名になります。(Firefox では) <code>console.table</code> は表示する行が 1000 行 (最初の行は見出し) に制限されていますので注意してください。</p>
<p>{{AvailableInWorkers}}</p>
<h3 id="Collections_of_primitive_types" name="Collections_of_primitive_types">プリミティブ型の集合</h3>
<p>引数 <code>data</code> に、配列またはオブジェクトを渡すことができます。</p>
<pre class="brush: js">// 文字列の配列
console.table(["apples", "oranges", "bananas"]);</pre>
<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p>
<pre class="brush: js">// 値が文字列のプロパティを持つオブジェクト
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var me = new Person("John", "Smith");
console.table(me);</pre>
<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p>
<h3 id="Collections_of_compound_types" name="Collections_of_compound_types">複合的な型の集合</h3>
<p>配列の要素やオブジェクトのプロパティ自体が配列やオブジェクトである場合、それらの要素やプロパティを 1 列ずつ置く形で、各行に列挙します:</p>
<pre class="brush: js">// 配列の配列
var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);</pre>
<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p>
<pre class="brush: js">// オブジェクトの配列
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");
console.table([john, jane, emily]);</pre>
<p>配列がオブジェクトを含む場合、表の列名はプロパティ名になります。</p>
<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p>
<pre class="brush: js">// 値がオブジェクトのプロパティを持つオブジェクト
var family = {};
family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");
console.table(family);</pre>
<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p>
<h3 id="Restricting_the_columns_displayed" name="Restricting_the_columns_displayed">表示する列を制限する</h3>
<p>デフォルトでは、<code>console.table()</code> はすべての要素を各行に出力します。省略可能な引数 <code>columns</code> を使用して、表示する列のサブセットを選択できます:</p>
<pre class="brush: js">// オブジェクトの配列、ただし firstName のみ表示
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");
console.table([john, jane, emily], ["firstName"]);</pre>
<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p>
<h3 id="Sorting_columns" name="Sorting_columns">列で並べ替える</h3>
<p>列の見出しをクリックすると、その列の値で表を並べ替えることができます。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">console.table(data [, <em>columns</em>]);
</pre>
<h3 id="Parameters" name="Parameters">引数</h3>
<dl>
<dt><code>data</code></dt>
<dd>表示するデータ。配列またはオブジェクトでなければなりません。</dd>
<dt><code>columns</code></dt>
<dd>出力する列名を持つ配列。</dd>
</dl>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">策定状況</th>
<th scope="col">コメント</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("Console API", "#consoletabledata-columns", "console.table()")}}</td>
<td>{{Spec2("Console API")}}</td>
<td>最初期の定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>基本サポート</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("34.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Worker で使用可能</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("38.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>機能</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>基本サポート</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("34.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>Worker で使用可能</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("38.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
|
