基礎学習 JavaScript編 超入門 「順次」「繰り返し」「分岐」

開発者専用ツール

Google Chrome Developer Toolsという開発者専用ツールがあり、このConsole機能で実はJavaScriptを直接動作させる事ができるので、手軽にプログラミング体験をしてみましょう

コンソールとは「入力・出力用の装置」のことです。

コンソールの開き方

1. 右クリックからさらに「検証」をクリック
2. Consoleタブを開く
3. (不要なログが邪魔な場合は)クリアする（あっても動作には問題がないです）
4. まずは足し算をしてみましょう

四則演算

• 足し算
• 引き算
• 掛け算
• 割り算

さらに、余りを求める商をよく使います。
商は思いの外よく使います。
その数字が偶数か奇数かを判別する際に利用したりします。

上記の情報を整理するとこのようになります

1 + 1;
5 - 3;
2 * 3;
6 / 2;
7 % 2;

コンソールに表示する

復習ですがコンソールとは「入力・出力用の装置」です。
Chrome Developer Toolsはよくできていて最後に入力した結果が自動的に出力されますが、通常のプログラムでは出力する際にもプログラムとして命令をする必要があります。

実際Chrome Developer Toolsで複数の入力があると最後しか出力されないのを確認できます。

正式な手続きで全ての入力を出力して確認できるようにしましょう

その際には下記のように「console.logメソッド」を使います。

console.log(1 + 1);

メソッドとはコンピュータに対する命令です。

分解するとこのようになります

オブジェクトとは関連のあるデータと機能の集合です。
やや難解なので、「プログラムにはそのように便利に取り回せるのがあるんだ」程度で今のうちは大丈夫です。
複雑なプログラムを作成する際に自分で様々なオブジェクトを作ると理解が進みます。

このページで学習する全てのプログラムの共通の基礎とも言える「順次」「繰り返し」「分岐」の学習の際にはオブジェクトの理解が浅くても害はありません。

より詳しい事を知りたい人は最下部に詳しいリンクを貼りますので勉強してみて下さい、全体を把握してからこの詳細は理解した方がしっくり来ると思います

console.log(1 + 1);
console.log(5 - 3);
console.log(2 * 3);
console.log(6 / 2);
console.log(7 % 2);

コメント文

人間が直接プログラムだけじゃなくて中にメモをしたい事があります。
その際にコンピュータが実行してエラーにならないように
実行から除外する機能としてコメント文があります

初期学習の際にはコードを写経するだけではなく、参考書や講師の説明を
一行づつコメント文で自分の理解した言葉で置き換えて書いてくと理解が
進みます

僕の活用例です
リンク

// 加算
console.log(1 + 1);

// 減算
console.log(5 - 3);

// 乗算
console.log(2 * 3);

// 除算
console.log(6 / 2);

// 剰余算
console.log(7 % 2);

文字列

文字と文字列

プログラムの世界ではアルファベットの文字列は後述する変数と呼ばれる機能を持つ場合があります。

データとして文字列を扱う際はシングル若しくはダブル クォーテーションで括る必要があります。

また、より正確に表現すると「文字とは一つの文字」であり「文字列は複数の文字のリスト」です。

文字列は「+」で結合できます。
また評価には優先順位があり、四則演算ではなく文字列の結合が優先される場合があるので
「優先順位」等のキーワードで調べてみて下さい。

"abc";
"abc" + "efg";

console.log("abc");
console.log("abc" + "efg");

// 加算
console.log("1 + 1の結果は" + 1 + 1 + "です。");
console.log("1 + 1の結果は" + (1 + 1) + "です。");

変数

入力したデータや計算した結果を別の処理で再び使いたい時がプログラムではよくあります。
その際にデータを箱のような仕組みに一旦格納して、必要な時にそこから取り出して使うというのが変数という仕組みです。

「変数」という名前ですが、数値データだけではなく文字列も扱えます

変数の宣言

変数を使う際には、「コレから変数を使います！！！」という事を明示する必要があります。
コレを変数の宣言と呼びます。

このようになります

var 変数名

変数名の前にスペースを空けて、varをつけるだけです。
また変数の宣言と同時に値を入れる初期化はこのようになります

var 変数名 = データ

プログラムの「=」は四則演算とは異なり、「代入演算子」とよび左の結果を右の変数に代入するという意味になります。

通常の数式は左から右に流れますが、プログラムでは逆方向に注意して下さい。

変数を使った例を示します

足し算の合計を変数sumに代入し
文字列連結して合計を表示する際に変数sumを再利用してるのがわかると思います

var sum = 1 + 1;

console.log("足し算の結果は" + sum + "です。");

データ入力

「入力 → 処理 → 出力」の、処理以降ができたので「入力」部分も追加して
一気にプログラムっぽくしましょう

JSにはpromptというウェブブラウザにユーザにテキストを入力することを促すメッセージを持つダイアログ機能が備わっているので利用しましょう

下記では入力された結果がinputData変数に代入され、コンソール出力されます。

var inputData = prompt("繰り返したい数値を入力してください");
console.log("入力された値は" + inputData + "です。");

数値変換

promptから入力された値は例え数値でも一旦文字列に変換処理される仕組みなっています。
その為、足し算を処理しようとして文字列連結になってしまう事があります

var inputData = prompt("繰り返したい数値を入力してください");
console.log("入力された値は" + inputData + "です。");

var sum = inputData + 2;
console.log("足し算の結果は" + sum + "です。");

コレを足し算として数値計算するには文字列になってるinputDataを数値に変換すれば良い
プログラムではこのようなデータの変換はよくあるのでそういった用途のメソッドが用意されている

parseIntを使いましょう

var inputData = prompt("繰り返したい数値を入力してください");
console.log("入力された値は" + inputData + "です。");

var sum = parseInt(inputData) + 2;
console.log("足し算の結果は" + sum + "です。");

条件分岐

parseIntは実は数値にしか対応せず、「abc」と言った文字列だと当然数値に変換する事ができないので、
parseInt処理する前に数値かどうかを判定する必要があります。

そう言った条件によって処理を分岐させるのが「条件分岐」です

概念図はこのようになります

if(条件){
  処理
} 

isNaN関数は渡された値が数値に変換可能ならfalse変換不可能ならtrueを返します。
「!」は否定を意味しtrueをfalseに、また逆を処理します。

なので、下記がtrueであれば数値に変換可能な条件が成立します

console.log(!isNaN("123"))
console.log(!isNaN("abc"))

コレを条件分岐の条件に組み込むとこのようになります

var inputData = prompt("繰り返したい数値を入力してください");
console.log("入力された値は" + inputData + "です。");

if(!isNaN(inputData)){
  var sum = parseInt(inputData) + 2;
  console.log("足し算の結果は" + sum + "です。");
} 

もし、条件にそぐわない場合も処理する場合はelseで括ってあげればfalseの際の処理を行ってくれます

var inputData = prompt("繰り返したい数値を入力してください");
console.log("入力された値は" + inputData + "です。");

if(!isNaN(inputData)){
  var sum = parseInt(inputData) + 2;
  console.log("足し算の結果は" + sum + "です。");
} else {
  alert("数値を入力してください");
}

繰り返し

逐次・条件分岐と制御構文をやってきましたが、いよいよ最後の繰り返し処理を学びましょう

書式はこのようになります

for(初期化式; 条件式; 加算式)
{
  処理
}

使用例はこのようになります

for(var i=0; i < 5; i++)
{
  console.log(i + "回目を繰り返し中")
}

なかなか難しいので分解して詳細解説します

「新規作成した変数iを数値0で初期化して、継続条件「変数iが5より小さい」が真の間内部の処理を繰り返せ」
になります

コレを条件分岐の中に組み込むとこのようなプログラムになります。

機能をまとめると

1.データを入力する事ができる
1.入力したデータを数値変換できるか条件分岐する
1.trueの場合。数値回分「何回目の繰り返し処理か」をコンソール出力する
1.falseの場合。文字列ではなく数値を入力する旨のアラートを表示させる

var inputData = prompt("繰り返したい数値を入力してください");
console.log("入力された値は" + inputData + "です。");

if(!isNaN(inputData)){

  for(var i=0; i < inputData; i++)
  {
    console.log(i + "回目を繰り返し中")
  }
} else {
  alert("数値を入力してください");
}

リンク

JavaScript オブジェクトの基本