Web Design

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

2021年7月18日

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

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

 この記事でわかること

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

 本記事の信頼性

2021年6月からWebデザインの職業訓練校で学んでいます(6ヶ月コース)
使用テキスト:HTML&CSS、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制作会社は使っていない場合があります。

関数の使い方

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

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

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

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

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

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

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

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

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

index.html

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

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

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

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

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

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に書きます。

index.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('こーいちです。');
 console.log('いつもお世話になっております。');
 };
Mail('山本');

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

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

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

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

こーいち
今後はアロー関数が主流になると言われています。

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

以下のとおり。

index.html

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

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

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

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

メモ:ローカル変数

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

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

index.html

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

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

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

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

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

以下のとおり。

index.html

<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文で脱出してしまえば、それ以降の処理を実行せずに済みます。

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

return文の記述例

HTMLに書いてみます。

index.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

出典:『スラスラ読める JavaScriptふりがなプログラミング』

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

ちなみにreturn文を使わない場合は、以下のとおり。

index.html

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

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

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

JavaScriptの関数

 【まとめ】関数の書き方

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

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

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

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

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

こーいち
少しずつコツコツ進めていきましょう。

こーいちより

P.S. JavaScriptの関数の書き方を習得しよう。

 参考図書


Kindle Unlimited会員の方は無料で読めます
※ 会員以外の方は、無料体験(30日)で読めます

関連記事【JavaScript入門】初心者向けに基礎から文法をまとめました
関連記事
【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.