JavaScriptの基本

変数

変数の概要

変数とは、値を入れておくことができる箱のようなものです。
プログラム中で使いたい値（例えば、名前や数値など）を保存しておくことで、あとでその値を簡単に参照したり操作したりすることができます。

変数の宣言

JavaScriptでは、変数を使うためにはまず「これは変数です」という宣言が必要です。宣言することで、その変数をプログラム中で使うことができるようになります。
宣言方法に、 const（コンスト）、let（レット）、var（バー）の3つがあります。
下記例の「変数名」の部分は、自分で好きに設定することができます。

var 変数名 = 値;
let 変数名 = 値;
const 変数名 = 値;

初めての変数

下記例を入力しブラウザで表示すると、コンソールツールに「Hello World!」と表示されます。
宣言以降の変数nameは全て「Hello World!」になる。

var name = 'Hello World!';
console.log( name );

変数の宣言と代入

初めに変数を作成することを宣言といいます。
変数に値を設定することを代入といいます。

宣言した変数に値を設定し直すことを再代入といいます。
一度宣言した変数を、同じ変数名で宣言し直すことを再宣言といいます。

var name = '電ビ太郎';  // nameを宣言し代入する
console.log( name );  // 電ビ太郎と出力される

name = '電ビ花子';  // 再代入する
console.log( name );  // 電ビ花子と出力される

var name = 'デンビジウ';  // nameを再宣言し再代入する
console.log( name ); // デンビジロウと出力される

変数名の付け方とルール

変数の名前をつける際には以下のようなルールがあります。

• 半角のアルファベット、_（アンダースコア）、$（ダラー）、数字が使用できる
• 1文字目は数字以外にする
• 大文字と小文字は区別して認識される
• 予約語と同じ名前にしない

予約語とは

予約語とは、以下のような単語のことで、同じ名前は変数に使えません。

• 何らかの意味や機能がある言葉
• 過去に機能が存在したが、廃止された言葉
• 将来の仕様改定に備え、予約してあるだけの言葉

つまり、「それは、もう役割決まってるから好きに使わないでね」になっている単語のことで、予約語を使った場合、エラーになる。

例） break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, finally, for, function, if, import, in, instanceof, new, return, super, switch, this, throw, try, typeof, var, void, while, with, yield など

データの種類

データとは

変数に代入していた値には、様々な種類があります。
JavaScriptでは、データを扱うために様々な「データ型（データタイプ）」があります。データ型は、プログラムがどのような値を扱っているかを決定するものです。
以下はその基本形で、特に数値、文字列、真偽値はよく登場します。

数値

数値とは

数値型は、整数や小数、マイナス値などの数値を扱うためのデータ型です。
演算子を使って足し算、引き算、掛け算、割り算、乗除の計算もできます。

var number = 1;  // 数値の1
var number = '1';  // 文字列の1

変数に数値を代入する場合には、上記のように記述します。
シングルクォーテーションで数字を囲むと、数値ではなく文字列になるので注意してください。

計算を行う

数値型では、基本的な四則演算（+、-、*、/、%）を使って計算が可能です。
普通の算数と同じルールが適用され、掛け算や割り算は優先して先に計算され、カッコをつけて計算することもできます。
変数が数値であれば、変数と数値、変数と変数でも計算ができます。

var number = 1 + 1;  // 足し算
var number2 = 10 - 8;  // 引き算
var number3 = 5 * 2;  // 掛け算
var number4 = 10 / 2;  // 割り算
var number5 = 10 % 3;  // 乗除

文字列

基本の使い方

文字列とは、JavaScriptでテキストデータを扱うためのデータ型です。
単語や文、さらには数字や特殊文字など、テキストとして扱いたい情報をまとめたものです。
文字列を扱う場合、「''（シングルクォーテーション）」、もしくは「""（ダブルクォーテーション）」で囲います。
本授業ではシングルクォーテーションで統一します。

var name = '電ビ太郎'; // 文字列。シングルクォーテーションで囲む。

文字列の結合

複数の文字列を結合するには、+ 演算子を使います。
文字列間のプラスは結合の意味になります。
数値と同様に、変数が文字列であれば、変数と文字列、変数と変数でも結合ができます。

var name = '電ビ太郎';
console.log( 'こんにちは' + name + 'さん' );

特殊な文字を使用する

特殊な文字とは、改行やタブ、シングルクォーテーションの中のシングルクォーテーションなどのことです。
文字列の中で特定の特殊文字を使う場合、エスケープシーケンスを使用します。
エスケープシーケンスとは、\（バックスラッシュ）と組み合わせて特殊文字を表現します。

例えば、下記の場合エラーになります。
これは、JavaScriptが文字列での改行ではなく、プログラムでの改行だと判断するためです。

console.log( 'こんにちは
電ビ太郎さん' );

しかし、下記のようにエスケープシーケンスを使用すると問題なく表示されます。

console.log( 'こんにちは\n電ビ太郎さん' );

エスケープシーケンスの種類

変数のメリット

変数のメリット

値の再利用

プログラム内で値を保持し、必要に応じて再利用できる

コードの読みやすさ

変数を使うことで、コードの可読性が向上する。
変数名を適切に命名することで、コードの意図や目的が明確になる。

値の再利用を体感する

何かのチケット1500円の1人、3人、5人の金額をコンソールログに出力したい時、下記のように一つずつ直接入力する方法があります。

console.log('チケット1人分の金額は1500円です');
console.log('チケット2人分の金額は3000円です');
console.log('チケット5人分の金額は7500円です');

しかしこれでは、プログラム的ではありません。

変数や数値計算を利用することで、頭の中で計算する手間や計算ミスなどがなくなります。
仮にチケットの値段が変更しても、変数priceの数値のみの変更で済み 容易に変更できます。

var price = 1500;
console.log('チケット1人分の金額は' + price + '円です');
console.log('チケット2人分の金額は' + price * 2 + '円です');
console.log('チケット5人分の金額は' + price * 5 + '円です');

配列

配列とは

配列とは、JavaScriptで複数の値をまとめて格納・管理するためのデータ型です。
配列を使うことで、1つの変数に複数のデータを保存し、必要に応じてそのデータを順番に取り出したり、操作したりすることができます。
リストやコレクションのようなデータ構造と考えると分かりやすいです。

配列の宣言方法

配列は、角括弧 [] で囲み、各要素をカンマ（,）で区切って作ります。
配列の要素には、文字列や数値、さらにはオブジェクトや他の配列を入れることができます。

var 配列名 = [値1,値2,値3....];

配列の例

配列は、角括弧 [] で囲み、各要素をカンマ（,）で区切って作ります。
配列の要素には、文字列や数値など、任意の型の要素を入れることができます。

var strings = ['a','b','c'];
var numbers = [1,2,3];
var fruits  = ['orange','apple','banana'];

配列からデータを取得する

配列の要素には下記方法で取得・アクセスします。
配列の中の値に振られる番号は、1からではなく0からです。
配列の中の１番目の値は、配列での順番では0番目になり、２番目の値は1番目です。
存在しない要素へアクセスした場合には、undefinedが返ります。

配列名[データの番号]

var fruits  = ['orange','apple','banana'];
console.log( fruits[0] ); // orageと表示される

配列の中に入っているデータの数を取得する

下記方法で、配列の中に幾つのデータが入っているのかを取得できます。

配列名.length

var fruits = ['orange','apple','banana'];
console.log( fruits.length ); // 3と表示される

ダイアログボックス

ダイアログボックスとは

ダイアログボックスとは、JavaScriptでユーザーにメッセージを表示したり、入力を求めたりするためのポップアップウィンドウです。
ダイアログボックスは、ブラウザの機能を使って簡単に表示できます。主に以下の3種類のダイアログボックスが用意されています。

警告ダイアログボックス（alert）

alertは、メッセージをユーザーに表示するためのシンプルなダイアログボックスです。
ユーザーが「OK」ボタンをクリックするまで、他の操作ができません。通知や警告を表示したい場合に使います。

alert('これはアラートボックスです');

確認ダイアログボックス（confirm）

confirmは、ユーザーに「OK」または「キャンセル」を選ばせるダイアログボックスです。
ユーザーが選んだ結果は true または false で返されるので、その結果に基づいて処理を行うことができます。

var name = confirm('あなたは電ビ 太郎さんですか？');
console.log( name );

入力ダイアログボックス（prompt）

promptは、ユーザーにテキスト入力を求めるダイアログボックスです。
入力された値が文字列として返され、ユーザーが「キャンセル」をクリックした場合は null が返されます。

var name = prompt('名前を入力してください');
console.log( name );

読みやすいコードのコツ

読みやすいソースコードは、自分や第三者が後で見直したときに理解しやすく、保守しやすいコードです。
以下のコツを守ることで、ソースコードの可読性を高めることができます。

コメントを適切に使う

コードにコメントを加えることで、複雑な部分や処理の意図を説明できます。
ただし、コメントは必要な部分だけに書くようにし、わかりやすいコードには過剰にコメントをつけないようにします。

// 消費税率を変数で管理
var tax = 1.1;

スペース、タブを活用する

見やすさ、読みやすさをアップするためにスペースやタブを使用します。

// スペースが揃っていない
var name ='電ビ太郎';
var school = '熊本電子ビジネス専門学校';

// スペースが揃っている
var name   = '電ビ太郎';
var school = '熊本電子ビジネス専門学校';

適切なインデントを使用する

インデント（字下げ）は、コードの構造を視覚的にわかりやすくするために非常に重要です。

// インデントなし
function hello(){
console.log('こんにちは');
}

// インデントあり
function hello(){
	console.log('こんにちは');
}

わかりやすい名前を使う

変数名は、内容を明確に説明するものを使いましょう。
名前から役割がわかるようにすることで、コードの理解がしやすくなります。

// わかりにくい名前
var name1 = '電ビ';
var name2 = '太郎';

// わかりやすい名前
var lastName  = '電ビ';
var firstName = '太郎';