JavaScript | 「引数」を使って関数にデータを渡す

JavaScript JavaScript
2020.08.02
スポンサーリンク

買い物の例題

基本 買い物合計を計算する

  • 課題 単価 price と個数 count を受け取り合計を返す。count が未指定なら 1。
function calcTotal(price, count = 1) {
  return price * count;
}

// テスト
console.log(calcTotal(300));      // 300
console.log(calcTotal(300, 4));   // 1200
JavaScript
  • ポイント デフォルト引数で未指定を安全に扱う。

中級 割引を適用する

  • 課題 price と count と割引率 discount を受け取り、割引後の合計を返す。割引率は 0 から 1 の間。未指定時は 0。
function calcDiscountedTotal(price, count = 1, discount = 0) {
  const total = price * count;
  return total * (1 - discount);
}

// テスト
console.log(calcDiscountedTotal(1000, 2, 0.1)); // 1800
console.log(calcDiscountedTotal(1000));         // 1000
JavaScript
  • ポイント 割引率は小数で表す。返り値は数値なので通貨表示は別処理で。

発展 複数商品の合計と送料ルール

  • 課題 複数商品の配列を受け取り合計を返す。送料は合計が5000未満なら500、以上なら無料。
function sumCart(items) {
  // items は [{ price: 100, count: 2 }, ...]
  let subtotal = 0;
  for (let i = 0; i < items.length; i++) {
    subtotal += items[i].price * (items[i].count || 1);
  }
  const shipping = subtotal < 5000 ? 500 : 0;
  return { subtotal, shipping, total: subtotal + shipping };
}

// テスト
console.log(sumCart([{price:1200, count:2}, {price:800}])); 
// { subtotal: 3200, shipping: 500, total: 3700 }
JavaScript
  • ポイント count が未指定でも 1 として扱う。オブジェクト引数で拡張しやすい。

時間計算の例題

基本 秒を分秒に変換する

  • 課題 秒を受け取り「分」と「秒」を返す関数を作る。
function toMinSec(totalSeconds) {
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return { minutes, seconds };
}

// テスト
console.log(toMinSec(125)); // { minutes: 2, seconds: 5 }
JavaScript
  • ポイント floor と剰余を使う基本テクニック。

中級 時刻の加算

  • 課題 開始時刻と経過秒を受け取り、新しい時刻を “HH:MM:SS” で返す。
function addSecondsToTime(h, m, s, add) {
  let total = h * 3600 + m * 60 + s + add;
  total = ((total % 86400) + 86400) % 86400; // 日付をまたいでも0-86399に正規化
  const nh = Math.floor(total / 3600);
  const nm = Math.floor((total % 3600) / 60);
  const ns = total % 60;
  const pad = n => String(n).padStart(2, '0');
  return `${pad(nh)}:${pad(nm)}:${pad(ns)}`;
}

// テスト
console.log(addSecondsToTime(23, 59, 30, 90)); // 00:01:00
JavaScript
  • ポイント 正規化で日をまたいでも安全に扱う。padStart で見やすく表示。

発展 複数イベントの合計時間を計算する

  • 課題 イベント配列（各イベントは秒数）を受け取り合計時間を “H時間M分S秒” で返す。
function totalEventTime(events) {
  const total = events.reduce((a, b) => a + b, 0);
  const h = Math.floor(total / 3600);
  const m = Math.floor((total % 3600) / 60);
  const s = total % 60;
  return `${h}時間${m}分${s}秒`;
}

// テスト
console.log(totalEventTime([300, 1500, 7200])); // 2時間40分0秒
JavaScript
  • ポイント reduce で合計。出力フォーマットは好みに合わせて調整。

文字整形の例題

基本 名前を整形する

  • 課題 姓と名を受け取り「姓 名」の形式で返す。どちらかが未指定なら存在する方だけ返す。
function formatName(first = '', last = '') {
  if (!first && !last) return '';
  if (!first) return last;
  if (!last) return first;
  return `${last} ${first}`;
}

// テスト
console.log(formatName('太郎', '山田')); // 山田 太郎
console.log(formatName('太郎'));         // 太郎
JavaScript
  • ポイント 空文字や undefined を考慮して条件分岐する。

中級 文字列のトリムと大文字小文字変換

  • 課題 テキストとオプションを受け取り、trim や toUpperCase を適用する。オプションはオブジェクトで渡す。
function cleanText(text, options = { trim: true, upper: false }) {
  let result = text;
  if (options.trim) result = result.trim();
  if (options.upper) result = result.toUpperCase();
  return result;
}

// テスト
console.log(cleanText('  hello  '));                      // 'hello'
console.log(cleanText('  hello  ', { trim: true, upper: true })); // 'HELLO'
JavaScript
  • ポイント オプションをオブジェクトで受けると順序に依存しない。

発展 複数ワードをキャメルケースに変換する

  • 課題 複数の語を受け取りキャメルケースの文字列を返す。最初の単語は小文字。
function toCamelCase(...words) {
  if (words.length === 0) return '';
  const first = words[0].toLowerCase();
  const rest = words.slice(1).map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase());
  return [first, ...rest].join('');
}

// テスト
console.log(toCamelCase('hello', 'WORLD', 'javaScript')); // helloWorldJavascript
JavaScript
  • ポイント 可変長引数で単語数自由。文字の正規化に注意。

ゲームのスコアの例題

基本 スコア加算

  • 課題 現在のスコアと加点を受け取り新しいスコアを返す。加点が未指定なら 0。
function addScore(current, add = 0) {
  return current + add;
}

// テスト
console.log(addScore(100));     // 100
console.log(addScore(100, 50)); // 150
JavaScript
  • ポイント デフォルトで安全に扱う。

中級 コンボボーナスを計算する

  • 課題 基本点 base とコンボ数 combo を受け取り、combo に応じた倍率を掛けて返す。倍率は 1 + combo * 0.1。
function comboScore(base, combo = 0) {
  const multiplier = 1 + combo * 0.1;
  return Math.floor(base * multiplier);
}

// テスト
console.log(comboScore(200, 0)); // 200
console.log(comboScore(200, 3)); // 260
JavaScript
  • ポイント Math.floor で整数にする。倍率は簡単な式で可変。

発展 ランキングへのスコア登録

  • 課題 ユーザー名とスコアを受け取り、既存のランキング配列に挿入して上位 N を返す。ランキングは [{name, score}, …] の形式。
function updateRanking(ranking, name, score, maxEntries = 5) {
  ranking.push({ name, score });
  ranking.sort((a, b) => b.score - a.score);
  return ranking.slice(0, maxEntries);
}

// テスト
const r = [{name:'A', score:300}, {name:'B', score:250}];
console.log(updateRanking(r, 'C', 280));
// [{name:'A', score:300}, {name:'C', score:280}, {name:'B', score:250}]
JavaScript
  • ポイント 引数は既存配列を受け取り更新する設計。必要ならコピーして破壊的変更を避ける。

使い方と練習のコツ

  • 小さな関数をひとつずつ作ってテストする。console.log で期待と結果を比べる。
  • オプションはオブジェクトで受けると順序ミスを減らせる。
  • 可変長引数は「数が変わる」ケースで強力。必須値は普通の引数にする。
  • 実際にブラウザのコンソールや Node.js でコードを動かしてみる。
前へ次へ
12345
スポンサーリンク
タイトルとURLをコピーしました