UIのCDNについてなどの基本的な内容から、応用的な使い方に関しても解説していきます。Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのことです。jQueryなどで利用する場合は、ソースファイルをネット経由で使えるためファイルをダウンロードする必要がありません。自分のサーバーへjQueryのファイルをアップロードしなくても良いわけです。手軽に使える便利なしくみなので、すぐにjQueryを使ったプログラミングをしたい時には最適と言えるでしょう。CDNを利用したjQueryファイルの読み込み方やGoogleが配信しているCDNの使い方について学んでいきます。jQueryをCDNで読み込む方法についてまずは、基本的なCDNの使い方から見ていきましょう!現在、jQueryのファイルは以下の公式サイトからCDN経由で利用できるURLが公開されています。「uncompressed」「minified」の2種類ありますが、どちらも同じjQueryファイルになります。「minified」はソースファイルのコメントや改行などを排除しているので容量が少なく軽量で高速です。「uncompressed」は容量が大きいですが、何かエラーが起きたときにどの箇所が要因なのかをデバッグできます。そのため、開発中は「uncompressed」を使い公開する段階になったら「minified」に切り替えると良いでしょう。src="https://code.jquery.com/jquery-3.3.1.js"></script>「src属性」にCDN経由で配信されているURLを記述するだけです。GoogleのCDNを使ったjQueryの読み込み方jQuery公式以外にもCDNを使ってファイルを配信しているサーバーがあります。有名なのはGoogleが提供している以下のCDNでしょう。】jQueryは現在「1系」「2系」「3系」の3種類が存在しています。そこで、それぞれのjQueryファイルを分けて以下のようなURLを使って利用できるように配信されています。src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>jQuery公式のCDNよりも高速な配信サーバーであり、多くの人が利用しているという特徴があります。「CDN」のメリット・デメリット基本的な「CDN」の利用方法が分かったところで、おさらいを含めてメリット・デメリットをまとめてみましょう!<メリット>ファイルのダウンロード・アップロードの手間が不要URLをscriptタグに記述するだけなので手軽に利用できるブラウザにキャッシュされるので高速に読み込める<デメリット>SSLの対応状況によっては利用できない場合がある配信が停止されると当然ながら利用できないメリットに関しては、これまで解説した通りなのですがキャッシュについて紹介しておきます。CDN経由で読み込まれたファイルはブラウザにキャッシュされるので、次回読み込む時はブラウザ内のキャッシュを使います。そのため2回目以降の読み込みが高速になり、もし他のサイトも同じCDNを使っていれば同様に高速になるわけです。デメリットに関しては、ほとんど心配いらないレベルです。SSL対応については、例えば時分のWebサイトが「https://」から始まる場合にCDNのURLもhttps://からでなければ読み込まれません。ほとんどのCDNはSSL対応しているので問題にはならないでしょう。問題は配信が停止された場合ですが、複数のCDNサービスが存在しているので代替を見つけるのは簡単です。UIの基礎知識とCDNの使い方について学んでいきます。UIは、jQueryをベースにインタラクティブなWebサイトを構築するための機能を盛り込んだライブラリです。https://jqueryui.com例えば、以下のような特徴があります。マウスのドラッグ操作などを扱えるインタラクション機能カレンダー、アコーディオンメニュー、ツールチップなどのウィジェット機能アニメーションやエフェクト効果などを扱える機能これらの機能を簡単にサイトへ組み込めるのが魅力で、プログラミング方法もjQueryライクに扱えます。jQueryでDOM操作を行いつつ画面UIの設計まで一緒に実現できるというわけです。いっても、jQueryをCDNで利用する場合とほとんど同じなので簡単です。UIを利用するのであれば次のように記述します。src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>1つ注意点としては、先にjQuery本体のファイルを読み込む必要があるという点です。理由は簡単で、jQueryをベースにしているので先に使えるようにしておかなければいけないわけです。以下のようになります。UIを読み込む方法について学習しました。UI」もCDNで利用できる上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。