「関数」と「変数」の使い方を、JavaScriptで知る

前回の記事†では、プログラミング未経験者を対象に、JavaScriptをとりあえず動かしてみるためのコードをご紹介しました。

プログラミングの学習を進めるにあたっては、「関数」と「変数」の使い方を知る必要があります。

この記事では、「関数」と「変数」の使い方の一例をサンプルコードで説明します。

以下にサンプルコードを示します。

[サンプルコード]

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>

<style>

  html {
    font-family: "MS Gothic", sans-serif;
    font-size: 1.05em;
  }

  body {
    overflow-x: scroll;
    max-width: 850px;
    margin: 40px;
  }

  #editor_form {
    padding: 10px;
    line-height: 1.5;
    height: 10em;
  }

</style>

<script>
/* JavaScriptここから */

function button_exe() {
  /* exeボタンを押すと、この関数が呼び出される */
  abcdefg(); /* 別の関数を呼び出す。 */
}

function abcdefg() {
  let a = 'My name is';
  let b = 'Sasaki.';
  let result = a + ' ' + b;
  /* テキストエリアに結果を表示する。 */
  let area = document.getElementById('editor_form');
  area.value = result;
}

/* JavaScriptここまで */
</script>

</head>

<body>

<textarea id="editor_form" cols="30">cols="30"のテキストエリアです。</textarea><br>

<button onclick="button_exe();">exe</button>

</body>
</html>

コードを実行する方法は、前回の記事と同じです。

このコードを実行すると、以下のように表示されます。

テキストエリアに「My name is Sasaki.」と表示された。

[ 画像1. 実行結果 ]

コード説明:

「exe」ボタンを押すと、まず関数button_exeが実行されます。
次に、関数button_exeの中で、関数abcdefgが呼び出されます。
関数abcdefgの中には、変数a、変数b、変数resultが定義されています。
変数resultは、変数aと変数bを連結したものです。
最後に、テキストエリアに変数resultの値を表示します。

変数aには「My name is」、変数bには「Sasaki.」という文字列が格納されています。

変数resultには、変数aと変数bを連結した文字列が格納されています。変数aと変数bの間には、空白文字(' ')を入れています。

関数について:

サンプルコードでは、「exe」ボタンを押すと関数button_exeが呼び出されます。これは、以下のように記述しているからです。

すなわち、「exe」ボタンを押せば関数が実行されるように、このサンプルコードは書かれているのです。

「関数」とは、「機能」と理解するとわかりやすいかもしれません。関数を呼び出すと、関数の中に書かれた処理が、自動的に実行されます。

変数について：

変数は、ある値を格納するための「箱」のようなものです。

#サンプルコードでは、コードは文字列を変数に格納し、そのうえでテキストエリアに表示しています。結果として、テキストエリアには、変数に格納された値が表示されます。

関数と変数の名前について：

関数と変数には、自分で名前を付けます。したがって、わかりやすい名前を付けることが、プログラミングにおいて重要です。（つまり、ネーミング・センスが重要となります。）名前は基本的に自由に付けることができますが、予約語は使えない、先頭の文字に数字は使えないなどの制限があります。

まとめ：

サンプルコードを使って、関数と変数の使い方について、簡単に説明しました。

ただ、これだけではまだ使い方を理解できないと思います。実際に自分で動かしてみて少しずつ慣れていくことが、使い方を理解し習得する、着実な方法だと思います。