JavaScript

スポンサーリンク
JavaScript

JavaScript 逆引き集 | Optional chaining の利用(安全なネスト参照)

Optional chaining の利用(安全なネスト参照) — a?.b()JavaScript の オプショナルチェイニング演算子 ?. は「存在しないかもしれないプロパティや関数を安全に参照す...
JavaScript

JavaScript 逆引き集 | 配列の入れ子の安全アクセス(?.)

配列の入れ子の安全アクセス(オプショナルチェイニング ?.) — obj?.a?.bJavaScript の オプショナルチェイニング演算子 ?. は「存在しないかもしれないプロパティに安全にアクセス...
JavaScript

JavaScript 逆引き集 | 引数のデフォルト値に関数

引数のデフォルト値に関数 — function f(x = Date.now()) {}JavaScript では 引数のデフォルト値に「関数の呼び出し結果」を指定できます。初心者は「引数が渡されなか...
JavaScript

JavaScript 逆引き集 | 可変長引数の扱い

可変長引数の扱い — (...args) => argsJavaScript では 可変長引数(いくつでも引数を受け取れる仕組み)を rest 引数 ...args で書けます。初心者は「渡された引数...
JavaScript

JavaScript 逆引き集 | rest 引数と spread 構文

rest 引数と spread 構文 — function f(...args) {} / f(...arr)JavaScript には rest 引数 と spread 構文 という似た書き方があり...
JavaScript

JavaScript 逆引き集 | オブジェクトのデフォルト引数

オブジェクトのデフォルト引数 — function f(a = 1, b = {}) {}関数の引数に「値が渡されなかったときの既定値(デフォルト)」を設定できます。初心者は「未指定や undefin...
JavaScript

JavaScript 逆引き集 | parseInt/parseFloat の使い方

parseInt / parseFloat の使い方 — parseInt('12', 10)(基数指定)JavaScript では文字列を数値に変換する方法として parseInt と parseF...
JavaScript

JavaScript 逆引き集 | 型変換(Number/String/Boolean)

型変換(Number / String / Boolean) — Number('1'), String(1), Boolean(0)JavaScript では値の型を 明示的に変換 するために Nu...
JavaScript

JavaScript 逆引き集 | isNaN と Number.isNaN の違い

isNaN と Number.isNaN の違い — Number.isNaN(x) 推奨JavaScript で「値が NaN (Not a Number) かどうか」を判定する方法は2つあります。...
JavaScript

JavaScript 逆引き集 | typeof 判定(原始型)

typeof 判定(原始型) — typeof x === 'string'JavaScript の typeof 演算子は「変数や値の型」を文字列で返します。初心者は「この値は文字?数?それとも別の...
JavaScript

JavaScript 逆引き集 | instanceof 判定

instanceof 判定 — obj instanceof ClassJavaScript の instanceof 演算子は「あるオブジェクトが特定のクラス(コンストラクタ関数)から生成されたかど...
JavaScript

JavaScript 逆引き集 | static メソッド

static メソッド — static build(){}JavaScript の static メソッドは「インスタンスを作らなくてもクラスから直接呼び出せる関数」です。初心者は「クラスの便利関数...
JavaScript

JavaScript 逆引き集 | getter/setter(アクセサ)

getter / setter(アクセサ) — get v() {} / set v(x) {}JavaScript の getter / setter は「プロパティにアクセスしたときの動作」を自由...
JavaScript

JavaScript 逆引き集 | super の使用

super の使用 — super() / super.method()JavaScript の super は「親クラス(基底クラス)」を呼び出すためのキーワードです。extends で継承したクラ...
JavaScript

JavaScript 逆引き集 | extends 継承

extends 継承 — class B extends A {}JavaScript の extends は「クラスの継承」を表します。親クラス(基底クラス)の機能を子クラス(派生クラス)が引き継ぎ...
JavaScript

JavaScript 逆引き集 | class 構文

class 構文 — class A { constructor(x){ this.x = x } method(){} }JavaScript の class 構文は、オブジェクト指向プログラミング...
JavaScript

JavaScript 逆引き集 | プロトタイプ継承(古典)

プロトタイプ継承(古典) — Child.prototype = Object.create(Parent.prototype)JavaScript には「プロトタイプ継承」という仕組みがあります。こ...
JavaScript

JavaScript 逆引き集 | モジュールパターン(名前空間)

モジュールパターン(名前空間) — const My = (()=>{ return { fn(){} } })()JavaScript では昔から「モジュールパターン」という書き方がありました。これ...
JavaScript

JavaScript 逆引き集 | 即時実行関数(IIFE)

即時実行関数(IIFE) — (function(){})(); / (() => {})()JavaScript では 即時実行関数 (IIFE: Immediately Invoked Funct...
JavaScript

JavaScript 逆引き集 | スコープと var/let/const の違い

スコープと var / let / const の違い — var は関数スコープ、let / const はブロックスコープJavaScript で変数を宣言するときに使うキーワードは var / ...
JavaScript

JavaScript 逆引き集 | call/apply/bind

call / apply / bind の基本 — fn.call(ctx, arg1) / fn.apply(ctx, ) / fn.bind(ctx)JavaScript では 関数の呼び出し時に...
JavaScript

JavaScript 逆引き集 | this の扱い(関数とアロー)

this の扱い(関数とアロー関数)JavaScript の this は「その関数が呼ばれたときに参照するオブジェクト」を指します。ただし 通常の関数 と アロー関数 では挙動が違うため、初心者が混...
JavaScript

JavaScript 逆引き集 | クロージャの基本

クロージャの基本 — function outer(){ let a = 1; return ()=>a++ }JavaScript の クロージャ は「関数が作られたときの変数を覚えていて、あとから...
JavaScript

JavaScript 逆引き集 | EventEmitter(Node)

EventEmitter(Node.js) — const e = new EventEmitter(); e.on('x', ()=>{})Node.js には イベント駆動 の仕組みがあり、その中...
JavaScript

JavaScript 逆引き集 | fs.readFile(Node)

fs.readFile(Node.js) — const data = fs.readFileSync('a.txt','utf8')Node.js でファイルを読み込むときに使うのが fs モジュー...
JavaScript

JavaScript 逆引き集 | Buffer の利用(Node)

Buffer の利用(Node.js) — Buffer.from('text')Node.js には Buffer という特別なオブジェクトがあります。これは「バイナリデータ(生のデータ列)」を扱う...
JavaScript

JavaScript 逆引き集 | process.env(環境変数参照)

process.env(環境変数参照) — process.env.NODE_ENV(Node.js)Node.js では 環境変数 を process.env 経由で参照できます。環境変数は「アプリ...
JavaScript

JavaScript 逆引き集 | require(CommonJS)

require(CommonJS) — const x = require('x')(Node.js)Node.js では昔から使われている モジュール読み込みの仕組み が CommonJS です。r...
JavaScript

JavaScript 逆引き集 | export の基本

export の基本 — export function f(){} / export default ...JavaScript の モジュール では、ファイル内の関数や変数を外部に公開するために ...
JavaScript

JavaScript 逆引き集 | 動的 import(コード分割)

動的 import(コード分割) — const mod = await import('./mod.js')JavaScript の 動的 import は「必要なときにだけモジュールを読み込む」仕...
JavaScript

JavaScript 逆引き集 | Module(ESM)インポート

Module(ESM)インポート — import fs from 'fs'(環境による)JavaScript には モジュール という仕組みがあり、コードを分割して再利用できます。ESM(ECMAS...
JavaScript

JavaScript | 基礎構文:データ型 – typeof 演算子

typeof を一言でいうとtypeof 演算子は、「この値はどんなデータ型なのか?」を文字列で教えてくれる道具 です。実行中のコードの中で、これは数値なのかこれは文字列なのかこれは配列なのかオブジェ...
JavaScript

JavaScript | 基礎構文:データ型 – オブジェクトの基本

オブジェクトを一言でいうとオブジェクトは、「ひとまとまりの情報を、“名前付きのペア”で整理して持てる入れ物」 です。人本商品設定など、「何か1つの“もの”に、いくつかの性質(プロパティ)がくっついてい...
JavaScript

JavaScript | 基礎構文:データ型 – 配列の基本

配列を一言でいうと配列(Array)は、「同じような種類のデータを、順番つきでまとめて入れておける“箱の列”」 です。1人のユーザー → 1つの値(名前など)なら普通の変数で足りる10人のユーザー →...
JavaScript

JavaScript | 基礎構文:データ型 – BigInt

BigInt を一言でいうとBigInt は、「ふつうの Number では正確に扱えないレベルの“超でかい整数”を、安全に扱うためのデータ型」 です。JavaScript の通常の数値(Number...
JavaScript

JavaScript | 基礎構文:データ型 – Symbol

まず「Symbol(シンボル)」を一言でいうとSymbol は、「絶対にかぶらない“特別なラベル”を作るためのデータ型」 です。同じ説明を付けて作っても、毎回 必ず違う値 になります。const a ...
JavaScript

JavaScript | 基礎構文:データ型 – Undefined

まず「undefined」を一言でいうとundefined は、「“値がまだ決まっていない”ことを表すための特別な値」 です。もう少し噛み砕くと、「変数は“ある”んだけど、中に“ちゃんとした値”がまだ...
JavaScript

JavaScript | 基礎構文:データ型 – Null

まず「null」を一言でいうとnull は、「ここには“何もない”ことを、あえてハッキリ示すための特別な値」 です。「まだ値が決まっていない」のか「値がないことをわざと示している」のかこの違いを表現し...
JavaScript

JavaScript | 基礎構文:データ型 – Boolean

まず Boolean を一言でいうとBoolean(ブーリアン)は、「真か偽か、2つの状態だけを表すためのデータ型」 です。JavaScript では Boolean 型の値はたった 2つだけです。t...
JavaScript

JavaScript | 基礎構文:データ型 – String

まず「String(文字列)」を一言でいうとString(ストリング)は、「文字をならべたデータを扱うための型」 です。文章名前IDメールアドレスURLボタンのラベルなど、「人が読むための情報」はほぼ...
JavaScript

JavaScript | 基礎構文:データ型 – Number

JavaScript の Number を一言でいうとJavaScript の Number は「整数も小数もぜんぶまとめて扱う “数字用の型”」です。他の言語だと「int」「float」「doubl...
JavaScript

JavaScript | 基礎構文:変数・定数 – 多重代入

多重代入を一言でいうと多重代入(たじゅうだいにゅう)は、「1 行の代入文で、複数の変数にまとめて値を入れる書き方」 のことです。a にも b にも 0 を入れたいx と y に、それぞれ別の値を一気に...
JavaScript

JavaScript | 基礎構文:変数・定数 – 宣言と代入の違い

まず「宣言」と「代入」を一言で分ける先にイメージだけハッキリさせます。宣言:「この名前の変数(箱)を使いますよ、とプログラムに伝えること」代入:「その変数(箱)の中に、実際の値を入れること」たとえば、...
JavaScript

JavaScript | 基礎構文:変数・定数 – 初期化と未定義

「初期化」と「未定義」を一言でいうとまず言葉のイメージからはっきりさせます。「初期化(しょきか)」は、「変数を作ったタイミングで、最初の値をちゃんと入れてあげること」 です。「未定義(undefine...
JavaScript

JavaScript | 基礎構文:変数・定数 – 暗黙的なグローバル

まず「暗黙的なグローバル」を一言でいうと暗黙的なグローバルは、「自分ではグローバル変数を作ったつもりがないのに、“こっそり”グローバル変数が作られてしまう現象」のことです。もっと砕くと、本当は let...
JavaScript

JavaScript | 基礎構文:変数・定数 – グローバル変数の扱い

まず「グローバル変数」とは何かグローバル変数は、「プログラムの“どこからでも”読めて・書けてしまう変数」 のことです。もう少し具体的に言うと、どの関数の中にも入っていない場所(ファイルの一番上とか)で...
JavaScript

JavaScript | 基礎構文:変数・定数 – ブロックスコープ

まず「ブロックスコープ」を一言でいうとブロックスコープは、「{ ... } のカタマリの中だけで有効な“変数の生息範囲”」 のことです。JavaScript の let と const で宣言した変数...
JavaScript

JavaScript | 基礎構文:変数・定数 – 再代入の可否とは

「再代入の可否」を一言でいうと「再代入の可否(さいだいにゅうの かひ)」は、「一度値を入れた変数に、あとから“別の値を入れ直していいかどうか」というルールのことです。もう少しくだいて言うと、一度入れた...
JavaScript

JavaScript | 基礎構文:変数・定数 – let と const の違い

まず「共通点」と「一言での違い」let と const は、どちらも 「変数(名前付きの箱)を作るためのキーワード」 です。共通しているのは、ブロックスコープ({} の中だけ有効)var より新しい書...
JavaScript

JavaScript | 基礎構文:変数・定数 – var を使わない理由

まず結論:「新しく書くコードでは var はほぼ使わない」JavaScript には変数宣言が 3 種類あります。varletconstvarletconstJavaScript昔の JavaScri...
JavaScript

JavaScript | 基礎構文:変数・定数 – 変数とは何か

まず「変数」をざっくり一言でいうと変数は、「あとで使うために値を入れておく“名前付きの箱”」だと思ってください。数字文字文字列(文章)true / falseオブジェクトや配列など、プログラムの中で扱...
JavaScript

JavaScript 逆引き集 | Base64 エンコード/デコード

Base64 エンコード/デコード — btoa(str) / atob(b64)JavaScript には文字列を Base64 形式に変換するための関数が標準で用意されています。Base64 は「...
JavaScript

JavaScript 逆引き集 | URL 文字列エンコード/デコード

URL 文字列エンコード/デコード — encodeURIComponent / decodeURIComponentWebアプリでは「URLに文字列を安全に含めたい」場面がよくあります。検索キーワー...
JavaScript

JavaScript 逆引き集 | Web Crypto API(ランダム)

Web Crypto API(ランダム値生成) — crypto.getRandomValues(new Uint8Array(16))JavaScript には Web Crypto API という...
JavaScript

JavaScript 逆引き集 | Clipboard API(取得)

Clipboard API(取得) — navigator.clipboard.readText().then(t => {})Clipboard API は「クリップボードにある文字列を読み取る」こ...
JavaScript

JavaScript 逆引き集 | Clipboard API(コピー)

Clipboard API(コピー) — navigator.clipboard.writeText('text')Clipboard API を使うと、JavaScriptから「クリップボードに文字...
JavaScript

JavaScript 逆引き集 | geolocation API(位置取得)

geolocation API(位置取得) — navigator.geolocation.getCurrentPosition(p => {})ブラウザには「現在地を取得する」ための Geoloca...
JavaScript

JavaScript 逆引き集 | Navigator.online でオンライン判定

オンライン判定 — navigator.onLineブラウザには「今ネットに接続できているかどうか」を判定するためのプロパティがあります。それが navigator.onLine です。true なら...
JavaScript

JavaScript 逆引き集 | SSE(EventSource)受信

SSE(Server-Sent Events)受信 — const es = new EventSource(url); es.onmessage = e => {}SSE (Server-Sent ...
JavaScript

JavaScript 逆引き集 | WebSocket 基本接続

WebSocket 基本接続 — const ws = new WebSocket(url); ws.onmessage = e => {}WebSocket は「ブラウザとサーバーが双方向でリアルタ...
スポンサーリンク