JavaScript超入門コース】12.関数 ｜関数を料理ロボットに例えて説明しました【プログラミング初心者向け入門講座】

2020.04.25

はじめに

こんにちは。キノコードです。
「【5分レッスン】JavaScript超入門コース#12 関数」について説明します。

関数とは

関数について
・関数とは
・関数の宣言と実行
・関数式

まず、関数について説明します。
関数とは、「処理」を一つにまとめたものです。
関数を使用すると、同じ処理を繰り返し書く必要がなくなり、別のプログラムでも利用することができます。

関数の宣言と実行

関数をプログラムで使えるようにすることを「関数の宣言」といいます。
JavaScriptでの関数の宣言方法についてみていきましょう。
function 関数名( ) { 実行する処理}
JavaScriptでは関数の定義にfunctionを使います。
functionの後に関数につける名前を書き、丸括弧を書きます。
関数に引数を渡したい場合は、丸括弧のなかに引数名を書きます。
引数は、何個でも渡すことができるので、必要な分だけカンマで区切って入れることができます。
最後に{ }波括弧を書いて、波括弧のなかに実行する処理を書きます。
それでは、実際に、コードを書いてみましょう。 

// Lesson12_01

  function showMessage() {
    console.log(""Hello World"");
  }
  showMessage();

文字列の「Hello World」を表示する関数を作成しましょう。
まずは function、関数名を書きましょう。
関数名はメッセージを表示する意味を持つ「showMessage」を書きます。
今回、引数はないので丸括弧のみを書きます。
波括弧を書いて、実行する処理「console.log("Hello World");」を書きます。
これで関数を定義することができました。
関数を実行するには、関数名、丸括弧で実行できます。
関数名の「showMessage」に引数なしの丸括弧。これで「Hello World」が表示されるはずです。
実行してみましょう。
「Hello World」を表示することができました。
定義した関数は何度でも呼び出すことができます。
3回showMessage();を実行します。
「Hello World」は3回表示されるはずです。
実行してみましょう。

// Lesson12_01

  function showMessage() {
    console.log(""Hello World"");
  }
  showMessage();
  showMessage();
  showMessage();

「Hello World」を3回表示することができました。

関数式

JavaScriptは関数を変数に代入することができます。
この書き方を関数式といいます。
関数式の書き方について見ていきましょう。
var 変数名 = function() {
実行する処理
}
関数式では変数名、イコール、function、関数名を書きます。
先ほどと同時に、丸括弧、波括弧、実行する処理を書きます。
あいさつを表示する関数式を作ってみましょう。

// Lesson12_02

  var sayHello = function sayHello(greeting) {
    console.log(greeting);
  }

  sayHello(""Good Morning"");

変数名はあいさつをする、という意味の「sayHello」とします。
関数名も「sayHello」としましょう。
function関数名、丸括弧、丸括弧の中には引数を書きます。
引数名はあいさつの「greeting」としましょう。
波括弧を書いて、実行する処理を書きます。今回は挨拶を表示するので、「console.log(greeting);」です。
関数を実行するときは、変数名、丸括弧を書きます。
変数名の「sayHello」に引数は「"Good Morning"」丸括弧。これで「Good Morning」が表示されるはずです。
実行してみましょう。「Good Morning」が表示されました。
関数式は関数名を省略することができます。
関数名の「sayHello」を省略しましょう。
「Good afternoon」と「Good evening」も表示させましょう。 

// Lesson12_02

  var sayHello = function(greeting) {
    console.log(greeting);
  }

  sayHello(""Good Morning"");
  sayHello(""Good afternoon"");
  sayHello(""Good evening"");

実行してみましょう。
「Good afternoon」と「Good evening」も表示することができました。