基礎から学ぶJavaScript入門 90日コース | JavaScriptを動かして慣れる － Day 5：文字列操作

// 文字列の基本的な連結例です

const firstName = "太郎";
const lastName = "山田";

const fullName = lastName + " " + firstName; // 姓と名の間にスペースを入れています

console.log(fullName); // 山田 太郎

const userName = "太郎";
const greeting = "こんにちは、" + userName + "さん！";

console.log(greeting); // こんにちは、太郎さん！

// テンプレートリテラルの基本例です

const userName = "太郎";
const age = 25;

const message = `こんにちは、${userName}さん。あなたは${age}歳ですね。`;

console.log(message);
// こんにちは、太郎さん。あなたは25歳ですね。

const price = 2000;
const taxRate = 0.1;
const tax = price * taxRate;
const total = price + tax;

const receipt = `
商品価格：${price}円
消費税：${tax}円
合計：${total}円
`;

console.log(receipt);
/*
商品価格：2000円
消費税：200円
合計：2200円
*/

// .length の基本例です

const userName = "太郎";
const email = "taro@example.com";

console.log(userName.length); // 2（太郎は2文字）
console.log(email.length);    // メールアドレスの文字数が表示されます

const password = "abc123";

if (password.length < 8) {
  console.log("パスワードは8文字以上にしてください。");
} else {
  console.log("パスワードの長さはOKです。");
}

const text = "JavaScript";

console.log(text.toUpperCase()); // "JAVASCRIPT"
console.log(text.toLowerCase()); // "javascript"

const rawInput = "  hello@example.com  ";

const cleaned = rawInput.trim();

console.log(cleaned); // "hello@example.com"

const email = "taro@example.com";

console.log(email.includes("@"));       // true（@ が含まれている）
console.log(email.includes("example")); // true
console.log(email.includes("gmail"));   // false

const email = "taro@example.com";

const atIndex = email.indexOf("@");

console.log(atIndex); // @ の位置（インデックス）が表示されます

// ==============================
// ユーザー名を使ったメッセージ生成
// ==============================

const userName = "太郎";

// 文字列連結でメッセージを作る例
const greeting1 = "こんにちは、" + userName + "さん。ようこそ！";
console.log(greeting1);

// テンプレートリテラルでメッセージを作る例
const greeting2 = `こんにちは、${userName}さん。ログインありがとうございます。`;
console.log(greeting2);

// 名前の長さによってメッセージを少し変えてみる例です

if (userName.length <= 2) {
  console.log(`短いお名前ですね、${userName}さん。覚えやすいです！`);
} else {
  console.log(`素敵なお名前ですね、${userName}さん。`);
}

// ==============================
// メールアドレスの簡単な処理
// ==============================

const email = "  Taro.Example@Example.com  "; // わざとスペースと大文字を混ぜています

console.log("元のメールアドレス：" + email);

// 前後の空白を削除します
const trimmedEmail = email.trim();

console.log("trim 後：" + trimmedEmail);

// 小文字に変換して、表記ゆれをなくします
const normalizedEmail = trimmedEmail.toLowerCase();

console.log("小文字に変換後：" + normalizedEmail);

// @ が含まれているか簡易チェックします
const hasAtMark = normalizedEmail.includes("@");

if (!hasAtMark) {
  console.log("メールアドレスに @ が含まれていません。入力を確認してください。");
} else {
  console.log("@ が含まれているので、形式としては一応OKそうです。");
}

// @ の位置を調べて、ユーザー名部分とドメイン部分を分けてみます
const atIndex = normalizedEmail.indexOf("@");

if (atIndex === -1) {
  console.log("メールアドレスの形式が正しくありません。");
} else {
  const localPart = normalizedEmail.slice(0, atIndex);      // @ より前の部分
  const domainPart = normalizedEmail.slice(atIndex + 1);    // @ より後ろの部分

  console.log("ユーザー名部分：" + localPart);
  console.log("ドメイン部分：" + domainPart);

  // テンプレートリテラルで説明メッセージを作ってみます
  const infoMessage = `
メールアドレスの解析結果：
- ユーザー名：${localPart}
- ドメイン：${domainPart}
`;
  console.log(infoMessage);
}

// ==============================
// Day 5：文字列操作 練習テンプレート
// ユーザー名を使ったメッセージ生成＋メールアドレス処理
// ==============================

// 1. ユーザー名を使ったメッセージ生成

const userName = "太郎"; // 自分の名前に書き換えてOKです

console.log("=== ユーザー名を使ったメッセージ生成 ===");

// 文字列連結でメッセージ
const greetingConcat = "こんにちは、" + userName + "さん。ようこそ！";
console.log(greetingConcat);

// テンプレートリテラルでメッセージ
const greetingTemplate = `こんにちは、${userName}さん。ログインありがとうございます。`;
console.log(greetingTemplate);

// 名前の長さを使ったメッセージ
if (userName.length <= 2) {
  console.log(`短いお名前ですね、${userName}さん。覚えやすいです！`);
} else {
  console.log(`素敵なお名前ですね、${userName}さん。`);
}

// 2. メールアドレスの簡単な処理

console.log("=== メールアドレスの簡単な処理 ===");

// わざとスペースと大文字を混ぜたメールアドレス
const rawEmail = "  Taro.Example@Example.com  ";

console.log("元のメールアドレス：" + rawEmail);

// 前後の空白を削除
const trimmedEmail = rawEmail.trim();
console.log("trim 後：" + trimmedEmail);

// 小文字に変換
const normalizedEmail = trimmedEmail.toLowerCase();
console.log("小文字に変換後：" + normalizedEmail);

// @ が含まれているかチェック
const hasAtMark = normalizedEmail.includes("@");
console.log("@ が含まれているか：" + hasAtMark);

// @ の位置を調べて、ユーザー名部分とドメイン部分を分ける
const atIndex = normalizedEmail.indexOf("@");

if (atIndex === -1) {
  console.log("メールアドレスの形式が正しくありません。");
} else {
  const localPart = normalizedEmail.slice(0, atIndex);   // @ より前
  const domainPart = normalizedEmail.slice(atIndex + 1); // @ より後ろ

  console.log("ユーザー名部分：" + localPart);
  console.log("ドメイン部分：" + domainPart);

  const infoMessage = `
メールアドレスの解析結果：
- ユーザー名：${localPart}
- ドメイン：${domainPart}
`;
  console.log(infoMessage);
}

// 文字列連結の基本例です

const name = "太郎";
const age = 25;
const hobby = "映画鑑賞";

// 「こんにちは、太郎です。」という自己紹介文を作る
const intro1 = "こんにちは、" + name + "です。";

console.log(intro1); // こんにちは、太郎です。

const intro2 = "こんにちは、" + name + "です。" +
               age + "歳で、趣味は" + hobby + "です。";

console.log(intro2);
// こんにちは、太郎です。25歳で、趣味は映画鑑賞です。

// テンプレートリテラルで自己紹介文を作る例です

const name = "太郎";
const age = 25;
const hobby = "映画鑑賞";
const city = "東京";

// 読みやすい自己紹介文
const intro = `こんにちは、${name}です。${age}歳で、${city}に住んでいます。趣味は${hobby}です。`;

console.log(intro);
// こんにちは、太郎です。25歳で、東京に住んでいます。趣味は映画鑑賞です。

const birthYear = 1999;
const currentYear = 2024;
const age = currentYear - birthYear;

const introWithCalc = `こんにちは、${name}です。生まれ年は${birthYear}で、今は${age}歳です。`;

console.log(introWithCalc);

const intro = `こんにちは、太郎です。25歳で、東京に住んでいます。趣味は映画鑑賞です。`;

console.log(intro.length); // 自己紹介文の文字数が表示されます

if (intro.length > 50) {
  console.log("自己紹介文が少し長めです。もう少し短くしてもよいかもしれません。");
} else {
  console.log("自己紹介文の長さはちょうどよさそうです。");
}

const rawName = "  太郎  ";
const cleanedName = rawName.trim();

console.log(cleanedName); // "太郎"

const nickname = "taro";
console.log(nickname.toUpperCase()); // "TARO"
console.log(nickname.toLowerCase()); // "taro"

const hobbyDescription = "映画鑑賞と読書が好きです。";

console.log(hobbyDescription.includes("映画")); // true
console.log(hobbyDescription.includes("ゲーム")); // false

// ==============================
// Day 5 ミニ課題：自動自己紹介文ジェネレーター
// ==============================

// 自己紹介に使う基本情報を用意します

// 名前（前後にスペースが入っている想定で書いています）
const rawName = "  山田太郎  ";

// 年齢
const age = 25;

// 住んでいる場所
const city = "東京";

// 趣味（複数でもOKです）
const rawHobby = "  映画鑑賞と読書  ";

// ひと言コメント
const rawComment = "  JavaScriptを勉強中です！  ";

// 前後の空白を削除して、きれいな文字列に整えます

const name = rawName.trim();
const hobby = rawHobby.trim();
const comment = rawComment.trim();

console.log("名前：" + name);
console.log("趣味：" + hobby);
console.log("ひと言：" + comment);

// テンプレートリテラルで自己紹介文を生成します

const selfIntro = `
こんにちは、${name}です。
${age}歳で、${city}に住んでいます。
趣味は${hobby}です。
${comment}
`;

console.log("=== 自動生成された自己紹介文 ===");
console.log(selfIntro);

// 自己紹介文の長さをチェックします

const introLength = selfIntro.length;

console.log("自己紹介文の文字数：" + introLength);

if (introLength > 80) {
  console.log("自己紹介文が少し長めです。もう少し短くしてもよいかもしれません。");
} else {
  console.log("自己紹介文の長さはちょうどよさそうです。");
}

// 趣味の内容に応じてメッセージを変えてみます

if (hobby.includes("映画")) {
  console.log("映画がお好きなんですね！最近観たおすすめ作品があれば教えてください。");
}

if (hobby.includes("読書")) {
  console.log("読書がお好きなんですね！好きなジャンルは何でしょう？");
}

if (!hobby.includes("映画") && !hobby.includes("読書")) {
  console.log("ユニークな趣味をお持ちですね！ぜひ詳しく教えてください。");
}

// ==============================
// Day 5：自動自己紹介文ジェネレーター テンプレート
// ==============================

// 1. 自己紹介用のデータを用意する

const rawName = "  山田太郎  ";           // 前後にスペースが入っていてもOK
const age = 25;
const city = "東京";
const rawHobby = "  映画鑑賞と読書  ";
const rawComment = "  JavaScriptを勉強中です！  ";

// 2. 文字列メソッドで入力を整える

const name = rawName.trim();
const hobby = rawHobby.trim();
const comment = rawComment.trim();

console.log("=== 整形後のデータ ===");
console.log("名前：" + name);
console.log("年齢：" + age);
console.log("住んでいる場所：" + city);
console.log("趣味：" + hobby);
console.log("ひと言：" + comment);

// 3. テンプレートリテラルで自己紹介文を生成する

const selfIntro = `
こんにちは、${name}です。
${age}歳で、${city}に住んでいます。
趣味は${hobby}です。
${comment}
`;

console.log("=== 自動生成された自己紹介文 ===");
console.log(selfIntro);

// 4. 自己紹介文の長さをチェックする

const introLength = selfIntro.length;

console.log("自己紹介文の文字数：" + introLength);

if (introLength > 80) {
  console.log("自己紹介文が少し長めです。もう少し短くしてもよいかもしれません。");
} else {
  console.log("自己紹介文の長さはちょうどよさそうです。");
}

// 5. 趣味の内容に応じてメッセージを変える（おまけ）

console.log("=== 趣味に応じたメッセージ ===");

if (hobby.includes("映画")) {
  console.log("映画がお好きなんですね！最近観たおすすめ作品があれば教えてください。");
}

if (hobby.includes("読書")) {
  console.log("読書がお好きなんですね！好きなジャンルは何でしょう？");
}

if (!hobby.includes("映画") && !hobby.includes("読書")) {
  console.log("ユニークな趣味をお持ちですね！ぜひ詳しく教えてください。");
}