Java
Java | 基礎文法：オーバーロード
JavaScript
JavaScript JavaScript | Web API：通信・ネットワーク系 － WebSocket の概要
WebSocket は「つなぎっぱなしでしゃべり続けられる通信」まずイメージからいきます。ふつうの HTTP（fetch など）は「用があるときだけノックして、用が済んだらすぐ帰る」通信です。リクエス...
JavaScript JavaScript | Web API：通信・ネットワーク系 － オフライン対応の基本
まず「オフライン対応って何を指しているのか」をはっきりさせるオフライン対応と聞くと、「ネットが切れても全部普通に動く魔法」みたいに思いがちですが、現実はもう少し地に足がついた話です。本質は、「ネットワ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Service Worker の概要
Service Worker は「ブラウザの中に住む、裏方の小さなサーバー」まずイメージからいきます。Service Worker は、「ブラウザの中で動く、あなたのサイト専用の“裏方サーバー”」 で...
JavaScript JavaScript | Web API：通信・ネットワーク系 － キャッシュ制御
「キャッシュ制御」は“いつまで古いデータを使っていいか”を決めるルールまずざっくりイメージからいきます。キャッシュは、「一度取ってきたデータを、次回以降は早く返すために手元に置いておく仕組み」 です。...
JavaScript JavaScript | Web API：通信・ネットワーク系 － 認証ヘッダ
認証ヘッダは「あなたが誰なのか」をサーバーに伝えるための“身分証”まずイメージからいきます。認証ヘッダ（Authentication Header）は、「このリクエストは誰として送っているのか」 をサ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Cookie の扱い
Cookie は「ブラウザが自動で持ち運んでくれる小さなメモ」まずイメージからいきます。Cookie は、「ブラウザがサーバーとの間で自動的に持ち運んでくれる小さなメモ」 です。サーバーが「このユーザ...
JavaScript JavaScript | Web API：通信・ネットワーク系 － CORS の基本
まず「なぜ CORS なんてものがあるのか」からCORS を理解する一番の近道は、「ブラウザは、もともと“よそのサイトに勝手にリクエストさせない”ように作られている」という前提をちゃんと掴むことです。...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Headers
ヘッダーは「一緒にくっついて飛んでいくメモ書き」まずイメージからいきます。HTTP の世界では、リクエストやレスポンスは「封筒付きの手紙」みたいなものです。本文（ボディ）実際の中身。JSON や HT...
JavaScript JavaScript | Web API：通信・ネットワーク系 － Request / Response オブジェクト
「Request / Response」は fetch がやり取りする“手紙の入れ物”まず大きなイメージからいきます。fetch は「サーバーと会話する窓口」でしたよね。その会話の中で実際に行き来して...
JavaScript JavaScript | Web API：通信・ネットワーク系 － fetch API
fetch は「ブラウザからサーバーにお願いしに行く関数」まずイメージからいきます。fetch は、「ブラウザからサーバーに“ちょっとデータください”とか“これ送ります”とお願いしに行くための関数」 ...
JavaScript JavaScript | Web API：ストレージ系 API － IndexedDB の概要
IndexedDB は「ブラウザ内のちゃんとしたデータベース」localStorage / sessionStorage は「小さなメモ帳」でした。IndexedDB は一段レベルが違います。イメージ...
JavaScript JavaScript | Web API：ストレージ系 API － セキュリティの注意点
「ストレージは安全な金庫」ではない、という前提から始めようlocalStorage / sessionStorage は便利ですが、「ここに入れておけば安全」な場所ではありません。ブラウザの中にあると...
JavaScript JavaScript | Web API：ストレージ系 API － ストレージイベント
ストレージイベントは「別タブでの変更を教えてくれる仕組み」まず一言でいうと、ストレージイベント（storage イベント）は「他のタブで localStorage が書き換えられたことを教えてくれる通...
JavaScript JavaScript | Web API：ストレージ系 API － 同期 API の特性
「同期 API」ってそもそも何者かまず言葉の整理からいきます。同期 API（synchronous API）というのは、呼び出した瞬間に処理が終わるまで、そのスレッドを止めてしまうタイプの API の...
JavaScript JavaScript | Web API：ストレージ系 API － 容量制限
ストレージの「容量制限」をちゃんと意識すると設計が変わるlocalStorage / sessionStorage は便利ですが、「無限に保存できる魔法の箱」ではありません。どちらもブラウザごとに 容...
JavaScript JavaScript | Web API：ストレージ系 API － JSON との組み合わせ
なぜ「ストレージ × JSON」がほぼセットなのかlocalStorage / sessionStorage は、とてもシンプルなストレージです。でも制約が一つあります——「保存できるのは文字列だけ」...
JavaScript JavaScript | Web API：ストレージ系 API － removeItem / clear
removeItem / clear は「部分的に消す」と「全部消す」の違いストレージ系 API（localStorage / sessionStorage）には、データを「書く」「読む」だけでなく、...
JavaScript JavaScript | Web API：ストレージ系 API － setItem / getItem
setItem / getItem は「ブラウザのメモ帳に書く・読む」操作まずざっくりイメージからいきます。setItem と getItem は、ブラウザの中にある小さなメモ帳に「書く」「読む」ため...
JavaScript JavaScript | Web API：ストレージ系 API － SessionStorage の基本
SessionStorage は「タブごとの一時メモ帳」まずイメージからいきます。SessionStorage は 「ブラウザのタブごとに用意される、一時的なメモ帳」 です。LocalStorage ...
JavaScript JavaScript | Web API：ストレージ系 API － LocalStorage の基本
LocalStorage は「ブラウザにメモ帳を置く」イメージまずざっくりイメージから。LocalStorage は、「ブラウザの中にある、キーと値を保存できる小さなメモ帳」 です。ページを閉じても、...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － プロとしての非同期設計
「プロとしての非同期設計」って何が違うのか非同期処理を「書ける」ようになるのは、正直そんなに難しくありません。async/await を覚えて、fetch を呼んで、try/catch を付ければ、と...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 非同期バグの再現
なぜ「非同期バグの再現」がこんなに難しいのか非同期バグって、ほんとイヤらしいですよね。さっきまで出ていたのに、もう一回やると出ない。本番では起きるのに、ローカルでは起きない。理由はシンプルで、非同期バ...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 例外仕様の文書化
なぜ「例外仕様の文書化」がそんなに大事なのか非同期処理は「うまくいくとき」だけ見ていると、わりと簡単そうに見えます。await fetch(...) して、res.json() して、画面に出す——こ...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － モック化戦略
「モック化戦略」ってそもそも何の話？非同期処理をテストしようとすると、必ずぶつかる壁があります。それが「外部とのやり取り」です。サーバーへのリクエストデータベースタイマー（setTimeout）ブラウ...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － テストしやすい非同期
なぜ「テストしやすい非同期」が大事なのか非同期処理って、バグが出ても再現しづらいし、「たまたま動いた」状態になりがちです。だからこそ、「テストしやすい形で非同期コードを書く」という発想がめちゃくちゃ重...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 同期 API との境界
なぜ「同期 API との境界」を意識しないといけないのか非同期処理を学び始めると、「どこまでを同期で書いて、どこからを非同期にするのか」がだんだん分からなくなってきます。全部 async にしてしまう...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 非同期 API 設計
「非同期 API 設計」って何を考えること？まず前提から整理します。ここでいう「非同期 API」は、サーバーの REST API というより、「あなたが JavaScript で提供する非同期関数の“...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 非同期関数の命名
なぜ「非同期関数の命名」がそんなに大事なのか非同期処理って、それだけで頭を使います。そこに「名前がふわっとしている関数」が混ざると、一気に読めなくなります。doSomething(), handle(...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 責務分離
「責務分離」を非同期コードで考える意味非同期処理って、それだけで頭を使いますよね。そこに「UI」「エラー処理」「キャッシュ」「ローディング表示」などを全部一緒に書き始めると、一瞬でカオスになります。だ...
JavaScript JavaScript | 非同期処理：設計・理解の深化 － 非同期コードの可読性
なぜ「非同期コードの可読性」がそんなに大事なのか非同期処理って、動かすだけなら意外とすぐ書けます。async 付けて、await fetch(...) して、console.log して終わり——みた...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 非同期設計レビュー
「非同期設計レビュー」って何をする時間か非同期処理のコードは、とりあえず動かすだけなら意外と簡単です。async/await を付けて、fetch を呼んで、console.log して終わり。でも「...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － UI ブロック回避
なぜ「UI ブロック回避」がそんなに大事なのかJavaScript は基本「1本のメインスレッド」で動いています。この1本の線の上で、描画・クリック処理・スクロール・あなたの書いた処理が、全部順番待ち...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 長時間処理の分割
なぜ「長時間処理の分割」が必要になるのかJavaScript は基本的に「シングルスレッド」で動きます。つまり、1本の道に、処理が一列に並んで流れているイメージです。その道の上で、重い処理（ループ・計...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 非同期処理の計測
なぜ「非同期処理の計測」が大事なのかパフォーマンス最適化って、つい「こうした方が速そう」と感覚でやりがちです。でも、本当にやるべきことはシンプルで、たった一つです。「遅いところをちゃんと測って、事実ベ...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － レイテンシ考慮
レイテンシってそもそも何？まず言葉からいきます。レイテンシ（latency）は「お願いしてから、最初の反応が返ってくるまでの時間」 です。ユーザーから見ると、ボタンを押してから画面が変わるまで検索ワー...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － ネットワーク最適化
ネットワーク最適化って何をすること？非同期処理のパフォーマンス最適化の中で、ネットワーク最適化は「サーバーとの通信をできるだけ速く・少なく・無駄なくする」ことです。JavaScript の世界だと、だ...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － バッチ処理
「バッチ処理」は“まとめてやるから速くて優しい”という発想バッチ処理は、「細かい処理を1個ずつやるのではなく、ある程度まとめて一気に処理する」という考え方です。非同期処理のパフォーマンス最適化では、・...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － Promise キャッシュ
Promise キャッシュって何者？Promise キャッシュは、「同じ非同期処理を何度も実行せず、“進行中 or 結果”を使い回すテクニック」 です。特に、「同じ API を短時間に何回も叩いてしま...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 不要 await の削除
「不要な await」を消すと何が嬉しいのかawait は便利ですが、「なくてもいい場所に書いてしまうと、わざわざ処理を遅くしている」ことがあります。パフォーマンス最適化でよく効くのが、この「不要な ...
JavaScript JavaScript | 非同期処理：パフォーマンス最適化 － 並列化の判断
「並列化の判断」は“どこを同時に走らせていいか”を見極めること非同期処理のパフォーマンス最適化で一番効くのが、「待ち時間の長い処理を、できるだけ同時に走らせる」ことです。でも、何でもかんでも並列にすれ...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 排他制御の考え方
排他制御を一言でいうと排他制御（はいたせいぎょ）は、「同時に走ると困る処理を、“必ず1つずつしか動かさないようにする考え方” です。非同期処理が増えてくると、「同じデータを同時に書き換える」「同じ処理...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 競合状態（Race Condition）
競合状態（Race Condition）を一言でいうと競合状態（Race Condition）は、「どっちの非同期処理が先に終わるかによって、結果が変わってしまう危険な状態」 です。コード上は「こう動...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 非同期状態管理
「非同期状態管理」を一言でいうと非同期状態管理は、「今この非同期処理が、どの状態にいるのかをコードと UI で一貫して扱うこと」 です。例えば、API 呼び出しひとつ取っても、状態はざっくりこう変わり...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － WebSocket との比較
WebSocket とポーリングの違いを一言でまとめるとポーリングは 「クライアントが定期的にサーバーへ様子を見に行く」 方式。WebSocket は 「サーバーとクライアントが常時つながり、サーバー...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － ポーリング
ポーリングを一言でいうとポーリング（polling）は、「サーバー側の状態が変わったかどうかを、クライアント側から定期的に“様子見”しに行く仕組み」です。サーバーから「変わったよ！」と通知してくれるの...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － スロットリング
スロットリングを一言でいうとスロットリング（throttle）は、「どれだけ連続でイベントが発生しても、“一定間隔ごとにしか処理を実行させない”テクニック です。スクロール、マウス移動、リサイズなどは...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － デバウンス
デバウンスを一言でいうとデバウンスは、「連続して何度も呼ばれる処理を、“最後の1回だけ”にまとめるテクニック」 です。ユーザーがキーボードを連打したり、入力ボックスに高速で文字を打ち込んだりすると、イ...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － キャンセル処理（AbortController）
キャンセル処理（AbortController）を一言でいうとAbortController は、「一度投げた非同期処理（特に fetch）を、あとから“やっぱりやめる”と止めるための仕組み」 です。...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － 多重送信防止
多重送信防止を一言でいうと多重送信防止は、「ユーザーが同じ操作を連打しても、サーバーには“1 回分だけ”しか飛ばさないようにする仕組み」 です。非同期処理（特にフォーム送信やボタン押下）では、ユーザー...
JavaScript JavaScript | 非同期処理：実務での非同期制御 － ローディング表示
ローディング表示を一言でいうとローディング表示は、「今、アプリはちゃんと動いているよ。止まっているんじゃなくて“待っているだけ”だよ」とユーザーに伝えるためのサインです。非同期処理（fetch / A...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 － 障害時の復旧設計
「障害時の復旧設計」を一言でいうと障害時の復旧設計は、「エラーが起きた“あと”に、アプリをどう立て直すかをあらかじめ決めておくこと」 です。エラー処理というと、つい「catch してログ出して終わり」...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – エラー再送出
「エラー再送出」を一言でいうとエラー再送出（rethrow）は、「一度 catch で受け取ったエラーを、“ここでは処理しきらないから、上のレイヤーにもう一回投げ直す” 行為 です。非同期処理では特に...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – ログ出力設計
ログ出力設計を一言でいうとログ出力設計は、「エラーや重要な出来事を、あとから“意味を持って”追いかけられるように記録する設計」 のことです。ただ console.log(err) を散らばせるのではな...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – ユーザー向けエラー表示
ユーザー向けエラー表示を一言でいうとユーザー向けエラー表示は、「技術的に何が壊れたか」ではなく、「ユーザーが次にどうすればいいか」を伝えるためのメッセージ です。非同期処理（fetch / API 通...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – エラー情報の整形
「エラー情報の整形」を一言でいうと「エラー情報の整形」は、「バラバラで生々しいエラー情報を、“人間やアプリが扱いやすい形” に整理し直すこと」 です。生のエラーは、たいていこうです。・メッセージが英語...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – カスタムエラー
カスタムエラーを一言でいうとカスタムエラーは、「自分のアプリ専用の“名前付きエラー型”を作って、エラーの意味をはっきりさせる仕組み」 です。ただの Error だけだと、「何が原因で」「どのレイヤーで...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – catch の共通化
「catch の共通化」を一言でいうと「catch の共通化」は、「あちこちにバラバラに書いているエラー処理を、意味のある“ひとつの場所”にまとめること」 です。同じような catch (err) {...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – Promise 内 throw
「Promise 内 throw」を一言でいうとPromise の中で throw する、というのは「その Promise を reject（失敗状態）にするための、ちょっと短い書き方」 です。new...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – try / catch の範囲
「try / catch の範囲」を一言でいうとtry / catch の「範囲」は、「どこで起きたエラーまで、この try / catch で捕まえられるのか」 という話です。ここを勘違いすると、「...
JavaScript JavaScript | 非同期処理：エラー処理・例外設計 – 同期例外と非同期例外
同期例外と非同期例外を一言でいうと同期例外と非同期例外の違いは、「エラーが いつ 投げられて、どこで 捕まえられるか」の違いです。同期例外は、「その関数を呼んだ“その瞬間”に起きるエラー」。非同期例外...