【初心者向け】CDN・Cloudflareをまるっと解説

Web制作者なら知っておきたいCDNの仕組みと使い方

Web制作の現場でよく目にする「CDN」「CDNJS」「Cloudflare」という言葉。なんとなく使っているけど、実は仕組みやビジネスの裏側までは知らない……という方も多いのではないでしょうか？

この記事では、

……という疑問に一つずつ答えていきます！

CDNとは？

CDN（Content Delivery Network）は、画像・CSS・JavaScriptなどのWebコンテンツを世界中の複数のサーバーに分散して置き、ユーザーに最も近い場所から高速に配信する仕組みのことです。

たとえば、東京のユーザーがアメリカのサーバーにあるサイトを開くと、距離のぶん遅延が発生します。CDNを使えば、東京にもキャッシュされたコピーがあるので、そこから即座に配信されて表示が速くなります。

cdnjsはオープンソースプロジェクトのライブラリ集で、CloudflareがホスティングしているCDNサービスです。ですが、誰でも自由にアップロードできるわけではありません。

※必須条件：プロジェクトがオープンソースであること、一定の人気や需要があることなど

個人のポートフォリオなどをcdnjsにアップロードすることは基本的にできません。あくまで「広く使われているライブラリ」のためのCDNです。

CSSも普通にあります！
CDN＝JavaScriptのイメージが強いですが、実際は…

もCDNで配信可能です。つまり、HTML以外のほとんどの静的ファイルはCDNで高速化できるんです。

Cloudflare（クラウドフレア）は、アメリカ発の大手インターネットインフラ企業で、主に次のようなサービスを提供しています。

つまり、「Webサイトを高速・安全に届ける」ための技術やサービスを広く提供している会社です。

このCloudflareが提供しているサービスの一つが「CDN」です。誰でも無料で利用できるように公開されており、Web開発者にとってはとてもありがたい存在です。

Cloudflareは「無料で使えるCDN」も提供してますが、もちろんそれだけではビジネスが成り立ちません。

無料プランを大量に提供して市場シェアを拡大し、プレミアム層から収益を得る「フリーミアムモデル」をとっています。

高速配信
ライブラリが世界中にキャッシュされているため、アクセスが速い。
サーバー負荷の軽減
自サイトでファイルをホストする必要がないため、サーバーの負荷が軽くなる。
キャッシュの共有
多くのWebサイトで同じCDNリンクが使われているため、すでにユーザーのブラウザにキャッシュされている場合があり、さらに読み込みが速くなる。
簡単・手軽
HTMLにCDNのURLを貼り付けるだけで導入できるため、初心者でも簡単。

Web制作をしている人なら、「CDNの正体」と「Cloudflareのポジション」を知っておくことで、よりパフォーマンスやセキュリティに強いサイトが作れるようになりますよ！