Javascript

演算子

falsyな値

false,0,-0,0n,"",null,undefined,NaN

論理演算子の挙動

• 論理積の場合:オペランドの評価の途中でfalsyな値が見つかった場合にはその値を論理積の結果として返し、演算子の処理を終了する。最後のオペラント迄到達した場合には、その値を返す
• 論理和の場合:truthyな値が見つかった時点で、その値を論理和の結果として返し、演算子としての処理を終了する。すべてのオペラントがfalsyの場合は最後の値を返す。

制御構文

プロパティ記述子(デスクリプタ)

• プロパティ記述子
• データ記述子
• value:プロパティに設定された値
• configurable:プロパティ記述子の設定変更可否
• enumerable:for...inループの列挙可能性
• writable:値の変更可否
• アクセサー記述子
• get:変数を取得する際の処理
• set:変数を格納する際の処理

関数

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

スコープ

• レキシカルスコープ：実行中のコードが属するスコープの外側の参照可能なスコープ
• スコープチェーン：同名の変数や関数があるときには内から外へ向かって順番に参照される。
• クロージャ：関数内で使用されている変数がレキシカルスコープの値を保持し続ける状態のこと。

thisキーワード

thisを利用した場合にはwindowオブジェクトとなる。オブジェクト内で利用する場合は一つ上位のオブジェクトを指す。アロー関数の場合はthisを持たないためレキシカルスコープを参照する。コールバック関数の場合は渡された関数を定義するオブジェクト内のものとして実行するわけではないため、コールバックした関数内の要素としてthisを扱う。

実行コンテキスト

コードが実行される前にJavaScriptエンジンによって準備されるコードの実行環境のこと。どのような状態でコードが実行されるのかとういう情報が実行コンテキストごとに保持される。

実行コンテキストの種類と生成タイミング

1. グローバルコンテキスト:HTMLのscriptタグの直下やJavaScriptファイルの直下に記述されたコードが実行される直前に実行。windowオブジェクト（グローバルオブジェクト）とthisが使用可能。
2. 関数コンテキスト:関数が実行される直前に実行。レキシカルスコープやthisキーワード、argumentsオブジェクト、superなど特殊なキーワードが使用できる。

コールスタック

実行コンテキストの積み重ね。

thisの束縛

• bindメソッド:コールバック関数でthisが使われる場合。呼び出された時点では実行されない。
• applyメソッド:callと同様であるが、引数に配列を使用する。
• callメソッド:bindと同様であるが、呼び出された時点で実行する。

クラス

クラスの記法はES6から

クラスの定義

• thisはインスタンスを指すため、インスタンス生成時にプロパティとして保持される。
• コンストラクタ内でreturnが使われる場合は、インスタンスの戻値として値が返される。

インスタンス化

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

• 静的メソッドと静的プロパティ
//定義方法 class クラス名{ static プロパティ名 = 値; static メソッド名(){...} }
//利用方法 クラス名.プロパティ名; クラス名.メソッド名();

インスタンス化せずに利用できる。
スタティックメソッド、スタティックプロパティとも言う。
スタティックメソッドからインスタンスメソッドやプロパティは参照できない。
インスタンスからはクラス名.メソッド名()、クラス名.プロパティ名または、this.constructorを使って参照できる。

• ゲッターとセッター
//定義方法 class クラス名{ get ゲットプロパティ名(){ return 値; } set セットプロパティ名(){ } }

オブジェクト名.ゲットプロパティ名;
オブジェクト名.セットプロパティ名 = 値;

• クラスの継承
class クラス名 extends 継承元クラス名{ //extendsで継承元クラスを指定 constructor(引数,...){ super(引数,...); //親クラスのコンストラクターを実行(必須、最初に実行) } メソッド名(){ super.メソッド名(); //親クラスのメソッドを実行 } }
• 生成元クラスの確認

オブジェクト名 isntanceof クラス名
クラス名で指定したクラス又は子クラスであればTrueを返す。すべてのクラスはObjectクラスを継承している。

• hasOwnPropertyメソッドとin演算子
//真偽値を返す オブジェクト名.hasOwnProperty("プロパティ名"); "プロパティ名" in オブジェクト名

ES2022で追加された機能

• クラスのトップレベルでプロパティを宣言できるようになった
• プライベートプロパティとプライベートメソッドの追加。（プライベートプロパティはクラストップレベルで宣言する必要がある）
//プライベートプロパティ #変数名 = 値;
//プライベートメソッド #メソッド名(){}

プロトタイプ

JavaScriptはプロトタイプベース言語と呼ばれていて、言語使用の根底にプロトタイプという仕組みがある。→プロパティ名:prototype

1. プロトタイプは関数オブジェクトに保持される特別なプロパティ（インスタンス化に関係）
2. prototypeオブジェクトには関数を格納できる。（呼び出し時には通常の関数として呼び出せる、クラスに属する関数がすべて含まれる）
3. prototypeはインスタンス化の際に__proto__にコピーされる
4. __proto__は省略可能（代入できない）

プロトタイプチェーン

オブジェクトのプロパティや関数を参照するときオブジェクト内に当該物がない場合は__proto__を参照しに行くが、そこにもない場合はその下位にある__proto__を参照する。

プロトタイプ継承

他のオブジェクトの機能を引き継ぐことを継承、他のコンストラクタのprototypeを継承することをプロトタイプ継承という。

コンストラクタ関数

クラスとコンストラクタ関数をまとめてコンストラクタと言う場合がある。

組み込みオブジェクト

• Windowオブジェクト
• Dateオブジェクト
• RegExpオブジェクト
• Storageオブジェクト
• JSONオブジェクト

組み込みオブジェクトビルトインオブジェクト

JavaScriptエンジンにあらかじめ提供されているオブジェクト群

Windowオブジェクト

開発者がブラウザを操作するためのWeb APIが格納されている。コードを実行する前にwindowという識別子で使用可能な状態となっている。グローバルオブジェクト（グローバルオブジェクト名を省略して記述できる）。

Windowプロパティ

Dateオブジェクト

DateオブジェクトはUTCの1970/01/01/00:00からの経過時間をミリ単位で保持している

時刻表現

• 協定世界時(UTC:Coordinated Universal Time):原子時計（セシウム原子の振動数を基準とした時計）によって算出される。GMTより厳密。
• グリニッジ標準時(GMT:Greenwich Mean Time):ロンドンにあるグリニッジ展望台を通る子午線における時刻のこと。天体観測によって算出される。
• 日本標準時(JST:Japan Standard Time):JST = UTC + 9（協定世界時から９時間の時差）

当月の月初、月末の取得

日付の差分日数を求める

RegExpオブジェクト

RegExpオブジェクトの作成

正規表現にかかわるメソッド

Strageオブジェクト

Web Storage APIはlocalStorageオブジェクト（ローカルストレージ）またはsessionStorageオブジェクト（セッションストレージ）から使うことができます。これらのオブジェクトは、JavaScriptエンジンによって自動的に作成されたStorageコンストラクタのインスタンスでJavaScriptのコードを実行する前に利用可能となっている。

セッションストレージ

セッションストレージ(sessionStorage)はセッションが維持されている間に限り値が保持される。新しく開いたタブやウィンドウは異なるセッションとみなされる。ブラウザのタブやウィンドウを閉じた時点で、保存した値は自動的に消去される。

JSONオブジェクト

JSON(JavaScript Object Notation)はJavaScriptのオブジェクト構造を文字列で表すときに使う表記法。JSONを利用することで、オブジェクトのデータ構造をJSON文字列(JSON形式の文字列)に変換してサーバーに送信したり、サーバから受け取ったJSON文字列をオブジェクトに変換して利用したりできる。

JSON記入時の注意事項

• キーはダブルクォート(")で囲む
• シングルクォート(')は使えない
• オブジェクト、配列の最期の要素の後ろに(,)を入れられない

ラッパーオブジェクト

プリミティブ型の値の後に続けてラッパーオブジェクトのメソッドやプロパティを記述できる。また変数に代入しなければプリミティブ値はstring型とならない。プリミティブ値を利用する際はあくまでラッパーオブジェクトとして扱われる。

コレクション

• (Array)配列の要素取得
• (Array)コールバック関数を引数にとるメソッド
• 静的メソッド
• Set

配列の要素取得

コールバック関数を引数にとるメソッド

forEach

配列の各要素を使って繰り返し処理を行う。

実行例

この場合コールバック関数でthisを使うと配列を参照することになる。

map

コールバック関数の戻値を要素にとる新しい配列を返す。

filter

コールバック関数の戻値がtrueの時の配列の要素のみを配列として返す。

every

すべての要素の値が条件に一致するか

some

少なくとも一つの値が条件に一致するか

find

条件を満たした最初の要素の値を取得

sort

実行例

並び替えの方法

• 0<戻値:val1 val2の順
• 0>戻値:val2 val1の順
• 0=戻値:順序変更はなし

reduce

引数メソッドの戻値と配列の値を順次処理し、最終的な戻値を返す。

静的メソッド

分割代入

• let [変数A,変数B = 初期値B] = 配列; :配列の分割代入
• let {プロパティA, プロパティB = 初期値B} = オブジェクト; :オブジェクトの分割代入プロパティ名と変数名を一致させる必要がある。
• function 関数名([,,引数名]){} :引数に対する分割代入。配列やオブジェクトの設定された要素のみを引数として取得することができる。
• function 関数名({,,引数名}){}

Set

Setのメソッド

forEach

Setプロパティ

変数.size :Setオブジェクトの要素数を返す

Map

Mapのメソッド

コールバック関数を引数にとるメソッド

Mapのプロパティ

変数名.size :Mapの要素数を取得

Mapからオブジェクトへ変換

const オブジェクト = Object.fromEntries(Mapオブジェクト);

Mapとオブジェクトの主な違い

• Mapの場合、キーに文字列以外も使用可能
• Mapの場合、for...of文を使った繰り返し処理を記述可能
• Mapの場合、sizeを通して長さを取得可能
• Mapの場合、メソッドを保持できない

WeakMap

キーにオブジェクトのみ使用可能なコレクション。

WeakMapのメソッド

WeakMapは反復可能オブジェクトではないためfor...of文などを使った反復処理はできない

反復処理

イテレータ

反復処理の挙動を定義するときに使うオブジェクト

イテレータの特徴

• イテレータには、必ずnextメソッドが格納されている必要がある。
• nextメソッドの戻値は、value,doneを保持するオブジェクトである必要がある
• doneは,反復の終了をtrueまたはfalseでnextメソッドの実行元に知らせる。trueの場合には反復処理が終了したことを表す。
• valueには、反復ごとに取得したい値を設定する。

※イテレーターでは関数を定義して、それを呼び出すことによって、returnで（関数のように）nextを受け取っている。関数の戻値を格納した変数では、その関数を実行した状態を格納しているようだ。変数の要素としてnextを呼び出すことで反復処理を実行することができる。関数内、next内ではコードを記述しても問題ないようであり、return文には直接はコードを記述できないようである。

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

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

反復可能オブジェクトを作成するには、イテレータを返す関数をオブジェクトのSymbol.iterator プロパティに設定するという決まりがある。オブジェクトにイテレータを追加した場合、for...of文のループに使用できる。ループごとに取り出される値はプロパティではなくイテレータが返す値となる。

オブジェクトに直接設定する場合

コンストラクタ関数に設定する場合(Arrayの場合)

クラスに設定する場合

ジェネレータ

ジェネレータ（ジェネレータ関数）とは、イテレータと同様の機能を持つGeneratorオブジェクトを作成するための関数。ジェネレータを使うとイテレータと同様の処理を完結に記述できる。

ジェネレータ関数の記法

ジェネレータ関数の宣言

ジェネレータ関数の関数式

ジェネレータ関数の実行

反復可能オブジェクトの作成

オブジェクトに直接設定する場合

コンストラクタ関数に設定する場合（Arrayの場合）

クラスに設定する場合

スプレッド演算子

スプレッド演算子はオブジェクトや配列の要素を展開したり、まとめたりするための演算子。オペランドの前にドットを３つつける形式で記述する。

配列の定義時に要素として利用すると、複製を行うこともできる。通常代入する場合は参照複製であるが、スプレッド演算子を利用することで、新たな配列として定義できる。

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

スプレッド演算子の記法

宣言時の利用

関数実行時の利用

配列の複製（コピー）に使用

配列の作成

オブジェクトでの使用（ES2018）

関数実行時にはオブジェクトをスプレッド演算子で渡すことができない。Array.prototypeにSymbol.iteratorとして関数を定義することで利用可能となる。

非同期処理

スレッド

スレッドはプログラムの開始から終了までの一連の処理の流れのこと。処理の開始から終了まで一貫していることを「１つのスレッドでコードが実行されている」と表現する。JavaScriptは基本的にシングルスレッドで実行される。（Web Workerスレッドと呼ばれる特殊な実装を行うことで利用できる並列実行もある）

• メインスレッド：ブラウザでJavaScriptのコードが実行されるスレッド
• シングルスレッド：逐次的に処理を行うスレッド
• マルチスレッド：並列的に処理を行うスレッド

• 同期処理:一行ずつメインスレッド上で行われる処理。
• 非同期処理:メインスレッドから一時的に切り離されて行われる処理。

イベントループ

非同期処理の管理、実行を行うための仕組み

イベントループ関連の用語

• 実行コンテキスト:JavaScriptエンジンによって準備されるコードの実行環境。(グローバルコンテキスト、関数コンテキスト）
• コールスタック:実行コンテキストが積み重なったもの。コード実行時には実行コンテキストが生成され、コールスタックに必ずコンテキストが積まれた状態になる。空でない場合にはメインスレッドが使用中であることになる。
• タスクキュー:実行待ちのタスク（非同期での実行が予約されている関数）が格納されるキューのこと。FIFO（First In,First Out）古い物から順に実行される。
• イベントループ:タスクキューに格納されたタスクを順番に実行していく仕組み。イベントループは定期的にコールスタックを監視し、空の時にタスクキューから非同期処理を実行する。

イベントループの挙動

コードの実行前にJavaScriptエンジンによってグローバルコンテキストがコールスタックに積まれる。この時点ではタスクキューは空で、Web APIも呼び出されていない状態。続いてグローバルコンテキストからWeb APIを実行することで、コールバック関数がタスクキューに実行待ちの状態で登録される。タスクキューに登録された関数はコールスタックが空になるまで実行されない。コールスタックが空になると、イベントループが検知して、コールバック関数をタスクキューから取得し関数コンテキストが生成される。その他にタスクキューにタスクが存在する場合にはイベントループによって同様に処理される。

タスクソース(task source)

タスクキューでタスクをカテゴリに分類して、ソースに応じた制御を行うためのもの

• タイマータスクソース(Timer Task Source):タイマー処理によって呼び出されるタスク
• UIタスクソース(User Interaction Task Source):ユーザーの画面操作をトリガーにして呼び出されるタスク
• ネットワークタスクソース(Networking Task Source):ネットワークのレスポンスをトリガーに実行されれうタスク
• DOM操作タスクソース(DOM Manipulation Task source):DOM操作を反映する時にJavaScriptエンジンによって実行されるタスク
• 履歴横断タスクソース(History Traversal Task source):History APIと呼ばれる、ブラウザの履歴操作を行うときに実行されるタスク

Promise

非同期処理を行うためのオブジェクト。非同期処理のネストを避けることができる。

参考となる形式

チェーンメソッド

メソッドをつなげて記述する方法。

改行を含むことも可能

Promiseチェーン

複数のPromiseを、順番に処理が完了するのを待って、次の非同期処理を実行していくこと。（直列な処理）

Promiseチェーンのイメージ

Promiseの状態管理

Promiseインスタンスは内部で現在の状態を管理し、これによってPromiseのメソッドを制御している。Promiseの状態はそのインスタンスをコンソールで出力することで確認できる。

Promiseの並列処理

並列処理は静的メソッドを利用して行うことができる。

Promise.all

すべての非同期処理を並列に実行し、すべての完了を待ってから次の処理を行う。（すべてのPromiseインスタンスがfulfilledになってからthenメソッドに処理が移る。）また、いずれかのPromiseインスタンスのステータスがrejectedになったときにはcatchメソッドに処理が移る。

Promise.race

複数のPromiseインスタンスのいずれかがsettledになった時にthenメソッド(fulfilled)又はcatchメソッド(rejected)を実行する。

Promise.any

複数のPromiseインスタンスのいずれかがfulfilledになったタイミングでthenメソッドに処理を移す。すべてのインスタンスの状態がrejectedになった時はcatchメソッドを実行する。この時渡される引数は、AggregateErrorというオブジェクトになる。

Promise.allSettled

すべてのPromiseインスタンスの状態がsettledになった時にthenメソッドに移行する。allと異なりallSettledの場合はcatchメソッドは使わない。rejectとなった場合はthenメソッドのコールバック関数に、Promiseインスタンスのstatus,value or reasonが対で格納された配列が入る。

その他の静的メソッド

Promise.resolve(引数)

fulfilledの状態のPromiseインスタンスを返す。

Promise.reject(引数)

rejectedの状態のPromiseインスタンスを返す。

Promiseと他の非同期処理の違い

Promiseの非同期処理の実行は、ジョブキュー(Job Queue)によって管理されている。
ジョブキューはPromiseによる処理の管理をする専用のキュー。
Promiseによる非同期処理はマイクロタスク(Microtask)と呼ぶ。
setTimeoutやTimerはマクロタスク(Macrotask)と呼ぶ
実行順序はジョブキュー→タスクキュー

await/async

async

Promiseのthenの処理を簡潔に記述することができる。returnが返す値は必ずPromiseインスタンスになる。

await

Promiseのステータスがsettledになるまで、後続のコードの実行を待機する。

Fetch

サーバーからデータやファイルを取得するときに使う。Web APIの一種であるFetch API(Fetch関数)。非同期処理なのでPromiseやawait/asyncを使って記述する。

DOM(Document Object Model)

DOM(Document Object Model)、DOMインターフェイス、DOM APIともいう。JavaScriptからHTMLへの入出力を行うことができる。

W3CがDOMやHTMLを管理してきたが、2004年にWHATWGが方向性の違いからできた。（おそらくは同一の団体）
それ以降は両者が重複する形でDOMとHTMLの仕様が管理されていた。
2019年からはWHATWGの使用に一本化することで合意されている。
HTML/DOMの仕様：WHATWG-Standards

DOMツリー

• Documentオブジェクト:HTMLの構造をDOMオブジェクトに変換された状態のツリー構造で格納されている。これによってHTML情報を取得・変更することができる。このツリー構造をDOMツリーという。DOMツリーにはElementで構成されたものとNodeで構成されたものの2種類ある。
• Node(ノード):DOMツリーを構成する個々のオブジェクトのこと。テキストやHTMLコメント、HTMLタグなどの種別がある。
• Elemetn(エレメント):Nodeの内、HTMLタグを表す。NodeのタイプとしてElementタイプという種別。また、ElementはNodeを継承している。

DOMツリーの構造

ElementとNodeのツリーは、それぞれDocumentオブジェクトのchildren、childNodesに格納されている。

• children:Nodeの中でもElementのみ格納されている。配列として格納される。[0]はhtmlで直下の要素がすべて入る。
• childNodes:コメントやテキストなどを含むすべての種類のNodeが格納されている

HTML要素が取得できない場合の対処法

1. scriptタグを<body>の閉じタグの直前に記述する。
2. DOMContentLoadedイベント又はloadイベント内でコードを実行する
document.addEventListener("DOMContentLoaded",()=>{ //ここに実行コードを記述 });
3. defer属性をscriptタグに付与する。(複数defer属性の付いたscriptタグがある場合は記述順)
4. scriptタグにtype="module"を付加する。(defer属性を付加したときと同様の挙動となる)

要素の作成

1. document.createElementメソッドを使う
2. ダミーの要素のinnerHTMLに作成したいHTMLを挿入する。
3. templateタグを使う

要素の属性の取得・変更

データ属性

データ属性はユーザーが独自で値を保持するためのHTML属性。データ属性は、data-*のような形式で表される。この属性は一時的にJavaScriptで使用する値を保持している。JavaScriptからアクセスするときは、「dataset」という特別なプロパティを通してアクセスする。属性値は文字列として取得される。

要素の位置と大きさの取得と変更

client,offsetの違い

scroll系

レイアウト幅とレンダリング幅

getBoundingClientRectメソッドで取得できる要素の大きさとoffsetWidthなどを指定して取得する値は基本的には同じだが、レイアウト幅はCSSで指定された幅であり、レンダリング幅は実際に画面上に表示される時の幅で、transformプロパティを指定した場合にはoffset系のプロパティはレイアウト幅を取得し、getBoundingClientRectメソッドはレンダリング幅を取得する。

イベント

JavaScriptでイベントを登録する方法

• イベントハンドラにアクションを登録する
• イベントリスナにアクションを登録する

イベントハンドラ

イベントリスナ

イベントリスナの登録

イベントリスナの解除

イベントの伝播

イベントの伝播とはページ内のどこかでイベントが発生した場合にイベントが要素間を伝播していくこと。

• キャプチャリングフェーズ(Capturing Phase)

発生したイベントと同じタイプのイベントが上位から下位に伝播していく。この範囲は先祖要素にあたる物のみに限られ、イベントの発生した要素迄となる。イベントリスナでcapture:trueとしたアクションのみがこのフェーズで実行される。

• ターゲットフェーズ(Target Phase)

キャプチャリングフェーズのイベントの伝播がイベントが発生した要素までたどり着くとこのフェーズへ移行する。イベントが発生した要素に登録されているアクションを実行する。

• バブリングフェーズ(Bubbling Phase)

ターゲットフェーズが完了したらこのフェーズへ移行する。イベントが上位の親要素、先祖要素に対してイベントの伝播が起こる。イベントリスナにcapture:trueが設定されているイベントリスナにはこのフェーズではアクションは起こらない。

Eventオブジェクト

Eventオブジェクトには、イベントの発生状況にかかわる情報が格納されている。

イベントをスクリプトから実行

イベント一覧

モジュール

意味のある機能のまとまりとして記述されたもの

一般的なモジュールの要件

• 意味のある機能のまとまりであること
• インターフェイスが明確であること
• モジュールの追加・交換が比較的容易に行えること

モジュールをインターフェイス経由でのみ使用できるようにすることで、モジュール同士の結びつきを弱めて、モジュールの追加や交換を容易にすることができる。機能同士が希薄な関係であることを疎結合と言う。疎結合に保った機能を提供することでコードの可読性、保守性、再利用性を向上させることができる。

JavaScriptにおけるモジュールシステム

• ES Modules:ES6で追加されたECMAScriptの使用に基づくモジュール管理機能。(ES2015 Modules,JavaScript Modulesとも呼ばれる)。ES ModulesはブラウザとNode.jsのどちらでも使用できる。
//HTMLファイル内に記述する時 <script type="module"> </script> //JavaScriptファイルを読み込むとき <script type="module" src="filepath" />

ES Modulesによって挙動が変わる点

• ES Modulesの仕様に沿って記述された他のJavaScriptファイルの関数やクラスをインポート、エクスポートできるようになる。
• モジュールのトップレベルのコードのスコープがモジュール内に限定される
• モジュールのトップレベルのコードは一度だけ実行される
• モジュールのトップレベルのコードは一度だけ実行される
• スクリプト(JavaScriptコード)の実行タイミングがDOMツリーの構築後になる
• Strictモードが自動で有効になる
• CommonJS:Node.jsでのみ使用可能なモジュール管理機能

エクスポート

ES Moduleのエクスポート(外部への露出)３つの方法

• 名前付きエクスポート:変数名や関数名、クラス名がそのまま、外部からアクセスするときの識別子になる。またasキーワードを使って、別名をつけることも可能。
<script type="module"> //変数のエクスポート export let variable = "変数宣言の前にexportキーワードをつけます。"; export const constant = "定数もエクスポート可能です。"; //複数の変数を一括でエクスポート export let val1 = "値1",val2 = "値2"; //関数、ジェネレータ関数、クラスのエクスポート export function exportedFunction () { } export function* exportedGenerator(){ } export class ExportedClass{ } //モジュール内で定義した変数、関数、クラスの一括エクスポート let normalVariable = "モジュール内で宣言した変数"; function normalFunction(){ } class NormalClass{ } export {normalVariable ,normalFunction , NormalClass}; //別名を指定してエクスポート(asで別名を付ける) export { normalVariable as publicVariable, normalFunction as publicFunction, NormalClass as PublicClass, }; //分割代入しながらエクスポート（オブジェクトから分割代入でエクスポート） const normalObject={ normalVal:normalVariable, normalFn:normalFunction, NormalCls:NormalClass } export const {normalVal,normalFn,NormalCls} = normalObject; </script>
• デフォルトエクスポート:モジュールに一つだけ定義できる。この場合モジュール利用者がインポートの際に任意の名前を付けることができる。
<script type="module"> //無名関数をデフォルトエクスポート export default function(){} //アロー関数をデフォルトエクスポート export default () => {} //名前を付けてもimportの際には任意の名前で使うことが可能 export default function exportedFunction() {} //クラスのエクスポート export default class{} //名前を付けてもimportの際には任意の名前で使うことが可能 export default class ExportedClass{} //defaultという名前を付けるとデフォルトエクスポートとしてエクスポートされる function normalFunction(){} export {normalFunction as default}; </script>
• モジュールの集約:他のファイルで実装した関数やクラスを一つのファイルから呼び出せるようにする（集約する）ことで、利用者に利便性を提供できる。
<script type="module"> //デフォルトエクスポートを含むすべての機能をエクスポート export * from "./sub.module.js"; //デフォルトエクスポートを含むすべての機能をsubObjectオブジェクトのプロパティとしてエクスポート export * as subObject from "./sub.module.js"; //特定の機能だけエクスポート export {subVariable,subFunction,SubClass} from "./sub.module.js"; //別名を付けてエクスポート export { subVariable as exportedVariable, subFunction as exportedFunction, SubClass as ExportedClass, } from "./sub.module.js"; //デフォルトエクスポート export {default} from "./sub.module.js"; </script>

インポート

静的インポート(Static Imports)

コードを読み込んだ時点で、インポート先のモジュールはすでに決定される。JavaScriptでインポートと言う場合にはこちらの方法を指す。静的インポートではインポート先のモジュールのトップレベルのコードの実行までを行う。なお、トップレベルのコードの実行は一度のみで再度インポートされた場合には省略される。

静的インポートの２つの特徴

• fromに続くモジュール名に変数は使用不可
• 読み込み時点でモジュールのトップレベルのコードが実行される

動的インポート(Dynamic Imports)

コードを実行する段階で初めて、どのモジュールを読み込むかが決定される。必要な時に他のモジュールを読み込むことができる。

Strictモード

Strictモードは「"use strict;"」と記述すると有効になる。また、type="module"属性を記述したscriptタグではデフォルトで有効。さらにclass内のコンストラクタやメソッドでも有効

Strictモードによる影響

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

Node.js

Node.jsはブラウザからJavaScriptを実行する機能を抽出したもの。Web APIの大部分は利用できない。（DOMインターフェイスも存在しない）

Node.jsの環境構築

LTS版:Node.jsのダウンロードURL

• 最新版(Latest・Current):最新のNode.jsの機能が実装されているが安定稼働は保証されていないため、本番環境では使わない。
• LTS版(Long Term Support):Node.jsの偶数バージョンは長期メンテナンスが約束されたLTS版としてリリースされており、３０か月間のメンテナンスが約束されている。メンテナンス期間中に発生されたバグや脆弱性は修正される

ESModuleの有効化

• ファイルの拡張子を.mjsに変更する
• package.jsonのtypeフィールドを変更する。
• オプションを指定してnodeコマンドを実行

パッケージ管理ソフト(npm)

パッケージ管理ソフトにはyarnというものもある。（Facebookが中心となって開発している）

npm(Node Package Manager)

プログラムをパッケージ単位で追加・削除できる。Node.jsに含まれている。package.jsonというファイルを使ってパッケージの状態を保持している。package.jsonにはプロジェクトにかかわる情報を記述できる。

package.jsonサンプル

1. パッケージの公開に関係するフィールド

name	パッケージ名（リポジトリ名やフォルダ名などをつける）
author	作者名(サイトURL)
version	バージョン名（1.20.1のような３つの数値で表す）
description	パッケージの説明
repository	リポジトリの情報
private	trueの場合は、公開のコマンドを流しても公開されない
main	外部からパッケージを使うときのエントリーポイントを記述する。パッケージが読み込まれたときにはエントリーポイントに指定したファイルが実行され、エクスポートされた関数やクラスが使用可能な状態になる

2. パッケージの実行に関するフィールド

type	ES Modules(module)又はCommonJS(commonjs)を指定する。省略された場合は、CommonJSの規格に沿ってコードが実行される。
scripts	パッケージで使うスクリプトを登録する。ここに登録したスクリプトは「npm run <スクリプト> 」で実行可能となる。また、「start,stop,restart,test」で登録されたスクリプトに関しては、runを省略してnpm startのように実行できる。
dependencies	コードの実行に必要なパッケージを記述する。通常はnpm installコマンドを実行することで自動的に記述されるため手動で変更することはない。
devDependencies	開発時に必要なパッケージを記述する。例えば、本番用コードを生成する時に使うパッケージやテストスクリプトを実行するときに使うパッケージなど。npm installコマンドを実行することで自動的に入力されるため、手動で変更することはない。
optionalDependencies	任意で使用可能なパッケージを記述する。ここに追加されたパッケージが何らかの理由で動作しない場合にも、それ以外の機能は問題なく動作するように作成する
engines	実行時に昇給されるNode.jsとnpmのバージョンを記述する
browserslist	ブラウザやNode.jsのサポートをどこまで行うか記述する。パッケージの本番用コードをビルドする時に主に使用される。代表的なモジュールバンドラであるwebpackはコードをビルドする時にbrowserslistフィールドにサポート対象のブラウザの設定があれば、その　ブラウザで動作するうように広報互換のコードを自動的に注入する。CSSのコードに広報五感を持たせるAutoprefixerなどもこの設定を参照する。

Node.jsのコマンド

コマンド	説明
node -e "コード"	コマンドラインでコードを実行
node ./filepath/file.js --input-type=module	javascriptをES Moduleで実行する。
node run <スクリプト>	package.jsonで指定したスクリプトを実行することができる。（jsonオブジェクトscriptsのstart,stop,restart,testを<スクリプト>に指定して実行する。
npm init -y	packageの初期化を対話型で行う。-yでデフォルト設定。
npm install --production	package.jsonが配置されているディレクトリで実行することで、package.jsonのdependencies、devDependencies、optionalDependenciedリストに記述しているパッケージをすべてインストールする。インストールされたパッケージは同階層に作成されるnode_modulesフォルダに格納される。
npm install --production	オプション--productionはdependenciedリスト、optionalDependenciesリストのパッケージのみインストールする。環境変数にNODE_ENVを設定し、その値としてproductionが設定されている場合も同様
npm install <パッケージ名>[@<バージョン>]
npm install <Gitホスト>:<Gitユーザー>/<リポジトリ名>
npm install <GitリポジトリURL>
npm install <.tar, .tar.gz, or .tgz形式の圧縮ファイルへのパス,またはURL>
npm install <ローカルフォルダへのパス>

トップへ戻る

---

用語集

用語	説明	備考
JavaScriptエンジン	JavaScriptを解析して実行する処理機能（Chrom:V8、Safari:JavaScriptCore、Firefox:SpiderMonkey、Edge:V8）
Node.js	JavaScriptが動作する環境、ブラウザなしでスクリプトを実行できる。
CommonJS	Node.jsのみで利用可能。	モジュール
ES Modules	scriptタグに対してtype="module"を設定することで利用可能。
strictモード	ファイルの先頭に"use strick;"を記入することで利用可能。
HTMLパーサー
コード記述		JavaScriptは大文字と小文字を厳密に使い分ける必要がある。
空白文字		無視して実行。
;		改行を挟んだ場合には不要
マジックナンバー		コード中にじかに記述された用途のわからない数字のこと。
仮引数	関数宣言時に設定する引数のこと。
実引数	関数実行時に渡す引数のこと。
プロパティ記述子
_変数名	クラス内のみの利用を表す。
Web Storage API	ブラウザにデータを保存することができる機能を提供する。localStorageオブジェクト（ローカルストレージ）またはsessionStorageオブジェクト（セッションストレージ）から使うことができる。
オリジン	URLのスキーム、ドメイン、ポートのこと。ローカルストレージは接続先のサーバーのオリジン単位で値が保存される。同じオリジン内のデータであれば、ブラウザのタブやウィンドウを跨いでデータの取得が可能。「スキーム://ドメイン:ポート」なので「http://localhost:80/index.html」と「http://localhost:80/dir/item.html」は同一オリジン。またローカルストレージには保存期限がないため、開発ツールやclear()、removeItem()で消去しない限りデータが失われることはない。
セッション	Webシステムにおけるセッションはブラウザがサーバーとの接続をしてから切断するまでの一連の操作や通信のこと。
シャローコピー	参照アドレスのコピーであること。この場合はオブジェクトのアドレスをコピーする。
ディープコピー	オブジェクト自体のコピーであること。この場合は同一のオブジェクトを別の配列に代入する。多階層配列においては下位配列のアドレスのみを格納しているようだ。
反復可能オブジェクト	イテレーターを保持しているオブジェクトのことで、イテレータは主にオブジェクトの反復処理の挙動を定義するためにつかわれる。
DOM(Document Object Model)
DOMオブジェクト	DOMインターフェースというプロパティやメソッドを扱うもの。これによってHTMLタグとの変換がブラウザ上で行われている。
セレクタ文字列	JavaScriptやCSSのコード内でHTML要素を特定する時に使う文字列のこと。
レイアウト幅	CSSで指定された幅
レンダリング幅	実際に描画された幅
アクション		イベントが発生したときに実行される関数
イベントハンドラ		windowオブジェクト、elementオブジェクト、documentオブジェクトのonから始まるプロパティ。ここに関数を登録することでリアクションを定義できる。
イベントリスナ		イベントにアクションを紐づける仕組みのこと。オプションの指定が可能で、複数のアクションを登録できる。アクションごとに登録解除が可能。以上の点でイベントハンドラと異なる。

コールバック関数

関数を引数として受け取ることができる。関数の()は実行を表す。

トップへ戻る

---

コード一覧

コード	引数	説明
コメント表記
//文章		一行コメント
/* 文章 *//		区間コメント
変数
var 変数名 = 値;		変数を定義する（グローバルスコープ）
let 変数名 = 値;		変数を定義する
const 変数名 = 値;		定数を定義する
${変数名}		テンプレートリテラル。文字列中に任意の変数の値を表示する。
let オブジェクト名 = {プロパティ1: 値1,プロパティ2: 値2,プロパティ3: 値3,ネストプロパティ名:{プロパティ1: 値1,プロパティ2: 値2},};		オブジェクトの初期化
オブジェクト名.プロパティ名		ドット記法
オブジェクト名["プロパティ名"]		ブラケット記法。プロパティ名には変数による指定も可能。
delete オブジェクト名.プロパティ名;		プロパティを削除、変数は削除できない。
let オブジェクト名 = {プロパティ: function(引数){関数処理文} };		プロパティに関数を定義
オブジェクト.プロパティ = function(引数){関数の処理}		プロパティにメソッドを追加。
オブジェクト.プロパティ(引数);		メソッドの実行。
let 変数名 = Symbol("ラベル");		シンボル型の定義。JavaScriptエンジンが新しい機能を追加するときに既存の機能を壊さないためのデータ型。列挙対象にならない。
let 変数名 = [値1,値2,値3,値4,...];		配列の宣言
関数
window.alert(string st)	string:表示文字列	stの内容をアラート表示（ダイアログ）
window.close()		現在のウィンドウを閉じる
window.open(string link,"window","width=x,height=y")
console.log(string st)	string:表示文字列	stの内容をコンソールに表示
document.write(string st)	string:表示文字列	stの内容を画面上に表示
Number(値)	数値へ変換する値	数値へ変換。（数値以外の場合NaN:Not a Numberを返す。
Boolean(値)	真偽値へ変換する値	真偽値へ変換。
String(値)	文字列へ変換する値	文字列へ変換。
BigInt(値)	BigInt型へ変換する値	BigIntへ変換。
Math.random()		ランダムな数を生成する。
Reflect.getOwnPropertyDescriptor(オブジェクト名,"プロパティ名");		プロパティ記述子の確認
Object.getOwnPropertyDescriptor(オブジェクト名,"プロパティ名");		プロパティ記述子の確認
Reflect.defineProperty(オブジェクト,"プロパティ名",{プロパティ記述子:値,プロパティ記述子:値,...});		プロパティ記述子の設定方法
Object.defineProperty(オブジェクト,"プロパティ名",{プロパティ記述子:値,プロパティ記述子:値,...});		プロパティ記述子の設定方法
Object.values(オブジェクト)		オブジェクトの値を取得
Object.keys(オブジェクト)		オブジェクトのキーを取得
eval(文字列)		文字列をコードとして実行。
setTimeout(関数,時間ms,関数の引数)
関数名.bind(object,param1,param2...)		thisで参照するオブジェクトを指定する。関数の引数を指定する。書かれた時点では関数は実行されない。
関数名.call(object,param1,param2...)		bindと同様であるが書かれた時点で実行される。
関数名.apply(object,array)		callと同様であるが、引数を配列で指定する。
オブジェクト.hasOwnProperty("プロパティ名");		プロパティの有無を確認。メソッドは該当しない。自身のオブジェクトのプロパティとして存在するかを確認。
"プロパティ名" in オブジェクト;		オブジェクトがプロパティを有しているかどうかの値。メソッドも該当する。プロトタイプチェーンまで確認する。
オブジェクト名 instanceof クラス名		オブジェクトがクラス名で指定したクラスに属するか。
Object.create(protoObj);		protoObjを__proto__に設定したオブジェクトを生成。
文字列.split(char separate);		文字列を分解
文字列.length;		文字数を取得
配列.slice(int startIndex,int endIndex)		配列から指定範囲を配列として切り取る。




データ型の種類

データ型	値	説明
String	文字列
Number	数値
BigInt	巨大な整数
Boolean	真偽値
undefined	未定義
Symbol	シンボル
Object	オブジェクト

演算子

算術演算子

記号	演算の種類	例
+	加算	6+9
-	減算	20-15
*	乗算	3*7
/	除算	10/5
%	剰余	7%3
**	べき乗	3**2
++	インクリメント	a++,++b
--	デクリメント	a--,--b

等価演算子

演算子	用途
==	値が等しいことを確認
===	値と型が等しいことを確認
!=	値が等しくないことを確認
!==	値と型が等しくないことを確認

関係演算子

演算子	用途
A<B	AがBより小さい事を確認
A>B	AがBより大きいことを確認
A<=B	AがB以下であることを確認
A>=B	AがB以上であることを確認
AinB	AのプロパティがBのオブジェクトのプロパティとして含まれるかの確認

代入演算子

演算子	用途
=	代入
+=	加算の自己代入
-=	減算の自己代入
*=	乗算の自己代入
/=	除算の自己代入
**=	べき乗の自己代入
&&=	論理積の自己代入
||=	論理和の自己代入
??=	Null合体の自己代入

論理演算子

演算子	用途
&&	論理積
||	論理和

その他の演算子

演算子	用途
,	それぞれの演算子を左から評価し、最後のオペラントの値を返す
単項演算子
delete	オブジェクトから特定のプロパティを削除
typeof	データ型の確認
!	真偽値に変換して、反対の真偽値を取得
+	Number型への変換
-	Number型へ変換して、正負を入れ替え
条件式?{条件式がtruthyの時実行}:{条件式がfalsyの時実行}	三項演算子
let 変数名1 = 変数名2 ?? "初期値";	Null合体演算子。左のオペラントがnullまたはundefinedの場合には、右のオペラントを返す。
変数名?.プロパティ名	オプショナルチェイニング演算子。オブジェクト以外の値に関してプロパティを取得したい場合に利用

キーコード

"Enter"	0x0D(13)
"Space"	0x20(32)
"Tab"	0x09(9)
"ArrowDown"	0x28(40)
"ArrowLeft"	0x25(37)
"ArrowRight"	0x27(39)
"ArrowUp"	0x26(38)
"Digit1"	0x31 (49)
"Digit2"	0x32 (50)
"Digit3"	0x33 (51)
"Digit4"	0x34 (52)
"Digit5"	0x35 (53)
"Digit6"	0x36 (54)
"Digit7"	0x37 (55)
"Digit8"	0x38 (56)
"Digit9"	0x39 (57)
"Digit0"	0x30 (48)
"KeyA"	0x41 (65)
"KeyB"	0x42 (66)
"KeyC"	0x43 (67)
"KeyD"	0x44 (68)
"KeyE"	0x45 (69)
"KeyF"	0x46 (70)
"KeyG"	0x47 (71)
"KeyH"	0x48 (72)
"KeyI"	0x49 (73)
"KeyJ"	0x4A (74)
"KeyK"	0x4B (75)
"KeyL"	0x4C (76)
"KeyM"	0x4D (77)
"KeyN"	0x4E (78)
"KeyO"	0x4F (79)
"KeyP"	0x50 (80)
"KeyQ"	0x51 (81)
"KeyR"	0x52 (82)
"KeyS"	0x53 (83)
"KeyT"	0x54 (84)
"KeyU"	0x55 (85)
"KeyV"	0x56 (86)
"KeyW"	0x57 (87)
"KeyX"	0x58 (88)
"KeyY"	0x59 (89)
"KeyZ"	0x5A (90)

その他関連

• JQuery
トップへ戻る

---