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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
|
---
title: 便利な文字列メソッド
slug: Learn/JavaScript/First_steps/Useful_string_methods
tags:
- Article
- Beginner
- CodingScripting
- JavaScript
- Learn
- case
- indexof
- 'l10n:priority'
- length
- lower
- replace
- split
- upper
translation_of: Learn/JavaScript/First_steps/Useful_string_methods
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
<p class="summary">文字列の基本についてはすでに見ました。ここからはレベルを上げて、組み込みのメソッドを使用して文字列に対して実行できる便利な操作について考えてみましょう。例えば、文字列の長さを調べたり、繋げたり、分割したり、ある文字を他の文字に置き換えたりなどです。</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">前提条件:</th>
<td>基礎的なコンピュータの知識、HTML と CSS の基本の理解、JavaScript が何かを知っていること。</td>
</tr>
<tr>
<th scope="row">目的:</th>
<td>文字列がオブジェクトであることを理解して、そのオブジェクトで使用できる基本的なメソッドを使って文字列を操作する方法を身に付ける。</td>
</tr>
</tbody>
</table>
<h2 id="Strings_as_objects" name="Strings_as_objects">オブジェクトとしての文字列</h2>
<p id="Useful_string_methods">JavaScript ではほとんどのものはオブジェクトです。たとえば、次のように文字列を作った時も、</p>
<pre class="brush: js notranslate">let string = 'This is my string';</pre>
<p>この変数は文字列オブジェクトのインスタンスになり、大量のプロパティとメソッドが使用可能となります。{{jsxref("String")}} オブジェクトのページに行って、横にある一覧を眺めてみてください!</p>
<p><strong>また、脳が溶け出しそうかもしれませんが、安心してください!</strong>先ほどのページにある、ほとんどのメソッドは学習の初期に覚える必要はありません。しかし、今から紹介する、文字列操作のメソッドはとてもよく使いますのでぜひ覚えましょう。 </p>
<p><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザの開発者コンソール</a>にいくつかの例を入力してみましょう。</p>
<h3 id="Finding_the_length_of_a_string" name="Finding_the_length_of_a_string">文字列の長さを調べる</h3>
<p>ただ {{jsxref("String.prototype.length", "length")}} プロパティを使用すればよいので、とても簡単です。次の行を入力してみましょう。</p>
<pre class="brush: js notranslate">let browserType = 'mozilla';
browserType.length;</pre>
<p>これで 7 という数値が戻ります。なぜなら "mozilla" は 7文字だからです。例えば、文字の長さによって文字列を並べたいときや、ユーザーがある長さ以上のユーザー名をフォームの入力フィールドに入れたことを知らせたりするような場面で便利です。</p>
<h3 id="Retrieving_a_specific_string_character" name="Retrieving_a_specific_string_character">特定の文字列を扱う</h3>
<p>前の例と関連していますが、文字列に対して<strong>角括弧記法</strong>を使用することで文字列中の任意の 1文字が得られます。つまり角括弧 (<code>[]</code>) を変数名の後ろに付け、その中に数値を入れることで、その番目にある文字が返ってきます。例えば最初の一文字を取得するには次のようにします。</p>
<pre class="brush: js notranslate">browserType[0];</pre>
<p>コンピューターは 1 からではなく、0 から数えます!例えば、文字列から最初の文字を見つけてアルファベット順に並べるときに使うことができます。</p>
<p>文字列の一番最後の文字を取得したいときは、先ほどの <code>length</code> プロパティと組み合わせて以下のようにします。</p>
<pre class="brush: js notranslate">browserType[browserType.length-1];</pre>
<p>"mozilla" の長さは 7 ですが、0 から始まるので、最後の文字の位置は 6 になります。よって <code>length-1</code> とする必要があるのです。</p>
<h3 id="Finding_a_substring_inside_a_string_and_extracting_it" name="Finding_a_substring_inside_a_string_and_extracting_it">部分文字列を探して抽出する</h3>
<p>長い文字列の中に、ある文字列が存在するか調べたいと思うことがあります (よく文字列中に部分文字列が存在するなどといいます)。これには、探したい部分文字列を{{glossary("parameter","引数")}}に取る {{jsxref("String.prototype.indexOf()", "indexOf()")}} メソッドを使用することで可能です。</p>
<p>もし対象の文字列中に部分文字列が<em>見つかった</em>場合、このメソッドは部分文字列のインデックス位置を表す数値 (対象の文字列上で部分文字列が始まる文字数) を返します。もし対象の文字列中に部分文字列が<em>見つからなかった</em>場合は、<code>-1</code> の値を返します。</p>
<ol>
<li>以下を試してみましょう。
<pre class="brush: js notranslate">browserType.indexOf('zilla');</pre>
このコードは 2 を返します。なぜならば、"mozilla"という文字列中で、部分文字列"zilla"の開始位置が 2 (0、1、2 — つまり 3文字目)であるからです。このようなコードは文字列を絞り込むときなどに使います。例えば、ウェブサイトのアドレスの一覧があったとき、その中から"mozilla"を含むものだけを表示したい場合などです。</li>
</ol>
<ol start="2">
<li>部分文字列が含まれてることを確認するもう一つの方法があり、こちらのほうが効果的な場合があります。
<pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre>
上記のコードは <code>-1</code> を返します。これは部分文字列 (この場合は 'vanilla') がメインの文字列の中に見つからなかった場合に返されます。<br>
<br>
これを使って、部分文字列 'mozilla' を<strong>含まない</strong> (あるいは否定演算子 <code>!==</code> を使うなら<strong>含む</strong>) 文字列のすべてのインスタンスを見つけることができます。
<pre class="brush: js notranslate">if(browserType.indexOf('mozilla') === -1) {
// もし部分文字列 'mozilla' が含まれていない場合は、
// 文字列で何かをします。
}
if(browserType.indexOf('mozilla') !== -1) {
// もし部分文字列 'mozilla' が含まれている場合は、
// 文字列で何かをします。
}</pre>
</li>
<li>部分文字列がその文字列のどこから始まるかが分かっており、どこで終わっているかがわかれば、その部分文字列を {{jsxref("String.prototype.slice()", "slice()")}} メソッドを使用することで抽出することができます。
<pre class="brush: js notranslate">browserType.slice(0,3);</pre>
このコードは "moz" という文字列を返します。最初の引数は抽出を始める最初の位置で、2番目の引数が抽出する最後の文字の直後の位置です。つまり、この場合先頭から 4番目の手前までの文字列が切り出されたということです。言い換えると、この場合は 2番目の引数と同じ 3文字が切り出されました。</li>
<li>また、ある文字以降の文字列の残りの文字をすべて抽出したいとわかっている場合は、2番目のパラメータを含める必要はありません!その代わり、文字列内の残りの文字を抽出したい文字の位置を含める必要があるだけです。次のようにしてみてください。
<pre class="brush: js notranslate">browserType.slice(2);</pre>
この例は "zilla" という文字列を返します。なぜなら、2 の位置にある文字は z であり、2番目の引数を指定していないため、3文字目から最後までが部分文字列として戻ったのです。 </li>
</ol>
<div class="note">
<p><strong>注</strong>: <code>slice()</code> の 2番目の引数はオプション (任意指定) です。もし指定しなければ、元々の文字列の最後まで切り出しを行います。他にもオプションがありますので、さらに詳しく知りたければ{{jsxref("String.prototype.slice()", "slice()")}}のページで調べてみましょう。</p>
</div>
<h3 id="Changing_case" name="Changing_case">大文字・小文字の切り替え</h3>
<p>String には{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}と{{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}という 2 つのメソッドがあり、引数として渡された文字列のすべての文字の大文字・小文字を切り替えます。これは例えば、ユーザーの入力を DB に保存する場合に、値を正規化するのに便利です。</p>
<p>それでは次の行を入力し、何が起きるか見てみましょう。</p>
<pre class="brush: js notranslate">let radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();</pre>
<h3 id="Updating_parts_of_a_string" name="Updating_parts_of_a_string">文字列の一部分を書き換える</h3>
<p>{{jsxref("String.prototype.replace()", "replace()")}}メソッドを使用することで、ある部分文字列を他の文字列に置き換えることができます。基本レベルではとても単純に動作しますが、<code>replace()</code> メソッドは高度な機能を持っています (今回はその機能は紹介しませんが)。</p>
<p>検索する文字列と、置き換える文字列の 2 つを引数に取ります。次の例を実行してみてください。</p>
<pre class="brush: js notranslate">browserType.replace('moz','van');</pre>
<p>これはコンソールで"vanilla"を返しますが、<code>browserType</code> の値は、"mozilla"のままです。プログラムで変数 <code>browserType</code> の値を実際に更新するには、演算の結果を変数に設定し直す必要があります。つまりそれ変数に設定されている部分文字列を自動的には更新してくれないのです。従って実際に変数の内容を更新するためには <code>browserType = browserType.replace('moz','van');</code> のように書きます。</p>
<h2 id="Active_learning_examples" name="Active_learning_examples">アクティブ学習の実例</h2>
<p>この章では、文字列を操作するコードを書いてもらいます。以下のどの問題も文字列の配列をループで回して、順序なしリスト形式で表示しますが、配列やループに関して今は理解する必要はありません。配列については今後の記事で説明します。必要なのは、どのような書式で出力するかという要求を満たすコードを書くことです。</p>
<p>どの例も「リセット」ボタンがあるので、コードが動かなくなった場合は使用してみてください。もし本当に行き詰まってしまった場合には、「答えを見る」ボタンを押すことで、回答を見ることができます。</p>
<h3 id="Filtering_greeting_messages" name="Filtering_greeting_messages">挨拶を選別する</h3>
<p>まずは簡単な問題から始めます。挨拶状に使用するメッセージの配列の中から、クリスマスのメッセージのみを選別し、並べ替えてください。やるべきことは、メッセージがクリスマスメッセージであることを判定しその場合のみ表示されるよう、<code>if ( ... )</code> 文の条件式を埋めることです。</p>
<ol>
<li>まず、各メッセージがどうであればクリスマス(Christmas)メッセージとみなせるかを考えてください。こういうメッセージ中にはどんな文字列があり、それが存在するか判定するのにどんなメソッドが使えるでしょうか?</li>
<li>それから、オペランド 1 演算子 オペランド 2 の形で条件を書いてください。その条件は左辺と右辺が等しいかというものでしょうか?もしくは左辺のメソッドの戻り値が、右辺であるかというものでしょうか。</li>
<li>ヒント: 今回の場合、メソッドの戻り値の結果が何でないかを判定するとよいでしょう。</li>
</ol>
<div class="hidden">
<h6 id="Playable_code" name="Playable_code">Playable code</h6>
<pre class="brush: html notranslate"><h2>出力結果</h2>
<div class="output" style="min-height: 125px;">
<ul>
</ul>
</div>
<h2>コードエディタ</h2>
<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p>
<textarea id="code" class="playable-code" style="height: 290px; width: 95%">
const list = document.querySelector('.output ul');
list.innerHTML = '';
let greetings = ['Happy Birthday!',
'Merry Christmas my love',
'A happy Christmas to all the family',
'You\'re all I want for Christmas',
'Get well soon'];
for (let i = 0; i < greetings.length; i++) {
let input = greetings[i];
// 以下の条件の括弧内の内容を書き換えて下さい
if (greetings[i]) {
let listItem = document.createElement('li');
listItem.textContent = input;
list.appendChild(listItem);
}
}
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="リセット">
<input id="solution" type="button" value="答えを見る">
</div>
</pre>
<pre class="brush: css notranslate">html {
font-family: sans-serif;
}
h2 {
font-size: 16px;
}
.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}
body {
margin: 10px;
background: #f5f9fa;
}</pre>
<pre class="brush: js notranslate">const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
let code = textarea.value;
let userEntry = textarea.value;
function updateCode() {
eval(textarea.value);
}
reset.addEventListener('click', function() {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
solution.value = '答えを見る';
updateCode();
});
solution.addEventListener('click', function() {
if(solution.value === '答えを見る') {
textarea.value = solutionEntry;
solution.value = '答えを隠す';
} else {
textarea.value = userEntry;
solution.value = '答えを見る';
}
updateCode();
});
const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
'\nlist.innerHTML = \'\';' +
'\nlet greetings = [\'Happy Birthday!\',' +
'\n \'Merry Christmas my love\',' +
'\n \'A happy Christmas to all the family\',' +
'\n \'You\\\'re all I want for Christmas\',' +
'\n \'Get well soon\'];' +
'\n' +
'\nfor (let i = 0; i < greetings.length; i++) {' +
'\n let input = greetings[i];' +
'\n if (greetings[i].indexOf(\'Christmas\') !== -1) {' +
'\n let result = input;' +
'\n let listItem = document.createElement(\'li\');' +
'\n listItem.textContent = result;' +
'\n list.appendChild(listItem);' +
'\n }' +
'\n}';
let solutionEntry = jsSolution;
textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);
// タブキーでテキストエリアから抜けてしまうのを防ぎ、
// 代わりにカーソル位置にタブ文字を挿入する
textarea.onkeydown = function(e){
if (e.keyCode === 9) {
e.preventDefault();
insertAtCaret('\t');
}
if (e.keyCode === 27) {
textarea.blur();
}
};
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
const caretPos = textarea.selectionStart;
const front = (textarea.value).substring(0, caretPos);
const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}
// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
textarea.onkeyup = function(){
// ユーザーのコードが表示されているときのみ状態を保存し、
// 答えのコードでユーザーコードが上書きされないようにする
if(solution.value === '答えを見る') {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}
updateCode();
};</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p>
<h3 id="Fixing_capitalization" name="Fixing_capitalization">単語の最初の文字を大文字に直す</h3>
<p>この課題ではイギリスの都市名を題材にします。ところが、単語の大文字と小文字がぐちゃぐちゃになっています。そこで最初の文字を大文字にし、残りをすべて小文字にしてみましょう。こういう手順でやってみます:</p>
<ol>
<li><code>input</code> 変数に入っている文字列全体を小文字に変換し、それを新しい変数に格納します。</li>
<li>この新しい変数にある最初の文字を取り出し、さらに別の変数に格納します。</li>
<li>その新しい変数を部分文字列とし、小文字ばかりの文字列にある最初の文字を置換して、大文字化します。この置換処理の結果を別の新しい変数に格納します。</li>
<li><code>input</code> 変数ではなく、最終結果が <code>result</code> 変数の値に代入されるよう修正します。</li>
</ol>
<div class="note">
<p><strong>注</strong>: ヒント — 文字列メソッドのパラメーターは文字列リテラルである必要はありません。変数でもよいですし、メソッドが呼び出される変数であっても構いません。</p>
</div>
<div class="hidden">
<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6>
<pre class="brush: html notranslate"><h2>出力結果</h2>
<div class="output" style="min-height: 125px;">
<ul>
</ul>
</div>
<h2>コードエディタ</h2>
<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p>
<textarea id="code" class="playable-code" style="height: 250px; width: 95%">
const list = document.querySelector('.output ul');
list.innerHTML = '';
let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
for(var i = 0; i < cities.length; i++) {
var input = cities[i];
// この下にコードを書いて下さい
let result = input;
let listItem = document.createElement('li');
listItem.textContent = result;
list.appendChild(listItem);
}
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="リセット">
<input id="solution" type="button" value="答えを見る">
</div>
</pre>
<pre class="brush: css notranslate">html {
font-family: sans-serif;
}
h2 {
font-size: 16px;
}
.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}
body {
margin: 10px;
background: #f5f9fa;
}</pre>
<pre class="brush: js notranslate">const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
let code = textarea.value;
let userEntry = textarea.value;
function updateCode() {
eval(textarea.value);
}
reset.addEventListener('click', function() {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
solution.value = '答えを見る';
updateCode();
});
solution.addEventListener('click', function() {
if(solution.value === '答えを見る') {
textarea.value = solutionEntry;
solution.value = '答えを隠す';
} else {
textarea.value = userEntry;
solution.value = '答えを見る';
}
updateCode();
});
const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
'\nlist.innerHTML = \'\';' +
'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' +
'\n' +
'\nfor (let i = 0; i < cities.length; i++) {' +
'\n let input = cities[i];' +
'\n let lower = input.toLowerCase();' +
'\n let firstLetter = lower.slice(0,1);' +
'\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' +
'\n let result = capitalized;' +
'\n let listItem = document.createElement(\'li\');' +
'\n listItem.textContent = result;' +
'\n list.appendChild(listItem);' +
'\n' +
'\n}';
let solutionEntry = jsSolution;
textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);
// タブキーでテキストエリアから抜けてしまうのを防ぎ、
// 代わりにカーソル位置にタブ文字を挿入する
textarea.onkeydown = function(e){
if (e.keyCode === 9) {
e.preventDefault();
insertAtCaret('\t');
}
if (e.keyCode === 27) {
textarea.blur();
}
};
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
const caretPos = textarea.selectionStart;
const front = (textarea.value).substring(0, caretPos);
const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}
// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
textarea.onkeyup = function(){
// ユーザーのコードが表示されているときのみ状態を保存し、
// 答えのコードでユーザーコードが上書きされないようにする
if(solution.value === '答えを見る') {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}
updateCode();
};</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p>
<h3 id="Making_new_strings_from_old_parts" name="Making_new_strings_from_old_parts">既存の部分から新しい文字列を作成する</h3>
<p>最後の課題では、北イングランドの駅に関する情報が入っている文字列を格納している配列を扱います。この文字列にはデータ項目として、アルファベット 3文字の駅コード、次にコンピューター読み取り用のデータ、次にセミコロン、そして人間が読める駅名が入っています。例:</p>
<pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre>
<p>駅コードと駅名を抽出し、それを文字列にまとめてこのような形にします:</p>
<pre class="notranslate">MAN: Manchester Piccadilly</pre>
<p>このようにプログラムしてみましょう:</p>
<ol>
<li>アルファベット 3文字のコードを抽出し、新しい変数に格納します。</li>
<li>セミコロンの文字インデックス番号を検索します。</li>
<li>セミコロンの文字インデックス番号を参照位置にして、人が読める駅名を抽出し、新しい変数に格納します。</li>
<li>この 2 つの新しい変数と文字列リテラルとを連結し、最終的な文字列を作成します。</li>
<li><code>input</code> 変数ではなく、この最終結果が <code>result</code> 変数の値に代入されるよう修正します。</li>
</ol>
<div class="hidden">
<h6 id="Playable_code_3" name="Playable_code_3">Playable code 3</h6>
<pre class="brush: html notranslate"><h2>出力結果</h2>
<div class="output" style="min-height: 125px;">
<ul>
</ul>
</div>
<h2>コードエディタ</h2>
<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p>
<textarea id="code" class="playable-code" style="height: 285px; width: 95%">
const list = document.querySelector('.output ul');
list.innerHTML = '';
let stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
'GNF576746573fhdg4737dh4;Greenfield',
'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
'SYB4f65hf75f736463;Stalybridge',
'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];
for (var i = 0; i < stations.length; i++) {
let input = stations[i];
// この下にコードを書いてください
let result = input;
let listItem = document.createElement('li');
listItem.textContent = result;
list.appendChild(listItem);
}
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="リセット">
<input id="solution" type="button" value="答えを見る">
</div>
</pre>
<pre class="brush: css notranslate">html {
font-family: sans-serif;
}
h2 {
font-size: 16px;
}
.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}
body {
margin: 10px;
background: #f5f9fa;
}
</pre>
<pre class="brush: js notranslate">const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
let code = textarea.value;
let userEntry = textarea.value;
function updateCode() {
eval(textarea.value);
}
reset.addEventListener('click', function() {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
solution.value = '答えを見る';
updateCode();
});
solution.addEventListener('click', function() {
if(solution.value === '答えを見る') {
textarea.value = solutionEntry;
solution.value = '答えを隠す';
} else {
textarea.value = userEntry;
solution.value = '答えを見る';
}
updateCode();
});
const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
'\nlist.innerHTML = \'\';' +
'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' +
'\n \'GNF576746573fhdg4737dh4;Greenfield\',' +
'\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' +
'\n \'SYB4f65hf75f736463;Stalybridge\',' +
'\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' +
'\n' +
'\nfor (let i = 0; i < stations.length; i++) {' +
'\n let input = stations[i];' +
'\n let code = input.slice(0,3);' +
'\n let semiC = input.indexOf(\';\');' +
'\n let name = input.slice(semiC + 1);' +
'\n let result = code + \': \' + name;' +
'\n let listItem = document.createElement(\'li\');' +
'\n listItem.textContent = result;' +
'\n list.appendChild(listItem);' +
'\n}';
let solutionEntry = jsSolution;
textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);
// タブキーでテキストエリアから抜けてしまうのを防ぎ、
// 代わりにカーソル位置にタブ文字を挿入する
textarea.onkeydown = function(e){
if (e.keyCode === 9) {
e.preventDefault();
insertAtCaret('\t');
}
if (e.keyCode === 27) {
textarea.blur();
}
};
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
const caretPos = textarea.selectionStart;
const front = (textarea.value).substring(0, caretPos);
const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}
// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
textarea.onkeyup = function(){
// ユーザーのコードが表示されているときのみ状態を保存し、
// 答えのコードでユーザーコードが上書きされないようにする
if(solution.value === '答えを見る') {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}
updateCode();
};</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p>
<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2>
<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか?移動する前に、情報を維持しているかを検証するテストを見ることができます— <a href="/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">Test your skills: Strings</a> を見てください。</p>
<h2 id="Conclusion" name="Conclusion">結論</h2>
<p>プログラミング、特に JavaScript では単語や文を処理できるようになることが大事であるという現実から逃れることはできません。それはウェブサイトは人とのコミュニケーションがすべてとなるためです。この記事では、文字列を処理するのに当面知っておくべき基礎を解説しました。今後もっと複雑なトピックに進んで行くときに役立つはずです。次に、配列を見てみます。重要なデータ型のうち、短期間で押さえておくべき最後の 1 つです。</p>
<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>
<ul>
<li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li>
<li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li>
<li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li>
<li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li>
<li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li>
<li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li>
<li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li>
<li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li>
<li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li>
</ul>
|