Ne:Code道場~JavaScript 関数(引数・戻り値)の巻~


Ne:Code道場~JavaScript 関数(引数・戻り値)の巻~

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptの関数、特にその引数と戻り値の学習ポイントについて紹介します。

目次
  1. はじめに
  2. 関数の引数と戻り値って例えばどういうものニャ?
  3. 「関数の戻り値」って何ニャ?
  4. 「関数の引数」って何ニャ?
  5. 引数や戻り値の組み合わせに戸惑うニャ
  6. 最後に

はじめに

image この記事ではJavaScriptの関数、特にその引数と戻り値について、概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、関数の引数・戻り値について理解を深めてゆきましょう。

関数の引数と戻り値って例えばどういうものニャ?

前回に引き続き、今回もGoogle Homeの例えを用いながら進めます。
例えば、「OKGoogle、東京の天気は?」と、「OKGoogle、北海道の天気は?」では、「東京」や「北海道」の部分が、関数で言うところの引数にあたります。
そして、「それぞれの場所の天気を教えてくれること」が、関数で言うところの戻り値です。
漫画では魔法のポッケにビスケットを入れたら、その倍のビスケットに姿を変えるというイメージで説明しました。魔法のポッケという関数に入れるビスケットは引数で、その結果ゲットできる倍のビスケットが戻り値ですね。
戻り値は、関数を実行した結果を取得したい時に用い、引数は、関数の振る舞いをその引数に応じて変えたい時に用います。
引数と戻り値がセットで用いられる場合は、引数によって関数の振る舞いを変え、その結果として取得できる戻り値も変わるという動きが一般的です。
では、引数、戻り値をそれぞれ見てゆきましょう。
image

「関数の戻り値」って何ニャ?

戻り値は、関数から戻ってくる値です。関数を実行した結果、関数の実行文がドロンと戻り値に姿を変えます。
宣言時の書き方と、実行時の書き方を、順を追ってみてゆきましょう。
戻り値ありの関数を宣言する時に、いつも書くワンセットはこちら。

function 関数の名前 () {
  return ;  
}

いつも書くワンセットなので端折っていますが、returnの後には、戻したい値を必ず書きます。
例えばサイコロの目を取得する関数を作ってみた場合、以下のようになります。

// サイコロを振って、出た目戻す関数ニャ
function throwDice () {
  // returnの後は計算でもOKニャ
  // 計算のほうが先に実行されて、計算結果にドロンと姿を変えるニャ
  // 例えば、計算結果が「6」になっていた場合は、ここは「return 6;」となっているのと同じニャ
  return Math.floor(Math.random() * 6) + 1;  
}

戻り値ありの関数を実行する際の書き方は、変数や値を用いるのと同じ用途で用いることが可能です。
これはいくつか例を出すことで補足しましょう。

// サイコロ1には直接値を入れているニャ。比較用ニャ。値を代入するように、関数の結果をそのまま代入できるのがポイントニャ
let dice1 = 1;
// サイコロを振る関数を実行して、その戻り値を代入しているニャ。
// 1~6のどれが入るかは実行してからのお楽しみニャ☆
let dice2 = throwDice();
 
// サイコロを二回ふってその合計を求めているニャ。比較用ニャ。
let sum1 = dice1 + dice2;
// 結果は2から12まで、どうなるかは実行時のお楽しみニャ
let sum2 = throwDice() + throwDice();
 
// 埋め込みで変数や値を用いるように、関数の結果を利用できるニャ
console.log(“サイコロの目は” + throwDice() + “ニャ!”);

肝は、戻り値ありの関数の結果を実行したら、「実行した関数は、その戻り値の値にドロンと姿を変える」という点です。なので、関数の実行結果をそのまま変数に代入したり、計算に利用したり、出力してみたりと、値を利用する処理にそのまま用いることができるのがポイントですね。
image

「関数の引数」って何ニャ?

引数は、関数に引き渡す値です。関数を実行した際、JavaScriptが関数の場所にジャンプする時に、この引数をギュッと持っていってくれます。そして関数宣言文のところに用意しておいた引数の入れ物にそのギュッと持っていった値を、内部的に代入してくれるのです。
宣言時の書き方と、実行時の書き方を、順を追ってみてゆきましょう。
引数ありの関数を宣言する時に、いつも書くワンセットはこちら。

function 関数の名前 (引数※複数書く場合はカンマ区切りで書きます) { 
}

関数名の後の丸カッコの中に引数を書きます。引数という名前、変数に似ていますよね。値を入れる箱という意味では変数と同じように用いることができます。なので、この引数という箱にも自分で好きな名前をつけることができるのです。
また、引数は複数書くこともでき、その場合はカンマで区切って記載します。
引数ありの関数を実行する際の書き方も、例を用いながら補足しましょう。
今回は漫画で用いた魔法のポッケの関数を作り、それを用いることで説明をしてゆきます。

// 倍に増やした値を取得する、JavaScript版魔法のポッケだニャ!
// 丸カッコの中のbiscuitが引数だニャ
function getTwiceOf (biscuit) {
  // 引数を2倍にしたものを戻り値にしているニャ
  // これで魔法のポッケの準備は万端ニャ!
  return biscuit * 2;  
}
// 魔法のポッケの中にビスケットを一つ入れると二つになったニャ!
let myBiscuits = getTwiceOf(1);
// 二つのビスケットを2倍、更にその結果を、2倍・・・!こんな素敵なポッケがほしいニャ!
let yourBiscuits = getTwiceOf(getTwiceOf(myBiscuits));

関数を実行する際の丸カッコ内に、引数として値を渡しています。この際に、値を渡せば良いので、それがむき出しの値(1)でも、変数という箱に入った値(myBiscuits)でも、関数の戻り値としての値(getTwiceOf(myBiscuits))でも構わないというのがポイントですね。
では、引数が複数の場合の例も簡単に見ておきましょう。

// 挨拶をする関数だニャ
// 引数は2つで、挨拶をする人と、挨拶する言葉を受け取るニャ
function greet (name, message) {
  // 挨拶を出力しているニャ!
  console.log(name + “さん、” + message + “ニャ!”);  
}
// ミケさんとタマさんにそれぞれ挨拶してみたニャ
greet(“ミケ”, “おはよう”);
greet(“タマ”, “こんばんは”);
// 引数が複数ある場合は、順番間違いに気をつけるニャ。。
greet(“こんにちは”, “猫弟子”);

image

引数や戻り値の組み合わせに戸惑うニャ

引数と戻り値について取り上げましたが、関数を作成する際には、
①引数なし・戻り値なし
②引数あり・戻り値なし
③引数なし・戻り値あり
④引数あり・戻り値あり
これらの組み合わせが存在します。
なので、「さぁ、関数を書こう!」となった際には、「エイヤ!」で取り掛かるよりは、一旦、引数・戻り値の有無、そして引数・戻り値がある場合は、具体的にどういったものになるのかを、コメントでまとめてから取り組むのもありですね。

// ↓ getTwiceOf 関数を作る場合のイメージニャ
// 処理:引数の値を2倍にして返す
// 引数:biscuit 2倍にする数値
// 戻り値:引数を2倍にした値
 
// ↓ greet 関数を作る場合のイメージニャ
// 処理:引数の値を用いて挨拶を出力する
// 引数:
//   name 挨拶をする人の名前
//   message 挨拶
// 戻り値:なし

image

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

最後に

関数の宣言、関数の実行について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

  1. 戻り値がある関数を実行すると、戻り値の値にドロンと姿を変えるニャ
    1. ドロンと置き換わった後の値は、変数や値を使うように、自由に利用可能だニャ
  2. 関数実行時に引数として値を渡すと、関数宣言部分の引数の箱にJavaScriptが内部的に代入してくれるニャ
    1. 関数実行時に丸カッコ内に書いた値は、関数宣言時の丸カッコの引数に代入されるニャ
    2. 複数の引数がある場合は、順番を意識して用いるニャ
  3. 関数を考える際には、まずは引数・戻り値がどうなるかをイメージしてから取り掛かると良いニャ
    1. 引数・戻り値の有無、ある場合は具体的にどうなるのかをイメージしてから関数宣言を書くと書きやすいニャ

今回は、関数二回目ということで、関数の引数・戻り値を取り上げました。
INとしての引数とOUTとしての戻り値、その宣言時や実行時の書き方、覚えることの一つ一つを分解しつつ、段階を追いながら、着実に学んでゆくのがポイントになると思います。
関数を使いこなすことによって、楽で読みやすいコードを作ってゆくことができます。するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
関数の引数・戻り値への理解をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
image


小泉七菜
この記事を書いた人
小泉七菜
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp