メインコンテンツへスキップ
見出し画像

なぜ画面が真っ白にならないの?「いいね」を押しても再読み込みが起きない驚きの仕掛け

    おはこんにちは!なんでも紹介屋さんです。

    【今日のおすすめ】

    *この前母の誕生日に送りました作るまでの時間も1時間くらいで作れて喜んでくれました!

    本編です

    SNSで「いいね」ボタンを押したときや、Googleマップをドラッグして動かしたとき、画面全体が真っ白にならず、その部分だけがスッと切り替わるのが当たり前になっていますよね。

    でも昔のWebは、ボタンを1回押すごとに画面全体が真っ白になり、ページ丸ごと読み込み直すのが普通でした。

    なぜ今のWebページは、画面をリロードせずにサクサク動くのでしょうか。

    その正体は、「Ajax(エイジャックス)」と呼ばれる通信技術です。

    仕組みをたとえるなら、「レストランで追加注文をするたびに、客全員が一度お店の外に出されて席に着き直す(昔のWeb)」のをやめ、「テーブル専属のウェイター(Ajax)が、客の会話を止めずにこっそり裏の厨房と小皿のやり取りをしてくれる」ようなものです。

    昔のWebは、小さなボタンを1つ押しただけでも、ページ全体の文章や画像データを遠くのサーバーから丸ごと取り寄せ直す必要がありました。そのため、通信が終わるまで画面全体が固まって真っ白になっていたのです。

    しかしAjaxが登場したことで、ブラウザは「画面全体」ではなく、「変更したい一部分のデータだけ」を裏側でこっそり通信できるようになりました。

    「いいねが押されたよ」という数文字のデータだけを裏でサーバーに送り、「いいね数を+1にする」という結果だけを受け取ってその場で数字を書き換えるため、画面の他の部分はまったく止まらず、スムーズに操作を続けられます。

    普段私たちがストレスなくWebをスイスイ使えているのは、裏側で優秀な専属ウェイターが休まず駆け回ってくれているおかげです。

    次にSNSで「いいね」を押したときは、画面を止めずに裏で走る小さなメッセンジャーの働きを感じてみてくださいね。

    🏷️ 関連タグ

    #あなたを賢くするWeb知識 #Web知識 #IT雑学 #豆知識 #教養 #Ajax #JavaScript #Web開発 #プログラミング #フロントエンド #インターネット #ブラウザ #UIデザイン #Webデザイン #テクノロジー #仕組み #日常の疑問 #ITリテラシー #仕事術 #情報収集 #学習 #学び #ビジネススキル #スマートライフ #IT初心者 #note初心者 #毎日note #毎日更新 #コラム #エッセイ #なんでも紹介屋さん #11gor #ブログ #雑記 #スキしてみて #あじっす


    この記事が参加している募集

    あなたへのおすすめ