中級lesson02 – JavaScript / jQuery
目次
JavaScriptとは
Javascriptはプログラミング言語の一つです。ブラウザ上で動作することからWeb開発などに用いられます。
HTMLやCSSでは表現できないような「動的な仕組み」や「Webアプリケーション開発」なども行えることから、Web制作に欠かせない言語となっています。
また学習のしやすさや情報の多さなどから、開発者からも人気の高い言語です。
JavaScriptの記述位置
1. HTMLファイルのhead要素内
2. HTMLファイルのbody要素内
3. 外部jsファイル内
ファイル名の付け方
xxxx.js xxxxの部分は任意（好きな名前）
・1つのファイル内にすべての機能を記述した場合・・・script.jsとつけることが多い。
・機能ごとにファイルを別ける場合（推奨）・・・機能名.jsとつけることが多い。 （例：ギャラリー用のjsファイルの場合「gallery.js」）
ライブラリ
近年ではJavaScriptをより簡潔に呼び出すことができる「フレームワーク」や「ライブラリ」といったものが多く開発されています。
本来複雑な記述になってしまうような命令もフレームワークやライブラリを使うことでシンプルに記述することができるようになります。その中でも人気が高いものが「jQuery」となります。
jQuery
jQueryは利用者が多く人気の高いJavascriptライブラリです。
人気が高い = 情報量も多いためWeb上で様々な情報を見つけることができ、学習がしやすいというのも大きな特徴です。
またCSSのセレクタを用いてHTMLを操作できるため、HTMLを理解している人にとって扱いやすいライブラリであると言えます。
jQuery公式サイト
https://jquery.com/
プラグイン
jQueryを用いて作られた機能が、Web上に無料で公開されているものがあります。
これを「プラグイン」と呼び、必要なデータをダウンロードしてファイルへのリンクと簡単な命令文を記述すればjQuery初心者でもWebサイトに機能を追加することができます。
Light Box
https://lokeshdhakar.com/projects/lightbox2/
jQueryプラグインの使い方
1.jQueryファイルへリンクを貼る
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
外部jsファイルへのリンクはscript要素を使用 / ローカルファイルへのパスは相対パス / 上の記述でjsフォルダ内のjquery-3.5.1.min.jsへリンク
2.プラグイン用JSファイルへリンクを貼る
使用するプラグインを動かすためのJSファイルをWeb上からダウンロードしてリンクを貼る。（プラグインの種類によってリンクファイルは異なる）
3.実行の命令文（jQuery）を記述
プラグインを動かすための命令文を記述（プラグインの種類によって記述内容は異なる）
シンプルなプラグイン実行コード例
$(“プラグインを実行するセレクタ”).命令(); （例）Drawer
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
オプションの設定がされたプラグイン実行コード例
$(“プラグインを実行するセレクタ”).命令({オプション1,オプション2,オプション3}) （例）slick
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
プラグインを使いこなすコツ
プラグインは使用するものによってリンクするファイルや記述内容が変わります。
そのためサイトに載っている記述をよく理解して、デモファイルがダウンロードできる場合そのファイルを開いて構造を理解してから利用しましょう。
また最初から多くの記述が書かれているHTMLファイルの中で使用すると、うまく動作しなかった際の検証が難しくなります。
初めて利用するプラグインは新規で作ったHTML内に、プラグインに必要な記述のみ行って動作確認をすると良いでしょう。
プラグインの利用
slick – スライダー
https://kenwheeler.github.io/slick/
Slick – オプション一覧
https://kenwheeler.github.io/slick/
drawer – ドロワーメニュー
http://git.blivesta.com/drawer/
練習 – Lightbox
https://lokeshdhakar.com/projects/lightbox2/
練習 – AOS
https://michalsnik.github.io/aos/
番外編 – Vegas Background SlideShow
https://vegas.jaysalvat.com/
