Zenn
📖

[基礎]jQuery

2023/09/13に公開
tech

jQueryとは

jQuery（ジェイクエリー）は、最も広く使われているJavaScriptライブラリです。
JavaScriptの難解な部分を解消させるために、2006年に誕生しました。
JavaScriptライブラリとは、JavaScriptの処理を簡単に扱えるようにしたプログラムです。
jQueryを使うことで、HTML要素の構造や、文字色や背景色などを簡単に変更できるようになります。
このため、Webサイトを作成するときに必要不可欠なライブラリになっています。
jQueryを使用することには3つのメリットがあります。

  1. ブラウザが違っても使える
  2. HTMLのDOMの操作が簡単
  3. Ajaxの処理が簡単に記述できる
    3つの中で分かりやすいのは3つ目だと思います。
    非同期はサイトの利便性を考えると必須の項目なのでとても助かってます。

jQueryの使い方

jQueryを使うには、公式サイトにアクセスし、jQueryファイルをダウンロードする必要があります。

  1. jQueryの公式サイトにアクセスすると、以下のような画面が表示されます。
    左上の「Download」をクリックします。

  2. Macは右クリックして「リンク先を別名で保存」を選択し、Windowsは右クリックして「名前を付けてリンク先を保存」を選択してファイルを保存する。

このファイルを対応させたいディレクトリにドラッグアンドドロップすることで使用できるようになります。
追加したjQueryをhtmlに読み込ませるために下記のように記述します。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <script src="jquery.min.js"></script>  //jQueryを導入
    <script src="app.js"></script>　　　　 //app.jsを参照させるための記述
  </body>
</html>

jQueryを書く際にはHTMLファイル内に直接記述するか、専用のJavaScriptファイルに記述します。
今回はapp.jsファイルを作成しました。

jQueryの書き方

まずjQueryを読み込ませます。
下記のように記述します。

$(function(){
  // jQueryプログラムの内容
});

function内のjQueryプログラムの内容は下記のように記述します。

$( セレクタ ).メソッド ( パラメータ );

$('body').html('<h1>Hello JQuery!!</h1>');

記述内容はこのようになっています。

  • セレクタ（操作の対象になる部分）……body
  • メソッド（何を行うのか）……html
  • パラメータ（変更内容）……'<h1>Hello JQuery!!</h1>'

このようにjQueryでは、セレクタとメソッド、さらにパラメータを用いて、「どこに対して何を行うか」を記述しています。
今回のコードは、「bodyタグ内のHTMLを、<h1>Hello JQuery!!</h1>で書き換えなさい」という意味になります。

jQueryでアニメーションをつけるには？

javascriptの得意分野の動的なwebページを作成するためのアニメーションの使い方をいくつか紹介します。
下記のindex.html``app.cssを使用してボックスに対してアニメーションを追加してみます。
このままだとサイズが指定された赤いボックスが表示されます。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <div class="box1"></div>
    <script src="jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

.box1 {
  background-color: #FF0000;
  height: 200px;
  width: 200px;
}

上から下へスライドさせる

まず、上から下へスライドさせてみます。
何もない状態から表示されるようになるので、デフォルトでボックスが表示されないようにapp.cssにdisplay: none;を追加しておきます。
上から下へスライドさせる記述として、slideDownをメソッドに指定します。

app.js
$(function(){
  $('.box1').slideDown();
});

これでスライドされるようになりました。
ちなみに下から上にスライドさせる場合は、display: none;を削除し
メソッド部分をslideUPに変更すればできます。

「マウスオーバー」イベントを設定する

赤色の正方形にマウスオーバー（マウスカーソルが重なっている状態）のときに、青色の正方形に変わるように設定します。

app.js
$(function(){
  $('.box1').mouseover(function(){
    $('.box1').css({'background-color': '#0000FF'});
  });
});

今回は、「box1にマウスオーバーされたときに、box1のcssのbackground-colorを#0000FFに変更してください」という意味を記述しました。

「マウスアウト」イベントを追加する

先ほどの「マウスオーバー」の状態からマウスカーソルが外れたときに、再び赤色に戻る設定（マウスアウト）をしてみます。
マウスアウトはmouseoutメソッドを使用します。

app.js
$(function(){
  $('.box1').mouseover(function(){
    $('.box1').css({'background-color': '#0000FF'});
  });
  $('.box1').mouseout(function(){
    $('.box1').css({'background-color': '#FF0000'});
  });
});

これでマウスカーソルがbox1に入ると青色、出ると赤色に変化するようになりました。
ただこのままの記述だといちいちcssを書かないといけないので、手間がかかります。
そこでマウスオーバー時のcssを事前に定義しておくことで、簡単にすることができます。

app.css
.box1 {
  background-color: #FF0000;
  height: 200px;
  width: 200px;
}

.box1-ext {
  background-color': #0000FF;
}
app.js
$(function(){
  $('.box1').mouseover(function(){
    $('.box1').addClass('box1-ext');
  });
  $('.box1').mouseout(function(){
    $('.box1').removeClass('box1-ext');
  });
});

このようにbox1-extを指定することでイベント後に表示される内容をまとめることができます。

「マウスクリック」イベントを設定する

box1がクリックされたときは、box1-extのclassを追加され、マウスアウトされたときは、box1-extのclassを削除するように設定します。
今回はクリック後に複数のイベントが行われるようにしたいので、onを付けた以下のような書き方をします。
ちなみにイベントが単体の時は.click( )を使用することも可能です。

$('.セレクタ名').on('click', function() {
  イベント発生時に行われる処理
});

$(function(){
  $('.box1').on('click', function(){
    $('.box1').addClass('box1-ext');
  });
  $('.box1').mouseout(function(){
    $('.box1').removeClass('box1-ext');
  });
});

これでbox1をクリックすると太い黒枠が表示され、マウスアウトすると赤色のみになる動作になったと思います！

RailsにJavaScript（jQuery含む）を読み込む方法

JavaScriptファイルを読み込む方法はいくつか存在します。

  • importで読み込む
  • javascript_pack_tagで読み込む
  • CDNで読み込む

importで読み込む

app/javascript配下に読み込みたいjsファイルとpacks/application.jsにimportすることで使用可能です。
例）app/javascript/sample.js

app/javascript/packs/application.js
:
:
 
import "sample.js"
 
:
:

javascript_pack_tagで読み込む

viewファイルから、使用したいJavaScriptファイルを読み込む方法です。
下記の記述でファイルを読み込みことができます。

app/views/xxx/xxxxxxx.html.erb
<h1>Tests#top</h1>
<p>Find me in app/views/xxx/xxxxxxx.html.erb</p>

<%= javascript_pack_tag 'sample' %>

注意点として読み込みたいjsファイルはapp/javascript/packs配下に配置する必要があります。
packs配下に存在しないファイルをjavascript_pack_tagでパス指定してもエラーになります。

CDNで読み込む

CDNで読み込む場合はviewファイルにscriptタグを埋め込み、読み込みます。
基本的にはapplication.html.erbに読み込ませます。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>SampleApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

まとめ

明日はAjaxを使ってAPIについて勉強します。
ポートフォリオ作成でAPIを使っている人が多くて気になっていたので、使えるようにしていきます！！
googlMapとか導入できたら作れるサイトのバリエーションが増やせそうです。

Discussion