広告 Write

JavaScriptの関数の書き方と使い方【引数と戻り値について】

2021年7月18日

JavaScriptの関数
  • JavaScriptの関数について基礎から理解したい
  • 引数、戻り値という言葉が出てきたけれど、いまいち分からない
  • 関数の書き方のサンプルを見ておきたいな。関数の基礎を応用した使い方もあれば嬉しい

この記事はそんな方へ向けて書いています。

 この記事でわかること

  • JavaScriptの関数の書き方、使い方
  • JavaScriptの引数、戻り値について
  • JavaScriptの関数の応用サンプル

 本記事の信頼性

本記事では、JavaScriptの関数について職業訓練校および「スラスラ読める JavaScriptふりがなプログラミング」からの学びを書いています。

自分用の復習メモですが、本記事だけを読み返すだけ済むようにまとめました。
JavaScriptの関数に苦手意識を持っていた過去の自分へ向けて書きました。

JavaScriptの関数の書き方と使い方

JavaScriptの関数

関数とは

関数とは、複数の文をまとめて、名前をつけたものです。

関数をつくることを「関数定義」といいます。
関数を定義するには、関数のブロック内にJavaScriptの文を書きます。

整理します。

プログラムの中の1つの処理。if文、for文などの種類がある。
演算子、式、値、関数呼び出しなどを組み合わせたもので、文の一部になる
演算子計算や比較などを行う記号。式の一部になる。
関数複数の文をまとめ、名前をつけて呼び出せるようにしたもの。

» 参考:『スラスラ読める JavaScriptふりがなプログラミング』

関数をつくるメリット2つ

  1. プログラムの構造を理解しやすくなる
  2. 関数は何度でも呼び出せる

1.プログラムの構造を理解しやすくなる

「関数をつくる」とは、プログラムの一部に名前をつけることです。

たとえば「税込価格を返す関数」「県庁所在地の調べる関数」など。
名前をつけることで、プログラムのどこが何をしているのか、わかりやすくなります。

2.関数は何度でも呼び出せる

つくった関数は、その名前を呼び出すだけで何度でも同じ処理ができます。

プログラム内に同じ処理を繰り返し書かずに済むのです。

関数の書き方

関数の定義方法は、複数あります。

1.他のプログラムでもよく使われる方法
function 関数名( [引数] ){
 処理
}

2.javascriptならではの変数に格納する方法
const 関数名 = function( [引数] ){
 処理
}

3.アロー関数
const 関数名 = ( [引数] ) => {
 処理
}

※どの書き方も引数は省略可能(引数については後述)。
※アロー関数は古いWeb制作会社は使っていない場合があります。

関数の使い方

関数の書き方とは異なり、実行方法は1つだけです。

function kansu1( ){
 console.log('関数1');
}

const kansu2 = function( ) {
 console.log('関数2');
}

const kansu3 = ( ) => {
 console.log('関数3');
}

kansu1( );
//出力結果:関数1

kansu2( );
//出力結果:関数2

kansu3( );
//出力結果:関数3

処理をためておくことができるのが、関数です。
何かのタイミングで実行します。

具体例をもう少し書いてみます。

//シンプルなファンクションの書き方
function aisatsu() {
 console.log('Hello');
 }
aisatsu();

//変数に格納する書き方
const outputSeconds = function () {
 const now = new Date();
 console.log(now.getSeconds());
 }
outputSeconds();
//出力結果:その時の時刻(秒)

//アロー関数の書き方
let creatMail = ( ) => {
 console.log('Koichiです。');
 console.log('アロー関数です。');
 };
creatMail( );
//出力結果:
Koichiです。
アロー関数です。

繰り返しですが、関数は処理を予約しておくだけ。
呼び出されたタイミングで処理します。

パソコンはイベントの塊でできているのですね。

JavaScriptの引数について

JavaScriptの戻り値

引数を書いた関数

引数を実行時に指定できるようにすることで、同じ関数でも指定する引数に応じて処理内容を変えられます。

const taxin = (kakaku)=>{
 console.log(kakaku*1.1);
}

taxin(1000);
//出力結果:1100

taxin(12000);
//出力結果:13200

関数の実行時に、( )の中にデータを入れます。
引数を書いた関数の処理では、引数を省略できません。

※関数taxinの引数に100を入れると、出力結果は「110.00000000000001」というおかしな数値です。
javascriptの謎の仕様です。
対策の必要がありますが割愛します。

引数は、半角カンマで区切っていくつでも入れられます。

const heikin = (num1,num2) =>{
 console.log((num1 + num2) / 2);
}

heikin(4,8);
//出力結果:6

関数を実行するときは、引数を使う分だけ記述する必要があります。

アロー関数で引数を使うサンプル

アロー関数を使い、具体例をHTMLに書きます。

<script>
 
const taxin = (kakaku) => {
 const zeikomi = kakaku * 1.1;
 const zeikomi_t = Math.floor(zeikomi)
 console.log(zeikomi_t);
 }

 taxin(1000);
 taxin(2000);
 taxin(100000); //バグが出る

 const heikin = (n1, n2) => {
 console.log((n1 + n2) / 2);
 }

 heikin(4, 8);
 heikin(5000, 3000);
</script>

//出力結果:
1100
2200
110000
6
4000

let Mail = (recv) => {
 console.log(recv + '様');
 console.log('Koichiです。');
 console.log('いつもお世話になっております。');
 };
Mail('山本');

//出力結果:
山本様
Koichiです。
いつもお世話になっております。

【解説】
関数taxinを定義して、引数に1.1をかけて開発者ツールに出力。
引数kakakuは好きな言葉でOK(id、classなどといっしょ)
Math.floor(数値)は、小数点以下を切り捨てるMathオブジェクト。
関数taxinを実行。
小数点以下を切り捨てない場合、taxin(100000);の出力結果は「110000.00000000001」となり、バグが出ます。

関数heikinを定義して2つの引数を足して2で割り、開発者ツールに出力。
関数heikinを実行して、引数に4と8を入れます。

関数Mailを定義して、引数recvを設定し、開発者ツールに出力。
引数に山本を入れて、関数Mailを実行。

「アロー関数が主流になる」と言われています。

関数の中で変数を使うサンプル

let createmail = (recv, bill) => {
 let msg = `${recv}様
Koichiです。
今月の請求額は${bill}円です。`;
 console.log(msg);
 };

createmail('山本', 40000);
//出力結果:
山本様
Koichiです。
今月の請求額は40000円です。

【解説】
`(バッククォート)で囲んだ文字列のことを「テンプレート文字列」といいます。
この範囲内での改行やスペースは、プログラムの実行結果に反映されます。
インデント(字下げ)すると、表示結果も字下げされてしまいます。

${変数名}を書くと、変数の内容が差し込まれます。
上記では引数を差し込んでいます。

「ローカル変数」とは「関数内でつくった変数」です。
ローカル変数は関数のブロック内でのみ有効です。
上記msgは、関数createmail内でしか使えません。
関数外でmsgは使えないので注意が必要です。
»【JavaScriptの入力】変数の使い方、変数の3つの種類を解説

テンプレート文字列を使わない場合

let createm = (recv, bill) => {
 let msg = recv + '様\n'
 + 'Koichiです。\n'
 + '今月の請求額は' + bill + '円です。';
 console.log(msg);
 }

createmail('山本', 40000);
//出力結果:同上

文字列の連結には、改行も指定します。
文字列の中で改行するには「\n」です。

Win → ¥キー
Mac → option + ¥キー

【応用】オブジェクトと組み合わせて、県庁所在地を調べる関数

<script>
 const pref = (p) => {
  pref_obj = {
  '北海道': '札幌市',
  '青森県': '青森市',
  '岩手県': '盛岡市',
  '宮城県': '仙台市',
  '秋田県': '秋田市',
  '山形県': '山形市',
  '福島県': '福島市',
  '茨城県': '水戸市',
  '栃木県': '宇都宮市',
  '群馬県': '前橋市',
  '埼玉県': 'さいたま市',
  '千葉県': '千葉市',
  '東京都': '新宿区',
  '神奈川県': '横浜市',
  '新潟県': '新潟市',
  '富山県': '富山市',
  '石川県': '金沢市',
  '福井県': '福井市',
  '山梨県': '甲府市',
  '長野県': '長野市',
  '岐阜県': '岐阜市',
  '静岡県': '静岡市',
  '愛知県': '名古屋市',
  '三重県': '津市',
  '滋賀県': '大津市',
  '京都府': '京都市',
  '大阪府': '大阪市',
  '兵庫県': '神戸市',
  '奈良県': '奈良市',
  '和歌山県': '和歌山市',
  '鳥取県': '鳥取市',
  '島根県': '松江市',
  '岡山県': '岡山市',
  '広島県': '広島市',
  '山口県': '山口市',
  '徳島県': '徳島市',
  '香川県': '高松市',
  '愛媛県': '松山市',
  '高知県': '高知市',
  '福岡県': '福岡市',
  '佐賀県': '佐賀市',
  '長崎県': '長崎市',
  '熊本県': '熊本市',
  '大分県': '大分市',
  '宮崎県': '宮崎市',
  '鹿児島県': '鹿児島市',
  '沖縄県': '那覇市'
  }
 console.log(pref_obj[p]);
 }

 pref('大分県');
</script>

//出力結果:大分市

【解説】
関数prefを定義して、引数pを設定します。
オブジェクトを使って、県名:県庁所在地名をまとめます(オブジェクトは{ }でくくる)。
コンソールにオブジェクトpref_objの引数pを出力します。
関数prefを呼び出して、引数'大分県'で実行します。

下記、オブジェクトの書き方、出力です。

✔︎ オブジェクトの書き方
変数 = { プロパティ1:値a , プロパティ2:値b ,  ……}

✔︎ オブジェクトの2つの出力方法
・オブジェクト名[ 'プロパティ1' ]
・オブジェクト名.プロパティ1

オブジェクトについては「JavaScriptのオブジェクトの定義と出力【配列、繰り返し】」で解説しています。

JavaScriptの戻り値について

JavaScriptの戻り値について

関数内で「return」を書くことで、関数内で処理した内容を返すことできます。

return文の書き方

return文とは、噛み砕いて言うと「何らかの処理結果をプログラムに伝える」です。

let 変数 = ( ) => {
 関数内で実行する文
 return 結果の値;
};

returnは「値を戻す」だけでなく「プログラムを止める」という意味もあり、関数の処理の中の最後に書かれることが多いです。

プログラムを止める性質を利用して、関数内の引数をチェックして問題があるときにreturn文で脱出してしまえば、それ以降の処理を実行せずに済みます。

return文の記述例

HTMLに書いてみます。

<script>
 const large_num = (num1,num2) => {
  let larger;
  if(num1 > num2){
   larger = num1;
   }else{
   larger = num2;
   }
  return larger;
 }

 const apple = 120;
 const banana = 100;

 const num = large_num(apple,banana);
 console.log('りんごとバナナの金額の高い方は、' + num + '円です。');

 const tonergawa = 322;
 const tamagawa = 138;

 const num2 = large_num(tonegawa,tamagawa);
 console.log('利根川と多摩川の長い方は、約' + num2 + 'kmです。')

</script>

【解説】
関数large_numを定義して、引数を2つ取れるようにします。
関数でやりたいことは3つ。
 1.最終的に戻り値として戻す変数を定義
 2.2つの引数の大きさを調べて、大きい方を変数に代入
 3.変数をreturnする
変数appleとbananaを定義し、appleに120、bananaに100を代入。
戻り値のある関数を実行すると、その値を左辺に代入できます。
戻り値を設定しておくと、関数を使いまわせます。
変数numを定義し、右辺に引数をappleとbananaを入れて、関数large_numを実行。
文字列を連結しつつ開発者ツールに出力。
変数toneとtamaを定義し、toneに322、tamaに138を代入。
変数num2を定義し、右辺に引数をtoneとtamaを入れて、関数large_numを実行。
文字列を連結しつつ開発者ツールに出力。

その他の記述例

スラスラ読める JavaScriptふりがなプログラミング」のサンプル文です。

let addCharge = (bill) => {
 return bill * 1.07 ;
};
console.log(addCharge(40000));

//出力結果:42800

【解説】
return文の「bill * 1.07」の結果が、関数addChargeの戻り値です。

return文を使わない場合は、以下です。

let addCharge = (bill) => {
 console.log(bill * 1.07);
 };

addCharge(40000);
//出力結果:42800

まとめ:JavaScriptの関数の書き方を覚えよう

JavaScriptの関数

 まとめ:関数の書き方

1.他のプログラムでもよく使われる方法
function 関数名( [引数] ){
 処理
}

2.javascriptならではの変数に格納する方法
const 関数名 = function( [引数] ){
 処理
}

3.アロー関数
const 関数名 = ( [引数] ) => {
 処理
}

関数をつくることで、プログラムに同じ内容を書かずに済みます。
「完璧に理解できた」とは言い難いですが、繰り返し学習で基礎理解を深めていきます。

新しいことを勉強するのは大変ですが、学んだことは自分に残ります。

以上です。

P.S. 少しずつコツコツ進めていきましょう。

関連記事【JavaScript入門】初心者向けに「基礎文法」を完全まとめ
関連記事【職業訓練Webデザイン】40代、未経験でも慣れてきた3つの理由

-Write