JavaScript

【入門】JavaScriptで関数を定義する【関数宣言・意義】

どうも、つよぽんです!

今回は、JavaScriptで「①関数を定義する方法」「②関数を実行する方法」「関数を作る意義」について解説します。

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

想定読者
  • 関数の定義方法を知りたい(関数の作り方を知りたい)
  • 関数の実行方法を知りたい
  • どうして関数を作る必要があるのか知りたい

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

あわせて読みたい
JavaScriptでの関数宣言の書き方JavaScriptで関数を作るときの書き方は色々ありますが、今回は「関数宣言」の書き方について学習します。また、関数の書き方だけでなく「関数の実行方法」や「関数を作る意義」についても解説します。関数をつくるメリットを正しく理解しましょう。...

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

今回の内容
  1. JavaScriptで関数を定義する方法(関数宣言)
  2. JavaScriptで関数を実行する方法
  3. JavaScriptで関数を作る意義

 

JavaScriptで関数を定義する方法(関数宣言)

この章では「JavaScriptでの関数の定義する方法」について解説します。

JavaScriptで関数定義する3つの方法

JavaScriptで関数を定義する方法は次の3つがありますが、今回は「①関数宣言」について説明していきます。

3つの関数定義の方法
  1. 関数宣言
  2. 関数式
  3. アロー関数

「②関数式」「③アロー関数」の定義方法に関しては、別記事で詳しい解説をしますが、②関数式③アロー関数について知りたいという方は以下の記事を参考にしていただけたらと思います。

あわせて読みたい
JavaScriptの関数を変数に代入する【関数式】前回は関数の作り方を学習しました。今回は関数の別の書き方である「関数式」について学習します。前回の関数の書き方は「関数宣言」と呼ます。「関数宣言」と「関数式」の書き方の違いや、挙動の違いについて理解していきましょう。...
あわせて読みたい
JavaScriptのアロー関数を覚えるこれまで「関数宣言」「関数式」と2つの関数の書き方を解説しました。今回はES2015から新しく追加された新しい関数の書き方である「アロー関数」について解説をします。「関数宣言」「関数式」「アロー関数」の3つの違いを把握して関数の基本的な書き方をマスターしましょう。...

関数宣言の書き方

関数宣言の書き方は、以下の画像で説明したとおりになります。

関数宣言の書き方関数宣言の書き方

画像内でも関数定義の方法について書かれていますが、「関数名」のつけかたについて補足します。

関数名は好きな名前をつかうことが出来ますが、一般的には次のようなルールで記述されます。

一般的な関数名の書き方
  1. 1単語しか使わない場合は小文字だけで記述する
  2. 2単語以上の場合は2単語目以降の各単語の先頭1文字目を大文字にしてそれ以外は小文字にする
  3. 2単語以上の場合は「動詞」+「名詞(目的語)」で記述する

に関しては、例えば「hello」「run」「eat」のように大文字を1文字も含めない書き方になります。(次の項目の「関数宣言を使ったサンプル」の画像を参考)

に関しては、例えば「get book」であれば「getBook」「set your age」であれば「setYourAge」のような記述をするということです。

このような書き方を「ローワーキャメルケース(lower camel case)」といいます。

ローワーキャメルケースの他にも「スネークケース(snake case)」という書き方もよく使われています。

ステークケースは複数の単語を「アンダースコア(_)」でつなげる書き方で、以下のような書き方をします。

  • 「get book」→ get_book
  • 「set your age」→ set_your_age

「ローワーキャメルケース」をつかうか「スネークケース」をつかうかは好みの部分もありますが、次のようにルールを決めて書くことが一般的です。

  • どちらかに統一した書き方をする
  • 条件に応じてローワーキャメルケース・スネークケースを使い分ける

に関しては、定義した関数がどんな処理をするのか関数名だけで判断できるようにする書き方になります。

「getBook」であれば、「この関数は本を取得する関数なんだな」、「setYourAge」であれば「年齢をセットする関数なんだな」というのが、関数の中の処理を見なくても想像することが出来ます。

関数宣言を使ったサンプル

以下の画像は、前の項目で解説した関数の定義方法を元に実際に書いた関数となります。

関数定義を使ったサンプルコード関数定義を使ったサンプルコード

上記画像のサンプルコードは以下のリンクから確認することが出来ます。

関数の書き方サンプル1

JavaScriptで関数を実行する方法

この章では「JavaScriptで関数を実行する方法」について解説します。

関数の実行方法は以下の画像でも説明している通り「関数名()」のように「関数名」の直後に「()

JavaScriptでの関数の実行方法JavaScriptでの関数の実行方法

上記画像内のサンプルコードでは次のような流れで関数定義・関数実行が行われています。

関数定義・関数実行の流れ
  1. functionキーワードを使ってhello関数を定義(前の項目で関数の定義方法について解説)
  2. hello関数の関数名である「hello」の直後に「()」をつけて「hello()」でhello関数を実行
  3. hello関数内のconsole.logが実行されて、Consoleに出力される

の「console.log」でも直後に「()」がつけられているのがわかります。

このことから「console.log」は「Console」に「()」の中に記述した値を出力する関数ということを表しいています。

関数の「()」の中に記述された値は「引数」と呼び、詳しくは別記事であらためて解説しますが、「引数」について詳しく知りたい方は以下の記事を参考にしていただけたらと思います。

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

JavaScriptで関数を作る意義

この章では「そもそもなぜ関数を作る必要があるのか」について解説します。

コードの管理を楽にする

究極的に言うと、自分で独自の関数を作らなくてもWebサービスを作ることは可能です。

しかし関数を書かないと「コードの管理」が大変になってきます。特にコード量が多ければ多いほど管理が難しくなります

そこで、できるだけコードの管理をカンタンにするために、機能ごとに関数を作ることによって、プログラムで不具合が起きたとしても、不具合が起きている機能(=関数)のみをチェックするだけ良くなります。

もし、機能ごとに関数を分けずに、プログラムの上から下まで順番にコードを書いた場合、不具合があったときにどこを修正すればよいのか見つけるまでに時間がかかります。

さらに、変数や関数のスコープが限定されておらずプライベート化されていないため、影響反映が大きくなります。

スコープ」については、以下の記事を参考にしていただけたらと思います。

あわせて読みたい
JavaScriptの変数のスコープを理解する今回は「変数のスコープ」について学習します。プログラムのどこからでもアクセスできる変数とできない変数はこのスコープの概念によって決められます。またスコープには「ブロックスコープ」「関数スコープ」というものがあり、それぞれの違いについても学習します。...

DRY ~同じ処理を繰り返し書くのを防ぐ~

プログラミングでは「DRY(Don’t Repeat Yourself.)」という考え方があります。

これは「同じコードを重複して書くな」という意味になります。

新人プログラマが知るべきプログラミングの原則6選!」の1つにも書かれている通り、同じコードを何度も書くと、修正が必要となったときに痛い目を見ます。

以下の画像の左側のコードは、「コピペ(コピー&ペースト)」を繰り返して、同じ処理が3回繰り返されているものになります。

それに対して、右側は一連の処理を1つの関数(hello関数)にまとめて、関数を3回実行している様子を表したものです。

コードをコピペした場合の弊害コードをコピペした場合の弊害

画像内のピンク枠内に「シャア」と書かれているのがわかるかと思います。しかし実際にはこれは「シェア」と書くつもりだった場合、コピペを繰り返した左のコードでは修正箇所が3箇所となります。

それに対して、一連の処理を1つの関数にまとめた右側のコードでは修正箇所は1箇所で済みます。

3箇所も1箇所もそんな大差ないと思われるかもしれませんが、あくまでも今回の例で3箇所なだけであって、ひどい場合だと、何十箇所の修正が必要になることも考えられます。

さらに言えば、複数のファイルで同じコードを記述した場合は、どのファイルに同じコードを記述したか探す必要も出てきます

しかし、処理内容を関数にまとめて、同じファイル、または別のファイルからこの関数をつかうようにすれば、いつでも修正範囲は関数内だけにとどまります。

このことからも、関数を書くメリットは大きいのがわかるかと思います。

上記画像内のコードは以下のリンクから確認することが出来ます。

関数の書き方サンプル2

まとめ

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

今回のまとめ
  1. 関数の定義方法は3つあり、今回は「関数宣言」の方法を解説した
  2. 関数名をつけるときはルールに従って記述することが大切
  3. 関数を作る意義は「コードの管理」と「DRY」の視点から考えるとわかる

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

あわせて読みたい
JavaScriptでの関数宣言の書き方JavaScriptで関数を作るときの書き方は色々ありますが、今回は「関数宣言」の書き方について学習します。また、関数の書き方だけでなく「関数の実行方法」や「関数を作る意義」についても解説します。関数をつくるメリットを正しく理解しましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

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