今度は「文字列処理」をテーマに、関数をつなげて「名前を整形して表示する」流れを作ってみましょう。
ステップごとの関数
1. 前後の空白を削除する
入力された名前に余計なスペースが入っていることがあります。
function trimName(name) {
return name.trim();
}
2. すべて小文字に変換する
大文字・小文字が混ざっていても統一できます。
function toLowerCaseName(name) {
return name.toLowerCase();
}
3. 頭文字を大文字にする（キャピタライズ）
「taro」→「Taro」のように整形します。
function capitalize(name) {
return name.charAt(0).toUpperCase() + name.slice(1);
}
4. フルネームを整形する
姓と名を受け取り、整形して結合します。
function formatFullName(firstName, lastName) {
const cleanFirst = capitalize(toLowerCaseName(trimName(firstName)));
const cleanLast = capitalize(toLowerCaseName(trimName(lastName)));
return `${cleanFirst} ${cleanLast}`;
}
関数をつなげて使う
console.log(formatFullName(" taRo ", "yaMADA "));
// → "Taro Yamada"
console.log(formatFullName(" miKa ", " suZuKi"));
// → "Mika Suzuki"
👉 処理の流れ
trimNameで余計な空白を削除toLowerCaseNameで小文字に統一capitalizeで頭文字だけ大文字に- 最後に結合してフルネームに
応用例
例えば「名簿リスト」を整形することもできます。
const rawNames = [
[" taRo ", "yaMADA "],
["miKa", " suZuKi"],
[" KEN ", "tanaka "]
];
const formatted = rawNames.map(([first, last]) => formatFullName(first, last));
console.log(formatted);
// → ["Taro Yamada", "Mika Suzuki", "Ken Tanaka"]
ポイント
- 文字列処理も「小さな関数」に分けると読みやすい
trim/toLowerCase/toUpperCase/sliceなど基本メソッドを組み合わせる- 配列と組み合わせると「名簿処理」など実用的なコードになる
練習問題
次のような入力を受け取り、整形して「苗字, 名前」の形式で表示する関数を作ってみてください。
formatNameReversed(" miKa ", " suZuKi")
// → "Suzuki, Mika"