1. ホームページ制作 TOP
  2. WEB企画ラボ
  3. ホームページ制作
  4. ウェブデザイン
  5. jQueryってなに？超初心者向け入門講座

jQueryってなに？超初心者向け入門講座

このページのタイトルとURLをコピーする
ウェブデザイン 最終更新日：2020/02/14 公開日：2015/02/03

jQuery入門

こんにちは、ホームページ制作会社「ウェブ企画」の東京渋谷オフィスでディレクターをしている竹内です。

もう少しで長かった冬も終わり、春を迎えますね。
春からWebデザイナー業界の門を叩かれる方も、きっと多いのではないでしょうか。

昔とは違い、最近は「デザイン＋htmlコーディング」だけでなくWebデザイナーでもディレクション能力や、「WordPress」などのCMSの扱い、プログラム言語の「PHP」「JavaScript」などプラスアルファを求められることが多くなっているように感じます。

そこで今回は、先述したプログラム言語「JavaScript」の数あるライブラリの中でも、最も有名なjQueryについて、「プログラムについて全く知らない！」という方向けに簡単に概念や、jQueryで出来ることについてご説明させていただきたいと思います。

jQueryを使えるデザイナーは、今後必ず重宝されますので、今のうちからスタートダッシュをかけて自分の強みにしましょう！

また最近はjQuery以外にもReactなど優秀なJavaScriptライブラリが出現してきています。Reactについても学びたいという方は下記リンクよりどうぞ。

【関連記事】初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！

そもそもjQueryとは？

jQueryをざっくりと説明すると「JavaScript」と呼ばれるプログラムをより扱いやすくしたファイルのことです。（通称：ライブラリ）
本来であれば煩雑なプログラムの記述も、jQueryを使用すると少ない記述で実現できてしまいます。

具体的には、JavaScriptで一から書くと何十行にもなる記述が、jQueryを使用すると、ほんの数行で済んでしまうことも。こういった理由から、プログラムが出来ない方でも扱うことが簡単になり、多くのWeb関係者に愛されるライブラリとなっているんですね。

jQueryで何ができるの？

例えば、

  • クリックしたら画像が入れ替わる
  • マウスオーバーした要素がアニメーションのように動く
  • フォームの中の要素を動的に変更する
  • スクロール量によって見た目や数値を変更する

などなど、Webサイトにとっても簡単に「動きをつける」ことができます！

グループ 2

jQueryの読み込み方

jQueryを利用するには、あらかじめjQueryをHTML上に記述し、読み込んでおく必要があります。

読み込み方の主な方法は2パターンあります。

  • 1.Web上のソースを読み込む方法
  • 2.ダウンロードしてローカルで読み込む方法

読み込む場所は、近頃は（体感としての）ページ速度向上の為に</body>の直前で読み込むことが多いようです。特に気にしないのであれば、最初は<head>～</head>でもOKです。

【読み込み方法1】Web上のソースをそのまま読み込む

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

【読み込み方法2】ダウンロードしたjQueryを読み込む

まずは、jQueryライブラリの公式ページからダウンロードをしましょう。
http://jquery.com/download/（公式ページ）

現在はjQuery3.x系が主流となっておりますので、特に古いブラウザなどに対応したいという希望が無ければ、そのままダウンロードしてください。（2019/06/07現在のバージョンは3.4.1）
「Download the compressed, production jQuery （バージョン）」というリンクがあるので、そちらからダウンロードをして下さい。

格納先としては、ルート階層に「js」フォルダを作り、そこに格納する形が一般的かと思います。
格納したjQueryをhtmlで読み込めば完了です。

<script type="text/javascript" src="格納場所/jquery.min.js"></script>

プログラムの読み込み方

次は、プログラム用のjsを書いていきましょう。
主に2パターンの方法があります。

  • 1.html内に直接書く方法
  • 2.「◯◯.js」として別ファイルにし、それを読み込む方法

一般的には、2の方法が多いかと思います。

htmlに直接書く方法

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
<!-- この部分にプログラムの内容を記述します -->
</script>

別ファイルにし、それを読み込む方法

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="格納場所/プログラム用.js"></script>

ここで注意すべき点は、どちらの場合も「jQueryを読み込んでから、プログラムを読み込む」ということです。HTMLは上から順に読み込まれますので、動作記述よりも先にライブラリの記述をしないと、プログラムが実効されないのです。
時々ハマってしまう箇所ですので、ご注意を！

これでようやく、スタートラインに立てました！
今回は、プログラムを別ファイルにして読み込んでいるという形で話を進めます。

実際に書く

さて、jQueryの指定ですが、基本は、「要素」に対し、「実行タイミング」を選び、「処理」を実行するという流れです。

例えば下記の例のような感じです。

  • 「画像」を「クリック」で「入れ替える」。
  • 「テキスト」を「マウスオーバー」で「フェードアウトさせる」。
  • 「背景画像」を「マウスアウト」で「表示する」。

どうでしょう。感覚はつかめましたでしょうか。それでは、具体的な指定をしていきたいのですが、jQueryには必ず書かなければいけない基本形があります。

それがコチラ。

$(function(){
  // ここにプログラムを記述
});

この記述は、「htmlを読み込んでから処理を実行する」という意味です。詳細は省きますが、jQueryの指定に必要な記述ですので、忘れないようにして下さい。

1.「要素」を選ぶ

要素を選ぶ記述を、通常「セレクタ」と呼びます。cssを使える人にはピンとくるのではないでしょうか？
このセレクタにもいろんな種類がありますが、基本となるいくつかをご紹介します。

idセレクタ


<p id="test"><a href="javascript:;">idセレクタで指定をしています。ココをクリックすると文字が変更されます</a></p>


$(function(){
  $('#test').click(function () {
    $(this).text("クリックされました");
  });
});




classセレクタ





<p class="test"><a href="javascript:;">classセレクタで指定をしています。ココをクリックすると文字が変更されます</a></p>




$(function(){
  $('.test').click(function () {
    $(this).text("クリックされました");
  });
});




要素セレクタ





【pタグのみに実行されます】
<p><a href="javascript:;">（これは、pタグ）ココをクリックすると文字が変わります</a></p>
<div><a href="javascript:;">（これは、divタグ）ココをクリックしても何も起こりません</a></div>
<ul>
  <li><a href="javascript:;">（これは、liタグ）ココをクリックしても何も起こりません</li>
</ul>




$(function(){
  $('p').click(function () {
    $(this).text("クリックされました");
  });
});




子孫セレクタ





【divの中のpタグのみに実行されます】
<div><p><a href="javascript:;">（divの中のpタグ）ココをクリックすると文字が変わります</a></p></div>
<p><a href="javascript:;">（ただのpタグ）ココをクリックしても何も起こりません</a></p>




$(function(){
  $('div p').click(function () {
    $(this).text("クリックされました");
  });
});




2.「実行タイミング」を選ぶ


実行タイミングを選ぶことに相当するものを通常「イベント」と呼びます。

このイベントも様々な種類があります。


クリックイベント





<p><a href="javascript:;">これはクリックイベントです。ココをクリックすると、テキストが変更されます。</a></p>




$(function(){
  $('p').click(function () {
    $(this).text("クリックされました");
  });
});




マウスオーバーイベント





<p><a href="javascript:;">これはマウスオーバーイベントです。ココをマウスオーバーすると、文字が変更されます。</a></p>




$(function(){
  $('p').mouseover(function () {
    $(this).text("マウスオーバーしました");
  });
});




マウスアウトイベント




<p><a href="javascript:;">これはマウスアウトイベントです。ココをマウスアウトすると、文字が変更されます。</a></p>




$(function(){
  $('p').mouseout(function () {
    $(this).text("マウスアウトしました");
  });
});




3.実行する処理を書く


ここで何をするかが重要です。

色を変えたり、形を変えたり、位置を移動させたり…アナタの頭の中にはどんな処理を考えていますか。


ここでは、簡単なDEMOを用意しました。

ここまで見て下さった方は、何がどのようになっているかが、おぼろげながら分かるのではないでしょうか。


1.テキストボックスの色を変更する


See the Pen インプットの背景変更 by wkkk (@wkkk) on CodePen.




2.マウスオーバーでdivの背景色を変更する


See the Pen divに背景をつける by wkkk (@wkkk) on CodePen.




3.マウスオーバーでdivをフェードアウトする


See the Pen GoBVXP by wkkk (@wkkk) on CodePen.




4.クリックで新しいdivを作り出す


See the Pen divを新しく創りだす by wkkk (@wkkk) on CodePen.




5.クリックでdivの幅と高さを変更する


See the Pen 高さと幅を変更 by wkkk (@wkkk) on CodePen.




6.クリックでclassの付け替えをする


See the Pen classのつけかえ by wkkk (@wkkk) on CodePen.




最後に


さてどうだったでしょうか。かんたんな説明でしたが、jQueryに興味を持ってもらえましたでしょうか。こういったものは何事も実際に手を動かすことが重要です。

まさに「習うより慣れろ」ですね！


今回を機にjQueryを覚えて、自分の強みを見出しましょう。

この記事がその足がかりになれば幸いです。



        


        
        



  このページのタイトルとURLをコピーする



        

          

            

                              前の記事へ
                          

            

              一覧に戻る
            

            

                              次の記事へ
                          

          

        

      
      

      

  

    

      
        おすすめの記事はこちら
      
    

    
  



    


    

      

  

    

      

        
        
      

    

  


  

    
      運営会社 ウェブ企画パートナーズ 東京都を中心にウェブマーケテイング支援を行っている会社です。ホームページ制作からSEO・リスティング広告まで幅広くサービスをご提供。
    
  


  

    
      「成果の仕組み」をつくるホームページ制作サービス ウェブ企画パートナーズ
    
  


  

  

    
      人気の記事
      Ranking
    
  


  

    



    

  
  1. 
    
      
        
      
      VSCodeでの文字化け問題の解決方法まとめ
    
  
    2. 
  
  
  2. 
    
      
        
      
      CSSを使って縁取り文字を表現する方法 (デザインサンプル付き)！見出しのデザインの幅を広げる!!
    
  
    3. 
  
  
  3. 
    
      
        
      
      FontAwesomeでアイコンが□（四角）になって表示されない場合の対策まとめ（:after:before利用時）
    
  
    4. 
  
  
  4. 
    
      
        
      
      【運送業・物流会社】おしゃれ・かっこいいホームページデザインまとめ！制作時にアピールするポイントは？
    
  
    5. 
  
  
  5. 
    
      
        
      
      初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！
    
  
    6. 
  


  


  

    
      カテゴリから記事をさがす
      Categories
    
  


  

    
  


  

    
      業界震撼 今だけ初期費用0円で「検索連動型広告」が始められます
    
  


  

    
      毎週1回以上更新中！
    
  


  

    
    
公式Facebook、Twitterから
情報を受け取る

    
    
  



    

  


  

  

    

      

        CONTACT
      

      
Webサイト制作のご相談やご質問、ご不明点などございましたらこちらよりお問い合わせください。
「ホームページ制作について」とお伝えください。担当者におつなぎいたします。

    

    

      

        オフィス一覧へ
        
受付時間｜9:00～18:00(土・日・祝除く)

        
※お電話にてお問い合わせの際はオフィス一覧からお近くのオフィスにご連絡ください

        
※全国対応

        
      

      

        ご相談・お問い合わせフォーム
      

    

  




  

    

      

        

          ホームページ無料診断
          毎月10社限定
        

        
ホームページ制作のプロがユーザビリティ・SEO・競合などを多角的に分析し、
具体的な改善案をご提案します。

        無料診断する