引数の数が決まっていない場合はスプレット構文の出番である

2024-06-13

プログラミング

スプレッド構文を使用すると、関数が不定数の引数を受け取ることができるようになり、柔軟な設計が可能になります。
ChatGPT

住所変換機のコード整理の続きだ。

今回は「clearOtherFields」という「他のフィールドの値をクリアする」関数の修正だ。

この関数は、間違った郵便番号が入力された時などに実行され、入力してある番地、建物名、部屋番号/階数、日本語の住所、英語の住所をそれぞれクリアする。

以下はそのコードだ。

JavaScript

function clearOtherFields() {
  document.getElementById('block_lot').textContent = ''; // 番地
  document.getElementById('building').textContent = ''; // 建物名
  document.getElementById('room').textContent = ''; // 部屋番号or階数
  document.getElementById('address').textContent = ''; // 日本語の住所
  document.getElementById('english_address').textContent = ''; // 英語の住所
}

以前投稿した「フォーム入力値は引数として関数に渡すべし」の記事では、再利用性と保守しやすさを高めるために、ページ上の入力値を関数の外で取得し、引数として関数に渡すべきだという趣旨の内容を取り上げた。

この「clearOtherFields」関数はまさにそのような、関数の中で入力値を取得している仕様なので、修正しようと思う。

うーん、期待したのと違う。なぜなら、引数の数が決まっていなく、渡された数だけページ上要素の内容をクリアしたいからだ。今の修正では、数も項目もぜんぶ固定されてしまっている。

望む形になってきたが、まだ改善したいところがある。呼び出し例でわかるように、引数が長すぎるのだ。これでは毎回しんどそう。

簡潔でスマートな望ましい形になった。エラー処理もつけたいが、私が書き間違いをしなければエラーが発生しないので、つけないことにする。

と、この修正後の関数を利用しようとしたが、改めて住所変換機の各要素の有効・無効になるタイミングをチェックしたところ、個別にこれを有効に、あれを無効にするといった対応は実は必要がなく、郵便番号以外の要素は常にいっしょに有効または無効化されていることに気づいた。

これでは、要素の値を引数として渡すメリットはほとんどなくなる。せっかく修正してもらったが、元のコードを使い続けることにする。

ただ、「clearFieldsExceptPostalCode」と名前をもっと中身をイメージしやすいものにした。

また、これは後でChatGPTにコード全体を確認してもらうときに言われたのだが、下記の３つは入力可能なフィールドのため、textContentではなく、valueとすべきだそうだ。

JavaScript

  document.getElementById('block_lot').textContent = ''; // 番地
  document.getElementById('building').textContent = ''; // 建物名
  document.getElementById('room').textContent = ''; // 部屋番号or階数

上記の指摘を反映した最終的なコートは次のとおりだ。

JavaScript

/**
 * 郵便番号以外の入力フィールドの内容をクリア
 * 
 * @returns {void} この関数は何も返しません。
 */
function clearFieldsExceptPostalCode() {
  document.getElementById('block_lot').value = ''; // 番地
  document.getElementById('building').value = ''; // 建物名
  document.getElementById('room').value = ''; // 部屋番号or階数
  document.getElementById('address').textContent = ''; // 日本語の住所
  document.getElementById('english_address').textContent = ''; // 英語の住所
}

今回はここまでだ。

といいたいところだが、上記の内容だと記事タイトルがつけにくいので少し補足をする。

今回初見の文法である、「…elements」という、不定数の引数を表すであろう書き方についてだ。

どうも、それは「スプレッド構文」というらしい。具体的には、関数の定義時に使われる「…ほにゃらら」はレスト構文といい、関数呼び出し時に１個１個書くのを「スプレッド構文」というようだ。いつか使う機会があったらまた取り上げたいと思う。

今度こそ本当に終わりだ。

関連