jQueryって何だろう!??

こんばんは。なりです。

今日もカフェサイトの続きを書いていきたいと思います。

コーディングをしたときに残しておきたいと思ったことを

2回に分けて書いていきます。

今回はjQueryについての調べたことのメモを書いていきます。

まだまだコードは読めませんので、

深い内容ではなく、

基本的なことを書いていきます。

次回は「float」について書きたいと思っています。

jQueryって何だろう!??

jQueryとの出会い

私はこれまでの職業訓練で、

  • PHP
  • HTML
  • CSS

を勉強しました。

そして、前職の経験から

サーバの知識が少しあります。

カフェサイトのデザインカンプを作っているときに、

メイン画像をスライドショーにして

お店のコンセプトをさらに伝えたい、

動きがあるので印象に残るサイトになるのではないかと考えました。

そこで先生に相談してみると

「jQueryでできるよ!!」

と教えていただきました。

「jQueryって何だ!??」と思いました。

スライドショーを入れるために

jQueryを調べ始めました。

jQueryとは

jQueryとは…

Javascriptのライブラリです。

よく分からないです…

以下は私自身の考えです。

間違えていることもあるかと思いますが、

現在の私の考えです。

  • Javascript

HTMLやCSSではできないことをできるようにしてくれるプログラミング言語

例→スライドショー

スクロールしたらナビが出てくるとか

  • ライブラリ

Javascriptはプログラミング言語なので

プログラムに慣れていない人には難しい

そのため、優秀な人がJavascriptを使いやすいように

目的によってプログラムをまとめてパッケージ化してくれている

私のまとめ

jQueryとは…

Javascriptを誰かが目的によって使いやすいようにまとめてくれたもの!!

Linuxでいうディストリビューションみたいなものでしょうか!??

誰かがカーネルとかシェルとかをまとめて

CentOSやUbuntuにしてくれているような感じかな!??と思っています。

jQueryを使いたい

なんとなく概要は把握したので、

実際に使いたいと思います。

今回はスライドショーを行いたいので、

「slick」というプラグインを使いたいと思います。

slickの詳細はこちら

1、ファイルをダウンロード

「slick」のサイトからファイルをダウンロードしてきます。

「get it now」からダウンロードできます。

2、jQueryの本体を読み込む

これを忘れがちなのですが、

jQueryを使うときには必ずjQuery本体を読み込ませる必要があります。

私も忘れて1時間くらい悩みました!!

お忘れなく!!

jQueryの詳細はこちら

本体を読み込む方法は2つあります。

  • 本体のファイルをダウンロードして自分のサーバに置いてから読み込む
  • GoogleやMicrosoftのCDNを読み込む

私は2つ目の方法で読み込んでいます。

HTMLのbodyの閉じタグの直前に書きます。

例↓

<script src=”https://code.jquery.com/jquery-3.0.0.min.js”></script>

バージョンがたくさんあるので、

なるべく最新のものを使った方が良いです。

3、slickを読み込む

jQueryの本体を読み込んだら、

次はslickのファイルを読み込んでいきます。

ダウンロードしたファイルは任意の場所に置きます。

そのファイルのパスが必要になるので忘れないようにします。

cssを読み込むのでheadタグ内に書きます。

<link rel=“stylesheet” href=“../css/slick.css” />

先ほどのjQuery本体の下に書きます。

そうしないとうまく動作しません。

<script src=“../js/slick.js”></script>

4、設定を指定する

ファイルを読み込んだあとは、

設定を記載していきます。

先ほどの読み込んだslickのスクリプトの下に書きます。

<script> 

$(function(){ $(‘.slider’).slick(); });

</script>

これだけでも一応動きます。

5、外部ファイルにする

これはおまけですが…

JavascriptをHTMLのscriptタグを使って書くのもいいのですが、

量が多くなるとHTMLが長くなってしまいます。

別ファイルにした方が

編集するときに便利です。

そのため、外部ファイルにすることもできます。

そのときの注意事項を箇条書きします。

  • 外部ファイルの拡張子を「.js」にする
  • HTMLで外部ファイルを読み込む

この2点を守れば外部ファイルにすることができます。

まとめ

jQueryを使うときは…

  • jQueryの本体を読み込むをの忘れずに!!
  • jQuery本体と読み込むファイルの順番に気を付ける
  • scriptタグはbody閉じタグの前に置く
  • ファイルを読み込むだけじゃ動いてくれない!指令を出そう!

簡単ですがまとめです。

今はただ使っているだけなので、

今後はコードを読めるようになりたいです。

そして、記事の中にコードを入れれるプラグインを探そうと思います。

記事の中にコードを書くと読みにくいですね…

では、今日はここまでです。

ありがとうございました。