エンジニアの将来って?

現在7年目のCOBOL→Java→C#エンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

【jQuery】Google Developersから読み込む方法を解説します

こんにちは。たいら(@tairaengineer2)です。
この記事では、jQueryGoogle Developersから読み込む方法について解説します。

 

Google Developersとは

Google Developers (以前はGoogle Code)はGoogleが関連するソフトウェアやオープンソースのソフトウェア開発に興味を持つ開発者向けに立ち上げたサイト。
オープンソースのコードや、標準のAPIをサポートするサービス群がある。

Google Developers - Wikipediaから引用させて頂きました

Google Developersとは、Google公式オープンソースのサイトです。
決して違法なサイトではないので、ご安心ください。

Google Developersでは、様々なAPIがサポートされています。
その中の1つにjQueryがあります。
インターネットを経由して、Google DevelopersからjQueryを読み込もう!ということです。

何故Google DevelopersからjQueryを読み込むのか

 

Google DevelopersからjQueryを読み込めることは分かった。
でも、jQueryをダウンロードして、ローカルで読み込むのと同じ話なんじゃないの?

 

こう思った方も多いのではないでしょうか?

確かにその通りです。
ダウンロードしてきちんと自分で管理できるならば、それで構わないと私は思います。
また、先ほども書きましたがGoogle Developersから読み込む場合、インターネットつながっていることが前提条件です。

じゃあ何でそれでもGoogle Developersから読み込むのか、と言いますとだからです。

Google Developersから読み込む場合、1行でできます。
対してjQueryをダウンロードして読み込む方法の場合

  • jQueryをダウンロード
  • jQueryをディレクトリに格納
  • パスを考えながら読み込む

と、結構手間がかかります。

なので、何か制約(インターネットが繋げられない環境など)がない場合は、Google DevelopersからjQueryを読み込む方法をおすすめします。

Google DevelopersからjQueryを読み込む方法

解説の前に注意して頂きたいことが1つあります。
それは、この解説記事を書いているのが2019年4月17日現在の情報です。
あまりにも時間が経っている場合、少々表示が異なる可能性があります。
その点は、ご注意ください。

では、Google DevelopersからjQueryを読み込む方法を解説します。
以下のリンクから、Google Developersに移動します。

developers.google.com

移動すると

f:id:Tairax:20190417231506p:plain

このような画面になります。
右横に

f:id:Tairax:20190417232336p:plain

【jQuery】という項目があるので、そこをクリックします。

f:id:Tairax:20190417232803p:plain

3.x snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

2.x snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

1.x snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

※上記は2019年4月17日現在の情報

赤枠で囲っているscriptタグをhtmlのheadタグ内に書いてあげれば大丈夫です!
読み込むバージョンは、特定のバージョンを読み込みたい!という以外は最新バージョンを読み込めばOKです。

読み込み方サンプルは

<!DOCTYPE html>
<html>
	<head>
		<title>読み込みサンプル</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
	</head>
	<body>
	</body>
</html>

こんな感じに書いてあげれば、読み込むことが出来ます。

まとめ:Google DevelopersからjQueryを読み込んでみよう

以上がGoogle DevelopersからjQueryを読み込む方法でした。

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

 

ほかにもjQuery解説記事を書いてます。
よければご参考ください。

【jQuery】プラグイン[clipboard.js]を使って、テキストボックスの値をカットする

【jQuery】hoverを使って、背景色を変えたり、アラートを出す

 

 

もっとJavaScriptの基礎を固めたい!

 

という、JavaScript初心者向けにおすすめの本をご紹介します。

【書評】「知識ゼロからのJavaScript入門」はJavaScript初心者におすすめの本