web制作のしおり

日々の学習をアウトプットします。

85.復習しよう② ~JavaScriptとjQuery~

本日は復習編第2弾

JavaScriptjQueryについてです。

 

正直、忘れてしまっている気がする。

早速やっていきましょう。

 

JavaScriptとは

HTMLとCSSとは違い、プログラミング言語

DOMというウェブページとプログラミング言語をつなぐ仕組みを使うことで、JavaScriptブラウザ上のHTMLを参照、操作することができます。

何が言いたいかというと、

ブラウザに表示されているページに動きをつけられる。

という事です。

 

ちなみにDOMのような仕組みの総称をAPI(Application Programming Interface)

と言うそうです。

 

具体的にどんなことができるかと言えば、

  • 条件を指定して、合致するときだけ処理をする
  • ユーザーの操作を検出して、処理を実行する(イベント検出)

また、賢者達が作成し、提供されているライブラリという便利な道具を使うことで

いろいろな実装が手早くできてしまうのも魅力の1つです。

 

ライブラリには

  • スライダーをカンタンに実装できるSwiper
  • スクロールに合せてアニメーションをさせるWOW

こんなものがあります。

これらのライブラリは特別なことをやっているのではなく、

あくまで、HTML、CSSJavaScriptを使ってコア部分を作成して提供してくれているイメージです。

なので、使用者はライブラリを手順通りにHTML、CSSJavaScriptをファイルとして読み込んだり、適宜追記してあげるだけで利用できるわけです。

 

何をしているのかがわかればカスタマイズは可能なので、やはりJavaScript基本が大切になってくると思います。

なんとなくやったらできた」では、不具合が起きた時に対処ができません

私はそれが気持ち悪いので、大概は基本を自分の言葉でざっくり説明できようになるまでやります。

 

jQueryとは

こちらもJavaScriptライブラリの1つです。

ですが、先程例にあげたSwiperやWOWのように

特定の機能を実装するライブラリではなく、

JavaScriptをカンタンに短く書く為に作られたモノです。

 

jQueryを使うことで、大幅にコードの記述量が減ります。

ライブラリ様々です。

 

ですが、懸念点もあります。

パフォーマンスでは純粋なJavaScriptに劣るところですね。

結局jQueryJavaScriptで書かれたライブラリなので、

裏ではJavaScriptで書かれたコードが存在し、処理されています。

 

とは言え、カンタンに書けたりブラウザ間の挙動差を吸収してくれたりと

メリットが多いのも事実です。

 

パフォーマンスやJavaScriptのライブラリでの実装を求められなければ、

jQueryを選択して良いのでは無いかと思います。

 

今日のまとめ

  • JavaScriptはDOM(API)を使ってブラウザ上のHTMLを操作することができる
  • ライブラリが豊富なので、自分で0から実装しなくても良い場合がある
  • jQueryJavaScriptをカンタンに書くためのライブラリ。
  • jQueryをメインで使っていく場合でも状況によっては、JavaScriptを選択する必要がある

JavaScriptの基本はしっかり押さえておいて、ライブラリが何をしているかは理解して使いたいですね。

 

では、また。