関数に処理をまとめよう

関数は、複数の処理を一つにまとめ、必要な場所から呼び出す仕組みです。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

関数を定義して呼び出す

function showWelcomeMessage() {
  console.log('JavaScriptの学習を始めます');
}

showWelcomeMessage();

関数を定義しただけでは処理されません。関数名の後ろに()を付けて呼び出します。

引数で値を受け取る

function greet(name) {
  console.log(`こんにちは、${name}さん`);
}

greet('田中');
greet('佐藤');

関数を呼び出す側から渡す値を引数と呼びます。同じ処理を異なる値で再利用できます。

returnで結果を返す

function calculateTotal(price, quantity) {
  return price * quantity;
}

const total = calculateTotal(3000, 2);
console.log(total);

returnは関数の外へ結果を返します。返された値は、変数への保存や別の計算に利用できます。

アロー関数を書く

関数はアロー関数でも記述できます。

const calculateTotal = (price, quantity) => {
  return price * quantity;
};

処理が一つの式だけなら、次のように短くできます。

const calculateTotal = (price, quantity) => price * quantity;

最初は短さよりも処理の範囲が分かる書き方を優先してください。

HTMLを変更する関数を作る

<p id="message">変更前です</p>

const message = document.querySelector('#message');

function updateMessage(text) {
  message.textContent = text;
}

updateMessage('関数から変更しました');

要素の取得と表示変更の役割を分けると、処理の目的を追いやすくなります。

まとめ

関数を使うと処理へ名前を付けて再利用できます。引数で値を受け取り、returnで結果を返す流れを理解しましょう。

次の記事では、複数の値を配列へまとめて扱います。