【JavaScript入門】関数の書き方を現役エンジニアが解説

本記事を書いている僕は、エンジニア歴10年以上の現役エンジニアです。

現在はフリーランスエンジニアとしてシステム開発をしています。

僭越ながら先輩エンジニアとして、『JavaScriptの関数の書き方』を解説していきますのでよかったら最後までご覧ください。

JavaScriptの関数の書き方

JavaScriptの関数の書き方を解説していきます。

1. 関数の定義方法
2. 作った関数を呼び出す方法
3. 関数を作成する際の注意点

上記のような順番でひとつずつ理解していきましょう。

JavaScriptを使う上で関数は避けて通れないので、少しずつでいいので最終的にすべてわかるようになるのが理想です。

Pro navi

関数の定義方法

JavaScriptで関数を定義するには、「function」キーワードを使用します。

具体的な記述方法は以下の通り。

function 関数名(引数1, 引数2, ...){
  関数の本体;
  return 返り値;
}

「function」キーワードの後ろに、関数名を指定します。

括弧の中には関数の引数を指定します。

引数は関数を呼び出すときに渡す値で、複数指定することができます。

複数の引数を指定する場合は、カンマで区切ります。

関数の本体は、大括弧で囲むことで、複数行にわたって記述することができます。

以上を踏まえたうえで、実際に関数を定義してみましょう。

function add(x, y){
  return x + y;
}

この関数は2つの数値”x”と”y”を受け取り、それらを足した結果を返す関数です。

もうひとつ例文を見てみましょう。

function greet(name){
  return "Hello, " + name + "!";
}

この関数は、文字列を受け取り、「Hello, （受け取った文字列）!」という文字列を返す関数です。

また、「return」ステートメントを省略するだけで返り値を指定しない関数を定義することもできます。

それがこちら。

function printNumber(x){
  console.log(x);
}

この関数は、数値を受け取ってコンソールに出力するだけで終了します。

返り値はありません。

余談ですが、なんでもかんでも関数にするのはNGです。

同じような処理を何度も使う場合、長い処理を外出しする場合など、使いどころを考える必要がありますよ。

Pro navi

作った関数を呼び出す方法

関数を定義するだけでは、まだ実行されません。

関数を実行するには、関数名を指定して呼び出す必要があります。

呼び出し方は、次のようになります。

関数名(引数1, 引数2, ...);

括弧の中には、関数に渡す引数を指定します。

例えば、前項で定義した「add」関数を呼び出してみましょう。

let result = add(10, 20);

この例では、「add」関数に10と20を渡しています。

「add」関数は2つの引数を足した結果を返すので、「result」変数には30が代入されます。

続いて「greet」関数を呼び出してみましょう。

let greeting = greet("Sakai");

「greet」関数の引数に「Sakai」を渡してみました。

戻り値は「Hello, Sakai!」となるので、「greeting」変数には「Hello, Sakai!」が代入されます。

さいごに「printNumber」関数を呼び出してみましょう。

printNumber(100);

「printNumber」関数に100を渡しました。

「printNumber」関数は特に何も返さない代わりに、100という数字がコンソールに出力されます。

関数を作成する際の注意点

JavaScriptで関数を作成する際には、以下のような注意点があります。

関数名の決め方

関数名を決めるときには、他の変数や関数と衝突しないように注意しましょう。

関数の呼び出し方

関数を呼び出すときには、引数を渡すときには、必要な数だけ渡すようにしましょう。
また、引数を渡す順番にも注意しましょう。

「return」ステートメントの使い方

「return」ステートメントを使用すると、それ以降の関数の本体は実行されず、関数は終了します。

関数の定義について

関数を定義するときには、その関数が期待する引数や返り値を明示しましょう。
誰が見てもどんな関数が理解できるように、コメントで補足情報を記載することをオススメします。

変数の定義について

関数内で変数を定義するときには、関数内でのみ有効な「ローカル変数」を使用することができます。
ローカル変数は、関数外部からアクセスすることができません。

関数の使用について

関数を使用するときには、期待する引数や返り値を正しく渡しましょう。
使用前にその関数が何をするものかをよく理解しておくことが重要です。

注意点はいきなり全部覚えなくて全然OKです。

慣れてきたら気にするくらいの順番でいいです。

Pro navi

【応用編】JavaScriptの関数を使って計算プログラムを作ってみた

基礎を抑えたところで、ここから少しだけ応用編に入ります。

JavaScriptで関数を使うとけっこう高度なことまでプログラミングできるんです。

応用編として、今回はかんたんな計算プログラムを作ってみました。

ソースコードは以下の通り。

function add(x, y){
  return x + y;
}

function subtract(x, y){
  return x - y;
}

function multiply(x, y){
  return x * y;
}

function divide(x, y){
  return x / y;
}

function calculate(x, y, operator){
  switch(operator){
    case "+":
      return add(x, y);
    case "-":
      return subtract(x, y);
    case "*":
      return multiply(x, y);
    case "/":
      return divide(x, y);
    default:
      throw new Error("Invalid operator");
  }
}

console.log(calculate(10, 20, "+"));  // 30
console.log(calculate(30, 10, "-"));  // 20
console.log(calculate(5, 6, "*"));  // 30
console.log(calculate(100, 25, "/"));  // 4

「add」「subtract」「multiply」「divide」という4つの関数を定義しました。

それぞれ、足し算・引き算・掛け算・割り算を実行する関数です。

続いて「calculate」という関数を定義。

「calculate」関数では、2つの数字（x、y）と演算子（+-*/）を引数で受け取って、指定された演算結果を返します。

「switch」文を使用して条件分岐をして、演算子に応じて対応する関数を呼び出してるのがポイントですね。

32～35行目のように「calculate」関数を呼び出すと、次のような結果が得られます。

30
20
30
4

JavaScriptの関数を扱う際の重要な5つのポイント

JavaScriptの関数を扱う際のポイントは以下の5つです。

ひとつずつ解説していきますね。

1．エラー処理の方法

JavaScriptでは、関数を使ったエラー処理ができます。

こちらのソースコードをご覧ください。

function divide(x, y){
  if(y === 0){
    throw new Error("0で割ることはできません");
  }
  return x / y;
}

try{
  console.log(divide(10, 2));  // 5
  console.log(divide(10, 0));  // Uncaught Error: 0で割ることはできません
} catch(error){
  console.log(error.message);  // 0で割ることはできません
}

数値xを数値yで割る「divide」という関数を定義しています。

「divide」関数内では、もしyが0であれば「throw」文を使用して例外処理を発生するようにしています。

このプログラムを実行した結果がこちら。

5
0で割ることはできません

以上のように、JavaScriptでは関数を使ったエラー処理ができます。

2．デバッグの方法

JavaScriptでは、関数を使ったデバッグを行うことができます。

こちらのソースコードをご覧ください。

function add(x, y){
  console.log("x: ", x);
  console.log("y: ", y);
  return x + y;
}

console.log(add(10, 20));  // 30

数値xと数値yを足し合わせる「add」関数を定義して、さらに「console.log」を使って関数内でxとyの値を出力しています。

このようにすると関数内で変数がどんな値になってるのかを確認できます。

このプログラムを実行すると、次のような結果になります。

x: 10
y: 20
30

3．テストの方法

JavaScriptでは、関数を使ったテストを行うことができます。

こちらのソースコードをご覧ください。

function add(x, y){
  return x + y;
}

function testAdd(){
  const expected = 30;
  const actual = add(10, 20);
  if(expected !== actual){
    throw new Error(`テストNG: expected ${expected}, but got ${actual}`);
  }
}

try{
  testAdd();
  console.log("テストOK");
} catch(error){
  console.error(error.message);
}

上記コードで定義した「testAdd」関数では、「add」関数が正しく動くかをテストしています。

期待される結果（今回の場合は30）と「add」関数を呼び出した戻り値が一致しているかを比較し、一致していなければ例外発生させます。

このプログラムを実行すると、次のような結果になりました。

テストOK

つまり「add」関数が期待通りの動きをしているということですね。

このようにして関数が正常に動作するかを確認するのが重要です。

4．リファクタリングの方法

JavaScriptでは、関数を使ったリファクタリングを行うことができます。

リファクタリングとは、ソフトウェアの外部的振る舞いを保ちつつ、理解や修正が簡単になるように、内部構造を改善することです。また、リファクタリングは非常に統制された方法でコードを洗練していくため、バグの入り込む余地が少なくなっています。

引用元：オブラブ

こちらのソースコードをご覧ください。

function calculateTax(price){
  const taxRate = 0.1;
  return price + (price * taxRate);
}

console.log(calculateTax(1000));  // 1100

「calculateTax」という関数を定義しました。

この関数は、商品の値段を引数で受け取って、消費税を加えた値段を返します。

「calculateTax」関数に1000という引数を渡して実行すると。次のような結果になります。

1100

このプログラムは期待通りに動くので問題はありません。

しかし、消費税が10％から変更されるとプログラム全体を修正する必要があります。

これを全体修正しなくてもいいようにリファクタリングしてみましょう。

function calculateTax(price, taxRate){
  return price + (price * taxRate);
}

console.log(calculateTax(1000, 0.1));  // 1100

引数に消費税率を追加しました。

こうすることで、消費税率が変更された場合、「calculateTax」関数を呼び出す際の引数として消費税率を指定するだけで済むようになりますよね。

5．モジュール分割の方法

JavaScriptでは、関数を使ったモジュール分割を行うことができます。

モジュール分割とは、プログラムを複数のモジュール（ファイルや関数など）に分割し、それらを組み合わせてプログラムを構成することを指します。

分割することでプログラムをより拡張しやすくしたり、再利用しやすくしたりすることができます。

モジュール分割の具体例として以下をご覧ください。

// math.js

export function add(x, y){
  return x + y;
}

export function subtract(x, y){
  return x - y;
}

export function multiply(x, y){
  return x * y;
}

export function divide(x, y){
  return x / y;
}

// main.js

import { add, subtract, multiply, divide } from "./math

「math.js」と「main.js」にモジュールを分割しています。

「math.js」ファイルでは、「add」「subtract」「multiply」「divide」という計算結果を返す関数を定義しています。

「export」文を使用して、それらの関数をエクスポートしています。

「main.js」ファイルでは、「import」文を使用して「math.js」ファイルからエクスポートされた関数をインポートしています。

そして、「add」「subtract」「multiply」「divide」という関数を使用しています。

このようにして、モジュール分割を行うことができます。

まとめ【JavaScriptの関数を使いこなそう】

今回は、『【JavaScript入門】関数の書き方を現役エンジニアが解説』というテーマでお話してきました。

プログラミング学習をイチからやると習得するまではとても長く感じますし、はじめは特に難しくて挫折しそうにもなるでしょう。

しかし、毎日一歩ずつ学習を積み重ねれば確実にスキルアップしていきます。

本記事で紹介したことが、JavaScriptを勉強している方に参考となっていたらうれしい限りです。

以上となります。