JavaScriptは最初から体系的に学ぶ必要はない 10行で分かること 多くの入門書が難しく感じる理由 この10行で理解できるWebの本質 イベント DOM 入出力 ここから先に進むとき よくある失敗 10行学習のメリット 注意点 結局どうすればいいか JavaScriptは最初…

JavaScriptを学ぶと「作れる人」ではなく「判断できる人」になる なぜJavaScriptなのか 知識がある人とない人の差 例：ボタンが押せない 例：画面が更新されない 例：表示が崩れる AI時代に影響が大きくなる理由 学ぶと何が変わるのか どこまで学べばよいか …

ノーコードは「コードが不要」ではない ノーコードツールの正体 なぜJavaScriptが中心になるのか よくあるつまずき 例：条件分岐 例：外部連携 例：UI制御 実際に裏で起きていること ノーコードの限界はどこか JavaScriptを少し理解すると起きる変化 注意点 …

AI時代に一番価値が上がるのはAIの知識ではない AIは「プログラム」ではなく「部品」 具体例：AIチャットを作る場合 なぜPythonではなくJavaScriptなのか JavaScriptが必要になる具体的な場面 入力補助 ストリーミング表示 非同期通信 エラー制御 AIの理解だ…

AIはブラウザでは動いていない ブラウザの役割は「計算」ではなく「表示」 AIが必要とする計算量は桁違い 実際の流れ：AIチャットで起きていること JavaScriptはAIを動かしているのか なぜ誤解が生まれるのか 例：Googleドキュメントの場合 例外はあるのか …

文字が少しずつ表示されるのは「AIが遅い」からではない ストリーミング表示の正体は“通信の方式” 普通のWebページの読み込み AIチャットはここが違う なぜ文字が少しずつ出るのか JavaScriptが画面を更新している 技術的には何が使われているのか なぜこの…

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

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

あのチェックボックスは質問ではない CAPTCHAの本来の目的 チェックを押した瞬間に起きていること なぜ画像選択が出るのか 画像問題の意味 なぜ通らないことがあるのか CAPTCHAとCookie よくある誤解 チェックしたから安全？ 注意点：自動化との戦いは続いて…

シークレットモードは「匿名化」ではない 何が消えて、何が消えないのか 消えるもの 消えないもの サイト側からはどう見えるか シークレットモードは「匿名化」ではない ブラウザのシークレットモード（プライベートブラウズ）を使うと、「検索履歴が残らな…

危険なのは「場所」ではなく通信の構造 家のWi-Fiとの違い HTTP通信が危険になる理由 危険なのは「場所」ではなく通信の構造 カフェや空港の無料Wi-Fiについて、「公共Wi-Fiは危険」とよく言われます。 多くの人は「誰かがハッキングしてくる」と漠然と想像…

自動ログアウトは不具合ではなく「設計」 ログイン状態の正体を思い出す 自動ログアウトは不具合ではなく「設計」 ネットバンキングや管理画面を操作していると、しばらく放置しただけで突然ログアウトされることがあります。 書きかけのフォームが消えてし…

なぜ毎回パスワードを入れなくていいのか ログイン直後に発行されるもの セッションという「通行証」 なぜ毎回パスワードを入れなくていいのか 一度ログインしたWebサービスを閉じても、次に開いたときにはすでにログイン済みになっていることがあります。 …

Cookie同意バナーは「親切な確認」ではない Cookieとは何か Cookieは小さなメモ帳 Cookie同意バナーは「親切な確認」ではない 最近ほとんどのサイトで、ページを開いた瞬間に「Cookieを使用しています。同意しますか？」というバナーが表示されます。多くの…

パスワード入力欄は「送信」ではなく「確認」に近い 入力した瞬間にブラウザで起きていること 「●●●●」は見えないだけで消えていない パスワード入力欄は「送信」ではなく「確認」に近い Webサイトのログイン画面でパスワードを入力すると、多くの人は「入力…

「このサイトは安全ではありません」と出る本当の理由 HTTPSとHTTPの違い 通信が丸見えになるHTTP HTTPSは暗号化通信 「このサイトは安全ではありません」と出る本当の理由 ブラウザに「このサイトは安全ではありません」と表示されたとき、多くの人は「この…

APIは「機能」ではなく「窓口」である 銀行の窓口で考える Webでの実際の動き なぜAPIが必要なのか APIがあると何が変わるのか 注意点：速いとは限らない よくある誤解 API＝特別な技術 APIは開発者だけのもの まとめ APIは「機能」ではなく「窓口」である A…

バックエンドは「見えない場所」ではなく「判断する場所」 どこに存在しているのか 具体的に何をしているのか データの管理 計算と判定 応答の生成 なぜ必要なのか フロントエンドとの違い 注意点：遅く感じる原因にもなる よくある誤解 バックエンドはデー…

フロントエンドは「見た目担当」ではない どこに存在しているのか 何をしているのか 画面を作る 操作を受け取る サーバーと連絡する なぜ分かれているのか よくある誤解 フロントエンド＝デザイン 簡単な領域 注意点：フロントエンドだけでは完結しない まと…

インターネットに「ページ」は存在しない 実際に起きていること ページはブラウザが作っている なぜこの仕組みなのか 「通信」が本体の世界 これを理解すると見えること なぜ更新すると内容が変わるのか なぜエラーが出るのか なぜ部分更新ができるのか 注意…

ブラウザは「サイトを表示するソフト」ではない OSとは何をしているものか ブラウザがやっていること 画面を作る プログラムを実行する 通信を管理する 入力を扱う なぜOSに近づいたのか 安全性の仕組み なぜ重要なのか 注意点：万能ではない まとめ ブラウ…

SPAは「新しいページ」を開いていない 普通のWebサイトの動き SPAの動き なぜアプリのように見えるのか SPAが使われる場面 メリット 注意点：最初はむしろ遅い よくある誤解 SPA＝最新で優れた方式 SPA＝表示が速い まとめ：SPAの本質 SPAは「新しいページ」…

最近のWebは「ページ」を開いていない 昔のWeb：文書を取得する仕組み 現在のWeb：必要なデータだけ取得する 何が起きているのか（内部の流れ） なぜこの方式に変わったのか スマホの影響 メリット 注意点：万能ではない 何が変わったのかの本質 最近のWebは…

昔のWebが遅かったのは「技術が未熟」だからではない 最大の原因：通信回線が圧倒的に遅かった 常時接続ではなかった 画像1枚で数十秒 HTMLの仕組みも今とは違った ページは一枚の文書だった サーバー側も遅かった ブラウザの能力が低かった ページ設計も遅…

PCでは正常、スマホだけ崩れるのは「画面サイズ」の問題ではない スマホは「PCの小型版」ではない viewport設定がないと何が起きるか レイアウト崩れの本当の原因は「幅の計算」 画像がはみ出す理由 スマホ特有の問題：タッチ操作 フォントと行間が崩れる理…

「更新したのに変わらない」はキャッシュとJavaScriptが原因 キャッシュとは何か なぜHTMLは更新されるのに壊れるのか JavaScriptは「操作の手順書」 スマホだけ壊れる理由 スーパーリロードで直る理由 なぜ更新のたびに起きるのか 実際の対策：ファイル名を…

Cookieは「あなたの情報」ではなく「サイトのメモ」 そもそもWebページは記憶ができない Cookieは「番号付きの付箋」 なぜログイン状態が維持されるのか ショッピングカートが残る理由 トラッキングに使われる理由 Cookieを削除すると何が起きるか 危険なも…

「さっき見た商品の広告」が出るのは偶然ではない 広告は人ではなく「ブラウザ」を識別している Cookieが「覚えている」正体 なぜどのサイトでも同じ広告が出るのか JavaScriptが裏で通信している 「会話を聞かれている」ように感じる理由 広告が止まらない…

アナリティクスは「アクセス」を数えていない そもそもWebサーバーは誰が来たか分からない JavaScriptが「閲覧した」と報告する なぜリロードでPVが増えるのか 「ユーザー数」はどうやって出しているのか セッションとは何か なぜ広告ブロッカーで数値が減る…

ページを更新していないのに通知が来るのは「サイトが動いているから」 JavaScriptは「ページの中」だけで動くものではない Service Workerとは何か プッシュ通知はどうやって届くのか なぜアプリを入れていないのに通知が来るのか 実際に起きがちな誤解 通…