- Day 5：文字列操作（前半）
- 文字列の基本と連結
- テンプレートリテラルで読みやすく書く
- .length で文字数を数える
- よく使う文字列メソッド
- 実践1：ユーザー名を使ったメッセージ生成
- 実践2：メールアドレスの簡単な処理
- Day 5前半のまとめ
- Day 5：文字列操作（後半）
- 文字列操作を「ユーザー体験」として考える
- ユーザー名を使ったメッセージ生成を発展させる
- メールアドレスの簡単な処理を「安全寄り」にする
- 文字列操作テンプレート：ユーザー情報の整形とチェック
- Day 5後半のまとめ
- Day 5：文字列操作とミニ課題のゴール
- 自動自己紹介文ジェネレーターのイメージをつかむ
- Step 1：自己紹介に使う基本情報を変数で用意する
- Step 2：文字列メソッドで「表示用の情報」に整形する
- Step 3：テンプレートリテラルで自己紹介文を組み立てる
- Step 4：.length を使って自己紹介文の長さをチェックする
- Step 5：テンプレートとして使える「自動自己紹介文ジェネレーター」完成版
- Day 5ミニ課題のまとめ
Day 5：文字列操作（前半）
Day 5前半では、JavaScriptの「文字列」を自由に扱えるようになることを目標にします。 文字列の連結・テンプレートリテラル・.length・文字列メソッドを使って、ユーザー名を使ったメッセージ生成や、メールアドレスの簡単な処理を行うところまで進めていきます。 数値の計算が「ロジックの土台」だったように、文字列操作は「画面に出すメッセージ」や「テキストデータの処理」の土台になります。
文字列の基本と連結
文字列とは何か
文字列は、文字や文章を表すデータ型です。 JavaScriptでは、'...' や "..." で囲んで表現します。
const userName = 'Taro'; // ユーザー名
const greeting = 'こんにちは'; // 挨拶の言葉
console.log(userName); // Taro
console.log(greeting); // こんにちは
文字列の連結（+ を使う）
文字列どうしをつなげることを「連結」と呼びます。 + 演算子を使うと、文字列を簡単につなげることができます。
const userName = 'Taro';
const greeting = 'こんにちは';
// 文字列を連結して、1つのメッセージにします
const message = greeting + '、' + userName + 'さん';
console.log(message); // こんにちは、Taroさん
greeting + '、' + userName + 'さん'のように、複数の文字列を+でつないでいます。- 数値の足し算と同じ記号ですが、「文字列の場合は連結になる」と覚えておくとよいです。
テンプレートリテラルで読みやすく書く
バッククォート（\`）を使った文字列
テンプレートリテラルは、**バッククォート（\）で囲む新しい書き方の文字列**です。${…}` の中に変数や式を書けるため、メッセージを読みやすく書けます。
const userName = 'Taro';
const greeting = 'こんにちは';
// テンプレートリテラルを使った書き方
const message = `${greeting}、${userName}さん`;
console.log(message); // こんにちは、Taroさん
なぜテンプレートリテラルが便利なのか
+ で連結する場合と比べて、テンプレートリテラルは次の点で読みやすいです。
// 連結バージョン
const message1 = greeting + '、' + userName + 'さん';
// テンプレートリテラルバージョン
const message2 = `${greeting}、${userName}さん`;
- どこに変数が入っているかが一目で分かります。
- 長いメッセージでも、構造が崩れにくいです。
.length で文字数を数える
文字列の長さを知る
.length は、文字列の長さ（文字数）を表すプロパティです。
const userName = 'Taro';
const greeting = 'こんにちは';
console.log(userName.length); // 4（T, a, r, o の4文字）
console.log(greeting.length); // 5（こ, ん, に, ち, は の5文字）
- 入力文字数のチェックや、メッセージの長さ制限などに使われます。
- 配列にも
.lengthがあり、「要素数」を表しますが、ここでは文字列の長さとして使っています。
よく使う文字列メソッド
文字列メソッドとは
文字列メソッドは、文字列に対して何かしらの操作を行うための関数です。 代表的なものをいくつか紹介します。
toUpperCase() / toLowerCase()
文字列をすべて大文字・小文字に変換します。
const email = 'taro@example.com';
console.log(email.toUpperCase()); // TARO@EXAMPLE.COM
console.log(email.toLowerCase()); // taro@example.com
trim()
前後の空白を取り除きます。
const rawInput = ' taro@example.com ';
const cleanedInput = rawInput.trim();
console.log(rawInput); // " taro@example.com "
console.log(cleanedInput); // "taro@example.com"
includes()
指定した文字列が含まれているかどうかを調べます。
const email = 'taro@example.com';
console.log(email.includes('@')); // true（@ が含まれている）
console.log(email.includes('example')); // true
console.log(email.includes('test')); // false
indexOf()
指定した文字列が最初に現れる位置（インデックス）を返します。
const email = 'taro@example.com';
console.log(email.indexOf('@')); // 4（0から数えて5文字目）
console.log(email.indexOf('.')); // 11
console.log(email.indexOf('#')); // -1（見つからない場合は -1）
実践1：ユーザー名を使ったメッセージ生成
ここからは、学んだ内容を使って実際にコードを書いていきます。 まずは「ユーザー名を使ったメッセージ生成」です。
仕様イメージ
- ユーザー名を文字列として受け取る
- 挨拶メッセージを生成する
- ユーザー名の文字数も表示する
コード例（コメント付き）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 5 前半：ユーザー名を使ったメッセージ生成</title>
</head>
<body>
<h1>ユーザー名を使ったメッセージ生成</h1>
<p>コンソールを開いて、メッセージを確認してください。</p>
<script>
// ユーザー名を表す文字列です
const userName = 'Taro';
// 挨拶の言葉です
const greeting = 'こんにちは';
// テンプレートリテラルを使ってメッセージを生成します
const message = `${greeting}、${userName}さん。ようこそ！`;
// ユーザー名の文字数を取得します
const nameLength = userName.length;
console.log('生成されたメッセージ：', message);
console.log('ユーザー名の文字数：', nameLength, '文字');
// 文字数に応じて簡単なコメントを付けてみます
if (nameLength <= 3) {
console.log('短くて覚えやすい名前ですね！');
} else if (nameLength <= 8) {
console.log('ちょうど良い長さの名前ですね！');
} else {
console.log('少し長めの名前ですね！');
}
</script>
</body>
</html>
重要ポイントの深掘り
- テンプレートリテラルで、変数を含むメッセージを読みやすく書いています。
.lengthで文字数を取得し、条件分岐に使っています。- 文字列操作が「ユーザー体験」に直結することを意識すると、コードの意味が見えやすくなります。
実践2：メールアドレスの簡単な処理
次に、「メールアドレスの簡単な処理」を行うコードを書いてみます。 ここでは、trim()・toLowerCase()・includes()・indexOf() を使います。
仕様イメージ
- ユーザーが入力したメールアドレス（前後に空白があるかもしれない）を受け取る
- 前後の空白を削除する
- 小文字に統一する
@が含まれているかをチェックする- ドメイン部分（
@以降）を取り出す
コード例（コメント付き）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 5 前半：メールアドレスの簡単な処理</title>
</head>
<body>
<h1>メールアドレスの簡単な処理</h1>
<p>コンソールを開いて、処理結果を確認してください。</p>
<script>
// ユーザーが入力したメールアドレスの例です
// 前後に空白が含まれているケースを想定しています
const rawEmailInput = ' Taro.Example@Example.COM ';
console.log('入力されたメールアドレス（生の値）：', `"${rawEmailInput}"`);
// 1. 前後の空白を削除します（trim）
const trimmedEmail = rawEmailInput.trim();
console.log('前後の空白を削除したメールアドレス：', `"${trimmedEmail}"`);
// 2. 小文字に統一します（toLowerCase）
const normalizedEmail = trimmedEmail.toLowerCase();
console.log('小文字に統一したメールアドレス：', `"${normalizedEmail}"`);
// 3. 「@」が含まれているかをチェックします（includes）
const hasAtMark = normalizedEmail.includes('@');
if (!hasAtMark) {
console.log('エラー：メールアドレスに "@" が含まれていません');
} else {
console.log('"@" が含まれているため、メールアドレスとしての形式は一応満たしています');
// 4. 「@」の位置を調べます（indexOf）
const atIndex = normalizedEmail.indexOf('@');
console.log('"@" の位置：', atIndex);
// 5. ドメイン部分（@ 以降）を取り出します
const domain = normalizedEmail.slice(atIndex + 1); // @ の次の文字から末尾まで
console.log('ドメイン部分：', domain);
// ドメインに "example.com" が含まれているかをチェックしてみます
if (domain.includes('example.com')) {
console.log('このメールアドレスは example.com ドメインです');
} else {
console.log('このメールアドレスは example.com ドメインではありません');
}
}
</script>
</body>
</html>
重要ポイントの深掘り
trim()で前後の空白を削除し、「入力の揺れ」を吸収しています。toLowerCase()で大文字・小文字の違いをなくし、「比較しやすい形」にしています。includes('@')で最低限の形式チェックを行っています。indexOf('@')とslice()を組み合わせて、ドメイン部分を取り出しています。
文字列メソッドは、「入力をきれいにする」「必要な部分だけ取り出す」といった処理に非常に役立ちます。
Day 5前半のまとめ
Day 5前半では、次のポイントを押さえました。
- 文字列の連結とテンプレートリテラルで、読みやすいメッセージを生成する方法
.lengthで文字数を取得し、条件分岐やチェックに活用する方法trim()・toLowerCase()・includes()・indexOf()などの文字列メソッドで、入力テキストを整えたり、必要な情報を取り出したりする方法- 実践として、ユーザー名を使ったメッセージ生成と、メールアドレスの簡単な処理をコードとして書いたこと
ここまで理解できていると、「文字列をただ表示する」だけでなく、「文字列を加工して意味のある情報にする」感覚が少しずつ育ってきます。
Day 5：文字列操作（後半）
Day 5後半では、前半で学んだ「文字列の連結」「テンプレートリテラル」「.length」「文字列メソッド」を、もう一歩実践寄りに深掘りしていきます。 単に「使い方を知る」だけでなく、ユーザー名を使ったメッセージ生成やメールアドレスの簡単な処理を、実際のサービスを意識した形でコードに落とし込んでいきます。
文字列操作を「ユーザー体験」として考える
メッセージは「ただの文字」ではなく「体験の入口」
Webサービスやアプリでは、ユーザーに表示されるメッセージは、単なる文字列ではなく「体験の入口」になります。 たとえば、
- ログイン後の「ようこそ、〇〇さん」
- メールアドレス入力時の「形式が正しくありません」
- 会員登録完了時の「登録ありがとうございます！」
これらはすべて文字列操作の結果です。 Day 5後半では、「ユーザーにどう見えるか」を意識しながら文字列を扱っていきます。
ユーザー名を使ったメッセージ生成を発展させる
Step 1：ユーザー名から「表示用の名前」を作る
まずは、ユーザー名を少し加工して「表示用の名前」を作るところから始めます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 5 後半：ユーザー名を使ったメッセージ生成（発展）</title>
</head>
<body>
<h1>ユーザー名を使ったメッセージ生成（発展）</h1>
<p>コンソールを開いて、生成されるメッセージを確認してください。</p>
<script>
// ユーザーが入力した名前の例です
// 前後に空白が含まれているケースを想定します
const rawUserName = ' taRo ';
console.log('入力されたユーザー名（生の値）：', `"${rawUserName}"`);
// 1. 前後の空白を削除します（trim）
const trimmedUserName = rawUserName.trim();
console.log('前後の空白を削除したユーザー名：', `"${trimmedUserName}"`);
// 2. すべて小文字に統一します（toLowerCase）
const lowerUserName = trimmedUserName.toLowerCase();
console.log('小文字に統一したユーザー名：', `"${lowerUserName}"`);
// 3. 先頭の1文字を大文字にし、それ以降をそのままにします
// これにより、「TaRo」ではなく「Taro」のような表示に整えます
const firstChar = lowerUserName.charAt(0); // 先頭の1文字
const restChars = lowerUserName.slice(1); // 2文字目以降
const displayUserName = firstChar.toUpperCase() + restChars;
console.log('表示用に整えたユーザー名：', displayUserName);
</script>
</body>
</html>
重要ポイントの深掘り
trim()で「入力の揺れ」（余計な空白）を取り除いています。toLowerCase()で「大文字・小文字のバラつき」をなくしています。charAt(0)とslice(1)を組み合わせて、「先頭だけ大文字にする」というよくある表示ロジックを実現しています。- こうした「表示用の整形」は、ユーザー体験を整えるうえで非常に重要です。
Step 2：テンプレートリテラルで複数のメッセージを生成する
次に、整えたユーザー名を使って、複数のメッセージを生成してみます。
<script>
const rawUserName = ' taRo ';
const trimmedUserName = rawUserName.trim();
const lowerUserName = trimmedUserName.toLowerCase();
const firstChar = lowerUserName.charAt(0);
const restChars = lowerUserName.slice(1);
const displayUserName = firstChar.toUpperCase() + restChars;
// 挨拶メッセージ
const greetingMessage = `こんにちは、${displayUserName}さん。ようこそ！`;
// システムメッセージ（例：ダッシュボードへの案内）
const dashboardMessage = `${displayUserName}さんのダッシュボードを読み込み中です…`;
// 名前の文字数に応じたコメント
const nameLength = displayUserName.length;
let lengthComment;
if (nameLength <= 3) {
lengthComment = '短くて覚えやすい名前ですね！';
} else if (nameLength <= 8) {
lengthComment = 'ちょうど良い長さの名前ですね！';
} else {
lengthComment = '少し長めの名前ですね！';
}
console.log('挨拶メッセージ：', greetingMessage);
console.log('ダッシュボードメッセージ：', dashboardMessage);
console.log('名前に関するコメント：', lengthComment);
</script>
ここで意識してほしいこと
- テンプレートリテラルで、変数を含むメッセージを自然な日本語として書いています。
.lengthを使って文字数を取得し、条件分岐に活用しています。- 「表示用の名前」と「メッセージ生成」が分かれていることで、ロジックが整理されています。
メールアドレスの簡単な処理を「安全寄り」にする
Step 1：入力の正規化（normalize）
メールアドレスは、ユーザー入力の代表的な例です。 まずは、前後の空白や大文字・小文字の揺れをなくして、「扱いやすい形」に正規化します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 5 後半：メールアドレスの簡単な処理（発展）</title>
</head>
<body>
<h1>メールアドレスの簡単な処理（発展）</h1>
<p>コンソールを開いて、処理の流れを確認してください。</p>
<script>
// ユーザーが入力したメールアドレスの例です
const rawEmailInput = ' Taro.Example@Example.COM ';
console.log('入力されたメールアドレス（生の値）：', `"${rawEmailInput}"`);
// 1. 前後の空白を削除します（trim）
const trimmedEmail = rawEmailInput.trim();
console.log('前後の空白を削除したメールアドレス：', `"${trimmedEmail}"`);
// 2. 小文字に統一します（toLowerCase）
const normalizedEmail = trimmedEmail.toLowerCase();
console.log('小文字に統一したメールアドレス：', `"${normalizedEmail}"`);
</script>
</body>
</html>
Step 2：最低限の形式チェックを行う
次に、includes() と indexOf() を使って、最低限の形式チェックを行います。
<script>
const rawEmailInput = ' Taro.Example@Example.COM ';
const trimmedEmail = rawEmailInput.trim();
const normalizedEmail = trimmedEmail.toLowerCase();
// 「@」が含まれているかをチェックします
const hasAtMark = normalizedEmail.includes('@');
if (!hasAtMark) {
console.log('エラー：メールアドレスに "@" が含まれていません');
} else {
// 「@」の位置を調べます
const atIndex = normalizedEmail.indexOf('@');
// 「@」が先頭や末尾にある場合は不正とみなします
if (atIndex === 0 || atIndex === normalizedEmail.length - 1) {
console.log('エラー："@" の位置が不正です（先頭または末尾）');
} else {
console.log('"@" の位置は妥当です：', atIndex);
// ドメイン部分（@ 以降）を取り出します
const domain = normalizedEmail.slice(atIndex + 1);
console.log('ドメイン部分：', domain);
// ドメインに "." が含まれているかをチェックします
if (!domain.includes('.')) {
console.log('エラー：ドメイン部分に "." が含まれていません');
} else {
console.log('ドメイン部分に "." が含まれているため、最低限の形式は満たしています');
}
}
}
</script>
重要ポイントの深掘り
includes('@')で「@があるかどうか」をチェックしています。indexOf('@')と.lengthを使って、「@の位置が先頭・末尾ではないか」を確認しています。- ドメイン部分に
.が含まれているかをincludes('.')でチェックし、「最低限の形式」を確認しています。 - これは完全なバリデーションではありませんが、「明らかにおかしい入力」を弾くための第一歩になります。
Step 3：メールアドレスからユーザー名とドメインを分離する
メールアドレスは、ユーザー名@ドメイン という構造を持っています。 これを文字列操作で分離してみます。
<script>
const rawEmailInput = ' Taro.Example@Example.COM ';
const trimmedEmail = rawEmailInput.trim();
const normalizedEmail = trimmedEmail.toLowerCase();
if (!normalizedEmail.includes('@')) {
console.log('エラー：メールアドレスに "@" が含まれていません');
} else {
const atIndex = normalizedEmail.indexOf('@');
if (atIndex === 0 || atIndex === normalizedEmail.length - 1) {
console.log('エラー："@" の位置が不正です');
} else {
// ユーザー名部分（@ より前）
const localPart = normalizedEmail.slice(0, atIndex);
// ドメイン部分（@ より後）
const domainPart = normalizedEmail.slice(atIndex + 1);
console.log('ユーザー名部分：', localPart);
console.log('ドメイン部分：', domainPart);
// ユーザー名部分の文字数をチェックしてみます
const localLength = localPart.length;
if (localLength < 3) {
console.log('ユーザー名部分が少し短いかもしれません');
} else if (localLength > 20) {
console.log('ユーザー名部分が少し長すぎるかもしれません');
} else {
console.log('ユーザー名部分の長さは妥当です');
}
// ドメイン部分に "example.com" が含まれているかをチェックします
if (domainPart.includes('example.com')) {
console.log('このメールアドレスは example.com ドメインです');
} else {
console.log('このメールアドレスは example.com ドメインではありません');
}
}
}
</script>
ここで使っている文字列操作
slice(0, atIndex)：先頭から@の直前までを取り出し、ユーザー名部分としています。slice(atIndex + 1)：@の次の文字から末尾までを取り出し、ドメイン部分としています。.lengthでユーザー名部分の文字数をチェックし、簡単なコメントを付けています。includes('example.com')で特定ドメインかどうかを判定しています。
文字列操作テンプレート：ユーザー情報の整形とチェック
最後に、ユーザー名とメールアドレスをまとめて扱う「文字列操作テンプレート」を示します。 これは、Day 5後半の総まとめとして使える形になっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 5 後半：文字列操作テンプレート</title>
</head>
<body>
<h1>文字列操作テンプレート（ユーザー名＋メールアドレス）</h1>
<p>コンソールを開いて、処理の流れを確認してください。</p>
<script>
// ユーザーが入力した名前とメールアドレスの例です
const rawUserName = ' taRo ';
const rawEmailInput = ' Taro.Example@Example.COM ';
console.log('--- 生の入力値 ---');
console.log('ユーザー名：', `"${rawUserName}"`);
console.log('メールアドレス：', `"${rawEmailInput}"`);
// ユーザー名の整形
const trimmedUserName = rawUserName.trim();
const lowerUserName = trimmedUserName.toLowerCase();
const firstChar = lowerUserName.charAt(0);
const restChars = lowerUserName.slice(1);
const displayUserName = firstChar.toUpperCase() + restChars;
console.log('--- 整形後のユーザー名 ---');
console.log('表示用ユーザー名：', displayUserName);
console.log('ユーザー名の文字数：', displayUserName.length, '文字');
// メールアドレスの整形
const trimmedEmail = rawEmailInput.trim();
const normalizedEmail = trimmedEmail.toLowerCase();
console.log('--- 整形後のメールアドレス ---');
console.log('整形済みメールアドレス：', normalizedEmail);
// メールアドレスの簡単なチェック
if (!normalizedEmail.includes('@')) {
console.log('エラー：メールアドレスに "@" が含まれていません');
} else {
const atIndex = normalizedEmail.indexOf('@');
if (atIndex === 0 || atIndex === normalizedEmail.length - 1) {
console.log('エラー："@" の位置が不正です');
} else {
const localPart = normalizedEmail.slice(0, atIndex);
const domainPart = normalizedEmail.slice(atIndex + 1);
console.log('ユーザー名部分：', localPart);
console.log('ドメイン部分：', domainPart);
// ドメインに "." が含まれているかをチェック
if (!domainPart.includes('.')) {
console.log('エラー：ドメイン部分に "." が含まれていません');
} else {
console.log('ドメイン部分に "." が含まれているため、最低限の形式は満たしています');
}
// example.com ドメインかどうか
if (domainPart.includes('example.com')) {
console.log('このメールアドレスは example.com ドメインです');
} else {
console.log('このメールアドレスは example.com ドメインではありません');
}
}
}
// 最後に、ユーザー向けのメッセージを生成します
const welcomeMessage = `こんにちは、${displayUserName}さん。メールアドレス「${normalizedEmail}」での登録ありがとうございます。`;
console.log('--- 最終メッセージ ---');
console.log(welcomeMessage);
</script>
</body>
</html>
Day 5後半のまとめ
Day 5後半では、次のことを確認しました。
- ユーザー名を「表示用」に整形するために、
trim()・toLowerCase()・charAt()・slice()・toUpperCase()を組み合わせたこと - テンプレートリテラルと
.lengthを使って、ユーザー名に応じたメッセージやコメントを生成したこと - メールアドレスの前処理（正規化）と簡単な形式チェックを行い、「明らかにおかしい入力」を検出するロジックを書いたこと
- ユーザー名とメールアドレスをまとめて扱うテンプレートを通して、「文字列操作がユーザー体験と直結している」ことを意識したこと
このあたりまで自分の手で書き換えながら試してみると、「文字列をただ表示する」段階から、「文字列を加工して意味のある情報にする」段階へ、確実に進めているはずです。
Day 5：文字列操作とミニ課題のゴール
Day 5のミニ課題では、これまで学んだ文字列の連結・テンプレートリテラル・.length・文字列メソッドを総動員して、「自動自己紹介文ジェネレーター」を作っていきます。 名前・年齢・趣味・住んでいる場所などの情報を変数に入れ、それらを組み合わせて「自己紹介文」を自動生成する流れを、初心者向けにステップバイステップで解説していきます。
自動自己紹介文ジェネレーターのイメージをつかむ
どんな自己紹介を自動生成するか
まずは、ゴールとなる自己紹介文のイメージを言葉で整理します。
例：
こんにちは、Taroです。25歳で、東京に住んでいます。趣味はプログラミングと読書です。よろしくお願いします。
これを「手書きの文章」ではなく、「変数＋文字列操作」で組み立てるのが今回のミニ課題です。
Step 1：自己紹介に使う基本情報を変数で用意する
ユーザー情報を文字列・数値として定義する
まずは、自己紹介に使う情報を変数に保存します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 5：自動自己紹介文ジェネレーター</title>
</head>
<body>
<h1>自動自己紹介文ジェネレーター</h1>
<p>コンソールを開いて、生成された自己紹介文を確認してください。</p>
<script>
// 自己紹介に使う基本情報を変数に保存します
// 名前（文字列）
const rawName = ' taRo '; // わざと前後に空白、大文字小文字の揺れを入れています
// 年齢（数値）
const age = 25;
// 住んでいる場所（文字列）
const rawLocation = ' tokyo ';
// 趣味（文字列）
const rawHobby = ' Programming and Reading ';
console.log('--- 生の入力値 ---');
console.log('名前：', `"${rawName}"`);
console.log('年齢：', age);
console.log('場所：', `"${rawLocation}"`);
console.log('趣味：', `"${rawHobby}"`);
</script>
</body>
</html>
ここでは、あえて前後に空白や大文字・小文字の揺れを含めておき、後で文字列メソッドで整形していきます。
Step 2：文字列メソッドで「表示用の情報」に整形する
名前を「表示用」に整える
ユーザー名は、そのまま表示するのではなく、少し整形して「見栄えの良い形」にします。
<script>
// 名前の整形
const trimmedName = rawName.trim(); // 前後の空白を削除
const lowerName = trimmedName.toLowerCase(); // 小文字に統一
// 先頭の1文字を大文字にし、それ以降をそのままにします
const firstCharName = lowerName.charAt(0); // 先頭の1文字
const restCharsName = lowerName.slice(1); // 2文字目以降
const displayName = firstCharName.toUpperCase() + restCharsName;
console.log('整形後の名前：', displayName);
</script>
重要ポイント：
trim()で余計な空白を取り除きます。toLowerCase()で大文字・小文字の揺れをなくします。charAt(0)とslice(1)を組み合わせて「先頭だけ大文字」にすることで、英語名の見栄えを整えています。
場所と趣味も整形する
場所や趣味も、前後の空白を削除し、小文字に統一してから表示用に使います。
<script>
// 場所の整形
const trimmedLocation = rawLocation.trim();
const lowerLocation = trimmedLocation.toLowerCase();
const displayLocation = lowerLocation; // 今回は小文字のまま使います
console.log('整形後の場所：', displayLocation);
// 趣味の整形
const trimmedHobby = rawHobby.trim();
const displayHobby = trimmedHobby; // 今回は前後の空白だけ削除してそのまま使います
console.log('整形後の趣味：', displayHobby);
</script>
ここでは、場所は小文字のまま、趣味はそのまま表示用として使っています。 必要に応じて toUpperCase() や toLowerCase() を追加しても構いません。
Step 3：テンプレートリテラルで自己紹介文を組み立てる
自己紹介文の「型」をテンプレートリテラルで作る
整形した情報を使って、自己紹介文をテンプレートリテラルで組み立てます。
<script>
// 整形済みの情報を使って自己紹介文を生成します
const introduction = `こんにちは、${displayName}です。${age}歳で、${displayLocation}に住んでいます。趣味は${displayHobby}です。よろしくお願いします。`;
console.log('--- 自動生成された自己紹介文 ---');
console.log(introduction);
</script>
重要ポイント：
- テンプレートリテラル（\
...\）の中に${変数}を埋め込むことで、自然な日本語の文章を保ちながら変数を差し込めます。 +で連結するよりも、文章の構造が分かりやすくなります。
Step 4：.length を使って自己紹介文の長さをチェックする
自己紹介文の文字数を数える
自己紹介文が長すぎないか、短すぎないかを .length でチェックしてみます。
<script>
// 自己紹介文の文字数を取得します
const introLength = introduction.length;
console.log('自己紹介文の文字数：', introLength, '文字');
// 文字数に応じて簡単なコメントを付けます
if (introLength < 40) {
console.log('少し短めの自己紹介ですね。もう少し情報を足しても良いかもしれません。');
} else if (introLength <= 100) {
console.log('ちょうど良い長さの自己紹介ですね。');
} else {
console.log('少し長めの自己紹介ですね。読みやすさに気をつけましょう。');
}
</script>
ここでのポイント：
.lengthは文字列の「文字数」を返します。- 文字数に応じてコメントを変えることで、「自己紹介文ジェネレーター」が少しインタラクティブになります。
Step 5：テンプレートとして使える「自動自己紹介文ジェネレーター」完成版
最後に、ここまでの流れを1つのテンプレートとしてまとめます。 このテンプレートをコピーして、名前・年齢・場所・趣味を変えるだけで、誰でも自己紹介文を自動生成できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 5：自動自己紹介文ジェネレーター（テンプレート）</title>
</head>
<body>
<h1>自動自己紹介文ジェネレーター</h1>
<p>コンソールを開いて、生成された自己紹介文を確認してください。</p>
<script>
// --- Step 1: 生の入力値（ユーザー情報） ---
const rawName = ' taRo '; // 名前（前後に空白・大文字小文字の揺れあり）
const age = 25; // 年齢（数値）
const rawLocation = ' tokyo '; // 住んでいる場所
const rawHobby = ' Programming and Reading '; // 趣味
console.log('--- 生の入力値 ---');
console.log('名前：', `"${rawName}"`);
console.log('年齢：', age);
console.log('場所：', `"${rawLocation}"`);
console.log('趣味：', `"${rawHobby}"`);
// --- Step 2: 文字列メソッドで整形する ---
// 名前の整形
const trimmedName = rawName.trim(); // 前後の空白を削除
const lowerName = trimmedName.toLowerCase(); // 小文字に統一
const firstCharName = lowerName.charAt(0); // 先頭の1文字
const restCharsName = lowerName.slice(1); // 2文字目以降
const displayName = firstCharName.toUpperCase() + restCharsName;
// 場所の整形
const trimmedLocation = rawLocation.trim();
const lowerLocation = trimmedLocation.toLowerCase();
const displayLocation = lowerLocation; // 今回は小文字のまま使います
// 趣味の整形
const trimmedHobby = rawHobby.trim();
const displayHobby = trimmedHobby; // 前後の空白だけ削除してそのまま使います
console.log('--- 整形後の情報 ---');
console.log('表示用名前：', displayName);
console.log('表示用場所：', displayLocation);
console.log('表示用趣味：', displayHobby);
// --- Step 3: テンプレートリテラルで自己紹介文を生成する ---
const introduction = `こんにちは、${displayName}です。${age}歳で、${displayLocation}に住んでいます。趣味は${displayHobby}です。よろしくお願いします。`;
console.log('--- 自動生成された自己紹介文 ---');
console.log(introduction);
// --- Step 4: .length で自己紹介文の長さをチェックする ---
const introLength = introduction.length;
console.log('自己紹介文の文字数：', introLength, '文字');
if (introLength < 40) {
console.log('少し短めの自己紹介ですね。もう少し情報を足しても良いかもしれません。');
} else if (introLength <= 100) {
console.log('ちょうど良い長さの自己紹介ですね。');
} else {
console.log('少し長めの自己紹介ですね。読みやすさに気をつけましょう。');
}
// --- おまけ：名前の文字数に応じたコメント ---
const nameLength = displayName.length;
if (nameLength <= 3) {
console.log('名前が短くて覚えやすいですね！');
} else if (nameLength <= 8) {
console.log('ちょうど良い長さの名前ですね！');
} else {
console.log('少し長めの名前ですね！');
}
console.log('--- 自動自己紹介文ジェネレーターの処理が完了しました ---');
</script>
</body>
</html>
Day 5ミニ課題のまとめ
Day 5の「自動自己紹介文ジェネレーター」では、次のことを体験しました。
- 文字列の連結とテンプレートリテラルを使って、自然な日本語の自己紹介文を自動生成したこと
.lengthを使って、自己紹介文や名前の文字数をチェックし、コメントを変えるロジックを書いたことtrim()・toLowerCase()・charAt()・slice()・toUpperCase()といった文字列メソッドを組み合わせて、「表示用の情報」を整形したこと
このテンプレートをベースに、項目を増やしたり、文章のパターンを増やしたりして遊んでみると、文字列操作の感覚がぐっと馴染んでいきます。