非同期通信

AIチャットはなぜリアルタイムで返るのか

「考えてから返している」のではない なぜ一文字ずつ表示されるのか 通常のWeb通信との違い 「考えてから返している」のではない AIチャットを使っていると、人間がタイピングしているように文章が少しずつ表示されます。 多くの人は「AIが考えながら打って…

ChatGPTの画面はどうやって動いているのか

ページを開き直していないのに画面が変わる理由 従来のWebサイトの動き ページを開き直していないのに画面が変わる理由 ChatGPTの画面を使っていると、不思議な感覚があります。 メニューを押しても、会話を指示しても、画面が切り替わっているのに「ページ…

「いいね」ボタンの裏側|JavaScriptは何をしている?

「いいね」は表示ではなくデータ更新です 押した瞬間、ブラウザがしていること サーバー側で起きていること 数字が増える仕組み なぜ二度押しできないのか 見た目が先に変わる理由 実務での問題点 連打問題 通信失敗 なぜページ遷移しないのか まとめ:「い…

ページ遷移しないのに画面が変わる理由(SPAの仕組み)

ページが変わっているのではなく「中身」を入れ替えています 従来のWebサイトの仕組み SPAがしていること 画面が変わる正体:DOMの書き換え URLが変わる理由 なぜアプリのように感じるのか メリットと注意点 メリット 注意点 なぜ広く使われているのか まと…

Googleマップがヌルヌル動く理由とJavaScript

地図は「1枚の画像」ではありません 地図をよく見ると分かるヒント JavaScriptがしている仕事 なぜスクロールしないのか ズームが速い理由 非同期通信の塊 なぜこんな仕組みが必要か 実はキャッシュが重要 注意点:実はかなり重い処理 まとめ:地図はWebペー…

カートに商品が入る瞬間にWebで起きていること

「カートに入れる」はページ遷移ではなく通信です まず、ボタンはリンクではない JavaScriptがしている仕事 サーバー側で起きていること カートの数字が変わる理由 なぜページ遷移しないのか よくある勘違い カートはブラウザに保存されている? 実務上の注…

無限スクロールの仕組み|JavaScriptは何をしている?

無限スクロールは「ページが続いている」のではない まず、ページを開いた直後の状態 JavaScriptが見ているもの:スクロール位置 実際に起きている通信(ここが重要) 追加された投稿はどこに行くのか なぜ「アプリっぽく」見えるのか 実務での最大の問題:…