LoginSignup
0
0
@niha_

JavaScript Primerまとめ

Posted at

はじめに

基本文法

変数と宣言

const

  • 再代入できない変数の宣言
  • 変数が参照する値（初期値）を定義可能
  • プリミティブな値（数値、文字列）で初期化すればそれは実質的に定数
const 変数名= 初期値;
  • カンマで区切ることで複数の変数を定義可能
const bookTitle = "JavaScript Primer",
      bookCategory = "プログラミング";

let

  • 値の再代入可能な変数を宣言
  • 初期値を指定しない変数も定義可能

var

  • letと似ているが、同じ名前の変数を再定義できてしまう
  • 利用は避けた方がいい

JavaScriptの実行

  • ブラウザの開発者ツールのコンソール上
  • HTMLファイルを作成してJavaScriptコードを読み込む
index.html
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="./index.js"></script>
</head>
<body></body>
</html>
  • Console API
index.js
const total = 42 + 42;
console.log(total); // => 84

データ型

  • JavaScriptは動的型付け言語に分類されるため、変数の型はないが、値の型は存在する
  • 文字列、数値、真偽値といった値の型はデータ型という
  • 7種類のプリミティブ型とオブジェクトが存在する

プリミティブ型（基本型）

  • 真偽値（Boolean）:true, false
  • 数値（Number）：42, 3.1415
  • 巨大な整数（BigInt）
  • 文字列（String）
  • undefined：値が未定義
  • null：値が存在しない
  • シンボル（Symbol）：ES2015から追加された一意で不変な値のデータ型

オブジェクト（複合型）

  • プリミティブ型以外のデータ
  • オブジェクト、配列、関数、クラス、正規表現、Date

リテラル

リテラルはデータ型の値を直接記述できる構文として定義されたもの
プリミティブ型の真偽値、数値、BigInt、文字列、nullはリテラル表現がある
オブジェクト型のオブジェクト、配列、正規表現にはリテラル表現がある
プリミティブ型のデータでもプロパティアクセスができる

演算子

厳密等価演算子（===）

  • 同じ型で同じ値である場合にtrue

等価演算子（==）

  • 同じデータ型のオペラントを比較する場合は厳密等価演算子（===）と同じ結果になる
  • オペランド同士が異なる型の値であった場合に、 同じ型となるように暗黙的な型変換をしてから比較する

関数と宣言

関数

  • 関数とはある一連の手続きを一つの処理としてまとめる機能
  • 関数はオブジェクトの一種
// 関数宣言
function 関数名(仮引数1, 仮引数2) {
    // 関数が呼び出されたときの処理
    // ...
    return 関数の返り値;
}
// 関数呼び出し
const 関数の結果 = 関数名(引数1, 引数2);
console.log(関数の結果); // => 関数の返り値

関数式

  • 関数式は関数を値として変数へ代入している式のこと
// 関数式は変数名で参照できるため、"関数名"を省略できる
const 変数名 = function() {
};
// 関数宣言では"関数名"は省略できない
function 関数名() {
}
  • アロー関数という無名関数を定義する構文がある
// Arrow Functionを使った関数定義
const 変数名 = () => {
    // 関数を呼び出したときの処理
    // ...
    return 関数の返す値;
};
  • 引数として渡される関数をコールバック関数という
function 高階関数(コールバック関数) {
    コールバック関数();
}

メソッド

  • オブジェクトのプロパティである関数をメソッドという
  • JavaScriptにおいて、関数とメソッドの機能的な違いはない
const obj = {
    method1: function() {
        // `function`キーワードでのメソッド
    },
    method2: () => {
        // Arrow Functionでのメソッド
    }
};

式と文

  • 式は値えお生成し、変数に代入できるもの
  • 文は処理する１ステップが１つの文。末尾にセミコロン（;）を置く

オブジェクト

  • プロパティとは名前（キー）と値（バリュー）が対になったもの
// プロパティを持つオブジェクトを定義する
const obj = {
    // キー: 値
    "one": 1,
    "two": 2,
    "three": 3
};

プロトタイプオブジェクト

  • 他のオブジェクトはすべてObjectを継承している
  • Object.prototypeプロパティに定義されたprototypeオブジェクトを継承している
  • ObjectのプロトタイプオブジェクトにはtoStringなどのプロトタイプメソッドが定義されている
  • プロトタイプメソッドとインスタンスメソッドではインスタンスメソッドが優先される
  • Object.createメソッドを使うことでプロトタイプオブジェクトを継承しないオブジェクトを作成できる

配列

  • インデックス取得；indexOf, findIndex, findLastIndex
  • 条件に一致する要素を取得：find
  • 指定範囲の要素を取得：slice
  • 真偽値を取得：includs
  • 追加と削除：push, pop
  • 配列同士を結合：concat
  • 配列から要素を削除：splice

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

  • 破壊的なメソッド（Mutable Method）とは、配列オブジェクトそのものを変更し、変更した配列または変更箇所を返すメソッド
  • 非破壊的メソッド（Immutable Method）とは、配列オブジェクトのコピーを作成してから変更し、そのコピーした配列を返すメソッド

非同期処理

  • JavaScriptの非同期処理のほとんどはメインスレッドで行われる並行処理（Concurrent）
  • メインスレッドとは別のスレッドで実行できるAPIが実行環境によっては存在する
  • 状態が変化済みのPromiseインスタンスにthenメソッドで登録したコールバック関数は常に非同期なタイミングで実行される
// asyncPromiseTask関数は、Promiseインスタンスを返す
function asyncPromiseTask() {
    return new Promise((resolve, reject) => {
        // さまざまな非同期処理を行う
        // 非同期処理に成功した場合は、resolveを呼ぶ
        // 非同期処理に失敗した場合は、rejectを呼ぶ
    });
}
// asyncPromiseTask関数の非同期処理が成功した時、失敗した時に呼ばれる処理をコールバック関数として登録する
asyncPromiseTask().then(()=> {
    // 非同期処理が成功したときの処理
}).catch(() => {
    // 非同期処理が失敗したときの処理
});

Async FunctionはPromiseを返す

  • Async Functionとして定義した関数は必ずPromiseインスタンスを返します。 具体的にはAsync Functionが返す値は次の3つのケースが考えられます。
    • Async Functionが値をreturnした場合、その返り値を持つFulfilledなPromiseを返す
    • Async FunctionがPromiseをreturnした場合、その返り値のPromiseをそのまま返す
    • Async Function内で例外が発生した場合は、そのエラーを持つRejectedなPromiseを返す
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0