Web・アプリ開発

🚀 はじめに スマホで音楽を聴きながらSNSを見る、パソコンで動画を再生しつつ文字を入力する。 私たちは普段、「いくつものことが同時に起きている」ように感じています。 この記事でわかること スレッドとプロセスがそもそも何なのか なぜアプリは同時に動いているように見えるのか 難しい数式や専門用語なしで、イメージとして理解できること ✅ 概要解説 スレッドとプロセスとは何か まずは超ざっくり一言で。 プロセス： 👉 アプリ1つ分の「作業場」 スレッド： 👉 その作業場の中で動く「作業員」 たとえば「ゲームアプリ」を起動すると、 ゲームアプリ全体＝1つのプロセス 音楽担当・画面更新担当・通信担当＝複数のスレッド という関係になります。 何のためにあるのか もし、1人で全部の仕事を順番にやるとしたらどうでしょう？ 画面を描く 音を鳴らす データをネットから取ってくる 全部を1つずつやると、どこかで待ち時間が発生します。 そこで登場するのがスレッドです。 複数のスレッド → 役割分担 同時に進める → 止まっているように見えない 結果として、アプリがなめらかに動きます。 プロセスがないとどうなるのか プロセスは「壁付きの作業場」です。 もし壁がなかったら… あるアプリが暴走 他のアプリのデータを壊す スマホやPC全体がフリーズ そのためOS（Windows / macOS / Android / iOSなど）は、 アプリごとにプロセスを分けて お互いに勝手に干渉できないようにしています これが、アプリが落ちても他のアプリが無事な理由です。 スレッドがないとどうなるのか スレッドが1本しかない世界では、 動画再生中 → 操作が効かない ダウンロード中 → 画面が固まる という、昔のパソコンのような体験になります。 スレッドは「待ち時間を隠してくれる存在」 通信待ちをしている間に、別の作業が進むことで 私たちは“サクサク”と感じるのです。 身近なたとえで一気に理解！ たとえ プロセス スレッド 学校 クラス 生徒 レストラン お店 店員 工場 工場建屋 作業員 プロセス＝場所・枠組み スレッド＝実際に動く人 この関係を覚えるだけでOKです。 ...

🚀 はじめに この記事でわかること WebSocket（ウェブソケット）が 何をする技術なのか なぜ「チャットが即届く」「通知がリアルタイム」なのか 普通のWeb（HTTP）と 何がどう違うのか ✅ 概要解説 WebSocketとは何か WebSocketとは、ブラウザとサーバーが“ずっとつながったまま”で会話できる通信方式です。 普通のWebページでは「必要なときだけ話す」通信が行われていますが、 WebSocketは 電話のようにつながりっぱなし なのが大きな特徴です。 何のためにあるのか WebSocketの目的は、とてもシンプルです。 情報をすぐに届けたい 毎回聞きに行かず、向こうから知らせてほしい たとえば… チャットで相手が送った瞬間にメッセージが届く 株価やゲームのスコアが自動で更新される 新着通知がリロードなしでポンっと出る これらはすべて、リアルタイム通信が必要です。 そのためにWebSocketが使われます。 WebSocketがないとどうなるのか WebSocketがなかった時代（今も一部で使われています）では、こんな方法がありました。 ページを何度も更新する 数秒ごとに「変化ある？」とサーバーに聞きに行く これは、友達の家に行って 「何か連絡来た？」 「まだ？」 「今は？」 と、何度もインターホンを押すようなものです。 結果として、 無駄な通信が増える 遅れて情報が届く サーバーも疲れる という問題がありました。 どんな場面で使えるのか WebSocketは、こんな場面で大活躍します。 💬 チャットアプリ（LINE風のWebチャット） 🔔 通知システム（新着コメント・お知らせ） 🎮 オンラインゲーム（位置情報・スコア更新） 📈 リアルタイム表示（株価、為替、アクセス数） 🧑‍🤝‍🧑 共同編集アプリ（同時に編集内容が反映） 「ページを開きっぱなしで、常に最新情報が動く」 そんなWeb体験の裏側に、WebSocketがあります。 💡 小話・豆知識・逸話 1️⃣ WebSocketは“裏口入学”から始まる？ WebSocketの通信は、最初は普通のHTTP通信から始まります。 「最初は礼儀正しく挨拶して、OKなら専用回線に切り替える」 この切り替えを ハンドシェイク（握手） と呼びます。 名前の通り「お互いに確認してから始める」仕組みです。 2️⃣ スマホの“既読がすぐ付く”理由 チャットアプリで「送信 → 数秒以内に既読が反映」されるのは、 WebSocketのような常時接続が使われているからです。 ...

🚀 はじめに この記事でわかること 「DNSキャッシュって何？」を一言で説明できるようになる 昨日まで見られたサイトが、急に開かない理由がわかる 「何か壊れた？」と焦ったときに、落ち着いて原因を想像できるようになる ✅ 概要解説 DNSキャッシュとは何か DNSキャッシュとは、 👉 「この住所（URL）は、ここですよ」という答えを“一時的にメモしておく仕組み” です。 インターネットでは、 人間：example.com のような名前を使う コンピューター：93.184.216.34 のような数字（IPアドレス） を使う この「名前 → 数字」を調べる役が DNS です。 そして DNSキャッシュは、こう考えるとイメージしやすいです。 📒 よく行くお店の住所を、毎回ネットで調べるのは面倒なので、手帳にメモしておく この「手帳のメモ」が DNSキャッシュです。 何のためにあるのか DNSキャッシュの目的は、とてもシンプルです。 ✅ 表示を速くする ✅ 無駄な問い合わせを減らす ✅ インターネット全体の混雑を防ぐ もし毎回 DNS に聞きに行ったら、 インターネットは「道を聞く人」で大渋滞してしまいます。 DNSキャッシュは、便利さとスピードを守るための“省エネ機能” です。 DNSキャッシュがないとどうなるのか もし DNSキャッシュがなかったら… サイトを開くたびに 「このURLどこ？」→「あっち」→「ありがとう」を毎回やる ページ表示がワンテンポ遅く感じる DNSサーバーが問い合わせ地獄になる つまり、 👉 今のサクサクしたネット体験は成り立ちません どんな場面で“問題”になるのか DNSキャッシュは便利ですが、唯一の弱点があります。 👉 情報が古くなることがある たとえば… サイトの引っ越し（サーバー移転）をした Cloudflare やサーバー設定を変更した ドメインの向き先を変えた でも、あなたのパソコンやスマホはこう言います。 「いや、昨日のメモでは“こっち”だったよ？」 これが、 「管理者側では直っているのに、自分だけ見られない」現象の正体です。 💡 小話・豆知識・逸話 🕒 DNSキャッシュには“賞味期限”がある DNSキャッシュは永遠に保存されるわけではありません。 「TTL（生存時間）」という有効期限があります。 ...

🚀 はじめに この記事でわかること フロントエンドとバックエンドの違いが、専門用語なしで理解できる Webサイトやアプリがどうやって動いているのかの全体像がつかめる 「自分はどっちを学ぶべき？」のヒントが得られる ✅ 概要解説 フロントエンドとは何か あなたが画面で“見て触れる部分”を作る仕事です。 例： Webサイトのデザイン ボタンを押したら動くアニメーション スマホで見たときにレイアウトが変わる仕組み 使われる技術：HTML / CSS / JavaScript など イメージとしては、 「お店の内装・メニュー・接客」 を作る人。 お客さん（ユーザー）が直接触れる部分を整えます。 バックエンドとは何か 画面の裏側でデータを処理し、アプリを動かす“頭脳”を作る仕事です。 例： ログイン情報の管理 データベースに保存・読み込み 注文処理や計算 セキュリティやアクセス制御 使われる技術：Python / PHP / Ruby / Java / Node.js / データベース など イメージとしては、 「厨房・倉庫・レジの仕組み」 を作る人。 お客さんには見えないけれど、お店が動くために絶対必要な部分です。 フロントエンドとバックエンドがないとどうなる？ フロントエンドがない → 画面が真っ白で何も操作できない バックエンドがない → ログインも注文も保存もできない“飾りだけのサイト”になる どちらか片方だけでは、 「見えるけど動かない」「動くけど見えない」 という状態になってしまいます。 どんな場面で使われる？ ブログや企業サイト フロント：ページの見た目 バック：記事データの保存・管理 ネットショップ フロント：商品一覧、カート画面 バック：在庫管理、注文処理、決済 SNS フロント：投稿画面、タイムライン バック：投稿データの保存、通知処理 Webサービスは、フロントエンドとバックエンドが協力して動く“チームプレー” で成り立っています。 💡 小話・豆知識・逸話 1) フロントエンドは“昔よりずっと難しくなった” 昔のWebは「HTMLを書くだけ」で成立していました。 しかし今は、アニメーション・アプリのような動き・スマホ対応など、 フロントエンドはミニアプリ開発レベルの高度な仕事になっています。 ...

🚀 はじめに この記事でわかること SPA（シングルページアプリ）とは何か なぜ Webアプリがヌルッと動くのか（ページ遷移が速い理由） SPAが使われる場面と、もし使わないとどうなるか 初心者でもイメージしやすい「動きの仕組み」 ✅ 概要解説 SPA（シングルページアプリ）とは何か 一言でいうと、「ページを切り替えずに中身だけ入れ替えるWebアプリ」 のことです。 普通のWebサイト（MPA：マルチページアプリ）は、 リンクをクリックするたびに ページ全体をサーバーから読み直します。 一方、SPAは… 最初に 1枚のページ（HTML）を読み込む あとは必要な部分だけ JavaScriptで書き換える ページ全体を読み直さないので ヌルッと動く という仕組みになっています。 何のためにあるのか SPAの目的は 「体験を速く・滑らかにする」 こと。 ページ全体を読み直さない 必要なデータだけサーバーから取ってくる 画面の切り替えがアプリのようにスムーズ その結果、ユーザーは アプリを触っているような快適さ を感じます。 SPAがないとどうなるのか SPAを使わない場合（普通のWebサイト）だと… ページ遷移のたびに 画面が真っ白になる 読み込みが終わるまで 待ち時間が発生 ボタンを押すたびに ページ全体がリロード つまり、動きがカクカクしやすい。 SPAはこの「毎回リロード問題」を解決するために生まれました。 どんな場面で使えるのか SPAは、動きの多いWebアプリに向いています。 SNS（Twitter / Instagram） チャットアプリ（Slack / Discord） 地図アプリ（Google Maps） 管理画面・ダッシュボード ECサイトの検索画面 逆に、ブログや企業サイトのように 「ページを読むだけ」のサイトでは、SPAである必要はありません。 💡 小話・豆知識・逸話 1) SPAが“アプリっぽい”理由 SPAは、画面の切り替えを ブラウザではなくJavaScriptが担当します。 スマホアプリと同じように、画面の中身だけ差し替えるので、 「アプリみたいに動く！」と感じるわけです。 2) 実は昔のWebは全部“MPA”だった 昔のWebは、リンクを押すたびにページ全体を読み直すのが当たり前でした。 SPAの登場で、Webが アプリのように動く時代 に進化しました。 ...

🚀 はじめに この記事でわかること クロスオリジン（CORS）とは 何者なのか なぜブラウザが「ブロックしました」と言ってくるのか よくあるエラー文の意味と、怖くない正体 ✅ 概要解説 クロスオリジン（CORS）とは何か CORS（Cross-Origin Resource Sharing） とは、 「このWebサイトは、よその住所（オリジン）と通信していいですか？」 を、ブラウザがチェックするルール のことです。 まず「オリジン」って何？ オリジンとは、次の 3点セット のことです。 通信方法（https など） ドメイン名（example.com） ポート番号（:443 など） この3つが 全部同じなら「同じオリジン」、 どれか1つでも違えば「別のオリジン（クロスオリジン）」です。 例： https://example.com https://api.example.com ← ❌ ドメインが違う http://example.com ← ❌ http / https が違う 何のためにあるのか CORSの目的は たった1つ。 ✅ 悪いサイトが、あなたの情報を勝手に盗まないようにする たとえ話：家のポスト あなたの家（ブラウザ）に、 親（同じオリジン） 知らない人（別オリジン） が来たとします。 ✅ 親なら普通に話す ❌ 知らない人なら「誰？」と確認する CORSは、この 「確認作業」 を自動でやっています。 CORSがないとどうなるのか もしCORSがなかったら… 悪意あるサイトが 銀行サイトの情報 SNSのログイン状態 個人データ を 勝手に読み取れる 「別のタブで開いた怪しいサイトから、情報が盗まれる」 👉 インターネットが無法地帯になります。 ...

🚀 はじめに この記事でわかること Webサイトを開いたとき、裏側で起きている一連の流れ 「リクエスト」「レスポンス」という言葉の正体 Webアプリがどうやって画面を表示しているのかのイメージ ✅ 概要解説 Webアプリの“リクエストの旅”とは？ Webサイトを見るたびに発生する、 「お願い（リクエスト）」→「返事（レスポンス）」の往復旅行のことです。 たとえば、あなたがブラウザで 「https://example.com」と入力してEnterを押した瞬間。 実は、そのとき 小さな旅 が始まっています。 何のためにあるのか？ Webアプリの世界では、勝手に情報は届きません。 利用者が →「このページを見せてください！」とお願いする サーバーが →「はい、どうぞ！」と返事を返す このルールがあるからこそ、 世界中の人が 同時に 同じしくみで Webを使えるようになっています。 もし“リクエスト”がなかったら？ ブラウザは 何を表示したらいいかわからない サーバーも 何を返せばいいかわからない Webは 沈黙したまま つまり、 Webの会話は「リクエスト」がなければ始まらないのです。 “リクエストの旅”をざっくり全体像で見る まずは細かい用語を忘れて、流れだけ見てみましょう。 あなた（ブラウザ）がURLを入力 「このページください！」という手紙（リクエスト） を送る インターネットの道を通って Webサーバーに到着 サーバーが「OK！」と返事（レスポンス） を作る 返事が同じ道を戻ってくる ブラウザが画面を組み立てて表示 これが、1回のページ表示で起きている基本の旅です。 もう少したとえ話で理解する 📨 郵便で考えてみる あなた：手紙を出す人 ブラウザ：ポストに入れる係 インターネット：郵便道路 サーバー：手紙を受け取る会社 あなたが 「この商品カタログを送ってください」 と手紙（リクエスト）を出すと、 サーバーが 「了解です。こちらがカタログです」 と封筒（レスポンス）を返してくれる。 Webも、基本はこれと同じです。 Webアプリになると何が変わる？ ただのWebサイト（静的サイト）なら、 あらかじめ用意されたページを返すだけ ですが、Webアプリでは少し進化します。 ログイン情報をチェックする あなた専用のデータを取り出す 状況に合わせて内容を組み立てる それでも基本は同じ。 ...

🚀 はじめに この記事でわかること ChromeなどのWebブラウザの中で何が起きているか ページが表示されるまでの流れ（レンダリング） JavaScript・HTML・CSSがどんな役割をしているか 「ブラウザって結局なに？」が具体的なイメージで理解できる ✅ 概要解説 ブラウザとは何か？ 一言でいうと、インターネットの情報を“見える形”に変えてくれるアプリです。 Chrome、Safari、Edge、Firefoxなどが有名ですね。 ブラウザは、Webサイトのデータ（HTML・CSS・JavaScript）を受け取り、 人間が読めるページに変換する“翻訳者”のような存在です。 何のためにあるのか？ ブラウザは、次のような役割を持っています。 Webページを表示する（レンダリング） 画像や動画を読み込む JavaScriptを実行して動きをつける 安全に通信する（HTTPS） タブごとに処理を分けて安定させる もしブラウザがなかったら、私たちはWebサイトのデータを ただの文字列の塊としてしか見られません。 ブラウザがないとどうなる？ Webページが文字の羅列にしか見えない ボタンやフォームが動かない 画像や動画が表示されない セキュリティが弱く、危険な通信になりやすい つまり、ブラウザはインターネットを使うための必須アプリなんです。 Chromeの中で何が起きている？（ざっくり流れ） Webページを開くと、Chromeの中では次のような処理が行われます。 URLを入力 → 「どこのサーバーにアクセスする？」をDNSで調べる サーバーからHTMLを受け取る → ページの“設計図”が届く HTMLを読みながらCSSを読み込む → 見た目の情報（色・配置・フォントなど）を取得 JavaScriptを実行 → ボタンの動きやアニメーションなどを処理 画面に描画（レンダリング） → 設計図＋見た目＋動きを組み合わせて表示 たとえるなら、 HTML＝骨組み、CSS＝服や装飾、JavaScript＝動きや仕掛け これらをブラウザが組み立てて、私たちの画面に表示してくれます。 💡 小話・豆知識・逸話 1) Chromeは「タブごとに別の部屋」で動いている Chromeはタブごとにプロセス（部屋）を分ける設計です。 これにより、1つのタブが固まっても他のタブに影響しにくい仕組みになっています。 2) ブラウザは“絵を描く職人”でもある ページを表示する「レンダリング」は、 画家がキャンバスに絵を描くような作業です。 しかも、スクロールするたびに高速で描き直しているという職人芸。 3) JavaScriptエンジン「V8」は超高速 Chromeの中には「V8」というJavaScriptエンジンが入っています。 これは自動車のV8エンジンのように速いという意味で名付けられました。 4) ブラウザは“安全の番人”でもある 怪しいサイトにアクセスすると警告が出ますよね。 これはブラウザが危険な通信や証明書の異常を検知してくれているからです。 5) ブラウザは毎日アップデートされている Chromeは数週間ごとに新バージョンが出ています。 セキュリティ強化や高速化のため、裏側では常に改善が続いています。 ...

🚀 はじめに この記事でわかること 「キャッシュって何？」がやさしく理解できる キャッシュがあるとなぜWebが速くなるのか ブラウザ・サーバー・CDNなど、どこにキャッシュがあるのかのイメージ キャッシュがないとどうなるのか ✅ 概要解説 キャッシュとは何か？ 一言でいうと、「よく使うデータを手元に置いておく仕組み」 です。 たとえば、毎朝読む教科書。 毎回学校の倉庫まで取りに行くより、自分の机に置いておいたほうが速いですよね。 Webの世界でも同じで、 画像 CSS（デザインのルール） JavaScript（動きをつける仕組み） など、よく使うデータを近くに置いておくことで、読み込みが爆速になります。 何のためにあるのか？ キャッシュの目的はシンプルで、 速くする（表示速度アップ） サーバーの負荷を減らす（混雑に強くなる） この2つです。 特にスマホでサイトを見るとき、 キャッシュがあるだけで体感速度が大きく変わることがあります。 キャッシュがないとどうなる？ キャッシュがないと、毎回こんな流れになります： ブラウザ「画像ください！」 サーバー「はいどうぞ！」 ブラウザ「CSSください！」 サーバー「はいどうぞ！」 ブラウザ「JavaScriptください！」 サーバー「はいどうぞ！」 …これを毎回やるので、 距離が遠いほど遅くなるし、 アクセスが増えるとサーバーが混雑します。 キャッシュがあると、 「昨日もらった画像、まだ使えるよね？」 「CSSは変わってないから保存しておこう」 と、手元のコピーを使うので速いのです。 どんな場面で使われている？ キャッシュはWebのあらゆる場所で使われています。 場所 役割 例 ブラウザ（Chrome / Safari） 手元に保存して高速化 画像・CSS・JS CDN（Cloudflareなど） 世界中の近くの拠点にコピー 画像・HTML サーバー側キャッシュ 計算結果を保存 WordPressのページ生成結果 OS / CPU よく使うデータを高速メモリに保存 CPUキャッシュ 特にWebでは、 ブラウザキャッシュとCDNキャッシュが大活躍します。 💡 小話・豆知識・逸話 1) キャッシュは「ズル」ではなく「効率化」 キャッシュという言葉を聞くと、 「なんか裏技っぽい…」と思う人もいますが、 実はインターネットの世界では当たり前の仕組みです。 ...

🚀 はじめに この記事でわかること Webサイトがあなたのログイン状態を覚えてくれる仕組み Cookie（クッキー）とセッションの違い どんな場面で使われているのか、初心者でもイメージできるように解説 ✅ 概要解説 Cookie（クッキー）とは何か あなたのブラウザに置かれる“小さなメモ” のようなものです。 Webサイトは、あなたが誰なのかを毎回覚えていません。 そこで、サイト側は「この人は○○さんだよ」というメモ（Cookie） を、あなたのブラウザに渡します。 ブラウザに保存される 小さな文字データ サイトにアクセスするたび自動で送られる セッションとは何か サーバー側に置かれる“あなた専用のロッカー” のようなものです。 ログインした瞬間、サーバーはあなた専用の「ロッカー（セッション）」を作り、 そこに「ユーザーID」「ログイン状態」などをしまっておきます。 サーバー側に保存される ログイン中の情報を管理する セッションIDという“鍵”で識別する Cookie とセッションの関係 実はこの2つはセットで使われることが多いです。 ログインすると、サーバーがセッション（ロッカー） を作る そのロッカーの“鍵”である セッションID を Cookie に入れてブラウザへ渡す 次回アクセス時、ブラウザは Cookie を送る サーバーは「この鍵は○○さんのロッカーだ」と判断し、ログイン状態を復元する つまり、Cookieは“鍵”、セッションは“ロッカー” という関係です。 Cookieやセッションがないとどうなる？ 毎回ログインが必要 カートの中身が毎回リセット 設定（テーマ・言語）が保存されない サイト側が「誰が誰か」判断できない Webは本来「1回1回の通信が独立」しているため、 “前回のあなた”を覚える仕組みが必要なのです。 どんな場面で使われる？ ログイン状態の維持（SNS、ECサイト、会員サイト） ショッピングカートの中身の保持 テーマ設定・言語設定の保存 アクセス解析（Google Analytics など） 広告の最適化（リターゲティング広告） 💡 小話・豆知識・逸話 🍪 Cookie の名前の由来は「フォーチュンクッキー」 実は Cookie の名前は、アメリカのフォーチュンクッキー（おみくじ入りクッキー） が由来と言われています。 「小さなメモが入っている」というイメージがぴったりだったためです。 🔑 セッションIDは“絶対に漏れてはいけない鍵” セッションIDは、あなたのロッカーを開ける鍵そのもの。 もし悪意ある人に盗まれると、あなたになりすましてログインできてしまいます。 ...