JavaScript 基礎を理解する

変数

JavaScriptでは文字列や数値を繰り返して処理することが多々あり、その度にコードを書くのは大変です。
そんなときに役立つのが変数です。

変数とは

文字列や数値などのデータを繰り返し利用できるのが変数になります。イメージしやすいのは、
文字列や数値のデータを名前がついた値に入れ、変数を使って処理を簡単にすることができます。

変数は

const、let、varの3種類があり、 =  の右側に入れるのは数値や文字列などです。= は代入演算子といい、
= の右側にある数値や文字列を左側の変数に入れて定義することができます。

変数(箱)の書き方は以下のようになります。

例

const  変数名  =  数値、文字列など:

次のコードではcharacterという変数を宣言して、ミッキーという文字列を書いて変数を定義しています。

例

const character = "Mickey";

定数

constは再代入ができない変数の宣言で、constで宣言された変数のことを定数と呼び、
後からconstで宣言した変数を定義することはできません。

例

//エラーになる原因
const character = "Mickey";
character ＝ "Donald";

最初にconst character ＝ "Mickey"を定義しているので、character(変数)をcharacter ＝ "ドナルド"で
再代入するとエラーが発生します。constを使用するメリットは変数を誤って書き換えることを防ぐことができることです。変数の値を再代入したい場合は、letを使用します。letの書き方もconstと同じ書き方です。

let

letで宣言した変数は何度も値を変更することが可能です。

例

let character = "Mickey";
character = "Donald";

constで変数（character）宣言してDonaldで再代入しようとするとエラーが出ましたが、
letで宣言した場合は（character  = "Donald"）の値を再代入することができます。

※letは初期値を指定しなくても定義できます。

例

let character;
character = "Mickey"

ただし、constやletで変数を定義した場合は（SyntaxError）のエラー表記がでます。

例

let  character = "Mickey";
let  character = "ミニ"ー;
let  character = "Donald";

let で宣言して初期値がない場合は、 ( =  代入演算子 )   を使うことで値を変数に代入することができます。
代入演算子は右側の値や文字列を変数へ代入することでしたが、ここではミッキーを変数（character）に
代入してletを定義しています。let で宣言した変数は値を何度も変えることができます。

例

let count = 1;
count = 2;
count = 3;

#var
varで宣言された変数もletと同じように何度も値を変更することが可能です。

例

var character;
character = "ミッキー"

letと違うのはvarで宣言された変数は何度も再代入できて、値も再代入できてしまうことです。

例

var character;

character = "ミッキー"
character = "ミニー"
character = "ドナルド"

変数や値を上書きをすると予期せぬエラーの原因ともなるので、変数を定義するときは
constで上書きできないよう定義。

識別子（変数名、関数名）のルール
※識別子とは変数や関数に付けられた名前のことを識別子といいます。

変数名や関数名を定義するにはいくつかのルールがあります。

①半角アルファベット、_アンダーバー、$(ダラー)、数字を使用する

例　name,　_name,　$name,　name1
（漢字やひらがなも利用できるが、一般的には使用しない。）
（単語と単語をつなげる時は_アンダーバーでつなげるか2つ目の文字を大文字にする）
　例　first_nameまたはfirstName

②数字からは使えない

name1やname_1のように文字やアンダーバーで数字を含ませることはできますが、
1nameや1_nameのような数字から始めるのは使えません。

③予約後と同じ名前は定義できない

予約後とは構文内ですでに使用しているもの、使用予定のキーワードです。
予約語 - JavaScript | MDNに詳しく記載されていますが、予約後は他の文字と
組み合わせると使用できます。

constは必ずしも定数ではない

constは再定義できない変数宣言ですが、次のような場合にはconstの値を変更することができます。

※変数の値を変更したい場合

例

const  character = {
   name: "ミッキー",
};
character.name = "ミニー";
cnsole.log(character);

constは再代入ができないだけで、値(今回の場合はname)は変更することができます。

まとめ

JavaScriptの変数宣言はconst、let、var の3種類ある 。
・const　再代入できない
・let 　再代入できる
・var　再代入できるがvar宣言が古いため予期せぬエラーの原因となる。
・constで基本的には宣言する
・constは再代入できないが、値は変更できる
・変数(識別子)にはルールがある

forの書き方

// for(初期値; 繰り返す条件; 増減 ++ --)
for(i = 0; i < 10; i++) {
  console.log(i);
}

// 0から9まで処理が実行される
// iの初期値は0、iは10より小さい数字まで処理が実行される

繰り返す回数を決めたい場合はforで処理を実行する

for ofの書き方

const characters = ['ミッキー', 'ミニー', 'ドナルド'];

// 単数系　＋複数形
for(character of characters){
  console.log(character);
}

// 'ミッキー'
// 'ミニー'
// 'ドナルド'

ミッキー、ミニー、ドナルドと一つずつ処理が実行されます。
配列の処理をまとめて書き出したり全部出したいときに有効になる。

連想配列

配列の中にキーと値がセットになっています。

キー(key): 値（value）

#オブジェクトの基本

オブジェクトはkeyとvalueのセットで管理されています。

プロパティ名(key)	値（value）
name	ミッキー
kinds	mouse

keyとvalueをオブジェクトにすると次のようになります。

const character = {
  name: 'micky',
  kinds: 'mouse',
}

また、keyとvalueの2つのデータをセットでプロパティと呼び、
オブジェクトの中はプロパティを複数にまとめて管理することもできます。

オブジェクトの中身を呼び出すときは

const character = {
  name: 'micky',
  kinds: 'mouse',
}
console.log(character.name)

characterの後に（.ドット）を書いてkeyを指定します。

this

呼び出し元のオブジェクトへの参照を保持

const character = {
  name: 'ミッキー',
  hello: function() {
   console.log('Hello' + this.name);
  }
}
//thisは呼び出し元のcharacterを参照している
//上記の場合はcharacterオブジェクトのnameプロパティを参照する

const character = {
  name: 'ミッキー',
  hello: function() {
   console.log('Hello' + this.name);
  }
}
character.hello(); //Helloミッキー


//メソッドの中でオブジェクトを取得したいときはthisを使用する

オブジェクトのメソッドを引数で渡した場合

characterのメソッドであるhelloをコールバック関数でfn関数に渡した場合、
refが実行されたされた際のthisのオブジェクト先がwindowオブジェクトを参照する
person.helloの参照先の関数がrefに格納されている
ref();が実行された時は関数が実行されている

window.name = 'ミニー'

const character = {
  name: 'ミッキー',
  hello: function() {
  console.log('Hello' + this.name);
  }
}

//キャラクターのメソッドを
character.hello();

function fn(ref) {
	ref();
}


fn(character.hello);

//Helloミッキー
//Helloミニー

オブジェクトとして実行
this => 呼び出しもとのオブジェクト

関数として実行される場合
this => グローバルオブジェクト

グローバルオブジェクトを参照することになります。

オブジェクトのメソッドをコールバック関数で渡した場合は
内部で実行されることになります。