JavaScriptでユーザー名を自動生成してみて、配列操作の理解が一段深まった話

公開日 2025/12/20 最終更新日 2025/12/20

ユーザー名生成ロジックを実装

ユーザー名生成ロジックを実装

今日は JavaScript のコードの中で、ユーザー名を自動で作る処理を実装しました。

複数のアカウント情報を配列で管理
`forEach` を使って各アカウントを処理
`owner`（名前の文字列）からユーザー名を生成
生成したユーザー名をオブジェクトに追加

「配列の中のオブジェクトに、新しい情報を付け加える処理を実装しました」という内容です。

完成コードの抜粋は以下の通りです。今日は最後の20行あたりから集中して取り組めました。

const account1 = {
  owner: 'Jonas Schmedtmann',
  movements: [200, 450, -400, 3000, -650, -130, 70, 1300],
  interestRate: 1.2, // %
  pin: 1111,
};

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];

for (const [i, movement] of movements.entries()) {
  if (movement > 0) {
    console.log(`Movement ${i + 1}: You deposited ${movement}`);
  } else {
    console.log(`Movement ${i + 1}: You withdraw ${Math.abs(movement)}`);
  }
}

console.log('---- FOREACH ------');
movements.forEach(function (mov, i, arr) {
  if (mov > 0) {
    console.log(`Movement ${i + 1}: You deposited ${mov}`);
  } else {
    console.log(`Movement ${i + 1}: You withdraw ${Math.abs(mov)}`);
  }
});

const account2 = {
  owner: 'Jessica Davis',
  movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],
  interestRate: 1.5,
  pin: 2222,
};

const account3 = {
  owner: 'Steven Thomas Williams',
  movements: [200, -200, 340, -300, -20, 50, 400, -460],
  interestRate: 0.7,
  pin: 3333,
};

const account4 = {
  owner: 'Sarah Smith',
  movements: [430, 1000, 700, 50, 90],
  interestRate: 1,
  pin: 4444,
};

const accounts = [account1, account2, account3, account4];

// Elements
const labelWelcome = document.querySelector('.welcome');
const labelDate = document.querySelector('.date');
const labelBalance = document.querySelector('.balance__value');
const labelSumIn = document.querySelector('.summary__value--in');
const labelSumOut = document.querySelector('.summary__value--out');
const labelSumInterest = document.querySelector('.summary__value--interest');
const labelTimer = document.querySelector('.timer');

const containerApp = document.querySelector('.app');
const containerMovements = document.querySelector('.movements');

const btnLogin = document.querySelector('.login__btn');
const btnTransfer = document.querySelector('.form__btn--transfer');
const btnLoan = document.querySelector('.form__btn--loan');
const btnClose = document.querySelector('.form__btn--close');
const btnSort = document.querySelector('.btn--sort');

const inputLoginUsername = document.querySelector('.login__input--user');
const inputLoginPin = document.querySelector('.login__input--pin');
const inputTransferTo = document.querySelector('.form__input--to');
const inputTransferAmount = document.querySelector('.form__input--amount');
const inputLoanAmount = document.querySelector('.form__input--loan-amount');
const inputCloseUsername = document.querySelector('.form__input--user');
const inputClosePin = document.querySelector('.form__input--pin');

const displayMovements = function (movements) {
  containerMovements.innerHTML = '';

  movements.forEach(function (mov, i) {
    const type = mov > 0 ? 'deposit' : 'withdrawal';

    const html = `
      <div class="movements__row">
        <div class="movements__type movements__type--${type}">
          ${i + 1} ${type}
        </div>
        <div class="movements__value">${mov}</div>
      </div>
    `;

    containerMovements.insertAdjacentHTML('afterbegin', html);
  });
};
displayMovements(account1.movements);

const createUsernames = function (accs) {
  accs.forEach(function (acc) {
    acc.username = acc.owner
      .toLowerCase()
      .split(' ')
      .map(name => name[0])
      .join('');
  });
};

createUsernames(accounts);
console.log(accounts);

② 実際に触ってみて分かったことは「配列と文字列はセットで考える」

やってみて、いくつか気づいたことがありました。

配列の処理は、文字列操作と組み合わせる場面が多い
データを「加工してから使う」流れを意識すると理解しやすい
`forEach` は、こうした一括処理にかなり向いている

const createUsernames = function (accs) {
  accs.forEach(function (acc) {
    acc.username = acc.owner   // ex.'Jonas Schmedtmann'
      .toLowerCase()           // 'jonas schmedtmann'
      .split(' ')              // ['jonas', 'schmedtmann']
      .map(name => name[0])    // ['j', 's']
      .join('');               // 'js'
  });
};

今まではコードを追うだけでしたが、「この順番で処理しているんだな」と流れが見えるようになりました。

ひとつ疑問に思ったこと、こういった「小文字にして、先頭の文字だけ取り出す」をことはありえるのか？ということ。これについては、AIに以下の様に教えてもらえました。

「そのまま同じ形」で使うことは少ないけど、考え方はめちゃくちゃ実務で使う」

たとえば「表示名からIDを作る」場合は、以下のようになるでしょう。

displayName = ‘Taro Yamada’;
userId = ‘taro_yamada’;

私が今回forEachの一括処理と同じ流れで

小文字にする
区切る
つなげる

をすれば「userId = ‘taro_yamada’;」も生成できそうです。

③ 実装目線でのメモ｜あとから使いやすい形に整える

今回のコードでやっていることは、とてもシンプルです。

名前をすべて小文字にする
スペースで分割する
それぞれの先頭文字を取り出す
ひとつの文字列にまとめる

この処理を関数にしておくことで、
あとからアカウントが増えても、そのまま使い回せます。

「今動く」だけでなく、あとで手を加えやすい形にしておくのは大事だなと感じました。

④ 学び直しについて一言｜なんとなく理解していた部分が整理できた

正直、配列や文字列のメソッドはこれまで なんとなく使っていた 部分が多かったです。

今回あらためて実装してみて、「なぜこの順番なのか」を言葉にできたのがよかったです。

⑤まとめ

コーディングでも資格勉強でも自分の場合は、小さな処理でも、実際に書いて確認する方が理解が深まると感じました。これかもコツコツ学習のログをつけていこうと思います。

また私は普段はWebまわりの制作をしています。

たとえば
・会社のホームページをそろそろ作りたい
・昔作ったサイトを今っぽくしたい

みたいな話でも大丈夫なので、気になったら気軽にお声がけください。

ここまで読んでいただき、ありがとうございました。
同じように学び直している方の参考になればうれしいです。

タグ