【デイトラ学習記録】DAY11 関数 – フロントエンド開発編

今回はJavaScriptの関数について学習しました。

基本的な内容は学習済みなので、複雑な処理のみ掻い摘んでキャッチアップしました。

関数 Webアプリ開発コースフロントエンド開発編

フロントエンド領域の開発を学んでキャリアの幅を広げよう

配列と関数を組み合わせて使用する例

JavaScript

/**
 * 配列の名前に指定した文字が含まれるか検索フィルタする関数
 *
 * @param {string} names 検索対象の名前の配列
 * @param {string} substring 検索ワード
 */

function filterNamesBySubstrings(names, substring) {
  const filteredNames = [];

  for (let i = 0; i < names.length; i++) {
    if (names[i].includes(substring)) {
      filteredNames.push(names[i]);
    }
  }

  return filteredNames;
}

const names = ["John", "Paul", "George", "Ringo"];
const substring = "0";
const result = filterNamesBySubstrings(names, substring);
console.log(result); // ["John", "George", "Ringo"]

filterNamesBySubstrings() の引数に以下を渡す
- 検索対象の名前の配列
- 検索ワード
関数の中で、空の配列を用意する。const filteredNames = [];
その配列の中に、検索対象の名前の配列から、検索ワードに一致する名前のみ抽出する。
return filteredNames; で返す

コールバック関数

普段Web制作では使う機会の少ないコールバック関数を学びました。

JavaScript

/**
 * 名前を受け取り、アラートで挨拶する関数
 *
 * @param {string} name
 */
function greeting(name) {
  alert(`Hello, ${name}!`);
}

/**
 * ユーザーの名前を入力してもらい、コールバック関数で処理する関数
 *
 * @param {function} callback
 */
function processUserInput(callback) {
  const name = prompt("Please enter your name.");
  callback(name);
}

processUserInput(greeting);

処理の流れ

greeting 関数の定義
- 引数 name を受け取り、alert を使って Hello, [name]! という挨拶を表示します。
processUserInput 関数の定義
- ユーザーに prompt で名前を入力してもらい、その名前をコールバック関数（callback）に渡して処理します。
processUserInput の実行
- greeting 関数をコールバックとして渡します。
  これにより、ユーザーが入力した名前が greeting 関数に渡されて、アラートが表示されます。

使っている関数のメモ

Window.prompt() – Web API | MDN

window.prompt() は、ユーザーにテキストを入力するように促すダイアログをオプションのメッセージと共に表示し、ユーザーがテキストを送信するかダイアログをキャンセルするまで待機するようにブラウザーに指示します。

Callback function (コールバック関数) – MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

コールバック関数は、引数として他の関数に渡され、外側の関数の中で呼び出されて、何らかのルーチンやアクションを完了させる関数のことです。

prompt()
- ユーザーにテキストを入力するように促すダイアログをオプションのメッセージと共に表示し、ユーザーがテキストを送信するかダイアログをキャンセルするまで待機するようにブラウザーに指示します。
callback()
- 引数として他の関数に渡され、外側の関数の中で呼び出されて、何らかのルーチンやアクションを完了させる関数のことです。

その他のコールバック関数の使用例

JavaScript

/**
 * 数字を2倍にして結果を表示する関数
 *
 * @param {number} number 入力された数字
 */
function doubleNumber(number) {
  alert(`結果: ${number * 2}`);
}

/**
 * ユーザーに数字を入力してもらい、コールバック関数で処理する関数
 *
 * @param {function} callback 処理を行うコールバック関数
 */
function processUserNumber(callback) {
  const input = prompt("数字を入力してください。");
  const number = parseFloat(input); // 文字列を数値に変換
  if (!isNaN(number)) {
    callback(number);
  } else {
    alert("有効な数字を入力してください。");
  }
}

processUserNumber(doubleNumber);

感想

コールバック関数は、Web制作では使ったことがないので、しっかりとキャッチアップしました。
最初は少しクセがあるように感じ、なんだか処理の順番が逆な感じもしましたが、理解できました💡