INDEX
目次
1. jQueryとは
jQueryとはJavaScriptを活用して作成されたライブラリです。
主にWEBサイトに対してアニメーションや動きをつけるために使われます。
主にWEBサイトに対してアニメーションや動きをつけるために使われます。
a. jQueryのメリット
- コードの量が短縮できて簡単に動作させられる。
- 依然としてWEBサイトに動きをつける目的で使用頻度が高い。
b. jQueryのデメリット
-
JavaScriptに比べてWEBサイトの動作が重くなってしまう。
- ただ基本的に動作スピードにおいてjQueryがネックになることは少ないです。 まれに案件によってはjQueryが禁止でJavaScript限定のものがあるので、その場合はJavaScriptで行いましょう。
-
JavaScriptの理解がないままjQueryだけ使っていると応用が効かない。
- jQueryはあくまでJavaScriptで作られたライブラリにすぎません。より応用を効かせるためにはJavaScriptが必要なケースもあります。
2. 学習のステップ
JavaScriptの基本だけ押さえてからjQueryを学んでいきましょう。
3. JavaScript基本
a. 使用教材
JavaScript | プログラミングの入門なら基礎から学べるProgate[プロゲート]
![JavaScript | プログラミングの入門なら基礎から学べるProgate[プロゲート]](https://cdn.clipkit.co/clipkit/images/thumb/missing.png)
JavaScript (ES6)コースのレッスン一覧ページです。JavaScriptは多様な可能性を秘めたフロントエンド言語です。このページでは、最適な学習順序やレッスンに関する概要を確認することができます。
以下のレッスンを行いましょう
- ES5(旧版) JavaScript I
- ES5(旧版) JavaScript II
- ES5(旧版) JavaScript III
- ES5(旧版) JavaScript IV
ES6ではなく、ES5であることに注意しましょう！jQueryを学ぶにはES5があれば十分です。
4. jQuery 基本編
a. 使用教材
jQuery | プログラミングの入門なら基礎から学べるProgate[プロゲート]
jQueryコースのレッスン一覧ページです。jQueryは効果やアニメーションを実装できるJavaScriptライブラリです。このページでは、最適な学習順序やレッスンに関する概要を確認することができます。
以下のレッスンを行いましょう
- ES5(旧版) jQuery初級編
- ES5(旧版) jQuery中級編
- ES5(旧版) jQuery中級編 道場レッスン
- ES5(旧版) jQuery上級編
jQueryは覚えることはそこまで多くありません。どんどん慣れていきましょう。
5. jQuery 中級編
a. 使用教材
jQuery標準デザイン講座 | 神田 幸恵 |本 | 通販 | Amazon
Amazonで神田 幸恵のjQuery標準デザイン講座。アマゾンならポイント還元本が多数。神田 幸恵作品ほか、お急ぎ便対象商品は当日お届けも可能。またjQuery標準デザイン講座もアマゾン配送商品なら通常配送無料。
プロエンジニア推奨理由
1. jQueryで実装できるあらゆるパーツが網羅的に解説されている
2. 一冊手元にあると、ほとんどのjQueryで実装できるものに対応できて安心
2. 一冊手元にあると、ほとんどのjQueryで実装できるものに対応できて安心
b. 書籍の概要
HTMLとCSSを一通り学び終えたが、JavaScriptやjQueryに本格的に触れるのは初めてという学習者に最適のjQuery学習書です。
全7Chapter・30レッスンで構成されており、はじめは易しいものから徐々に難易度を上げた実践練習ができるようになっています。
全7Chapter・30レッスンで構成されており、はじめは易しいものから徐々に難易度を上げた実践練習ができるようになっています。
c. 書籍の位置付け
Progateで一通り身につけた知識の復習・整理、さらなる発展のために取り組みます。
Chapter1でjQueryそのものについての理解、Chapter2でProgateで学んだ文法の復習ができます。メソッドごとにわかりやすくまとまっていますので、学習が進んで迷った時などに見返してください。
Chapter3以降では、実際のWEBサイトでも頻繁に使用されるサンプルを制作しますので、今後実戦の場に出てからの復習にも最適です。
Chapter1でjQueryそのものについての理解、Chapter2でProgateで学んだ文法の復習ができます。メソッドごとにわかりやすくまとまっていますので、学習が進んで迷った時などに見返してください。
Chapter3以降では、実際のWEBサイトでも頻繁に使用されるサンプルを制作しますので、今後実戦の場に出てからの復習にも最適です。
d. 書籍の進め方
前半（Chapter1〜2）部分
Progateの復習にあたるので、読み進めるだけでも大丈夫です。
新しく学ぶ部分や必要と感じた部分は、VSCodeに実際に打ち込んで結果を確認してみてください。
ここでは、Progateで学習したときに理解しきれなかったところを消化し切る気持ちで取り組みましょう。必要に応じてProgateの該当スライドを見返すのも効果的です。
新しく学ぶ部分や必要と感じた部分は、VSCodeに実際に打ち込んで結果を確認してみてください。
ここでは、Progateで学習したときに理解しきれなかったところを消化し切る気持ちで取り組みましょう。必要に応じてProgateの該当スライドを見返すのも効果的です。
後半（Chapter4〜7）部分
ここからは実際にVSCodeで手を動かして進めてください。学習用サンプルファイルをダウンロードし、該当Chapterの該当レッスンのフォルダを開いて作業しましょう。（※新規フォルダの作成は不要）
HTML・CSSのコード、img内の画像はあらかじめセットされています。ご自身で編集するのは「js」フォルダ内の「script.js」というファイルのみです。
完成見本フォルダのHTMLファイルをブラウザで開き、完成見本と作業中のページを見比べながら作業を進めていきます。
まずは指定したレッスンに取り組んでみましょう。その上でもっと学びたい場合は他のレッスンで気になるものについても積極的に制作してみましょう。
HTML・CSSのコード、img内の画像はあらかじめセットされています。ご自身で編集するのは「js」フォルダ内の「script.js」というファイルのみです。
完成見本フォルダのHTMLファイルをブラウザで開き、完成見本と作業中のページを見比べながら作業を進めていきます。
まずは指定したレッスンに取り組んでみましょう。その上でもっと学びたい場合は他のレッスンで気になるものについても積極的に制作してみましょう。
e. やるべき17レッスン
全部実施していてもキリがないので、以下の17レッスンについてはよく使うものなのでやってみると良いでしょう。
- 1. jQueryの概要
- 2. jQueryの導入
- 3. jQueryの文法
- 4. JavaScriptの基本
- 5. トグルメニュー
- 6. アラートボックス
- 7. ビューアー
- 8. タブ
- 9. ドロップダウンメニュー
- 10. フローティングメニュー
- 11. LightBox風モーダルウィンドウ
- 19. アコーディオンパネル
- 23. スライドメニュー
- 26. メニューのハイライト
- 27. スライドショー(横スクロール)
- 29. スライドショー(フェードイン / アウト)
- 30. カウントアップゲーム
6. jQueryのプラグインを学ぼう01 ~Slick
a. 代表的なプラグインである 「Slick」を使ってみよう
サイトに沿ってSlickを使ってスライダーを実装してみましょう
slick sliderの使い方からカスタマイズまで【スライダープラグイン決定版】 | 東京のホームページ制作 / WEB制作会社 BRISK
「スライダーを実装したい！」「でも何を使えばいいの？」という方に朗報です。 この記事ではスライダーを作成するプ
b. 課題
- Slickの使い方～導入編～（※Slickはローカルにダウンロードしましょう。）
- Slickの使い方～実践編～
- Slickの使い方～カスタマイズ編～ （※カスタマイズの前に、slick-theme.cssを入れてからやりましょう。）
Slickのカスタマイズしたソースコードはこちらのzipファイルに格納されています。考えてもわからなかったら、こちらをダウンロードして参考にしましょう！
https://drive.google.com/file/d/11RIj0M_CMV31Aew5h4nfugUJi6ZB9qAT/view?usp=sharing
7. jQueryの他のプラグインを知る 02
a. 使用教材
jQueryプラグイン78選。種類別一覧まとめ - Workship MAGAZINE(ワークシップマガジン)
JavaScriptをより簡単に実装するためのライブラリであるjQuery。JavaScriptのライブラリがまだ少なかった頃から存在し、さまざまなフレームワークの基礎となっています。 今回は、jQueryのプラグインをジャンル別に78個ご紹介します。 フォーム作成用プラグイン、検索窓のオプションをつけるプラグイン、バリデード機能をつけるプラグインなど、種類はさまざま。Bootstrapに対応しているjQueryプラグインも多数記入してあるのでぜひチャックしてください。
上のサイトでは78選のjQueryのプラグインが紹介されており、一度目を通しておくと良いでしょう。
実務においては、プラグインを使えば開発が効率化できる場合は積極的に使うと良いでしょう。
実務においては、プラグインを使えば開発が効率化できる場合は積極的に使うと良いでしょう。
b. 実務の進め方
- 実現したい要件を明確化
- 検索して適切なプラグインがないか検討
- プラグインで実現できない場合、自分でjQueryもしくはJavaScriptで実装