2019年9月5日

2019年9月5日

    初心者向けWebコーディング!よく聞くけどjQueryってなんだろう?

    ヒロタカ

    エンジニア ヒロタカ

    • このエントリーをはてなブックマークに追加
    初心者向けWebコーディング!よく聞くけどjQueryってなんだろう?

    この記事では、Webサイトのコーディングを始めたばかりの初心者に向けてjQueryを解説しています。

    この記事では、Webサイトのコーディングを始めたばかりの初心者に向けてjQueryを解説しています。

    jQueryとは?

    jQueryとは、Javascriptを簡単に書けるように中間に挟む翻訳機のようなものです。
    javascriptで書こうと思うと20行になるような処理を3行で書けるようになる素敵なファイルです。

    jQueryは何に使う?

    TERAでは、jQueryはHTMLソースの動的変更に使うことが多いです。
    「ボタンを押したときに特定のタグにクラスを追加する」などといった処理が可能です。
    もう少し具体的に説明すると、よくあるアコーディオンメニューなどは「dtをクリックしたらddのCSSのなかのdisplayをnoneとblockを書き換える」といった処理で成り立っています。

    jQueryの動かし方

    まずはjQueryを読み込む

    これはCSSなどと同じで、HTMLファイルから読み込んであげれば良いです。

    <script src="/js/jquery.js"></script>
    

    準備

    jQueryを動かすには準備が必要です。
    下記のコードを書く必要があります。HTMLファイル内に記述するときは<script>タグで囲ってやります。

    <script>
    $(function(){
       //ここに処理を書く
    });
    </script>
    

    これは、HTMLの読み込みが終わったら実行してね❤という意味です。

    トリガの指定(待機)

    トリガというのはプログラム用語ですが、ピストルの引き金です。
    「これが行われたら処理をしてください」という部分がトリガとなります。

    $('dt.acodion').on('click',function(){
       //ここに処理を書く
     });
    

    これがトリガです。acodionというクラスがついたdtをクリックされたら、という意味です。

    実行部分

    acodionというクラスのdtがクリックされた時の処理を書く必要があります。ようやくCSSを切り替えられます。

    $(this).next('dd').css('display','block');
    

    $(this)というのは自分のことです。ここではクリックされたdtを指します。
    「クリックされたdtの次のddのcssをdisplay:blockにしてくださいね」と書いてあります。

    まとめ

    全部つなげるとこうなります。

    <script src="/js/jquery.js"></script>
    <script>
    $(function(){
        $('dt.acodion').on('click',function(){
            $(this).next('dd').css('display','block');
        });
    });
    </script>
    <dl>
    <dt>ここをクリックすると開く</dt>
    <dd>最初は隠れているけど開いて表示する部分</dd>
    </dl>

    ありがちなミス

    Javascriptは順番も大事です。
    下記のような場合は動かないこともあります。

    <!--ダメな例:jQueryのファイルを読み込む前にjQueryの命令を実行しようとしている-->
    <script>
    $(function(){
        $('dt.acodion').on('click',function(){
            $(this).next('dd').css('display','block');
        });
    });
    </script>
    <script src="/js/jquery.js"></script>

    この記事に
    「ええね!」する

    1 29
    • このエントリーをはてなブックマークに追加

    名古屋を拠点としたWeb制作会社、株式会社テラ
    TERAの優れたコンサルティング、デザイン
    ネットワークを駆使し
    お客様の抱える問題を即時解決いたします

    TERAについてもっと詳しく

    過去1カ月の人気記事