ようこそ！JS & TS Learn Notesへ！
詳細はREADME.mdをご覧ください

JavaScript/TypeScript CheetSheet

実行方法

JavaScriptの実行方法

HTMLから読み込む

以下のタグで読み込むことができます。

<script src="[ファイル名].js"></script>

しかし、問題が。実はこのタグをそのままHTMLの最前部（例えば<body>直下）に置くと、DOMツリー構築後にスクリプトが実行され、意図した動作にならないことがあります。そこで出てくるのがHTMLの最後部、</body>タグ直前に書く方法です。


でも、ちょっと待ってください！分かりづらくないですか？そこで次は<head>内に埋め込む方法です。

<script src="[ファイル名].js"></script>

はい、コードは同じですね。書き方も同じです。しかし問題があります。それはDOMツリー構築後にスクリプトが実行され、意図した動作にならないことです。そこで、以下のコードに変更します。

<script src="[ファイル名].js" defer></script>

違いが分かりますか？defer属性を付けることで、スクリプトはDOMツリーの構築が完了した後に実行されるようになります。

Node.js上での実行

以下のコマンドで実行することができます。

node [ファイル名].js

TypeScriptの実行方法

TypeScriptのコンパイル

TypeScriptはJavaScriptのスーパーセットであり、JavaScriptにクロスコンパイルする必要があります。以下のコマンドでTypeScriptコードをJavaScriptコードに変換します。 tsc [ファイル名].ts

コンパイル後の実行

コンパイル後はJavaScriptコードになるため、全項で説明したJavaScriptコードの実行方法で実行することができます。

命名規則（JavaScript/TypeScript）
命名規則一覧表
命名規則 例 用途
camelCase myVariable, userName 変数
PascalCase MyClass, User クラス名、コンストラクタ関数
snake_case my_variable, user_name 変数、関数（キャメルケースより頻度少）
kebab-case can-not-use JavaScript/TypeScriptでは変数や関数で使えないこともあり、あまり使われない。ただし、CSSのクラス名、IDで使用されるのでJavaScript/TypeScriptと区別しやすい

サンプルコード

変数、定数、データ型（JavaScript/TypeScript）

変数・定数宣言の種類一覧表
宣言 初期値 再宣言 再代入 スコープ 巻き上げ 備考
const 必須 × × ブロックスコープ × 最優先で使うべき。
let undefined（→実質必須な事が多い） × ○ ブロックスコープ × constの次に使用するべき。
var undefined ○ ○ 関数スコープ ○ 非推奨。

サンプルコード

データ型

データ型一覧表
データ型 型の種類 値
String プリミティブ型 文字列
Number プリミティブ型 数値（整数、浮動小数点数、Infinity、NaN）、-(2^53-1)〜2^53-1、※2^53 - 1 = 9007199254740991
bigint プリミティブ型 任意精度整数（メモリが許す限りの大きさ）
Boolean プリミティブ型 真偽値（trueまたはfalse）
null プリミティブ型 null値
undefined プリミティブ型 未定義値
symbol プリミティブ型 一意の識別子
object オブジェクト型 オブジェクト（プロパティの集合）
array オブジェクト型 配列（順序付きの値の集合）
function オブジェクト型 関数（実行可能なオブジェクト）
TypeScript固有のデータ型一覧表
データ型 型の種類 構文 使用例 説明
any 特殊型 [変数宣言][変数名]: any let valName: any 任意の型の値を許容する。しかし、型安全性が失われるため非推奨。
union 特殊型 [変数宣言][変数名]:[型1] | [型2] | ... let valName: string | number 複数の型を組み合わせた型。使用例は、値がstring型またはnumber型のいづれかであることを意味する。使えるプロパティは指定した複数の型の両方で使えるものに限られます。たとえばstring | numberの場合.toString()は両方使えますが.toUpperCase()は使えません。（number型で使えないため。）
リテラル 特殊型 [変数宣言][変数名]: [リテラル値] let valName: "hello" 特定の値のみを許容する型。リテラル型を使用することで、変数が特定の値のみを持つことを保証できる。

TypeScript固有の機能

型の明示的な宣言

TypeScriptで型宣言は必須なのか、と言われると型推論機能により必ずしも明示的な型宣言は必要ない。ただし、関数の引数・戻り値、データベースでは安全のために明示的な型宣言が推奨される。

型チェック機能

IDEでの注釈、型推論機能、typeof演算子を使用することで変数、関数の型をチェックすることが出来る。

割り当て可能性（assignability）

ある型の値が別の型の変数に割り当て可能かどうかを判断するルール。（例：サブタイプ関係、構造的部分型）

型アノテーション（※非推奨）

変数で初期化時、型が推論されない変数は進化するany（evolving any）となる。しかし、any型を明示的に指定することは非推奨。なぜなら、型安全性が失われ、TypeScriptの利点が活かせなくなるため。

型の絞り込み

ある値が定義された型や、宣言された型、以前に推論された型よりも限定的な型であることをコードで示すことです。型の絞り込みで利用できる論理チェックを型ガード（type guard）と呼びます。

型の割り当てによる絞り込み

変数に直接値を割り当てると、変数を割り当てられた値の型に限定します。

型のif文による確認

型のtypeof演算子による確認

サンプルコード

演算子

優先順位

一番強い演算子は()（括弧）、一番弱い演算子は,(カンマ)。

算術演算子

算術演算子一覧表
演算子 意味
+ 加算
- 減算
* 乗算
/ 除算
% 剰余（割り算の余り）
++（インクリメント演算子） 1を加算。前置・後置で挙動が異なる。
--（デクリメント演算子） 1を減算。前置・後置で挙動が異なる。

等価演算子

概要

値の等しさを比較するために使用され、戻り値はBoolean型（trueまたはfalse）となる。ほとんどの場合、厳密等価（===）または厳密非等価（!==）を使用する。

等価演算子一覧表
演算子 意味
== 等価。値が等しい場合にtrueを返す。型変換あり
=== 厳密等価。値と型が等しい場合にtrueを返す。型変換なし
!= 非等価。値が等しくない場合にtrueを返す。型変換あり
!== 厳密非等価。値と型が等しくない場合にtrueを返す。型変換なし

関係演算子

概要

オペランドの大小関係を比較するために使用され、戻り値はBoolean型（trueまたはfalse）となる。

関係演算子一覧表
演算子 意味
X>Y 大なり。XがYより大きい場合にtrueを返す。
X<Y 小なり。XがYより小さい場合にtrueを返す。
X>=Y 大なりイコール。XがY以上の場合にtrueを返す。
X<=Y 小なりイコール。XがY以下の場合にtrueを返す。
X in Y YプロパティがXオブジェクトのプロパティを持っているかどうかを判断する。

論理演算子

概要

オペランドの論理積、論理和、論理否定を評価するために使用され、戻り値はBoolean型（trueまたはfalse）となる。

論理演算子一覧表
演算子 意味
X && Y 論理積（AND）。XとYの両方がtrueの場合にtrueを返す。
X || Y 論理和（OR）。XまたはYのどちらかがtrueの場合にtrueを返す。
!X 論理否定（NOT）。Xがfalseの場合にtrueを返す。

falsyとtruthy

Boolean関数で値を評価した際、falseとみなされる値をfalsy、trueとみなされる値をtruthyと呼ぶ。

三項演算子

以下の式でif文を簡潔に書くことができる。

[条件式] ? [真のときの値] : [偽のときの値]

サンプルコード

制御構文
制御構文一覧表
制御の種類 構文 解説
条件分岐 if([条件]) { } 条件が真のときにコードブロックを実行
条件分岐 if { } else if { } else { } 条件に応じて複数のコードブロックを実行
条件分岐 switch
ループ for(let [変数名] = [開始数]; [変数名] < [終了条件]; [変数名]++) { }
ループ while([条件]) { } [条件]がfalseになるまで繰り返し実行する。
ループ do { } while([条件]) 少なくとも1回はコードブロックを実行し、その後[条件]がtrueの間繰り返す。
ループ for...in
ループ for...of
例外処理 try {...} catch {...} finally {...}

コレクション - Array（配列）

Array（配列）

コレクション一覧表
構文 使用例 説明
[変数宣言] [配列名] = [値1, 値2, 値3...] const myArray = [1, 2, 3] 配列リテラル（[]）を使用した配列。
[変数宣言] [配列名] = new Array([値1, 値2, 値3...]) const myArray = new Array(1, 2, 3) new Arrayを使用した配列の初期化。

Array（配列）のメソッド

Array（配列）のメソッド一覧表
構文 使用例 説明
[配列名].shift() myArray.shift() 配列の先頭から要素を削除する。
[配列名].unshift([追加要素1], [追加要素2], ...) myArray.unshift(0) 配列の先頭に要素を追加する。
[配列名].push([追加要素1], [追加要素2], ...) myArray.push(4) 配列の末尾に要素を追加する。
[配列名].pop() myArray.pop() 配列の末尾から要素を削除する。
[配列名].splice([開始位置], [削除する要素数] [,追加要素1], [追加要素2], ...) myArray.splice(1, 1, 'a', 'b') 配列の指定した位置から要素を削除し、必要に応じて新しい要素を追加する。
[配列名].slice([開始位置], [終了位置]) myArray.slice(1, 3) 配列の指定した範囲の要素を新しい配列として返す。
[配列名].concat([配列1], [配列2], ...) myArray.concat([4, 5, 6]) 同じ要素を持つ新しい配列を作成する。

関数
関数の定義方法一覧表
種類 構文 使用例 説明
関数宣言 function [関数名]([引数1], [引数2], ...) { [処理内容]; [return 戻り値];} function myFunction(a, b) { let sum = a + b ; return sum; } 関数名付きの宣言で、基本的な構文。戻り値は省略可能。また、実行文を関数宣言よりも前に記述することが可能。
関数式 const [関数名] = function([引数1], [引数2], ...) { [処理内容]; [return 戻り値];} const myFunction = function(a, b) { let sum = a + b ; return sum; } 関数を変数に代入する方法。戻り値は省略可能。関数宣言とは違い、実行文を関数宣言よりも前に記述することは不可能。
無名関数 function([引数1], [引数2], ...) { [処理内容]; [return 戻り値];} function(a, b) { let sum = a + b ; return sum; } 関数名を持たない関数。コールバック関数で使用されることが多い。
アロー関数 ([引数]) => { [処理内容]; [return 戻り値]; } (a, b) => { let sum = a + b ; return sum; } ES6で導入された関数を簡潔に定義する方法。戻り値は省略可能。無名関数として使用されることが多い。

クラス

編集中📝😑

非同期処理

編集中📝😑

Document Object Model (DOM) API

編集中📝😑

HTML要素を取得する

getElementById以外getElementsと複数形になっているので注意してください。

メソッド 説明
document.getElementById([id名]) 指定したIDを持つ要素を取得する。
document.getElementsByClassName([class名]) 指定したクラス名を持つ要素のHTMLCollectionを取得する。
document.getElementsByTagName([タグ名]) 指定したタグ名を持つ要素のHTMLCollectionを取得する。
document.getElementsByName([name属性]) 指定したname属性を持つ要素のNodeListを取得する。

現在は一般的に以下のAPIを使う事が推奨されています。ただし、パフォーマンスの関係でElementを取得するメソッドを使うことがあります。

メソッド 説明
document.querySelector([要素名][#id名][.class名]) 指定したセレクタに一致する最初の要素を取得する。
document.querySelectorAll([要素名][#id名][.class名]) 指定したセレクタに一致するすべての要素のNodeListを取得する。

HTML要素を置き換える

HTML要素を追加する

イベント

編集中📝😑

モジュール

特徴

  • モジュールはファイル単位で定義される。
  • モジュール以外のファイルは全てスクリプトとなる。
  • モジュール化すると、名前の競合（グローバルスコープ汚染）を避けつつ、コードを分割して管理できる。
  • モジュールはデフォルトでStrictモードで実行される。そのため、DOMツリー構築後にモジュールが実行される。
  • モジュールの読み込み時、モジュールのトップレベルのコードは初回読み込み時実行される。2回目以降の読み込み時には実行されない。

TypeScript固有の話

TypeScriptでexport{}を書くと、コンパイル後のJavaScriptコードではexport文の位置が異なる場合がある。これはJavaScriptではexport文はどこに書かれても、実行順が変わらないため。

エクスポート

インポート

静的インポート
  • fromに続くモジュール名に変数は使えない。
  • 読み込み時点でモジュールのトップレベルのコードが実行される。
説明 構文
名前付きインポート import { [エクスポート名1], [エクスポート名2] } from '[モジュール名].js';
別名を付けてインポート import { [エクスポート名] as [別名] } from '[モジュール名].js';
デフォルトエクスポート、名前付きエクスポートをmoduleObjectのプロパティとしてインポート import * as moduleObject from '[モジュール名].js';
デフォルトエクスポート import [任意の名前] from '[モジュール名].js';
デフォルトエクスポート、名前付きエクスポートを個別にインポート import [任意の名前], { [エクスポート名1], [エクスポート名2] } from '[モジュール名].js';
デフォルトエクスポート、名前付きエクスポートをmoduleObjectのプロパティとしてインポート import [任意の名前], * as moduleObject from '[モジュール名].js';
インポートせず、モジュール内のコードを一度だけ実行 import '[モジュール名].js';
動的インポート
  • ES2020以降でサポートされている比較的新しい機能。
  • 必要な時に他のモジュールを読み込むことができる。
説明 構文
Promiseオブジェクトで使う let promise = import('[モジュール名].js');promise.then((moduleObj) => { moduleObj.exportedFunc(); });
async/awaitで使う async function loadModule() { let [export元の関数名] = await import('[モジュール名].js'); [export元の関数名](); }

Strictモード

ES5で導入されたモードです。Strictモードでは、コードの書き方を厳格にします。なお、moduleを有効にした場合、デフォルトでStrictモードが適用されます。

影響
  • 予約語が増え、変数名や関数名として使用できなくなる。
  • 未宣言の変数への代入が禁止される。
  • 書き込み不可のプロパティの変更が禁止される。
  • 関数宣言にブロックスコープが適用される。
  • thisはプリミティブ値も許容される

Node.js

概要

  • Node.jsは、サーバーサイドでJavaScriptを実行するための実行環境。
  • V8 JavaScriptエンジンを使用している。

ブラウザ環境との差異

❌モジュール⭕CommonJSモジュール
概要

Node.jsでモジュールを使用するための規格です。モジュールはファイル単位で定義され、モジュール内のコードはモジュールが読み込まれたときに実行されます。

エクスポート
exports.[エクスポート名] = function(){[処理内容]}; module.exports.[任意の名前] = require('[モジュール名].js');
インポート
const [任意の名前] = require('[エクスポート名].js'); [任意の名前].[エクスポートされた関数名]();
  • fetch()ではURL形式を指定する必要があるため、ローカルファイルを読み込む際は、URL形式でパスを指定する必要がある。
  • Node.js上でTypeScriptを使用する際は@types/nodeをインストールする必要がある。
Node.jsでモジュールを使いたい場合
  • ESモジュールを使用するために、package.jsonに"type": "module"を追加する。 { "type": "module" }
  • ファイル拡張子を.jsから.mjsに変更する。
  • コマンドラインで--experimental-modulesフラグを使用してNode.jsを起動する。
❌Windowオブジェクト⭕globalオブジェクト

Windowオブジェクトが使えず、代わりにglobalオブジェクトを使用する必要がある。

npm(Node Package Manager)

  • npmはNode.js、JavaScriptのライブラリやツールを管理するためのパッケージマネージャー。
  • rpm、apt、yumなどのLinuxのパッケージマネージャーと同様の役割を果たす。
  • npmを使用することで、プロジェクトに必要なプログラムを簡単にインストール、アップデート、管理することができる。
  • 管理はpackage.jsonファイルを通じて行われる。

TypeScript

コンパイル設定
tsconfig.jsonの設定一覧表
設定名 プロパティ 説明
compilerOptions TypeScriptのコンパイルオプションを指定するためのプロパティ。
target コンパイル後のJavaScriptのバージョンを指定するためのプロパティです。。
include コンパイル対象のファイルやディレクトリを指定するためのプロパティ。
exclude コンパイルから除外するファイルやディレクトリを指定するためのプロパティ。
files コンパイル対象のファイルを明示的に指定するためのプロパティ。
declaration 型定義ファイル（.d.ts）を生成するかどうかを指定するプロパティです。デフォルトはtrue（生成する）です。falseに設定すると生成されません。
references 他のプロジェクトへの参照を定義する。
outDir コンパイル後のJavaScriptファイルの出力先ディレクトリを指定するプロパティです。

Node.jsコマンド
TypeScriptコマンド一覧表
コマンド 説明
tsc [ファイル名].ts TypeScriptファイルをJavaScriptにコンパイルするコマンド。
tsc --version ローカルにインストールされているTypeScriptのコンパイラーのバージョンを表示するコマンド。
TypeScript関連のNode.jsコマンド一覧表
コマンド 説明
tsc [ファイル名].ts type script compilerの略。TypeScriptファイルをJavaScriptにコンパイルするコマンド。
ts-node [ファイル名].ts TypeScriptファイルを直接実行するコマンド。ts-nodeはNode.jsの実行環境でTypeScriptコードを直接実行できるようにするツールです。
tsc --version TypeScriptのバージョンを表示するコマンド。

Tailwind CSS

概要

Tailwind CSSはOSSのCSSフレームワークです。特徴としてユーティリティファーストが挙げられます。他のCSSフレームワークは、ボタンやボックスなど既に定義済みのコンポーネントを使い制作していきますが、Tailwind CSSはユーティリティークラスという特定のスタイルが設定されているクラスをHTML要素に組み合わせて適用することで、自由度が高く保守性が高いコーディングを実現しています。

導入

試験的導入

私は当初、Tailwind CSSの公式サイトを参考に以下のコードを<head>要素内に記述し、試験的に導入しておりました。

<script src="https://cdn.tailwindcss.com"></script>

その後「同じ要素に、毎回同じTailwind CSSのクラスを記述するのは冗長だな」と感じ、npmを経由し本格導入することにしました。

本格的導入

Tailwind CSS公式サイトを参考に、viteを経由して導入しました。

設定ファイル

Tailwind CSSの設定ファイルは、プロジェクトのルートディレクトリに配置される tailwind.config.jsです。以下、記述例です。

ビルド～読み込み方法

docs>src 内にあるTailwind CSSの構文で制作したCSSファイルを以下のコマンドでbuildし、docsフォルダ内に生成します。

npm run build

その後、生成したCSSファイルをhtml側で読み込みます。