基本情報
料金
期間
転職サポート
講師
  料金 分割払い リンク
テックアカデミーロゴ 99,900円〜
※給付金制度あり
月々約4,163円〜 公式
評判
DMM WEBCAMPロゴ 169,800円~
※給付金制度あり
月々約7,075円〜 公式
評判
デイトラロゴ 99,800円 月々約4,159円〜 公式
評判
侍エンジニアロゴ 165,000円~
※侍テラコヤは月額2,980円~
月々約6,875円〜 公式
評判
テックキャンプロゴ 657,800円~
※給付金制度あり
月々約27,409円〜 公式
評判
DIVE INTO CODEロゴ 647,800円~
※給付金制度あり
月々約26,992円〜 公式
評判
ポテパンキャンプロゴ 440,000円
※全額返金保証あり
月々約18,334円〜 公式
評判
  期間 リンク
テックアカデミーロゴ 4~16週間 公式
評判
DMM WEBCAMPロゴ 4~24週間 公式
評判
デイトラロゴ 90日間 公式
評判
侍エンジニアロゴ 4~48週間 公式
評判
テックキャンプロゴ 最短10週間 公式
評判
DIVE INTO CODEロゴ 4ヶ月 公式
評判
ポテパンキャンプロゴ 5ヶ月 公式
評判
  転職サポート リンク
テックアカデミーロゴ 公式
評判
DMM WEBCAMPロゴ 公式
評判
デイトラロゴ × 公式
評判
侍エンジニアロゴ 公式
評判
テックキャンプロゴ 公式
評判
DIVE INTO CODEロゴ 〇(10ヶ月間) 公式
評判
ポテパンキャンプロゴ 公式
評判
  講師 リンク
テックアカデミーロゴ 全員が実務経験3年以上の現役エンジニア 公式
評判
DMM WEBCAMPロゴ 実務経験豊富な現役エンジニア 公式
評判
デイトラロゴ 現役で活躍するプロ講師 公式
評判
侍エンジニアロゴ 一人の現役エンジニアが卒業までサポート 公式
評判
テックキャンプロゴ 未経験者にプログラミングを教えるプロ 公式
評判
DIVE INTO CODEロゴ 実務経験豊富なプロ講師 公式
評判
ポテパンキャンプロゴ 経験豊富な現役エンジニア 公式
評判

IT

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

 

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

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

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

 

JavaScriptを使って副業をはじめたいならテックアカデミーがおすすめ!

フロントエンド副業セットを利用すればスキル習得~案件獲得までサポートしてくれますよ。

>>フロントエンド副業セットについて詳しく知りたい

JavaScriptの関数の書き方

JavaScript関数の書き方を解説

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

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

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

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

サカイ

 

関数の定義方法

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

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

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

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

関数名は特に決まりがあるわけではありませんが、名称を見てどんな処理が行われるかわかりやすいのがベストです。

例えば、”test”とか"aaa"みたいにしたら中身が想像つかないですよね。

一方で"getCustomerCode"とか"setOrderNo"みたいにすると、その関数がどんな処理をしてくれるのかがなんとなくわかります。

 

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

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

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

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

「return」ステートメントを使用することで、関数から値を返すことができます。

「return」ステートメントの後ろには呼び出し元に返す値を指定します。

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

 

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

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です。

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

サカイ

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

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

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

 

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

関数名(引数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です。

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

サカイ

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

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関数を扱う際のポイント

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

重要ポイント

  1. エラー処理の方法
  2. デバッグの方法
  3. テストの方法
  4. リファクタリングの方法
  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を勉強している方に参考となっていたらうれしい限りです。

 

JavaScriptを使って副業をはじめたいならテックアカデミーがおすすめ!

フロントエンド副業セットを利用すればスキル習得~案件獲得までサポートしてくれますよ。

>>フロントエンド副業セットについて詳しく知りたい

以上となります。

スクール選びに迷ったらテックアカデミー!

テックアカデミーは、料金や講師の質、転職サポート、これまでの実績など総合的にもっともオススメできるプログラミングスクールです。

現役エンジニアとして10年以上プログラミングやシステム開発に携わった経験、メディア運営者としてプログラミングスクール30社以上比較・レビューしてきた経験から自信を持って推奨します。

強いてデメリットを挙げるとしたら『オンライン対応のみ』ってことくらい。

「オフラインで直接指導を受けたい」といった方以外はテックアカデミーを選んでおけば間違いありません!

受講前に無料相談を受けることもできるので、「初心者でも大丈夫か?」「副業で稼げるのか?」といった疑問にもしっかり答えてもらえますよ。

テックアカデミー公式サイトを見る

  • この記事を書いた人

サカイユウヤ

プログラミングスクール選びに迷ってる方に向けて、ベストな選択ができるようにサポートをしてます。 【経歴】1986年生まれ ▶ 茨城県出身▶ 大学で福島県へ▶ 就職で東京▶ 某SIer企業で丸7年正社員として勤務▶ 独立してフリーランスエンジニア ● 2020年7月ブログスタート ● エンジニア歴13年(内フリーランス歴6年) ●プログラミングスクール30社以上見てきた経験から、初心者におすすめできるスクールを掲載中

-IT

© 2020 初心者向けプログラミングスクールおすすめサイト|さかこじぶろぐ

お得なキャンペーン情報はコチラ
お得なキャンペーン情報はコチラ