雑記

【JavaScript超入門】基礎から学べるサンプルコード解説|第2回

前回に引き続き、基礎から学べるJavaScriptサンプルコードについて解説していきたいと思います。

それでは早速まいりましょう。

【JavaScript超入門】基礎から学べるサンプルコード解説|第1回基礎から学べるJavaScriptサンプルコードについて分かりやすく解説していきたいと思います。 初心者でも理解しやすいようにサン...

制御構文とは

基本的な値と計算がわかってきたら、次に覚えるのは「構文」です。

構文というと漠然としますが、プログラムを書く上で一番重要になるのは、

全体の処理の流れを制御する『制御構文』と呼ばれるものです。

プログラムというのは、最初に書いたものから順に実行をしていきますが、

時には必要に応じて実行する内容を変えたり、

何度も同じ処理を繰り返したりすることもあります。

こういう時に使われるのが制御構文というものなのです。

この制御構文は、1つだけでなくいくつか種類があります。

順に説明していくことにしましょう。

if文の基本形

まずはおなじみif文です。

これは『条件分岐』と呼ばれる構文の一つです。

この構文は、条件に応じて実行する処理を変更するものです。

if文の基本形①
if(条件) {
  正しい時の処理
}

if文の基本形②
if(条件) {
   正しい時の処理 
} else { 
  正しくない時の処理 
}

 

このifは、その後に()を用意します。この()内に、条件となるものを用意するのです。

JavaScriptは、この条件をチェックし、それが正しければ{}の部分を実行します。

もし正しくなかったら、elseの後にある{}の部分を実行します。

このelse〜の部分はあってもなくても構いません。

なかった場合は条件が正しくないと何も起こさずスルーします。

条件って何?

「条件とは一体何だ」となります。

これは、一言で言えばを表すものです。

条件というのは単純に『真偽値として表せるもの』です。

真偽値の変数でもいいですし、計算の結果が真偽値になる式などでも構いません。

そうしたものは何でも条件に使えます。

比較演算子について

そうはいっても、どんな式が比較演算子になるかよくわからないでしょう。

そこで慣れない内は『比較演算子を使った式』が条件に使うものだ、と覚えておいてください。

比較演算子とは「2つの値を比較するもの」です。

2つを比べて「これとこれは等しい」とか「これはこっちより大きい」とか

いうように比べるためのものです。

演算記号
A == B AとBは等しい
A != B AとBは等くない
A < B AはBより小さい
A <= B AとBは等しいかAはBより小さい
A > B AはBより大きい
A >= B AとBは等しいかAはBより大きい

ただし変数を宣言するときは必ずスペースが必要になります。上記のように書く。

奇数か偶数か調べよう

簡単なサンプルとして、「数字が偶数か奇数か調べて表示する」というものを作ってみましょう。

前回の記事(第1回)で利用したscript.jsを書き換えてください。

var num = 123456;
document.write('<p>' + num + 'は、');
if (num % 2 == 0) {
  document.write('偶数。</p>');
} else {
  document.write('奇数。</p>');
}

 

ここでは、変数numというのを用意して、それが奇数か偶数かを調べて結果を表示しています。

前回の記事(第1回)のhello.htmlをリロードしてみましょう。「123456」は偶数と表示されます。

複数の分岐を作るswitch

条件分岐にはもう一つの構文があります。それは『switch』です。

ifは二者択一でしたが、switchは複数の分岐を作ることができます。

switchの基本形
switch( 条件 ) {
  case 値1: 
    // 値1のときの処理
    break;
  case 値2:
    // 値2のときの処理
    break;
    // 必要なだけcaseを用意する
  default:
    それ以外のときの処理

 

switchは、条件と、caseという文からなります。

条件の値をチェックし、その後の{}内にあるcaseを順に調べていって、

条件の値と同じcaseが見つかったらそこにジャンプして処理を実行します。

break;がありますが、これは、そこで処理を終えて構文を抜け出せるためのものです。

値が見つからなっかた場合はdefault;にジャンプして処理を実行します。

default;はオプションであってもなくても構いません。

ifとは条件が違う

条件をチェックして処理を実行するという点ではifと同じですが、

ifとswitchでは条件の内容が違います。

ifは、真偽値の値を条件につけました。

switchは数日やテキストの値をそのまま条件に設定します。

switchは、『同じ値のcaseを見つける』というものです。

なので、条件は普通の値でOKです。真偽値である必要はありません。

switchを使ってみる

switchを使ってみましょう。

script.jsの内容を書き換えてください。

var month = 2; // 月の値
var seasons;

switch(month) {
    case 1: seasons = '冬'; break;
    case 2: seasons = '冬'; break;
    case 3: seasons = '春'; break;
    case 4: seasons = '春'; break;
    case 5: seasons = '春'; break;
    case 6: seasons = '夏'; break;
    case 7: seasons = '夏'; break;
    case 8: seasons = '夏'; break;
    case 9: seasons = '秋'; break;
    case 10: seasons = '秋'; break;
    case 11: seasons = '秋'; break;
    case 12: seasons = '冬'; break;
    default: seasons = '???';
}
document.write('<p>' + month + '月は、' + season + 'です。');

このように記述したら、hello.htmlをブラウザでリロードしてみましょう。

画面に『2月は、冬です。』と表示されます。

monthを書き換えれば違う値が出すはずです。

改行しなくてもOK?

ここではswitch文中に12個のcaseを用意しました。

これでmonthの値が1〜12のどれかによってseasonの値を設定していたのですね。

ここではそれぞれのcase部分を、

case 1: season = '春'; break;

 

このように書いています。普通ならこう書くでしょう。

case 1: 
 season = '春'; 
 break;

 

3行の文として書くものを1行にまとめて書いています。

普通は改行したほうが見やすくなりますが、

ここでのサンプルのようなものは改行したほうが行数も長くなり、

よく分からなくなります。

こういうのは改行しないようが良いでしょう。

whileによるシンプルな繰り返し

制御構文は処理の分岐にかんする者の他にもあります。

「繰り返し」です。この繰り返し構文もいくつか用意されています。

一番単純な繰り返しはwhileでしょう。以下のように書きます。

while文の基本形
while(条件) { 
  繰り返す処理 
}

 

whileも条件を持っています。if文と同じく、真偽値を使います。

この条件の値がtrueならば、その後の処理を実行し、また条件のチェックに戻ります。

またtrueなら、また処理を実行して条件に戻ります。

そしてまたとひたすら繰り返し続け、条件がfalseになったら、

構文を抜けて次に進みます。

無限ループに注意

条件がtrueならば繰り返しを続けます。繰り返し実行する処理の中で、

条件の値が変化するような処理を考えておかないといけません。

まったく条件が変化しないと、いつまでたっても繰り返しを抜けられず、

永遠に実行し続けることになってしまいます。

こうした状態を『無限ループ』といいます。

無限ループになってしまうとブラウザなどでは暴走した状態になります。

繰り返しを使う場合はくれぐれも無限ループにはならないようにしましょう。

whileを使ってみよう

簡単なサンプルを作ります。

script.jsを書き換えて使います。以下のように内容を修正してください。

const max = 12345; 
let num = 1;
let total = 0;

while (num <= max) {
 total += num;
 num++;
}
document.write('<p>' + max + 'までの合計は、' + total + 'です。' );

hello.htmlにアクセスすると、

「12345までの合計は、76205685 です」と表示されます。

0から12345までの合計値を計算して表示していたのです。

電卓でやると多くの時間を費やしますが、プログラムを組めば一瞬でできてしまいます。

計算する数字の最大値をいれておくmax、1から順に数字を増やしていくnum、

合計を計算して入れておくtotalといった変数と定数を用意してあります。

考え方としては単純で、numの値をtotalにたしてからnumを1増やす、

ということをひたすら繰り返していくのです。

そうすればtotalに1,2,3…..と1ずつ増えて行く数字を足していくことになります。

そして最後の数字(max)より大きくなったら繰り返しを抜ければいいのです。

代入演算子について

ここでは、ちょっとした小技を使っています。totalにnumの値を足すところです。普通に考えれば

total = total + num;

 

このような計算式を作るでしょう。だが、ここでは違った書き方をしています。

total += num;

 

この「+=」というのは、「代入演算子」というものです。

この+=は、右側にある値を左側の変数に足す働きをするものです。

他にも「-=」「* =」「/ =」「% =」といったものが用意されています。

これを使ったほうがシンプルで分かりやすくなります。

インクリメント演算子について

もう一つnumの値を1増やすのに小技をつかっています。これです。

num++;

 

この「++」というのは、変数の値を1増やす働きをするもので、

『インクリメント演算子』と呼ばれます。

これは変数の前か後につけています。

同じようなものに『デクリメント演算子』もあります。

これは「–」というもので、変数の値を1減らすことができます。

複雑な繰り返し「for」

繰り返しには、もう一つの構文があります。

それは『for』というものです。

whileに比べるとちょっと複雑な書き方をします。

forの基本形
for ( 初期化; 条件; 後処理 ) { 
    ------繰り返す処理------ 
}

forの3要素の使い方

forは、複雑な動きをしてくれます。

()の中に3つも要素を持っていますので。

処理の流れを整理すると以下のようになるでしょう。

  1. for構文に入ったら、初期化処理を行う
  2. 条件をチェックし、tureなら繰り返し部分を実行する。falseなら抜ける
  3. 実行後、後処理を実行し、2に戻る

頭が混乱しそうですが、これはもっとスッキリと分かりやすくまとめることもできます。

下記です。

for ( var 変数 = 最初の値; 変数 < 終わりの数; 変数 ++ ) { .......

 

変数を用意して、その値を増やしながら繰り返しを行っていくのです。

これは実際に使ってみると、意外とわかりやすいのに気が付きます。

forを使ってみる

では、先程whileで作った「数字を合計する処理」を、forで書き直してみることにしましょう。

script.jsを以下のように修正してください。

const max = 12345; // 最大の値 
let total = 0; 

for( var num = 1; num <= max; num++) { 
  total += num; 
} 

document.write('<p>' + max + 'までの合計は、' + total + 'です。' );

 

これは先程のwhileを使ったスクリプトと全く同じものです。

なんとなくこっちのほうがすっきりと分かりやすい感じがすると思います。

最初に用意する変数・定数は2つに減っています。

numはforの()の中に組み込まれているのがわかるでしょう。

numの値を1増やす処理もforに組み込まれているので、

繰り返し部分は単にtotalにnumを足すだけで済みます。

それだけforの部分に色々と要素が詰め込まれているからですが、

forの部分も、3つの働きをよく頭にいれて考えれば、

決してわからないほど複雑ではありません。

演算記号
var num = 1; 変数numを宣言しし、1を入れておく
num <= max; numがmax以下なら処理を実行
num++ 繰り返し後、numの値を増やす。

こんな感じになっているのが分かります。

一つ一つの働きを考えれば、先程のnumの働きと同じことをしているとわかるはずです。

「関数」について

制御構文以外にも、JSでとても重要な構文というのはあります。

覚えておきたいのが関数の書き方です。

関数というのは、メインのプログラムから一部の処理を切り離して、

いつでも実行できるようにしたものです。

同じような処理を何度も実行するような場合、その処理部分を関数として定義しておけば、

いつでも好きなときに呼び出して実行できるようになります。

関数にはいくつか書き方があります。

一番基本的なものはこういう書き方です。

関数の書き方
function 関数名 (引数) { 
    ------実行する処理------
}

 

最初の部分を「function」「関数の名前」「引数」の3つでできている、

ということをまず頭に入れておきましょう。

このうち、functionは関数を作るときのキーワードです。

関数名は自由に決められます。

引数は、関数に渡す「値」

引数というのは、関数が必要とする値を渡すためのものです。

関数というのは、他のスクリプトとは切り離され独立しています。

なので何らかの処理を実行中に関数を呼び出したとしても、

そのときに使っていた変数などは関数にはわかりません。

そこで、「この関数では、これとこれの値が必要なんだよ」ということを

引数に用意しておくのです。

この引数を利用することで、複雑な処理をする関数も作れるようになります。

引数はいくつでも用意できます。

2つ以上の引数を用意したい場合はカンマ記号(,)でつなげて書きます。

引数は必ず用意しなくてもかまいません。

その場合は()を書くのを忘れないようにしましょう。

関数の別の書き方

関数はいろいろな書き方ができます。例えばこのように書くこともできるのです。

関数の書き方2
var 変数 = function (引数) { 
   ------実行する処理------
}

 

function……という(関数名がない)関数の定義を変数に代入しています。

これで、変数名のあとに()をつけて呼び出せば、関数として使えます。

このようになります。

var fn = function () { 
    console.log('hoge'); 
}

JSは関数も値として変数に入れておいたりできるのです。

そうすると、変数が関数として使えるようになるのです。

関数を作ってみる

関数は、実際に作ってみないとどういうものかピンとこないことでしょう。

実際に作って利用してみることにします。

「数の合計を計算して表示する」という処理を関数にまとめて、呼び出してみましょう。

script.jsを修正します。

function calc(max) {
    let total = 0;
    for (let num  = 1; num <= max; num ++) {
        total += num;
    }
    document.write('<p>' + max + 'までの合計は、' + total + 'です。')
}

calc(10);
calc(100);
calc(1000);
calc(10000);

修正したら、ブラウザをリロードして表示を確認しましょう。

10、100、1000、10000の合計をそれぞれ計算して表示します。

関数を用意すれば、「数の合計を計算して表示する」という処理も、

ただ関数を呼び出すだけでいつでも実行できるようになります。

function calc(max) {....}

 

こんな具合に関数の宣言をしています。

これは『calc』という名前で、maxという引数が用意されている関数であることが分かります。

このmaxをいう変数はなんでしょう?

これは、「いくつの合計を計算するか」を指定するのに使います。

関数の中身を見てみると、このmaxまで数字を合計していることが分かります。

そして、関数を利用するには、

calc(30);

 

こんな具合に実行すればいいことが分かります。

関数は、関数名のあとに()をつけて、そこに引数を用意して呼び出します。

これでmaxに30を代入して関数の処理が実行されるというわけです。

戻り値を使う

関数は「function」「関数名」「引数」の3つで定義されているのですが、

実をいえば宣言の部分をからは見えない「第4の要素」というものがあるのです。

それは「戻り値」というものです。

戻り値というのは、関数が返す値のことです。

関数は、ただ処理を実行するだけではなく、実行した結果を呼び出し元に返すことができます。

値を返すことができると、その関数を変数や普通の値と同じように使えるようになるのです。

サンプルを更に修正してみます。

function calc(max) {
    let total = 0;
    for (let num  = 1; num <= max; num ++) {
        total += num;
    }
   return total;
}

 document.write('<ol>');
 document.write('<li>60まで:' + calc(60) + '</li>');
 document.write('<li>70まで:' + calc(70) + '</li>');
 document.write('<li>80まで:' + calc(80) + '</li>');
 document.write('<li>90まで:' + calc(90) + '</li>');
 document.write('<li>100まで:' + calc(100) + '</li>');
 document.write('</ol>');

alcの計算結果を戻り値として返すようにしています。

関数の最後に『return total;』があります。これが値を返しているところです。

「return」というのは、そこで関数を抜けて、

その関数を呼出したところに処理を戻す働きをします。

ことのときreturnの後につけた値を戻り値として返しています。

戻り値を使えば自由になる

値を計算するかでなので、表示のスタイルなどは呼び出した側で自由に作れます。ここでのcalcを使っている部分をみると、

document.write('<li>100まで:' + calc(100) + '</li>');

 

()の中にある、テキストを1つにつなげる足し算の式の中に書かれていることが分かります。

戻り値のある関数は、関数そのものを式の中にいれたり、変数に代入したり、

普通の値や変数と全く同じように使うことができるのです。

第2回はここまでです。

次回は超入門最後になります。

😊参考書籍😊

【JavaScript超入門】基礎から学べるサンプルコード解説|第3回基礎から学べるJavaScriptサンプルコード解説、第3回です。超入門はこれで最後になります。 JSでも頻繁に使われるオブジェク...