JavaScript

JavaScriptの引数の使い方【関数定義時・実行時の方法】

どうも、つよぽんです!

今回は、JavaScriptの「引数」について解説をします。

今回の記事は次のような方に向けて書きました。

想定読者
  • 引数って何?
  • 引数を受け取る関数を定義したい
  • 関数実行時にどうやって引数に値を渡すのか知りたい

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptの引数の使い方全てのプログラミング言語では関数を作成したり実行する際に「引数」というものを使います。今回はその「引数」について学習をします。「関数とは?」という基本的なところから、関数実行時の引数の使い方、関数を自作したときの引数の受け取り方を学びます。...

それでは次の内容で話を進めていきます。

今回の内容
  1. 引数とは
  2. JavaScriptで関数実行時に引数に値を渡す方法
  3. JavaScriptで引数を受け取る関数の作り方

引数とは

この章では「引数とは何か?」について解説していきます。

引数とは「関数(メソッド)を実行する際に外から値を渡すことが出来る仕組み」のことを言います。(以降はメソッドという言葉を使わず関数という言葉で統一します。)

言葉だけではイメージがつきづらいと思うので、以下の画像を使いながら説明していきます。

引数について引数について

上の画像では「alert」と「console.log」に値を渡すときの方法を説明したものです。

関数は「関数名()」と「()」をつけることで関数を実行することが出来ます。

この「()」の中に値をセットすることで、実行する関数に対して値を渡すことが出来るのです。

この「()」の中にセットした値が「引数」として関数に渡ります。

そして、「()」の中に何個の引数をセットできるかというのは関数によって異なります。

上の画像の例では、「alert」は引数を1つしか受け取れず、「console.log」は何個でも引数を受け取れることをあらわしています。

引数が複数ある時、それぞれの引数を左から順番に「第1引数」「第2引数」と言います。(1つの引数しか受け取らない場合に、第1引数と言っても通じます。)

JavaScriptで関数実行時に引数に値を渡す方法

この章では「JavaScriptで関数を実行するときに、どうやって引数に値を渡すのか?」について解説します。

関数によって受け取れる引数の個数が違うことを説明しました。

それでは、引数が1つのとき複数のときでは、どのようにして関数に値を渡せばよいのでしょうか?

引数が1つのとき

引数が1つのときはシンプルで、「関数名(引数で渡す値)」のように、「()」の中に渡したい値をそのままセットするだけです。

例えば「alert」を使って「’こんにちは’」という文字列を表示させたい場合は「alert(‘こんにちは’);」とするだけです。

もちろん、直接値をセットするだけでなく、変数をセットして値を渡すことも出来ます。例えば次のとおりです。

引数が複数ある時

引数に渡す値が複数あるときは、複数の引数を「カンマ(,)」で区切って値をセットします。

以下の画像はconsole.logを実行する際に複数の値をセットしている様子を表したものです。

関数実行時の値の渡し方その1関数実行時の値の渡し方その1

画像内の説明にも書いてあるとおり、関数実行時に複数の値を渡す場合は「カンマ(,)」区切りでセットされているのがわかるかと思います。

JavaScriptで引数を受け取る関数の作り方

この章では、「JavaScriptでの引数を受け取る関数の作り方」を解説します。

これまでは、既に用意されている関数を実行するときに、どのようにして関数に値を渡すのかを解説してきました。

それでは、独自の関数を作るときに引数を受け取れる関数を作るにはどうしたら良いのでしょうか?

答えから言うと、以下の画像でも説明している通り、関数定義時の「()」の中に引数を記述していきます。

関数定義時の「()」の中に引数を記述する関数定義時の「()」の中に引数を記述する

()」の中に引数を記述するといいましたが、どのように記述すればよいのでしょうか?

関数定義時にセットする引数は「変数」と同じものだと考えてください。

なので、「変数名」をつけるのと同じルールで「引数名」をセットすれば良いです。

変数名をつけるときのルールは以下の記事でも解説しているので、変数名のルールを知りたい方は以下の記事を参照して頂けたらと思います。

あわせて読みたい
JavaScriptの変数宣言の方法【const・let・var】全てのプログラミングでは変数というものを使って値を保存して使いまわします。JavaScriptではその変数を使うためには「const」「let」「var」の3つの方法で変数を定義します。この3つの違いを今回の記事で理解していきましょう。...

以下の画像は「hello関数」の定義時に「第1引数にname」「第2引数にage」を引数名として記述した様子を表したものです。

引数を受け取る関数を定義したもの(関数宣言の書き方)引数を受け取る関数を定義したもの(関数宣言の書き方)

そして、hello関数を実行するときに、「hello(‘つよぽん’, 29);」とすることで、hello関数の第1引数のnameには「‘つよぽん’」、第2引数のageには「29」が渡されます。

上の画像のサンプルコードは以下のリンクから直接確認できます。

引数のサンプル2

引数を記述するルールは、「関数宣言」「関数式」「アロー関数」のいずれも同じ書き方になります。

上の画像は関数宣言を使ったサンプルになりますが、以下に「関数式」「アロー関数」を使ったときのサンプル画像も貼っておきます。

引数を受け取る関数を定義したもの(関数式の書き方)引数を受け取る関数を定義したもの(関数式の書き方)

上の画像のサンプルコードは以下のリンクから直接確認できます。

引数のサンプル3

引数を受け取る関数を定義したもの(アロー関数の書き方)引数を受け取る関数を定義したもの(アロー関数の書き方)

上の画像のサンプルコードは以下のリンクから直接確認できます。

引数のサンプル4

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. 引数とは「関数を実行する際に外から値を渡すことが出来る仕組み」のこと
  2. 関数によって、受け取れる引数の個数が異なる
  3. 関数実行時に引数に値を渡す場合は「関数名(第1引数の値, 第2引数の値)」のような形式で実行する
  4. 引数を受け取る関数を定義する際には「()」の中に変数名と同じルールで、引数名をセットする。→「 function (第1引数名, 第2引数名){…} 」

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptの引数の使い方全てのプログラミング言語では関数を作成したり実行する際に「引数」というものを使います。今回はその「引数」について学習をします。「関数とは?」という基本的なところから、関数実行時の引数の使い方、関数を自作したときの引数の受け取り方を学びます。...
【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です