JavaScript

Kaz

じわじわ更新していこうと思います


自分のメモ用に残したので見ずらいと思います


2.1JavaScript実行のための前提知識


2.1.1 HTMLとは
ブラウザ画面上に表示する文章や画像などのコンテンツの構成を記述するための言語である。

2.1.2 JavScriptの実行方法
2つある
1. HTMLファイル内でscriptタグでJavaScripを囲む
2.別ファイルとして作成したJavaScriptファイルを、HTMLファイルに記述したscriptタグのsrc属性で指定して読み込む

2.2開発ツールを使いこなす

2.2.1 chromeの開発ツールの使い方
2.2.2コンソール
コンソールを入力してその関数がはかされているのか確認のために使うことがほとんど
2.2.3エラーの確認
2.2.4 デバックの仕方
ブレークポイントの設定方法があるがこれはVSCodeで行う方がやりやすい

2.3 コード記述のルール

2.3.1 大文字小文字の区別
2.3.2 全角半角の区別
2.3.3 空白文字
2.3.4 文と文の区切りのセミコロン
セミコロンとは文の終わりを意図的に示す
2.3.5 コメント

3.1 変数

変数とは、プログラミで使われる値を、名前付きで管理するラベルのようなもの

3.2変数と定数

3.2.1 変数宣言
変数は宣言することによって初めて、変数名で値を管理できる状態になる

3.2.2 変数の本質
プログラム上で使われる値は全てメモリ上に保管されており、メモリ上の場所はアドレスと呼ばれる数値で表現されます(メモリは、メモリ空間、メモリスペースともいう)

なので、変数は値そのものではなく、あくまで値の保管先の場所を保持していると言うことを覚えておく。値が格納されているメモリのアドレスを保持していることを「変数は値への参照を保持している」という

3.2.3 値の再代入
変数の値を変更することを値の再代入という。
変数に別の値が代入されると、変数が保持しているアドレスが（代入された値のアドレスに)入れ替わる

3.2.4 変数のコピー
let hello = "hi"
let greeting = hello
greeting ="bye"

3.2.5 定数
値を変更できない変数を定数と呼ぶ。宣言した後に値に再代入を行えない。

3.3 識別子の命名規則

変数名は識別子と呼ぶこともある。
識別子にはある一定のルールがあり、識別子の命名規則に従わない場合にはJavaScriptの実行時にエラーが発生する。

3.3.1 識別子の命名規則

  • 予約語は使用できない

  • 1文字目は、必ずアルファベットかアンダースコアかドル記号から始めなくてはいけない。

  • ２文字目以降は数値

  • 大文字と小文字は区別される

予約語とはbreakやcase,catchなどすでに役割が当てられているもの

3.3.2 現実的な命名規則
書くことない
3.3.3一般的な識別子の命名規則
スネークケース
単語と単語をアンダースコア_で区切る
キャメルケース
一つ目の単語は小文字で始め、２つ目の単語は大文字で始める
パスカルケース
一つ目の単語も大文字で始めるケース

3.4データ型

string 文字列
Number 数値
BigInt 巨大な整数
Boolean 真偽値
null ヌル 値が存在しないこと
Symbol シンボル　一意で普遍な値
Object　オブジェクト  キーと値を対で格納する入れ物

プリミティブ型　オブジェクト以外のデータ型
非プリミティブ型(複合型) オブジェクト

3.4.2リテラル
データ型の値をコードで直接記述するための構文をリテラルと呼ぶ

文字列リテラル
数値リテラル
BigIntリテラルなど

3.5　プリミティブ型

3.5.1 文字列 string
3.5.2 数値(Number)
10進数
console.log(3e4)
> 3000
2進数
console.log(0b11)
> 3
8進数
console.log(0o11)
>9
16進数
console.log(0x11)
>17

3.5.3 BigInt
任意の精度で整数値を扱える型、数値の末尾にnをつけることでBigInt型の数値として定義できる。
BigIntの場合には、Number型では表せない値の範囲を表現できる

3.5.4 真偽値(Boolean)
真偽値はtrue or falseをとる

3.5.5 null 
nullとは値を保持してないことを示す

3.5.6 undefined
nullは参照先を保持してないことを示しているが、undefinedは変数が未定義であることを示している。

3.6 オブジェクト

3.6.1 オブジェクトの初期化
JavaSciptにおけるオブジェクトとは、変数を管理する入れ物のようなもの
オブジェクトとは複数の値を１つのまとまりとして管理できる。

3.6.5メゾット
オブジェクトでは、特定の処理を行う機能を追加したい場合、関数を登録できる。
オブジェクトに保持される関数をメゾット

3.6.6　シンボル
シンボルはオブジェクトのプロパティに設定するための一意の値を生成するときに使う。「一意」とは、決して他の値と重複しない、ということ

4.9.1 Null合体演算子
左のオペランドがnullまたはundefinedの場合には、右のオペランドを返す
4.9.2 オプショナルチュイニング演算子
オブジェクト以外の値に対してプロパティを取得したときにundefinedを返す演算子。

オプショナル演算子の使いどころ
1. undefinedが取得される
2. オプショナルチュイニング演算子の場合
3. ドット演算子の場合

5.1条件分岐

5.1.1 if文
const fruit = "apple"
if(fruit){
console.log("find a fruit")
}
if (fruit ==="banana"){
console.log("find a banana")
}

5.1.2 if…else文
const fruit = "apple"

if(fruit === "banana"{
console.log("find a banana")
}else{
console.log("find other fruit")
}

5.1.3 if..else文のチェーン
if..else文をチェーンのように繋いで記述することで複数の条件式を使った分岐を作成できる

5.1.4 if文と論理演算子
if文で複合条件を扱うときは、論理演算子を使う

5.1.5 演算子を使わないif文
JavaScriptでは演算子を使わずに値をそのままif文の条件式として利用する記法がよく使われる

5.1.6 switch文
switch文では、条件式に渡した値がcase節と一致した場合に、それ以降のコードを実行する。条件式の値がcase節のどれにも一致にしない場合はdefault節に続くコードが実行される
switch文でbreakを書かない場合には、以降のcase節のコードも実行される

5.2　例外処理

プログラムにおけるエラーは例外と呼び、例外が発生したの処理を例外処理という

5.2.1 例外処理の必然性
JavaScriptの特徴として、例外処理を記述してない場合例外が発生した時点で、それ以降のコードは実行されず処理が終了してしまう。という点がある。

5.2.2代表的な例外の種類
・JavaScriptエンジンが自動的に発生させる例外
・開発者が明示的に発生させる例外
以下がよく遭遇する例外の種類
▪️ReferenceError
未定義の変数や関数を参照しようとしたときに発生する
▪️SyntaxError
記述に間違いがある場合に発生する
▪️TypeError
主にメゾット実行時に期待された型ではなかった場合に発生する

5.2.3 try/catch/ finally構文
try{
例外が発生する可能性のある処理
}catch(例外識別子){
例外が発生した時の処理
}finally{
例外の発生に関わらず、必ず実行される処理
}

tryブロック
例外が発生する可能性のある処理をtryブロックに記述する。
tryブロック内で例外が発生した場合には、その時点でcatchブロックに処理が移る。つまり、tryブロック以外の例外が発生した場合はコードは実行されない。

catchブロック
catchブロックには例外が発生した時の処理を記述する。
また、例外識別子には、例外が発生した原因がオブジェクトになって渡される。

finallyブロック
例外の発生有無に関わらず実行したい処理を記述する。
つまり、「tryブロックの終了後」または「catchブロックの終了時」に、finallyブロック内のコードは必ず実行される。

5.2.4 明示的な例外のスロー
意図的に例外を発生させたい場合には、throwというキーワードを使う。
try{
throw 例外識別子;
}catch(例外識別子){
例外発生時の処理
}

5.3 基本的な繰り返し処理

5.3.1 while文
while文は、条件式がtruthyの時に処理を繰り返し、falsyが取得された時に処理を抜けます。

5.3.2 for文
for文を使って繰り返し(ループ)処理を記述するばいいは「初期化処理」「ループ継続のための条件式」「ループごとの最後の実行される式」をセミコロンで区切る。

5.3.3 配列とfor文
配列とは複数の値を保持できるオブジェクトで、保持される値にはそれぞれ0から始まるが付与される。

5.3.4 for in文
オブジェクトの要素に対して繰り返し処理を行う時に使う

5.3.5 for..in文と列挙可能性
for..in文で繰り返し処理を行った時に取得されるプロパティは列挙可能プロパティと呼び、その設定を列挙可能性と呼ぶ。
初心者は列挙可能性がどんな概念なのか知っておけば良い。

5.3.6 for…in文とシンボル
Symbol型のプロパティもfor..in文の列挙対象にならない

5.3.7for…of文
for..of文では反復可能オブジェクトに対する繰り返し処理を記述できる。

5.3.8 オブジェクトをfor..of文で使う
オブジェクトリテラル{}で定義したオブジェクトは、反復可能オブジェクトではないためfor..of文では使えないので、オブジェクトのプロパティに対して繰り返し処理を行いたい場合はobject.keyを使ってプロパティの配列を取得する。

配列のループ
for文またはfor..of文を使う。

オブジェクトのループ
for文ではループ処理を記述できない。
プロパティのみ必要な場合はfor..in文

5.3.9breake文

6.1関数の定義方法

ジャバスクでは主に２つの方法で定義できる
・関数宣言によって定義する方法
・関数式によって定義する方法

6.1.1 関数宣言による関数の定義
関数宣言で関数を定義する場合には、funcitonキーワードに続けて関数名を記述する。関数に渡すインプットを引数と呼び、関数に続く()に設定する。関数のアウトプットは戻り値と呼び、returnに続けて値を設定する。

1.関数の実行
sum(10,20)のように冠水名の末尾に()をつけると、関数の実行を表す
2.関数の実行元に戻り値を返す
return文で設定した戻り値(val1 + val2)が関数を実行した結果として、関数の実行元(呼び出しもと)に返される
3.関数の実行結果をresultに代入
代入演算子によって、関数sumの実行結果変数resultに代入される。

▪️戻り値

  • 戻り値は関数ないのreturn文で設定した値になる

  • return文は複数記述できるが、一番初めのreturn文が呼び出された時点で関数の処理は終了する。

  • returnのように記述して戻り値を設定しない場合は、undefinedが実行元に返される

  • return文が関数ないに存在しない場合は、関数の再就業まで処理が完了した時点でundefinedが実行元に返される

  • returnによって戻り値が関数から返される場合でも必ずしも実行文で戻り値を受け取り必要はない。

6.1.3　関数式により関数定義
関数の定義は、代入演算子を使って変数に対して関数式を代入することでも行うことができる。

6.1.4　関数宣言と関数式の違い
1. 関数名の重複

関数宣言で名前が重複している場合は、後から宣言された方の関数によって機能が上書きされるのたいして
関数式だとエラーが起きる

2.実行文の記述位置
関数宣言で関数定義を行った場合には関数宣言文よりも前に実行文を記述できる
つまり、実行文を先に書いて後から関数を設定できる
関数式の場合は関数定義よりも前に実行文を書くとエラーが起きる
後から関数の設定は行えない

6.2.3 引数にオブジェクトを渡した時の挙動に注意

JavaScriptで関数の引数としてオブジェクトを使う場合には注意が必要。
変数に格納されているのはメモリ空間のアドレスであるため、関数ないでオブジェクトのプロパティの値が変更されると、関数外のオブジェクトにも変更が反映されてしまう。

const obj = { val: 1 };

function fn(obj2) {
obj2.val = 2;
}
fn(obj);console.log(obj.val);
// >2

1.アドレスのコピー
関数fnを実行するときに渡したobjのアドレスがobj2にコピーされる。
objとobj2は同じオブジェクトへの参照を保持している。

2.オブジェクトの値の変更
obj2.val=2でプロパティの値を変更している。

6.3コールバック関数

コールバック関数とは他の関数に引数として渡す関数のこと

6.3.1関数はオブジェクト

関数とは実行可能なオブジェクトです。関数はオブジェクトの一種であり
オブジェクト{}と異なるのは「実行可能である」という点だけ。なので関数に対してもプロパティやメゾットを設定できます。

6.3.2コールバック関数の仕組み

関数はオブジェクトの一種なので他の関数の引数として渡すことができる

6.3.3コールバック関数を引数にとる組み込み関数

JavaScriptエンジンによって準備されている関数(組み込み関数)の中にも
コールバック関数を引数に取る関数がある。その代表的なものがsetTimerである。
setTimeoutは第１引数で渡したコールバック関数を特定の秒数だけ待ってから実行する特別な関数である。

6.3.4コールバック関数に引数に渡すパターン

6.3.5無名関数を使ったコールバック関数

無名関数(anonymous funciton)と呼ばれる関数を見ることだろう
名前がない関数のこと

6.4アロー関数

無名関数省略記法のこと

6.4.2 アロー関数と無名関数の違い

アロー関数は基本的に無形関数と同じ挙動をとるものの、特定のケースで挙動が異なるため、書き換えの際には注意が必要。特に注意したいのはthisとの挙動の違い。

7.1スコープの定義

スコープとは、実行中のコードから参照できる、変数や関数の範囲のこと

7.2スコープの特徴

7.2.1関数スコープ
関数ないで宣言された変数や関数は、関数スコープに配置される
関数スコープは関数ごとに作成されるため異なる関数スコープに配置された変数や関数を使うことはできない。

7.2.2ブロックスコープ
letまたはconstキーワード使って宣言された変数や関数が属するスコープである。

7.2.3グローバルスコープ
グローバルスコープに配置された変数や関数は、コードのどこからでも参照可能な状態になる。

8.1実行コンテキスト

thisの挙動を理解するには実行コンテキストについて理解する必要がある
実行コンテキストとはコードが実行される際に、JavaScriptエンジンによって準備されるコード実行環境のこと。JavaScriptのコードが実行される前に必ず実行コンテキストが生成され、どのような状態でコードが実行されているのかという実行コンテキストごとに保持される。
実行コンテキストが変わるとthisの参照先の値も変わる。

8.1.1グローバルコンテキスト
トップレベルでコードを実行する前に生成される実行コンテキスト。
JavaScriptファイルの直下に記述されたコードが実行される前にまずグローバルコンテキストが生成される。

▪️Windowオブジェクト
ブラウザがあらかじめ用意してくれているオブジェクトと関数をプロパティに持つ特殊なオブジェクト（グローバルオブジェクト)

▪️this
実行コンテキストによって参照先の開いたが切り替わるが、グローバルコンテキストのthisはグローバルオブジェクト(windowsオブジェクト)を参照する。

Q:globalThisとは？
→globalthisは実行環境に応じたグローバルオブジェクトを取得するための識別子。

8.1.2関数コンテキスト

関数が実行されるときに生成される実行コンテキスト。

8.1.3 コールスタック

実行コンテキストの積み重ねのこと。
▪️ブラウザのコールスタック
ブラウザはコールスタックを保持することで、実行コンテキストごとのthisの参照先やコンテキスト内で宣言された変数の情報を保持している、この状態はブラウザの開発ツールで確認できる

8.2 関数コンテキストのthisの挙動

8.2.1関数コンテキストのthisの種類

▪️オブジェクトのメゾットとして実行した場合
thisの参照先はメゾットが格納されているオブジェクト。「オブジェクトメゾット()」の形式で実行すること。末尾の丸括弧がつかない限り、メゾットを実行していることにはならないので注意

▪️関数として実行した場合
thisの参照先は、グローバルオブシェくと(ブラウザの場合はwindowsオブジェクト)

8.2.2 オブジェクトのメゾットとして実行した場合

8.2.3関数として実行した場合

オブジェクトのメゾットではなく、ただの関数として実行された場合のthisの参照先はwindowsオブジェクトになる。

8.2.4 アロー関数でthisが使われた場合の挙動

アロー関数が実行された時の関数コンテキストには、thisが存在しない

8.2.5コールバック関数におけるthisの参照先

callback関数はあくまで関数として実行される
ここまではthisの参照先が切り替わることを見てきたが、thisの参照先を指定できる方法もある。thisの束縛がある。

8.3 thisの束縛

thisを特定の値に固定するにはbind,apply,callを使う。

8.3.1 bindメゾット

bindメゾットを使うと、thisの参照先の値を自由に変更できる。
bindを使ってthisの参照先を変更することをbindによるthisの束縛という
bind()は関数を実行するのではなく、関数のthisを束縛した新しい関数を作成しているだけ(イマイチ用途がわからない)

8.3.2 bindメゾットの利用ケース

8.3.3 callメゾット
bindメゾットと唯一違う点はcallメゾットを呼び出した時点で、thisや引数が束縛された関数が実行される

8.3.4 applyメゾット
callメゾットと異なる点は引数の促罰に配列を使うという点

9.1クラスの基礎

クラスとは、オブジェクトを作成するためのひな形のようなもの。
オブジェクトを作成する際にはオブジェクトリテラルを使って毎回作成していた。
しかしクラスを使うとスッキリかける.
メリット1.コードの重複部分がなくなり、コードのメンテナンスがしやすくなる
メリット2.オブジェクトの作成が簡単に行える

9.1.2クラスの定義

クラスにはコンストラクタ(constructor)を記述する。コンストラクタはオブジェクトの生成が行われるときに実行される関数(メゾット)

9.1.3インスタンス化

クラスからオブジェクトを生成する処理をインスタンス化と呼ぶ。
また、インスタンス化によって生成されるオブジェクトをインスタンスと呼ぶ。
インスタンス化によってインスタンスを作成するには、new演算子を使う。　

9.1.4メソッド定義

9.2クラスに関わるその他の実装

9.2.1　静的メゾットと静的プロパティ

静的プロパティはスタックプロパティ、静的メゾットはスタティックメソッドとも呼ぶ。静的プロパティ、静的メソッドの場合にはインスタンス化を行わずにクラスから直接、参照できる。
オブジェクトに続けて静的プロパティや静的メゾットを記述することはできない。

9.2.2　静的メソッドとインスタンスメソッド

1.静的メソッドから他の静的メソッドや静的プロパティは、クラス名を使って参照できる。
2.静的メソッドからインスタンスのメソッドやプロパティは参照できない
3.インスタンスメソッドから他の静的メソッドや静的プロパティはクラス名またはthis.consructorを使って参照できる
4.インスタンスメソッドから他のインスタンスのメソッドやプロパティはthisを通して参照できる。

9.2.3　ゲッターとセッター

クラスを記述しているときにプロパティの値を取得、変更するときに特定の処理も合わせて実行したい場合がある。そのときにゲッター、セッターを使う。
ゲッターセッターを実行するときにはメソッドの実行とは違い、末尾の括弧は必要ない。

9.2.4 クラスの継承

クラスの継承とは、既存のクラスに継承することで既存のクラスの機能を利用して、少し機能の異なるクラスを新たに生成する記法。

1.extendsでクラスを継承
Parentは継承元の親クラス、Childクラスは継承先の子クラス
2.superキーワードで親クラスのコンストラクタを実行
子クラスにコンストラクタを記述する場合は必ずsuperを実行する。
super(…)を呼び出さないとエラーになる。
3.親プロパティの取得
thisキーワードを通して親クラスのプロパティやメゾットにアクセスできる。

9.3 ES2022でのクラス記述

9.3.1 コンストラクタの省略
クラスのトップレベルでプロパティを宣言できるようになった。

9.3.2　プライベートなアクセス権の追加
ES2022のクラスでは、パブリックとプライデートの２種類のアクセス権を使い分けることができる。
class Counter{ #count =0}
のように先頭に
#をつけることでプライベートになる 。

9.4 プロトタイプ

Javascriptはプロトタイプベース言語と呼ばれ、言語使用の根底には関数と密接に関わるプロトタイプと呼ばれる仕組みがあります。ES6から仕様追加されたクラスも、裏側で動いている仕組みはプロトタイプであるため、プロトタイプの仕組みを理解する仕組みがある。

9.4.1コンストラクタ関数

9.4.2プロトタイプとは?

JavaScript言語の中心的な使用の一つである。プロトタイプ(prototype)

特徴1.プロトタイプは関数オブイジェクトに保持される特別なプロパティ

プロトタイプはインスタンス化に関係する特別なプロパティとして関数オブジェクトに保持されている。

特徴2.prototypeオブジェクトには関数(メゾット)を格納する

特徴3.prototypeはインスタンス化の際にproptにコピーされる

9.4.3クラス記法とプロトタイプ

9.4.4プロトタイプチェーン

9.4.5プロトタイプ継承

9.4.6hasOwnProPertyメソッドとin演算子の仕組み

10.1　Windowオブジェクト

11.1配列(Array)

12 イテレーター

イテレータの記法

イテレーターの特徴
1.　イテレータ(オブジェクト)には必ずnextメゾットが格納されている必要がある。
2. nextメソッドの戻り値は、value,falseでnextメゾットの実行元に知らせる。trueに場合には反復処理が終了したことを示す。
4valueには、反復ごとに取得したい値を設定する

12.1.2反復可能オブジェクト
イテレーターを保持しているオブジェクトのこと

12.1.3 オブジェクトにイテレータを設定する

12.2 　ジェネレータ
ジェネレータとは、イテレータと同様の機能を持つGeneratorオブジェクトを作成するための関数。前節ではイテレータによって反復処理を定義したがジェネレータを使うとイテレータと同様の反復処理をより簡潔に記述できる。

12.3 スプレッド演算子

・関数実行時に、配列の要素の値を複数の引数に展開して設定する。
・関数実行時に、複数のふくすうの引数をオブジェとや配列の要素としてまとめる
・配列やオブジェクトの複製（コピー)や結合を行う。

13.1非同期処理とは

13.1.1スレッド

スレッドとは、プログラムの開始から終了までの一連の処理の流れのこと。

その処理の開始から終了までを一本の糸のように表すことができることを「１つのスレッドでコードが実行されている」と表現する。

メインスレッド上でJavaScriptのコードが実行される場合には、必ず実行中の処理の完了を待ってから次の処理が実行されるという決まりがある。

一つの処理を複数に分けて実行することをマルチスレッドと呼ぶ。またマルチスレッドは並列処理とも呼ばれている。

メインスレッドが何らかの処理を行っている場合には、他の処理はメインスレッドの処理の完了を待つことになる

whileなどループ処理を行っているときにはメインスレッドが使われ続けている占領され続けている状態になる。

13.1.2 同期処理と非同期処理
前の処理の完了を待ってじゃら次の処理を実行することを同期処理と呼ぶ

非同期処理とはメインスレッドから一時的に切り離されてた処理のこと
▪️非同期処理の検証

13.1.3 イベントループ

イベントループとは非同期処理の管理、実行を行うための仕組みのこと
▪️イベントループ関連の用語
実行コンテキスト
コードが実行される際にJavaScriptエンジンによって準備されるコードの実行環境のこと。
コールスタック
実行コンテキストが積み重なってできたもの。
タスクキュー
実行待ちのタスクが格納されているキューのこと

13.1.4イベントループの挙動

13.1.5 非同期処理のハンドリング

13.2 Promise

13.2.1Promiseの記法
1.Promiseのインスタンス化
promiseで非同期処理のハンドリングを行うにはまずnew Promiseと記述してインスタンス化を行う。そしてこのとき引数に渡す関数内に非同期処理を記述する。
new Promiseの引数内で非同期処理を行なった上で成功した場合と、失敗した場合の処理を書く。
2.thenメソッド
thenには成功した場合の処理を書く
3.catchメソッド
catchには失敗した場合の処理を書く
4.finallyメソッド
最終的に行いたい操作、失敗しても成功しても行う操作を書く。
例)完了した文字を書き出すなど

13.2.2 Promiseチェーン

複数のPromiseによって非同期処理を順番に実行していくことをPromiseチェーンと呼ぶ。

13.2.3Promiseの状態管理

13.2.4Promiseを使った並列処理

▪️Promise.all
全ての非同期処理を並列に実行し、全ての完了を待ってから次の処理を行いたい場合にはPromise.allを使う。
Promise.allメゾットに私た配列内全てのPromiseインスタンスがresolveになるとPromise.allに続くthenメソッドへ移る。

直列だと前の処理が完了したら次のPromiseへ
並列だと全ての処理が完了したらPromiseへ移る。のでスピードを考えるなら
並列で処理を行いPromise.allを使用することが望ましい。

▪️Promise.race
Promise.raceは全ての状態がreject or resolveになると次のthen or catchに動く

▪️Promise.any
Promiseインスタンスのどれかがresolveになったタイミングでthenメソッドへ
全てがrejectになった場合にcatchメソッドを実行する。

▪️Promise.allSettled
全てのPromiseインスタンスの状態がreject or resolveになったときにthenメソッドに移行する。(catchにはいかない)

13.3 await async

es2017からawaitとasyncを使って、promiseのthen処理をより簡潔に記述できるようになった。

13.3.1 async

asyncは関数の先頭につけることで、非同期関数という特殊な関数を定義できる。
非同期関数は、通常の関数と何が違うのか

シンプルに非同期関数のreturnが返す値は必ずPromiseインスタンスになる。 

13.3.2await

awaitは、promiseインスタンスの前に記述することでPromiseのステータスがresolve,rejectになるまで後続のコードの実行を待機する。awaitはasync内でしか使用できない。
あくまで使用する用途はpromiseとthenの省略化なので、なければ省略することはできない。

13.4Fetch

サーバやデータからファイルを取得するときに使うWebAPIの一種であるFecthAPI(Fetch関数)について。fetch関数は非同期処理のため取得したデータを使って処理を行うにはpromiseやawait、asyncを使ってコードを記述する必要がある。


14.1Domとは
JavaScriptでは直接HTMLを扱うことはできないためDOMを通して情報を扱う
→DOMとはJavaScriptで扱うための、HTML文章オブジェクトのモデルという意味になる。

15 イベント
イベントハンドラかイベントリスナに登録してJavaScriptにイベントを登録する
イベントハンドラとはイベントが発生した時に実行される関数のこと
widonwsオブジェクト、elementオブジェクト、Documentオブジェクトなどのonから」始めるプロパティに対してアクションを設定することで、イベント発生時に特定の処理を行うことができる。

16　モジュールとは
意味のある機能のまとまりをモジュールという単位で作成する
一般的なモジュールは以下の要件を満たす

  • 意味のある機能もまとまりである。

  • インターフェイスが明確である。

  • モジュールの追加、交換が比較的容易に行える

16.5.2 Strictモードによる影響
1.将来的に使いそうなキーワードが予約語として確保される
2.宣言されてない変数への代入をエラーとする
3.書き込み不可のプラパティを変更しようとするとエラーが発生する
4.関数宣言にブロックスコープを適用される。
5.thisはプリミティブ値も許容するようになる。

16.6 commonJS
17.1 Node.jsによるJavaScriptの実行
Node.jsは一言で言うと、ブラウザからJavaScriptを実行する機能を抽出したもの
17.1.3 Node.jsの基本的な記述
17.1.4 ES Modulesの有効化
ES Modulesの企画に沿ってコードを実行するには
1. ファイルの拡張子を.mjsに変更する
2. package.jsonのtypeフィールドを変更する
3. オプションを指定してnodeコマンドを実行

17.2 パッケージ管理ソフト(npm)
Node Package Managerでパッケージのバージョン管理ができる

17.2.1 package.json
17.3 サーバーサイド　JavaScript
17.4 expressでタイマーを作成
17.4.3 サーバーサイド JavaScriptの実装
17.4.4 動的なHTMLの作成
17.4.5 静的ファイルの取得
17.4.6 クライアントサイド JavaScriptの実装


わからないところ

オブジェクトとは変数の入れ物である


const  obj={
name: taro,
age: 20
color: asian}
これがオブジェクト。入れ物。明確な概念ではないためわかりずらい。
ちなみにプロパティはここでname,age,colorのことである。

インスタンスとは


クラスから生成されるオブジェクトのことである。
class Person ={
name: taro,
age:18};

上記のクラスから
const Jiro = new Person(Jiro,20);
など既存のクラスとnewを使って新しいobjを作る
この場合JiroがPersonから生成されたインスタンスである。

だからPromiseの場合はobjを設定しなくてもデフォルトでobjとして設定があるのでそれを記述するだけ非同期処理であることが認識される。
Promiseの設定はすでにされているのでresolveとrejectの名前はなんでも良くて機能はすでに定義されていると思う

パラメーターと引数の違い

パラメータは関数定義時に宣言され、引数は関数呼び出し時に渡される値です。
端的にいうとこうゆうことらしい。よくわからないのでわかりやすい例えを引用するとパラメーターはコップで引数はコップの中のジュースらしい。これもこれでなんだか、だがわかりやすくなった気がする。
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("Alice");

上記の例では、greet 関数のパラメータは name です。greet("Alice") と関数を呼び出すときには、引数として "Alice" が渡されます。関数内の name パラメータは、渡された引数の値 "Alice" に置き換えられて使用されます。

この記事が気に入ったらサポートをしてみませんか？