ProgateでjQueryコースをやってみた
ProgateのjQueryコースをやってみました！Javascriptコースよりも難しくて現在も苦戦中です。
前回のJavaScriptコースの感想はこちらです。
苦戦してはいますが、動いた時は、「数文字しかコード書いていないのにすごい動きする！」と感動しました。演習がどうしてもクリアできない時は、最終手段の”解答を見る”ということもできますので、プログラミングに自信がないという人も楽しんでできるコースではないかと思います。
今回の記事では、「Progate/jQueryコースの紹介」「jQuery基礎知識」「覚えたメソッドまとめ」「jQueryコース感想」を書いていきます！
Progate/jQueryコースの紹介
jQueryコースは、全5項目に分かれており、一応、修了総時間は14時間40分です。私は、ケアレスミスが多くて修了時間を大幅にオーバーしながら進めております。落ち着いて学習したことを思い出しながら演習ができれば修了時間内に収まる内容だとは思います。
コース内容は、初級編からだんだん難しくなってきて、最後の実践コースでは今までやったこと+αの内容になっています。+αとは、コースの中で学んでこなかったメソッドを自分で調べながらコードを組んでいくという実践的な演習が待っています。
初めは、「やってないことも出てくるの？！」と驚きましたが、実際のサイトにjQueryを使っていくことを考えた時、分からない箇所は自分で調べていく必要があるので、そのことも想定して作られているんだと感心しました。実践コースの説明にもそのようなことが書いてありますね。
JavaScript と jQuery コースを始める前に
ここで、JavaScript? jQuery? な時に調べた中で、比較的わかりやすかった記事を紹介。
ProgateのJavaScript と jQuery コースを始める前にこの2つを読んだことで、これから学習しようとしているものは何かをなんとなく理解し、心構えができたのでここで紹介しておきます。
記事も短くて、分かりやすく端的にまとめられていたので、集中力なの無い私でも読みやすかったです。
jQuery基礎知識
CDNに設置されたjQueryを読み込む
CDN（Contents Delivery Network）とは、ファイルや画像といったWEBコンテンツをインターネット経由で配信するために最適化されたネットワークのことで、jQueryファイルもCDNに設置されています。
jQueryを読み込むには、下記のような記述をhtmlファイル内のheadタグの中に記述します。
例）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
bodyダグ終了直前にscriptファイルを読み込む
scriptファイルは、htmlファイル内のどこからでも読み込めますが、JavaScriptを読み込んでからHTMLが読み込まれると、画面の表示速度が遅くなってしまう可能性があるため、bodyダグ終了直前に読み込む必要があります。
例）
<body> //..........省略........ <script src="ファイル名"></script> </body>
jQueryで処理を書く前の決まりごと
jQueryで処理を書く前に、その処理内容を下記記述で囲む必要があります。
(document).ready は省略することができるので、一般的には省略版が使われています。
通常版
$(document).ready(function(){
//処理をここに書く
});(document).ready省略版
$(function(){
//処理をここに書く
});jQueryオブジェクトとメソッド
jQueryオブジェクト
jQueryオブジェクトとは、こんな感じのものです。
$('セレクタ')日本語で「対象・物」のことです。つまり、jQueryで操作ができる対象（データ）のことを「jQueryオブジェクト」と言います。
メソッド
$('セレクタ').メソッド(引数);メソッドとは、「機能」という意味です。ここでいうjQueryオブジェクトに付加する機能をさします。例えば、jQueryオブジェクトに「非表示にする」などの機能をつけることで動きをつけることができます。
引数を指定すると、より詳しい機能設定等を指定することができます。jQueryライブラリに対してこちらから渡すことのできる値のことです。
メソッドチェーン
$('セレクタ').メソッド().メソッド()...;一つのjQueryオブジェクトに複数のメソッドを繋げることも可能です。
jQueryオブジェクトの変数化
var $変数名 = jQueryオブジェクト;
変数名の頭に"$"をつけるのが慣例。
インデックス番号
jQueryオブジェクトには、インデックス番号というものが割り振られています。
例えば、＜lo＞要素内にある＜li＞をオブジェクト化したら、一番初めの＜li＞要素には"0"が割り振られ、次の要素には"1"が割り振られます。
インデックス番号は"0"から初まるので注意が必要です。
覚えたメソッドまとめ
消える系/現れる系
- hideメソッド
- $('セレクタ').hide();
- 要素を隠す。
- showメソッド
- $('セレクタ').show();
- 隠れた要素を表示。
- fadeOutメソッド
- $('セレクタ').fadeOut(値);
- だんだん薄くなって消える。
- fadeInメソッド
- $('セレクタ').fadeIn(値);
- だんだん現れる。
- slideUpメソッド
- $('セレクタ').slideUp(値);
- 下から上に向かって消える。
- slideDownメソッド
- $('セレクタ').slideDown(値);
- 上から下に向かって現れる。
イベント系
clickイベント
クリックした時に処理が実行される。
$('セレクタ').click(function(){
//処理
});"submitイベント
フォームが送信されたときに処理が実行される。submitイベントを用いると、送信ボタンがクリックされたときだけでなく、「Enter」キーでフォームが送信された場合もイベントが発生する。
$('セレクタ').submit(function(){
//処理
});"hoverイベント
マウスをのせた時の処理、 マウスをはずした時の処理を指定。
$('セレクタ').hover(
function(){
//マウスをのせたとき
},
function(){
//マウスを対象からはずしたとき
});HTML/CSSを書き換える
- cssメソッド
- $('セレクタ名').css('プロパティ名', '値');
- CSSを書き換える。
- textメソッド
- $('セレクタ').text('書き換える文字列');
- HTMLのタグ内のテキストを書き換える。
- $('セレクタ').text();
- 引数を空にすると、テキストを取得することができる。
- htmlメソッド
- $('セレクタ').html('<タグ名>書き換える文字列');
- HTMLのテキストをタグも含めて追加できる。
- addClassメソッド
- $('セレクタ').addClass('クラス名');
- クラス名を追加。
- removeClassメソッド
- $('セレクタ').removeClass('クラス名');
- クラス名を削除。
- attrメソッド
- 第一引数に属性名、第二引数にその属性値を指定することで属性をセット。
- $('セレクタ').attr('属性名', '属性値');
- 第二引数を指定しない場合は、その属性の値を取得。
- valメソッド
- $('セレクタ').val();
- inputタグに入力されている値を取得。
- selectタグの選択中の値（optionタグのvalue属性の値）を取得することもできる。
- inputタグに値をセットすることもできる。
- $('セレクタ').val('文字列');
探す系
- findメソッド
- $('親セレクタ').find('.処理したいセレクタ').メソッド();
- すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得。
- childrenメソッド
- $('親セレクタ').children('処理したいセレクタ').メソッド();
- 指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得。
- hasClass
- $('セレクタ').hasClass('探したいクラス名')
- 引数に指定したクラスを、オブジェクトが持っているか判定するときに使用。オブジェクトがそのクラスを持っていればtrue、持っていなければfalseを返す。※探したいクラス名の前には”.”をつけないこと！
- 子セレクタの指定方法はCSSと同じ
- $('親セレクタ 子セレクタ')
- イベント発生した要素を取得
- $(this).メソッド();
親要素取得系
parentメソッド
$(‘セレクタ’).parent();
1つ上の階層である「親要素」を取得することができる。
parentsメソッド
$(‘セレクタ’).parents();
複数の階層構造内に配置された要素に対しての、全ての親要素を取得。
セレクタ指定することで特定の親要素だけを取得することもできる。
closestメソッド
$(‘セレクタ’).closest(セレクタ);
親要素内にある特定の要素を取得。
指定した要素が見つかるまでどんどん親要素をさかのぼっていく。
ただし、指定した要素が2つ以上ある場合に、対象となる要素から一番最初に合致した要素を1つだけしか取得しない。
アニメーション系
animateメソッド
$('セレクタ').animate({
'プロパティ': 値
}, 時間);アニメーションをつける機能。引数は連想配列で指定。
2つ目の引数でアニメーションの時間を設定。時間はミリ秒で指定するか(単位はつけない)、'slow'や'fast'といった文字列で指定。
scrollTopメソッド
$('html, body').scrollTop(値);ページ内リンクをjQueryで実装する機能。jQueryで実装するとリンク先への移動にアニメーションをつけたりすることが可能。ページ最上部から 値px の位置に移動することができる。
scrollTopは通常 $('html, body') に対して用いる。
※
$('htm').scrollTop(値);
$('body').scrollTop(値);
と書いてもOK。
距離測る系
offsetメソッド
$('セレクタ').offset();要素の表示位置を取得できる。
連想配列の形で返ってくる。
例）{ top: 〇〇, left: 〇〇 }"
ページの上端からセレクタまでの距離だけを取得することもできる。
$('セレクタ').offset().top;
インデックス系
セレクタ内の指定したインデックス番号の要素を取得。
$('セレクタ').eq(インデックス番号);
要素aの中の指定したオブジェクトbのインデックス番号を取得。
$('セレクタa').index($('.セレクタb'));
要素の前後と数
- prevメソッド
- $('セレクタ').prev();
- jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から一つ前の要素を取得。
- nextメソッド
- $('セレクタ').next();
- jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から一つ後ろの要素を取得。
- lengthメソッド
- $('セレクタ').length;
- jQueryオブジェクトの要素の個数を取得。
感想
まだ全てクリアしたわけではないですが、jQueryコースは基礎的な動きを全て網羅しているように感じたのでこれから学習するという人にオススメしたい内容になっていました。
一通りやってみて、他のWebサイトをみたときに「jQueryだったらこのメソッドを使ってるのかな」と少しイメージできるようになりました。
このコースを一通り終えたら、まだやったことないコースにもチャレンジしてみたいと思います！
個人的には、普段Scssを使うのでScssコースがあったらやってみたいなと思ったのですが、Saccコースしかなかったのが残念です。なので、PHPあたりをやってみたいなと考えています。
