JavaScript

スポンサーリンク
JavaScript

JavaScript | 非同期処理:コールバック – 可読性の低下

「コールバックで可読性が落ちる」という話の本質コールバックは、非同期処理には欠かせない仕組みです。ただし、使い方次第でコードの「可読性(読みやすさ)」を一気に悪くしてしまう ことがあります。特に問題に...
JavaScript

JavaScript | 非同期処理:コールバック – エラーハンドリングの問題

コールバックとエラーハンドリングの関係(まず全体像)コールバックを使った非同期処理では、「エラーをどう扱うか」 が一気に難しくなります。同期処理なら、try { const result = doSo...
JavaScript

JavaScript | 非同期処理:コールバック – コールバック地獄

コールバック地獄とは何か(まずイメージ)コールバック地獄(callback hell)は、「非同期処理をコールバックだけでつなぎまくった結果、コードが右に右にネストしまくって、読めない・直せない状態」...
JavaScript

JavaScript | 非同期処理:コールバック – ネストしたコールバック

ネストしたコールバックとは何か(まずイメージ)ネストしたコールバックというのは、「コールバックの中で、さらに別の非同期処理を呼び、その中でまたコールバックを書き…と階段状に深くなっていく書き方」 のこ...
JavaScript

JavaScript | 非同期処理:コールバック – 同期コールバックとの違い

いちばん大事な違いのイメージまず、ざっくりこう覚えてください。同期コールバック→ 「その場で、すぐに呼ばれるコールバック」非同期コールバック→ 「あとで、別のタイミングで呼ばれるコールバック」どちらも...
JavaScript

JavaScript | 非同期処理:コールバック – 非同期コールバック

まず「非同期コールバック」を一言でイメージする非同期コールバックは、「“今すぐ”ではなく、“あとで”呼び出してもらうために登録しておく関数」のことです。普通のコールバックも「あとで呼ばれる関数」ですが...
JavaScript

JavaScript | 非同期処理:コールバック – setInterval の仕組み

setInterval を一言でいうと何かsetInterval は「この処理を◯ミリ秒ごとにくり返し実行してね」とブラウザ(または Node)に頼む関数です。setTimeout が「1回だけ、あと...
JavaScript

JavaScript | 非同期処理:コールバック – setTimeout の仕組み

まず setTimeout を一言でイメージするsetTimeout は、「この処理を◯ミリ秒“後に”実行してね」とブラウザ(または Node)にお願いする関数です。ポイントはここです。setTime...
JavaScript

JavaScript | 非同期処理:コールバック – コールバック関数とは

コールバック関数のイメージ(まず感覚から)コールバック関数は、「あとで呼んでね」と他の関数に渡しておく関数 です。自分で直接 myFunc() と呼ぶのではなく、「この処理が終わったときに、この関数を...
JavaScript

JavaScript | 非同期処理:非同期の基礎概念 – 非同期が必要な理由

まず「なぜ非同期なんて面倒なものがあるのか」いきなり本音から言うと、多くの人はこう感じます。「同期処理だけで書けたらどれだけ楽か」「非同期って急に難しくなるし、できれば避けたい」実は JavaScri...
JavaScript

JavaScript | 非同期処理:非同期の基礎概念 – 実行順序の全体像

まず「実行順序の全体像」を一言でまとめるJavaScript の実行順序は、ざっくり言うとこうなります。同期処理(ふつうのコード)を上から順番に実行する同期が一段落してコールスタックが空いたら、Pro...
JavaScript

JavaScript | 非同期処理:非同期の基礎概念 – イベントループ

まずイベントループを一言でイメージするイベントループは、「JavaScript に“次にやるべき仕事”をひたすら渡し続ける司会進行役」です。JavaScript はシングルスレッドで、同時に動ける処理...
JavaScript

JavaScript | 非同期処理:非同期の基礎概念 – マイクロタスクキュー

マイクロタスクキューとは何か(まずざっくりイメージ)マイクロタスクキューは、「とても優先度の高い“あとで実行する処理”が並ぶ、特別レーンの待ち行列」 です。前回の「タスクキュー」は、setTimeou...
JavaScript

JavaScript | 非同期処理:非同期の基礎概念 – タスクキュー

まずタスクキューを一言でイメージするタスクキューは、「あとで実行する処理(コールバック)を順番に並べておく待ち行列」 です。JavaScript はシングルスレッドなので、「今」実行できるのは 1 つ...
JavaScript

JavaScript | 非同期処理:非同期の基礎概念 – Web API の役割

全体像:Web API は「JavaScript の外にいる助っ人」まず前提から整理します。ブラウザの中で JavaScript が動くとき、JavaScript エンジン(言語そのものを実行する脳み...
JavaScript

JavaScript | 非同期処理:非同期の基礎概念 – コールスタック

コールスタックとは何か(まずイメージから)コールスタックは、「今、どの関数を実行中で、その関数からどの関数を呼び出しているか」を記録している“関数呼び出しの積み重ねメモ” です。JavaScript ...
JavaScript

JavaScript | 非同期処理:非同期の基礎概念 – JavaScript がシングルスレッドである理由

まず「シングルスレッド」のイメージからJavaScript が「シングルスレッド」というのは、「同時に実行できるのは、基本的に1つのことだけ」 という意味です。console.log() を実行してい...
JavaScript

JavaScript | 非同期処理:非同期の基礎概念 – ブロッキングとは何か

「ブロッキング」とは何か(まずイメージから)「ブロッキング」は、ある処理が終わるまで、そこから先の処理が一切進めなくなる状態のことです。JavaScript だと「一番の働き手(メインスレッド)が、そ...
JavaScript

JavaScript | 非同期処理:非同期の基礎概念 – 同期処理と非同期処理の違い

同期処理と非同期処理の一番大事なイメージまず、抽象的な言葉を捨てて、イメージから掴みにいきます。同期処理は、「一列に並んで順番待ちする世界」 です。前の人の処理が終わるまで、次の人は絶対に動けません。...
JavaScript

JavaScript | ES6+ 文法:その他の ES6+ 機能 – ES 仕様の更新追跡方法

何を追えばいいのか(ゴールのイメージ)まず、「ES 仕様の更新を追う」と聞くと、毎年の ECMAScript 版(ES2020, ES2021…)その中に入る新機能(Optional chaining...
JavaScript

JavaScript | ES6+ 文法:その他の ES6+ 機能 – Intl API

Intl API とは何か(まずイメージから)Intl(Internationalization)は、「言語や国ごとのルールに合わせて、数値・通貨・日付・文字列などをキレイに表示するための標準 API...
JavaScript

JavaScript | ES6+ 文法:その他の ES6+ 機能 – Reflect

Reflect とは何か(まずイメージから)Reflect は ES6 で追加された、「オブジェクトに対する基本操作を、“関数の形”でまとめて持っている道具箱」 です。これまでバラバラに存在していたプ...
JavaScript

JavaScript | ES6+ 文法:その他の ES6+ 機能 – Proxy

Proxy とは何か(まずイメージから)Proxy は、「あるオブジェクトの前に立って、そのオブジェクトへの操作を横取り・監視・カスタマイズできる“番人”」のような仕組みです。普通はこうです。cons...
JavaScript

JavaScript | ES6+ 文法:その他の ES6+ 機能 – for…of の内部

for...of の「見た目」と「中身」は別物だと思ってみるfor...of は、表面上はとてもシンプルです。const arr = [10, 20, 30];for (const value of ...
JavaScript

JavaScript | ES6+ 文法:その他の ES6+ 機能 – Generator

Generator とは何か(まずイメージから)Generator(ジェネレータ)は、「少しずつ値を返しながら、一時停止・再開できる特別な関数」 です。普通の関数は、一気に最後まで実行されて「結果はこ...
JavaScript

JavaScript | ES6+ 文法:その他の ES6+ 機能 – Iterator

Iterator とは何か(まずイメージから)Iterator(イテレータ)は、「次の値をください」「もう終わりです」を順番に教えてくれる“値の自動販売機”のような仕組み です。自販機にコインを入れる...
JavaScript

JavaScript | ES6+ 文法:その他の ES6+ 機能 – Symbol

Symbol とは何か(まずイメージから)Symbol は、ES6 で追加された 「絶対にかぶらない“名前札”のような値」 です。string や number と同じ「プリミティブ型」の一種ですが、...
JavaScript

JavaScript | ES6+ 文法:その他の ES6+ 機能 – Nullish coalescing

Nullish coalescing とは何か(まずイメージから)Nullish coalescing(ヌリッシュ・コアレスシング)は?? という演算子で書く、「値が null または undefin...
JavaScript

JavaScript | ES6+ 文法:その他の ES6+ 機能 – Optional chaining

Optional chaining とは何か(まずイメージから)Optional chaining(オプショナルチェイニング)は?. という記号で書く、「存在しないかもしれないプロパティに安全にアクセ...
JavaScript

JavaScript | ES6+ 文法:新データ構造 – 実務利用判断

まずゴールをはっきりさせる:何を判断したいのかES6 の「新データ構造」と言われると、Map / SetWeakMap / WeakSetが一気に出てきて、「全部使えたほうがいいのかな?」と身構えがち...
スポンサーリンク