JavaScriptの機能一覧表です。 最低限必要な内容に絞り込んで、分かりやすくしました。 発展的な内容はこちら

変数

//JavaScriptは型無し言語
//;は付けなくていい場合があるが、付けた方が不本意な動作を防げる
let a = 1;//基本的にこれを使う
var b = 2;//グローバル変数という特殊な変数。プログラム全体からアクセスできる。
const c = 3;//定数。上書きできない 
//四則演算はどの言語も共通
console.log(`a+b = ${a+b}`);//+, 加算
console.log(`a-b = ${a-b}`);//-, 減算
console.log(`axb = ${a*b}`);//x, 乗算
console.log(`a/b = ${a/b}`);///, 除算
//``で定義された文字列の中で${変数}を使うと、文字列に変換される
//条件演算子
console.log(`a==b = ${a==b}`);//等号, JSはほかの言語と違い、少しでも一致すればtrueとなる
console.log(`a===b = ${a===b}`);//上記より、厳密に一致を確認できるため、基本こちらを使用
console.log(`a>b = ${a>b}`);//aがbより大きい
console.log(`a<b = ${a<b}`);//aがbより小さい
console.log(`a>=b = ${a>=b}`);//aがb以上
console.log(`a<=b = ${a<=b}`);//aがb以下
a = true;
b = false;
console.log(`!a = ${!a}`)//not, aでない, trueとfalseが反転
console.log(`a&&b = ${a&&b}`)//and, aかつb, aとbがtrue=true
console.log(`a||b = ${a||b}`)//or, aまたはb, aとbがfalse=false

文字列

let str = "abc"
console.log(str.length);//3, 文字の個数
console.log(str.charAt(1));//b, n番目の文字
console.log(str.split("b"));//["a", "c"], 指定した区切り文字で区切り配列にする
//数値変換
let num_str = "1"
let num = Number(num_str);//文字列の"1"から数字の1になる。四則演算が可能に
console.log(num+1);//2
console.log(isNaN(Number(str));//true, 数字以外は変換に失敗しNaNとなるので、isNaNで判定

関数

//入力の型も、出力の型も指定する必要はなく、代わりにfunctionから始まる
function f(a, b){
	return a, b;//returnで値を返す
}
//(例)
//console.log(f(1,2));
//3
//別の書き方
const f = (a, b) => {
	return a, b
}

if文

const a = 1;
const b = 1;
const c = 2;

//上から検証され、条件が一致した時点で、{}内が実行されif文を抜ける
if(a===b){
	console.log("a===b");
}else if(a === c){
	console.log("a===c");
}else{
	console.log("a!=b && a!=c");
}

for文

//変数定義と初期値の設定; ループを継続する条件; ループ毎に実行する処理
//この場合、iを0から9まで1づつ増やしながら繰り返す
for(let i=0; i<10; i++){
	console.log(i);
}

配列/繰り返し

let array = ["x", "b"]
array[0] = "a";//代入
console.log(array[0]);//"a", n番目の配列要素を取り出す
array.push("c");//array = ["a", "b", "c"]一番後ろに追加
let last = array.pop();//"c", 一番後ろのアイテムを取得

//*繰り返し
//for文に似ているが、i番目の中身がvに代入されている
let map_array = array.map((v, i) => {return `${i}番目は${v}`});
console.log(map_array);
//mapとほぼ同じだが値を返さない
array.forEach((v, i) => {console.log(`${v}`)});
let newArray = [...array];//クローン
let appendArray = [...array, "c"];//値を追加したうえで、クローン

JSON/オブジェクト

//辞書のように、keyに対応した、valueを返す
//key: value, ...のように記述
let a = {"a": 0, "b": 1};
console.log(a.a);
//> 0
let b = {"info": {"name": "neko", "age": 20}, "status": "ready"};
console.log(b.info.name);//入れ子になっていても良い
let str = JSON.stringify();//文字列に変換,保存に便利, 
b = JSON.parse(str);//文字列を再度オブジェクトに変換
//> "neko"

例外処理

try {
	let str = `{"a",b`;//不正なJSON文字列
  let a = JSON.parse(str);//ここでエラーとなるが,プログラムは止まらず,catch以下が実行される
} catch (error) {
  console.error(error);//この場合は、エラーを出力したのち、処理を続行する
  //エラーであっても、プログラムを落とさずに、記録だけ残して処理を続行したい場合や、特別な処理を行う場合に便利
  //例外処理はAPIリクエストや、データ変換の際によく用いられる
}

非同期処理

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

//非同期処理関数の例
//2秒後に戻り値を返す
//このthen catch構文は現在はほぼ使われない
function resolveAfter2Seconds(x) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

//awaitを含む関数は、必ずasyncを記載する必要がある
//async関数も非同期処理関数
async function f1() {
	//awaitはthen catch構文を一行に収めることができる。
	//awaitを使うことで、結果が返って代入するまで、次の処理に進むことを防げる
  const x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

f1();//処理待ちや代入の必要性はないのでawaitは使わない

データ保存

//ページを開き直しても保存されたまま。文字列のみ保存可能のため、JSON.stringifyと併用する
localStorage.setItem("key", "value")
console.log(localStorage.getItem("key"))//> "value"