【個人用】

随時更新

変数（const,let,var）

	再代入	再定義	備考
const	×	×
let	○	×
ver	○	○	古い。ブロックスコープの無視。変数の巻き上げがおこりバグの原因になる可能性がある。

const

script.js

//再代入できない
const constNumber = 100;
constNumber = 200;
>> "TypeError: Assignment to constant variable."

//再定義できない
const constNumber = 100;
const constNumber = 200;
"SyntaxError: Identifier 'constNumber' has already been declared"

//constが厳密に定数ではない理由
const obj = {
  foo: 100
};
console.log(obj.foo);
>> 100
obj.foo = 200;
console.log(obj.foo);
>> 200 //変数objのfooの値が更新できるため。

let

script.js

//再代入できる
let letNumber = 100;
console.log(letNumber);
>> 100
letNumber = 200;
console.log(letNumber);
>> 200 //再代入により値が更新された

//再定義できない
let letNumber = 100;
let letNumber = 200;
>> "SyntaxError: Identifier 'letNumber' has already been declared"

ver

script.js

//再代入できる
//再定義できる
var varNumber = 100;
var varNumber = 200;
console.log(varNumber);
>> 200

条件式（if文）

配列

script.js

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list);
>> ["Ruby", "Ruby on Rails", "JavaScript", "HTML", "CSS"]

配列の要素を取得

script.js

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list[2]);
>> "JavaScript"

配列の要素数を取得

script.js

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list.length);
>> 5

lengthメソッド...配列の要素の数を設定または取得する
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length

配列の要素を追加

script.js

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.push('GitHub');
console.log(list);
>> ["Ruby", "Ruby on Rails", "JavaScript", "HTML", "CSS", "GitHub"]

pushメソッド...配列の末尾に要素を追加する
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push

配列の要素を削除

script.js

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.pop();
console.log(list);
>> ["Ruby", "Ruby on Rails", "JavaScript", "HTML"]

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
let poped = list.pop();
console.log(poped);
>> "CSS"

popメソッド配列の最後の要素を取り除き、呼び出し元にその値を返す。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

script.js

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.shift();
console.log(list);
>> ['Ruby on Rails', 'JavaScript', 'HTML', 'CSS']

shiftメソッド...配列から最初の要素を取り除き、その要素を返す。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

オブジェクトを扱う

オブジェクトを定義

script.js

let obj = { name: 'yamada', age: 25, address: 'tokyo' };
console.log(obj);
>>
[object Object] {
  address: "tokyo",
  age: 25,
  name: "yamada"
}

オブジェクトはデータを名前と値をセットで管理。このセットをプロパティと言う。
addressはプロパティ名、'yamada'は対応する値となる。

プロパティの値を取得

script.js

let obj = { name: 'yamada', age: 25, address: 'tokyo' };
console.log(obj.name);
>> "yamada"

プロパティの値を変更

script.js

let obj = { name: 'yamada', age: 25, address: 'tokyo' };
obj.name = 'tanaka';
console.log(obj);
>>
[object Object] {
  address: "tokyo",
  age: 25,
  name: "tanaka"
}

繰り返し

for 文

script.js

num = 1;
for (let i = 0; i < 10; i += 1) {
  console.log(num + '回目の出力')
  num +=  1
}

"1回目の出力"
"2回目の出力"
.
.
"10回目の出力"

関数（ 関数宣言と関数式（無名関数) ）

JavaScriptにおける関数の定義には2種類の方法がある

script.js

// 関数宣言
function hello(){
  console.log('hello');
}

// 関数式（無名関数）
let hello = function 関数名(){
    console.log('hello');
}

関数式（無名関数）...関数を変数の中に値として入れたもの。また、関数名が無くても動かすことができる。

関数を定義

script.js

function 関数名(引数) {
  // 処理の内容
}

function sayHello(){
  console.log('hello');
}
function sayName(name){
  console.log(name);
}

let myName = 'yamada';
sayHello();
>>hello
sayName(myName);
>>yamada

オブジェクトに対してプロパティ名を続けて記載することで値を取り出すことができる。

return

script.js

function calc(num1,num2){
  return num1*num2;
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

高階関数（関数の中で関数の処理を行っている関数）

script.js

function 高階関数(コールバック関数) {
  // 色々処理を入れたり...
  コールバック関数();
}

コールバック関数（引数として渡されている関数のこと）

script.js

script.js

HTM要素の取得

test.js

$("セレクタ")

//クラス属性の取得
$(".classSelector")
//id属性の取得
$("#idSelector")
//要素の取得
$("h1")
//属性の取得
$("input[ type='radio' ]");

thisでイベントの発生元となった要素を取得する