はじめに
「Cloudflare大障害でインターネットの一部が停止」というニュースを聞いても、Cloudflareとは何か、何が起こっているのか、正直よくわかりませんでした。
今回、Project Bobで来訪者管理アプリを3分で作成したことで、Web開発の基礎とCDNの仕組みが理解でき、Cloudflare大障害で何が起こっていたかの解像度が上がりました。
成果物・進め方
成果物
来訪者管理システム（3ファイル構成）
visitor-management/
├── index.html # 構造
├── style.css # デザイン
└── app.js # 機能
進め方
- Bobに、「3分でアプリ作りたい、IT基礎知識についての理解深めたい」とお願いする
- Bobがアプリを作成してくれる
- 使い方・学習の流れと学習教材を用意してくれているので、それに沿って学習を進める
学んだこと① Web開発の3層構造
HTML / CSS / JavaScript の役割
| 層 | 役割 | 家に例えると |
|---|---|---|
| HTML | 構造を定義 | 柱、壁、部屋の配置 |
| CSS | 見た目を制御 | 壁紙、塗装、インテリア |
| JavaScript | 動きを制御 | 電気、水道、エレベーター |
┌─────────────────────────┐
│ JavaScript (動作層) │
├─────────────────────────┤
│ CSS (表現層) │
├─────────────────────────┤
│ HTML (構造層) │
└─────────────────────────┘
この3つが連携して、Webページが動いています。
学んだこと② CDNの仕組み
CDNとは「コードの図書館」
アプリ作成時、QRコード生成ライブラリをHTMLに1行書くだけで使えました。
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
CDN（Content Delivery Network） = 世界中に配置されたサーバーから、ライブラリを高速配信する仕組み
従来：ライブラリをダウンロード → プロジェクトに配置 → 管理が大変
CDN：HTMLに1行書くだけ → 世界中どこからでも高速に読み込み
Cloudflare大障害が理解できた理由
Cloudflare = CDNサービスの1つ
多くのWebサイトがCloudflareのCDNを使ってライブラリを読み込んでいます。
<!-- 多くのサイトがこのように使用 -->
<script src="https://cdnjs.cloudflare.com/..."></script>
障害が起きると：
Cloudflare障害
↓
ライブラリが読み込めない
↓
サイトの機能が動かなくなる
↓
「インターネットの一部が止まる」
XやLinkedInなど大手サイトもCDNを使っているため、障害時に影響を受けていたんですね。
おわりに
Project Bobで3分アプリを作っただけですが、実際に手を動かすことで、ニュースで聞く技術用語の意味が腑に落ちました。
次はこのアプリをカスタマイズしてみようと思います。