ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」の使い方【Javascript】エラーチェックをする方法【Javascript】変数【Javascript】配列(Array)【Javascript】「DOM(Document Object Model)」の使い方【Javascript】関数 / Function【Javascript】条件分岐・繰り返し【Javascript】イベントハンドラー(Event Handler)【Javascript】文字の操作方法【Javascript】文字の検索方法【Javascript】スコープ【Javascript】ファイルの操作方法【Javascript】画像の操作方法【Javascript】情報を出力・チェックする方法【Javascript】ヒアドキュメントの使い方【Javascript】Built-in Object(ビルトインオブジェクト)【Javascript】ライブラリー / Library
Library
「Ajax」の使い方
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法
Reference
数字
【Javascrpt】計算に誤差が出る時の解決方法
ファイル読み込み
【Javascrpt】「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
イベント
【Javascrpt】ページ読み込み時に「Javascript」を実行する方法【Javascrpt】画像読み込みが完了してから、次の処理を実行する方法【Javascrpt】「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
【Javascrpt】HTMLタグの「class」属性値を取得、変更する方法【Javascrpt】「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法【Javascrpt】「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法【Javascrpt】「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法【Javascrpt】「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法【Javascrpt】「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法【Javascrpt】「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法【Javascript】「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する【Javascript】「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
【Javascript】Webページのタイトルを変更する方法【Javascript】「モニター」情報を取得する方法【Javascript】「ブラウザ」情報を取得する方法【Javascript】「ページ」情報を取得する方法【Javascript】「イベント」情報を取得する方法【Javascript】「マウス」情報を取得する方法
サイズ関連
【Javascript】要素の縦・横サイズを参照・変更する方法【Javascript】「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
【Javascript】スマートフォンからのアクセスを識別する方法





「jQuery」を使えるようにする方法



「jQuery」を使えるようにするのは、
意外と簡単で、「jQuery」の外部ファイルにリンクを貼るだけで、
「jQuery」は使えるようになる。
「jQuery」ファイルをダウンロードする方法もあるが、
それもそれほど難しくはない。






「jQuery」とは


「jQuery」は、
「Javascript」のライブラリーの1つで、
「Javascript」なしには機能できない。

「jQuery」は、ライブラリーの1つだが、
とても便利な機能が多く、
記述も独自の書式が多いので、
もう一つの言語のように思われることも多い。

実際には、「jQuery」のファイルをダウンロードしてきて、
サーバー上に「Javascript」の外部ファイルとしてアップロードして、
「HTML」ファイルに、「Javascript」の外部ファイルとしてリンクさせることで、
「jQuery」を利用することができる。

もう一つ使用する方法があり、
サーバー上に公開されている「CDN」と呼ばれる「jQuery」ファイルに リンクさせて「jQuery」を利用することもできる。


「jQuery」を利用するメリットは、
・多様な便利な機能が用意されている
・各ブラウザなどの個別の対応などをすでにしてくれている
というところ。
それぞれの動作確認などもをしなくても、
すでに行ってくれているのがありがたい。


Back



「jQuery」の使い方


「jQuery」は、
・「jQuery」が公開している「jQuery」ファイルをダウンロードして使う
・直接「jQuery」公式Web上のファイルにリンクをはる
の2つの利用方法がある。


「jQuery」が公開している「jQuery」ファイルをダウンロードして使う方法

・「jQuery」公式Webからダウンロードする
・「jQuery」ファイルをWebにアップロード
・HTMLファイルのヘッダータグの間に、「javascript(jQuery)」へのリンク作る


「jQuery」が公開しているファイルアドレスにリンクを張る方法

「jQuery」が公開しているファイル「CDN」を利用するには、
ただ、「jQuery」が公開しているファイルアドレスにリンクを張るだけで済む。
HTMLファイルのヘッダータグの間に、「<script>」タグを使って、
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
「jQuery」の公式Web上にある「javascript(jQuery)」ファイルへのリンク作る。


「jQuery」が使える「CDN」は、
・jQueryのCDN
・GoogleのCDN
・MicrosoftのCDN
など。


「min.js」とは

通常の拡張子は、「ファイル名.js」だが、 「ファイル名.min.js」は、「圧縮版(minified)」という意味。
改行・コメント・インデントなどが、すべて削除され、 ファイル容量をできる限り小さくしてもので、 読み込み時間の短縮・高速化をしてあるファイル。
プログラムコードは同じ。


Back



「jQuery」のダウンロード


「jQuery」は、OfficialWebからダウンロードができます。
「jQuery」のOfficialWeb「https://jquery.com/


ダウンロードの選択肢には、
・「Download the compressed, production jQuery バージョン」=改行・スペースなし(高速処理)
・「Download the uncompressed, development jQuery バージョン」=改行・スペースあり(開発向き)
の2つがあるが、両方ともダウンロードしておいても良い。
リンクをクリックすると、「jQuery」のコードだけがシンプルに表示されるページに移行するので、
自分で「名前を付けて保存」をする。

ファイル名の後ろにある拡張子が、
・「js」
・「min.js」
で分かれているが、
「min.js」は、
「圧縮版(minified)」という意味。
改行・コメント・インデントなどが、すべて削除され、
ファイル容量をできる限り小さくしてもので、
読み込み時間の短縮・高速化をしてあるファイル。
プログラムコードは同じ。
「Download the compressed, production jQuery バージョン」は、「min.js」。

「js」は、
読みやすいように、
改行・コメント・インデントなどを使って編集されている。
「Download the uncompressed, development jQuery バージョン」は「js」。


「jQuery」をダウンロードする流れ

「jQuery」のOfficialWeb」にアクセスする

「Download」を選択。

[ 「Download the compressed, production jQuery バージョン」=改行・スペースなし(高速処理)
「Download the uncompressed, development jQuery バージョン」=改行・スペースあり(開発向き)
のどちらかを選択すると、
それぞれのコードが記述されたページが開く。

「別名で保存」を保存するを選択。
保存場所は、どこでも良いですが、
使用するときは、サーバーにアップロードして使います。
「jQuery」が公開しているファイル「CDN」へリンクを張ってを利用することもできるので、
その場合は、サーバー上にアップロードしなくても良い。


サーバー上の配置場所は、
「js」フォルダを最上位フォルダ内に作成して、その中に保存しておけば良い。
あとは「HTML」ファイルに、リンクを張れば「jQuery」が使える。

「HTML」ファイルのリンクコード

<head>
<script src="./js/jquery-3.4.1.min.js"></script>
</head>


「jQuery」のテストコード

サーバー上にアップロードして、
リンクを張った後に、下記のコードを試してみると、
「jQuery」が機能しているか確認できる。


<html>
<head>
<script src="./jquery-3.4.1.min.js"></script>
<script>
$(function(){
alert('メッセージ');
});
</script>
</head>
<body>
</body>
</html>


Back



「jQuery」の「CDN」で使う方法


「CDN」は、
「Content Delivery Network」の略で、
インターネット上で、ファイルを配信し共有して使えるネットワークを意味している。

「jQuery」も「CDN」を使用することで、
ファイルをダウンロードすることなく、
使用することが可能になります。


「jQuery」の「CDN」を使うメリット

・ファイルのダウンロード・アップロードの手間が不要
・URLをscriptタグに記述するだけなので手軽に利用できる
・ブラウザにキャッシュされるので高速に読み込める


「jQuery」の「CDN」を使うデメリット

・SSLの対応状況によっては利用できない場合がある
・配信が停止されると当然ながら利用できない


「jQuery」の「CDN」を確認・取得できる場所

https://code.jquery.com/
Google CDN
・Microsoft CDN
・CDNJS CDN
・jsDelivr CDN


「jQuery」の「CDN」を使うためのサンプルコード

<html>
<head>
<script src="サーバー上の「jQuery」ファイルへのURL"></script>
<script src="./jquery-3.4.1.min.js"></script>

<script src="「jQuery」の「CDN」へのURL"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>


<script>
$(function(){
alert('Hello jQuery!!');
});
</script>
</head>
<body>
</body>
</html>


Back