はじめに
エンジニアになってからの一年の間でいくつかの言語に触れてきましたが、その中でも僕が個人的にさっぱり分からない言語があります。
それが「JavaScript」です。（とはいっても僕が触った経験のある言語はPHP・Java・python(CSVの入出力という簡単な内容)・VBAくらい）
ほかの言語はやっていることがなんとなくわかるのですが、JavaScriptは全く手を付けていないということもあり、構文がおまじないにしか見えない。。。
その割にモダンなWebサイトでは欠かせない言語であり、習得は必須（あと単純に動的な処理面白そう）なので勉強した記録を残します。
まだ習得途中のため、不十分な点もあるかと思いますが、参考になれば幸いです。
※この記事の内容は2019年1月時点での実行結果になります。
JavaScriptとは
JavaScriptとはプログラミング言語のひとつで、主にWebサイトで使用されます。
ユーザの操作で表示を切り替えたり、DOMの要素を操作することができます。
言語の詳しい説明などは他のサイトさんでも紹介されていると思いますので、見ていただくといいと思います。
あと、JavaScriptはクライアントサイドとサーバサイドとがありますがこの記事ではクライアントサイドでの処理を主に取り上げたいと思います。
JavaScriptの特徴
JavaScrptの特徴はざっくり以下の内容です。
①HTML・CSSの要素を操作できる
②任意のイベント（ボタンクリックやチェックボックスの変更など）を契機に実行できる
③HMLのファイルに直接記述、又は別ファイルとして読み込むことで実行できる
④非同期通信が可能
jQueryとは
jQueryとはJavaScriptの関数をパッケージングしたライブラリです。
ライブラリを使用することで、JavaScriptで書くと長文になるソースコードがjQueryを使用することで数行で実現できるメリットがあります。
ソースコードが長文になれば可読性も低下し、バグの発生を助長します。
自分でメソッドを作成せずとも用意されているものがあるのならそれを使うと便利で簡単！ということでライブラリは様々なサイトで使用されてます。
jQueryの使用方法
jQueryの使用方法はJavaScript同様、HTML内で読み込んであげる必要があります。
読み込む方法は以下の2通りがあります。
（１）jQueryをダウンロードして、自分のWebサイト上に配置して読み込む
（２）jQueryをダウンロードせず、ほかのサーバにあるものを読み込む
ダウンロードして使用するメリットはオフライン環境でもjQueryを使用することができます。
この記事ではオンラインで使用することを想定した（２）の方法でjQueryを使用します。
リンク先URLの取得
対象は公式以外に、GoogleやMicrosoftが提供しているものが存在しますが、本家ということで公式が提供しているCDNを使用したいと思います。
以下のURLからリンクを取得します。
ちなみにCDNについての詳しい内容は以下のサイトに詳しい内容が記載されています。
参考：CDNでWEBサイトを高速化！CDNを利用する場合のメリットとデメリット
遷移先のページでjQueryのバージョンとタイプを選択します。
jQueryのバージョンは1.x~3.xがありますが、主には対応するブラウザの違いがありますので環境に合わせたバージョンを選択します。
「2.x」系は「1.x」と比較して「IE」の6~8をサポートしないバージョンで、対応範囲が狭い代わりに「1.x」に比べ高速かつ安定した動作を提供してくれます。
2.xと3.xについてはサポートブラウザの違いはありませんが、3.xは再設計により処理の呼び出しなどが見直されたようです。
詳しい変更点は公式のアップグレードガイドに記載されています。
全てのバージョンで選択できる「uncompressed」と「minified」ですが、後者は改行やインデントを削除することでファイルサイズを小さくしているもので、処理自体の内容は同じです。
内容を確認したい場合などは「uncompressed」を選択するなど、必要に応じて使用するパッケージを選択します。
3.xでのみ選択できる「slim」ですが、ajaxおよびEffectsモジュール、非推奨となったAPIを除外したスリムパッケージになるので、こちらも必要に応じて選択することができます。
今回は最新バージョンである3系の最適化が行われている「minified」を使用したいと思います。
「minified」押下後にコードが表示されるので、こちらをコピーして対象のHTMLファイルの<head>内に記述します。
これで準備は完了です。
jQueryを使用したサンプルコード
今回はテスト動作用に「sample.php」を作成して動作を確認します。
sample.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script type="text/javascript"> $(function() { $("p").click(function(){ alert("Hello!"); }); }); </script> </head> <body> <p>sample</p> </body> </html> |
コードの動作は以下になります。
pタグをクリックするとメッセージをアラート形式で表示するだけのサンプルです。
以上のような要領でjQueryを使用することが可能です。
当然ですがCDNの部分をコメントアウトすればクリックしてもアラート表示はしません。
まとめ
以上がjQueryの概要から導入までの流れになります。
HTMLに直接記述できブラウザで確認も簡単に出来るので他の言語に比べて動作の確認はすごく簡単でした。
また、jQueryには様々な関数が用意されているので（jQuery API 一覧）そういった機能を含めてまた記事にしたいと思います。