CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3KmNP0p_KOsBClLxHxTrYizTzrIB8DJcbYYVqaV9587FhAgeEzmRfCNIoRqkH8Rfcte
cache-control: public, max-age=3600
expires: Fri, 10 Oct 2025 09:52:18 GMT
last-modified: Fri, 10 Oct 2025 01:10:22 GMT
etag: W/"5391db3ffb00efc967c5c9874f0941f3"
x-goog-generation: 1760058622620588
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 193499
x-goog-meta-goog-reserved-file-mtime: 1760057027
x-goog-hash: crc32c=yVwsbA==, md5=U5HbP/sA78lnxcmHTwlB8w==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 4ee039bc03de369a7189bc099fc3a7fa
date: Fri, 10 Oct 2025 08:52:18 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
スキルテスト: 文字列 - ウェブ開発の学習 | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
スキルテスト: 文字列
このスキルテストの目的は、テキストの扱い — JavaScript での文字列および便利な文字列メソッドの記事を理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
文字列 1
最初の文字列の課題では、小さなことから始めましょう。すでに quoteStart
という変数の中に有名な引用文の半分があります。
この課題を完成させるには、次のようにしてください。
- 引用の残りの半分を調べて、それを例の
quoteEnd
という変数に追加しましょう。 - 2 つの文字列を連結して、完全に引用を格納した単一の文字列にします。その結果を
finalQuote
という名前の変数に保存しましょう。 - この点で エラーが発生することがわかります。
quoteStart
の問題を修正し、完全な引用が正しく表示されるようにできますか?
<section></section>
* {
box-sizing: border-box;
}
p {
color: purple;
margin: 0.5em 0;
}
js
const quoteStart = 'Don't judge each day by the harvest you reap ';
// ここにコードを追加
// 以下のコードは編集しないでください。
const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = finalQuote;
section.appendChild(para1);
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
js
// 引用符をエスケープする必要があります
const quoteStart = 'Don\'t judge each day by the harvest you reap ';
const quoteEnd = "but by the seeds that you plant.";
const finalQuote = `${quoteStart}${quoteEnd}`;
// 以下のコードは編集しないでください。
// ...
文字列 2
この課題では、 2 つの文字列を格納する quote
と substring
という 2 つの変数が設定されています。
この課題を完成させるには、次のようにしてください。
- quote の長さを取得し、それを
quoteLength
という変数に格納しましょう。 substring
がquote
の中で現れるインデックスの位置を探し、その値をindex
という変数に格納しましょう。- これらの変数を組み合わせを使用して、変数と利用できる文字列プロパティ/メソッドを組み合わせて、元の引用文を "I do not like green eggs and ham." に切り詰め、
revisedQuote
という変数に格納しましょう。
js
const quote = "I do not like green eggs and ham. I do not like them, Sam-I-Am.";
const substring = "green eggs and ham";
// 以上のコードは編集しないでください。
// ここにコードを追加
// 以下のコードは編集しないでください。
const section = document.querySelector("section");
section.innerHTML = " ";
const para1 = document.createElement("p");
para1.textContent = `The quote is ${quoteLength} characters long.`;
const para2 = document.createElement("p");
para2.textContent = revisedQuote;
section.appendChild(para1);
section.appendChild(para2);
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
js
// ...
// 以上のコードは編集しないでください。
const quoteLength = quote.length;
const index = quote.indexOf(substring);
const revisedQuote = quote.slice(0, index + substring.length + 1);
// 以下のコードは編集しないでください。
// ...
文字列 3
次の文字列の課題では、前回仕上げたものと同じ引用文が指定されていますが、ちょっとおかしいです。このように修正して更新してください。
この課題を完成させるには、次のようにしてください。
- 大文字小文字を正しい文になるよう変更しましょう(最初の文字を大文字にする以外はすべて小文字にしましょう)。新しい引用文を
fixedQuote
という変数に格納しましょう。 fixedQuote
では、 "green eggs and ham" を、あなたが実際に嫌いな別の食べ物に置き換えてください。- もう一つ小さな修正があります。引用文の末尾にピリオドを追加し、最終版を
finalQuote
という変数に保存しましょう。
js
const quote = "I dO nOT lIke gREen eGgS anD HAM";
// 以上のコードは編集しないでください。
// ここにコードを追加
// 以下のコードは編集しないでください。
const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = finalQuote;
section.appendChild(para1);
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
js
// ...
// 以上のコードは編集しないでください。
let fixedQuote = quote.toLowerCase();
const firstLetter = fixedQuote.slice(0, 1);
fixedQuote = fixedQuote.replace(firstLetter, firstLetter.toUpperCase());
fixedQuote = fixedQuote.replace("green eggs and ham", "pickled onions");
const finalQuote = `${fixedQuote}.`;
// 以下のコードは編集しないでください。
// ...
文字列 4
最後の文字列の課題では、定理の名前、 2 つの数値、不完全な文字列(追加が必要な部分はアスタリスク (*
) で示されています)が与えられています。文字列の値を以下のように変更してください。
この課題を完成させるには、次のようにしてください。
- 通常の文字列リテラルからテンプレートリテラルに変更しましょう。
- 4 つのアスタリスクを 4 つのテンプレートリテラルのプレースホルダーに置き換えてください。次のようにします。
- 定理の名前。
- 持っている 2 つの数値。
- 直角三角形の斜辺の長さを、他の 2 辺の長さが指定された 2 つの値と同じであるとして求めたもの。現在ある値から計算する方法を見ていく必要があります。プレースホルダーの中で計算してください。
js
const theorem = "Pythagorean theorem";
const a = 5;
const b = 8;
// 以上のコードは編集しないでください。
// Edit the string literal
const myString =
"Using *, we can work out that if the two shortest sides of a right-angled triangle have lengths of * and *, the length of the hypotenuse is *.";
// 以下のコードは編集しないでください。
const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = myString;
section.appendChild(para1);
ここをクリックすると、模範解答を表示します。
最終的な JavaScript は次のようになります。
js
// ...
// 以上のコードは編集しないでください。
const myString = `Using ${theorem}, we can work out that if the two shortest sides of a right-angled triangle have lengths of ${a} and ${b},
the length of the hypotenuse is ${Math.sqrt(a ** 2 + b ** 2)}.`;
// 以下のコードは編集しないでください。
// ...