【JavaScript】javascriptの基本

javascriptとは

プログラミング言語。主にWEBブラウザ上で使われおり、WEBページに動きをつけたり、計算をさせたり、様々なことができる。

変数(variable)とは

扱いたい数値や文字列、配列などのデータを格納し、名前をつけたもの。

変数の定義

sample.js

// 変数 value を定義し、1を格納
var value = 1;

一度宣言した変数にはあとから違う値を格納することができる。
※varで宣言したときのみ再宣言・再代入が可能ということに注意。

sample.js

var value = 1;
// 再代入
value = 2;

変数宣言

変数を宣言する際に使用するワード

var

再宣言、再代入が可能。

sample.js

var variable = '初期値';
variable = '再代入OK';
var variable = '再宣言OK';

let

再代入は可能だが、再宣言は不可。

sample.js

let variable = '初期値';
variable = '再代入OK';
let variable = '再宣言NG';

const

再代入/再宣言が不可。

sample.js

const variable = '初期値';
variable = '再代入NG';
const variable = '再宣言NG';

関数（function)とは

まとまった処理が入った箱のようなもの。何度も使い回しができる。
プログラムが大きくなると同じ処理を繰り返し使う場面が出てくるが、関数を使うことでスマートなプログラムを書くことができる。
変更が生じた場合も変更点が一箇所で済むというメリットがある。
関数は変数に代入したり、関数の引数として渡したり、返り値として関数を返すことができる。

関数の定義

sample.js

// 関数 valueを定義
function value() {
// ここに処理をかく
}

引数や返り値(return)を入れて

sample.js

// 関数 valueを定義し、引数 numberを渡す
function value(number) {
// ここに処理をかく
// numberを2乗した値を返す
  return number * number;
}

関数式（関数リテラル）

関数式（関数リテラル）という関数の書き方もある。
宣言する際に関数名を記述しなくてもいいので無名関数などとも呼ばれる。

sample.js

// 変数をvalueを定義し、その中に関数を代入
var value = function() {
// ここに処理をかく
}

上記のコードでは定義する際に関数名を記述しないでそのまま変数に関数を代入している。

アロー関数

アロー関数はfunction()の代替文。=>を用いて、通常の関数よりも短く記述することができる。

sample.js

// 通常の関数
var value = function(number) {
// ここに処理をかく
}

//アロー関数
var value = (number) => {
// ここに処理をかく
}

処理が1行の場合は{ }で囲まなくてOK

sample.js

var value = (number) => ここに処理をかく ;

引数がない場合

sample.js

// 引数がない場合は()内は空
var value = () => ここに処理をかく ;

コールバック関数

関数の引数として渡される関数。特定のタイミングで処理を実行させることができ、ある処理が終わった後に関数を実行させる時などに使用する。

sample.js

// A関数（コールバックとして実行される関数）
function hello() {
  console.log('hello');
}

// B関数（コールバックを実行する関数）
function execute(callback) {
  callback();
}

// hello関数を引数としてexecute関数を実行
execute(hello);

🌟 処理の流れ
① execute関数を実行。引数としてhello関数を渡す。
② execute関数が呼ばれると引数のcallbackにhello関数が入る。
③ execute関数の中でcallbackを実行（hello関数を実行）
④ console.logでhelloを出力

引数(parameter)とは

ある処理の結果を作るために渡される変動する値。
引数は複数指定することも可能。その場合はカンマで区切る。

sample.js

function value(引数1, 引数2, 引数3) {
処理
}

返り値（return）とは

関数内でreturn文を呼び出すと関数の実行が停止する。
返り値に値が指定されていればその値を関数の呼び出している場所で返す。
特に式や値が指定されていなければundefindを返す。

sample.js

// 指定がないのでundefindを返す
return;

プロパティとは

特定の情報（値）に名前をつけたもの。

sample.js

// プロパティ名:値
number: 10
string: 'apple'
array: ['apple','orange','banana']

オブジェクトとは

プロパティの集まり。
プロパティの集まりに名前（プロパティ名）をつけて管理できるもの。

sample.js

// { プロパティ名:値 , プロパティ名:値 }
{ name:'apple' , price:100 }

// オブジェクトの中に配列を記述することも可能
{ name:'apple' , price: [100,200,300] }

※配列や関数も一種のオブジェクト

メソッドとは

オブジェクトのプロパティに代入された関数のこと。
あるオブジェクトのプロパティに関数を定義した場合、関数とは呼ばずメソッドと呼ぶ。

sample.js

{
  name:'apple',
  price:100,
  // halfPriceがメソッド
  halfPrice: function() {
　　return price / 2
  } 
}

クラスとは

アプリケーションではオブジェクトをいくつも扱っている。
例えば、ログインが必要なアプリケーションであればユーザーに関するデータ（オブジェクト）を用いる。これらのデータを効率よく生成するためのオブジェクトの設計図のようなものがクラスである。

クラスを生成

クラス名は基本的に大文字から始めるようにする

sample.js

// Userがクラス名
class User {
}

インスタンスとは

クラスから生成されたオブジェクトのことを特別にインスタンスと呼ぶ。インスタンスはクラス（設計図）をもとに生成される。
※ES6以前はクラスが使えなかったため、クラスではなくコンストラクタからインスタンスを生成していた。（現在はjavascriptでクラスを使用することができる）

なぜインスタンスを生成するのか？

例えば、AとBというプログラムがあったとして、両方のプログラムが全く同じオブジェクト（クラス）に対して読み書きをしてしまうと、お互いに干渉してしまってプログラムが動作しなくなってしまう。
なので、オブジェクト（クラス）をAとBそれぞれでコピー（インスタンス）して読み書きすることで干渉することなくプログラムを読み書きすることができる。

インスタンスを生成

下記コードのようにnew クラス名();と書くことでインスタンスが生成される。

sample.js

// Userクラスを生成
class User {
}
// Userクラスからインスタンスを生成して変数userに代入(変数userがインスタンスとしての役割をもつ)
var user = new User();

コンストラクタ関数

インスタンスを作成する関数。初期化も行う。

スプレッド構文

配列やオブジェクトを展開する構文。ドットを...と3つつけるとスプレッド構文になる。
スプレッド構文で展開すると[ ]や{ }が外れる。配列やオブジェクトとしてまとまっていた要素をバラバラにするのでスプレッド。

sample.js

const number = [ 1, 2, 3 ]

console.log(number); // [ 1, 2, 3 ]
console.log(...number); // 1 2 3

使用方法

配列をマージ

sample.js

const a = [ 1, 2, 3 ]
// 変数aに新しい値を追加したものを変数bとする
const b = [...a, 4, 5, 6 ]
console.log(b); // [ 1, 2, 3, 4, 5, 6 ]

配列をコピー（シャローコピー）

sample.js

const a = [ 1, 2, 3 ]
// スプレッド構文を使って変数aをコピー
let c = [...a]
// 変数cに値を追加
c.push(4)
// 参照先の変数aを変えず、変数cにだけ値を追加することができた
console.log(a); // [ 1, 2, 3 ]
console.log(c); // [ 1, 2, 3, 4 ]

なぜコピーするのか？

破壊的な変更を行った場合、参照先の値も変更されてしまうため。
コピーすることで参照先のオブジェクト(配列)とは別物のオブジェクト(配列)を生成することができ、参照先の値に影響を及ぼすこともない。
※あくまでも1階層だけのコピーなので、ネストしている値はコピーされないので注意。

↓ コピーしないで配列の値を変更してみる

sample.js

const a = [ 1, 2, 3 ]
// コピーはせず、新たな変数cにaを代入
let c = a
// 変数cに値を追加
c.push(4)
// 変数a(元の配列)にも値が追加されてしまう
// ここでわかるのは、あくまでも変数cは変数aを参照しているだけということ
console.log(a ,c); // [ 1, 2, 3, 4 ] , [ 1, 2, 3, 4 ]

破壊的メソッドと非破壊的メソッド

配列オブジェクトには破壊的メソッドと非破壊的メソッドがある。
破壊的メソッド
元の配列そのものを直接操作（破壊）して変更した配列、または変更箇所を返すメソッド。
非破壊的メソッド
元の配列のコピーを作成してから変更し、そのコピーした配列を返すメソッド。