2016.12.05

脱jQuery初心者！コピペに頼らないプログラミング入門講座～その1～

こんにちは。三浦です。
気が付けばもう１２月ですね。２０１６年も残り一か月です。
皆さん年内にやり残したことはありませんか？
「２０１６年はjQueryのコードを自前で書く勉強をはじめようと思っていたのに先延ばしにして結局手つかず」なんて方もいるんじゃないでしょうか。いますよね？きっといるはずです！それなら今から始めましょう！

ということでこれから数回に渡ってjQuery初心者の方がちょっとしたコードの記述ができるようになるためのアレコレを紹介していこうと思います。
対象としている人は、
「jQueryのプラグインは利用しているけど自分では書けない」
「HTML、CSSでコーディングはできるけどjQueryも使えるようになりたい」
そんな方です。
jQuery本体の読み込み、コードを記述しはじめるまでの作業は今回割愛させて頂きます。

簡単な記述からはじめよう

まずは下記をご覧ください。

RESULT
HTML
CSS
JS

吾輩は猫である

コピー


<p class="neko">吾輩は猫である</p>

コピー

.neko {
  color: #333333;
  font-size: 14px;
  line-height: 160%;
}

コピー


    $(window).load(function(){
      $('.neko').css('color', '#FF4D4D');
    });

    $(window).load(function(){
      $('.neko').css('color', '#FF4D4D');
    });

上記はページのロード時にclassに”neko”が付与されている要素の文字色を#FF4D4D（赤）に変更する処理です。

jQueryで記述を行う際の基本的な考え方

いつ、どんな時…
ページロード時、クリック時、マウスオーバー時、などなど

どんな場合…
何らかの数値が大きい場合、小さい場合、class”hogehoge01″の場合、class”hogehoge02″の場合、などなど
（「どんな場合」についての詳しい説明は今後の講座で行いたいと思います。）

どこのだれ…
id”hoge”を持つ要素、class”hogehoge”を持つ要素、div、p、などなど

なにをする…
CSSを変更する、要素を見えなくする、要素を表示する、テキストを差し替える、などなど

これらを様々に組み合わせたコードを書いていきます。
jQueryはこのあたりが直感的でわかりやすいですね。

先ほどご覧いただいたコードの場合は

    $(window).load(function(){
      $('.neko').css('color', '#FF4D4D');
    });

・いつ…
ページロード時に…$(window).load(function(){

・どこのだれ…
クラス”neko”を持つ要素の…$(“.neko”)

・なにをする…
文字色を#FF4D4Dに変更する….css(‘color’, ‘#FF4D4D’);

ということになります。

セレクター

「どこのだれ」の部分を今回は$(“.neko”)としましたがもちろんIDも使えます。なので$(“#neko”)でも問題ありません。
これらのことをCSSと同じく「セレクター」といいます。
ほとんど記述の仕方もCSSと同じなのでCSSを使ったコーディングを普段行っている方にはとっつきやすいかもしれません。
なので$(“#neko .koneko”)のような記述もできます。

メソッド

「なにをする」にあたる.css(‘color’, ‘#FF4D4D’);のような要素のことを「メソッド」といいます。
セレクターの後にメソッドを記述することで
「だれ」に「なにをするか」が決まります。

メソッドに関してはメソッドチェーンと言ってひとつのセレクターに対して連続でメソッドを呼び出す方法もあるので覚えておいてください。

メソッドチェーンの例

    $(window).load(function(){
      $('.neko').css('color', '#FF4D4D').css('font-size','15px').css('font-weight','bold');
    });

ちなみに下と上は同じ処理になります。メソッドチェーンを使った上の方が簡単ですね。

    $(window).load(function(){
      $('.neko').css('color', '#FF4D4D');
      $('.neko').css('font-size','15px');
      $('.neko').css('font-weight','bold');
    });

メソッドチェーンとは関係ありませんが.css()を複数のプロパティを設定したい場合に下記のような書き方をしても同じ処理になります。
.css()を複数のプロパティで指定する場合は下記の記述が一般的です。

    $(window).load(function(){
      $('.neko').css({
        'color':  '#FF4D4D',
        'font-size': '15px',
        'font-weight','bold'
      })
    });

以上を踏まえて先ほどのコードにちょっと変更を加えていきましょう。

クリックイベント

下に表示されるclickと書かれたボタンをクリックしてみてください。

RESULT
HTML
CSS
JS

吾輩は猫である

click

コピー


<p class="neko">吾輩は猫である</p>
<p class="btn">click</p>

コピー


.neko {
  color: #333333;
  font-size: 14px;
  line-height: 160%;
}
.btn{
  background-color: #000066;
  border:1px solid #999999;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  width: 160px;
  cursor: pointer;
}
.btn:hover{
  background:#6666A3;
}

コピー


$(function(){
  $(".btn").on("click",function(){
      $(".neko").css('color', '#333333').css('font-size','25px').css('font-weight','bold');
  });
});

clickと書かれたボタンをクリックすると「吾輩は猫である」と書かれたテキストの色、文字の大きさ、文字の太さが変わったと思います。

$(function(){
  $(".btn").on("click",function(){
      $('.neko').css({
        'color':  '#FF4D4D',
        'font-size': '15px',
        'font-weight','bold'
      })
  });
});

記述はこうなっています。どういうコードなのか解説していきます。

・いつ、どんな時…
クラス”.btn”を持つ要素をクリックした時に…$(“.btn”).on(“click”,function(){

・どこのだれ…
クラス”neko”を持つ要素の…$(“.neko”)

・なにをする…

文字色を#333333に変更する…
‘color’, ‘#333333’

フォントサイズをを25pxに変更する…
‘font-size’,’25px’

文字のウェイトを太字に変更する…
‘font-weight’,’bold’

まとめると、ページを読み込んでから、クラス”.btn”を持つ要素をクリックした時に
クラス”neko”を持つ要素の文字色を#333333に、フォントサイズを25pxに変更する、文字のウェイトを太字に変更する。
という処理になります。

これがクリックすることで起こるイベントですね。