BUNCHO METHOD コードを楽しむプログラミング情報メディア

【レッスン#3】 「変数と演算の基本」を学ぶプログラミング教材

プログラミング教材#3では変数や演算子を使って簡単な計算をする方法を学びます。また文字列の結合についても扱います。

プログラミング教材#3でやること①

プログラミング教材#3 サンプルコード①

プログラミング教材#3のサンプルコード①です。HTML,CSSは前回と全く同じ。JavaScrptのみ少し新しくなっています。

See the Pen 教材#3-1 by programmingbird (@programmingbird) on CodePen.

実行結果を見ると初期状態では前回#2のサンプルとまったく同じですね。

ボタンを何回も押してみると

ボタンを押すと、数字の1が表示されます。さらに何回もボタンを押すと表示される数字が2,3,4…と数字が大きくなっていきます。

またまた地味ではありますが、今回学びたいことはこれです。

トリガー ⇒「ボタン」がクリックされたら (今まで通り)
アクション ⇒ 押されるたびに1大きくした数字を表示する (これを学ぶ)

プログラミング教材#3 サンプルコード①の解説

JavaScript //初期設定

まずはvar n = 1;の部分。varは変数を用意する命令でしたね。ここではnという変数を新しく用意して、初期値(最初に設定する値)として1をセットしています。今回のようなアクションを実現するためには、つねに今の数字を覚えておく必要があります。こういうときに「変数」は必須です。変数はどんなものも入れておける入れ物です。

JavaScript //「トリガー」の設定

基本的に前回までと同じですが、ボタンがクリックされた時に呼び出すアクションの関数の名前をsayHelloからtestに変えています。今回のサンプルはHelloを表示するわけではないので、汎用的な名前をつけただけです。

JavaScript //「アクション」の設定

アクションの内容をtestという名前のユーザー定義関数を作って指定しています。testの中身を見てみましょう。まずoutput.innerHTML = n;の部分。output(HTML上のdiv要素)の内容をnに上書きしています。nはもちろん変数のnなのでその値が表示されることになります。つまり最初にボタンが押されたときは//初期設定でセットした1が表示されます。

次にn = n + 1;の部分。数学の「等式」(=の左右が等しいことを示す式)として見てしまうととてもおかしな式ですが、プログラミングの場合の「=」はこれまでも見てきたように「左にあるものに右にあるものを入れる(上書きする)」ことを意味しますので、この場合、「変数nにn+1の答えを入れる」つまり「変数nの値を1増やす」ということになります。

基本的な演算子(計算の記号)

サンプルコード①ではシンプルなたし算でしたが、JavaScriptでは様々な計算が可能です。計算記号のことを「演算子」と呼びます。これからよく使う基本的な演算子について、記号と意味を以下にまとめます。

演算子意味(参考)a=7,b=2の場合の計算結果
1+加算(たし算)a+b の結果は 9
2減算(ひき算)a-b の結果は 5
3*乗算(かけ算)a*b の結果は 14
4/除算(わり算)a/b の結果は 3.5
5%剰余(あまり)a%b の結果は 1 (7÷2=3あまり1)
6**累乗a**b の結果は 49 (7の2乗、7×7)
7++インクリメント
(1増やす)
a++ の結果は 8
8デクリメント
(1減らす)
a– の結果は 6

1〜4はいわゆる四則演算かけ算とわり算の記号がいつもと違うということだけ覚えておいてください。5の剰余(あまり)を求める計算は日頃あまりやることがない計算かもしれませんがが、プログラミングをする上では意外とよく使うので覚えておきましょう。後の回でこの実用パターンを紹介します。

7,8はコードを短く書くためにとても有用です。例えば今回のサンプルコード①のn = n + 1の部分をn++に置き換えても実行結果は全く同じです。

もう一つ、とても良く使う書き方を紹介します。

9+=加算代入a+=b と書いて a=a+b

例えば、先ほども例に出しtたn=n+1をn+=1と書いても同じ意味になります。n++でいいじゃないかと思うかもしれませんが、例えばnを5増やしたいとき、n++では書けません。こういうときn=n+5と書くかわりにn+=5と書くことでコードを読みやすくシンプルにすることができます。

尚、n-=5とかn*=5とかという書き方も可能です。それぞれn=n-5、n=n*5と同じ意味になります。

プログラミング教材#3でやること②

文字列の結合にも「+」記号を使う

プログラミング教材#3ではもう一つ結構重要なポイントをお伝えします。先ほども使った「+」演算子は数値をたし算する機能以外に「文字列を結合する」役割も持っています。文字列というのはおおざっぱに言うと数値以外のテキスト(文字)のことです。「あ」のような1文字でも「雨ニモマケズ風ニモマケズ」のような文章でも数値以外は基本的に文字列です。

プログラミング教材#3 サンプルコード②

See the Pen 教材#3-2 by programmingbird (@programmingbird) on CodePen.

ボタンを押して実行結果を確認

「ボタンを押したのは1回目です」と文章が表示されました。続けてボタンを押すと「…2回目です」「…3回目です」と文章中の数字の部分だけが増えていきますね。

プログラミング教材#3 サンプルコード②の解説

JavaScript //「アクション」の設定

ポイントは output.innerHTML = “ボタンを押したのは” + n + “回目です”; の部分だけです。JavaScriptでは文字列はダブルクオーテーション(“)で囲むルールです。サンプルコード①ではnだけを表示していたのに対して、②ではnの前後に文字列をたす(結合)ことで、文章の中に変数を混ぜ込ませているわけです。