jQueryは時代遅れの技術である
この記事はWebデザイナーを目指すみなさんのために、jQueryの技術についての情報を提供します。
しかし、そんなみなさんに知っておいて欲しい。
jQueryは現在時代遅れの技術だと言われています。
jQueryはとても簡単なのですが少しクセがあるため、いまから学ぶとここで学んだ内容が今後の学習で邪魔になってくる可能性があります。
めちゃすごいエンジニアになるのだ！という方はjQueryでの学習はほどほどに、Vue.jsやReact.js等の技術の学習に舵をきって時間を使っていくのをおすすめします。
とはいえ「jQueryだけでも十分」という視点もある
大規模なWebアプリであれば「jQuery」を採用しない方がよいと言われています。
ここでは詳しく触れませんが、根本的な設計思想の点で大きな差があるため、それはその通りだと思います。
しかし、小規模なサイト制作や、本当に簡単なアプリ制作ではどうでしょうか。
Webサイトで必要となるJavaScriptはある程度パターン化できます。
- スライダー（カルーセル）
- ページ内スクロール時のアニメーション
- スマホサイトのハンバーガーメニュー（ドロワーメニュー）
- ドロップダウンメニュー（一部を隠して詳細を見るボタン）
- タブ
- パララックスアニメーション
こんなところです。
上記のような仕組みを採用するのに「Vue.js」「react」は不要でしょう。
そうなると素のJavaScriptで書いていくわけですが、だったら簡単なjQueryを使っても良いのではないでしょうか。
運用が簡単というメリットもある
しかし他のライブラリの場合はバージョンアップするたびに使い方が変わるケースが多いです。
そして、jQueryは非常に簡単に導入ができますが、Vue.jsやReactは導入に専門知識が必要となります。
そうなると、例えば古いサイトがvue.jsやReactで作られていた場合、作っていた際の環境を再現する必要がありますがそれは実質的に不可能に近いと言えます。
作ったら作りっきりで、後から修正するのが難しいのです。
しかし、10年前のjQueryのコードを今見ても編集できると思います。
これは大きなメリットといえます。
そういったことをメリットとしている制作会社は多くなく、大抵の場合、最新技術＝正義になっていることが多いでしょう。（技術好きのエンジニアが採用する技術を決めますからね。）
jQueryを今学ぶ意味
時代遅れかも？という話は10年ほどまえからされています。
シェアはさがりつつも今も使われているのは「結局便利だから」ということに尽きるでしょう。
プログラミング入門として学ぶ
また、プログラミングを学ぶ入門として学ぶのもいいでしょう。
小学生などが学ぶ言語/ツールとして「scratch」がありますが、その次の段階としてHTML/CSSとともにjQueryを学ぶのも悪い選択肢ではないと考えます。
もし物足りなくなったら卒業して、他の言語を学べば良いのです。
1から作っている感があって楽しい
プログラミングにおいては「車輪の再発明」という概念があります。
現代社会において、車輪は世の中にたくさんすでにありますよね。
自転車屋さんに行けば自転車の車輪は購入して利用することができます。
プログラミングしていると車輪の仕組みを1から考えて、もう一度自分で作ることができてしまいます。これはあまり価値のないことに多大な時間を使ってしまっていることになります。
このようなことをしないために「車輪の再発明はするな」というのがプログラミングにおいての基本的概念です。
車輪のように、すでに世には便利なツール/ライブラリが存在しておりそれを活用することができるのです。
それをうまく活用し、組み合わせることがプログラミングにおける良い行動となります。
だけど思うのです。
もう一度車輪を発明したっていいじゃないと。
車輪の再発明はビジネス的には無駄ですが、作ること自体は楽しいのです。
jQueryが時代遅れといわれるのは「ビジネス的に」という話でしかありません。
個人で楽しむための言語としては、とても直感的で楽しい言語であると思います。
（逆にいうとその他の新しいライブラリは「設定」をして活用するというイメージが強いです）
そんな思いに共感する気持ちがわずかでもあったのなら、さあ学びを始めましょう！
まずは作業環境を整えよう
上記の記事に必要なpc環境やアプリケーションの説明があります。
環境を整えたらいよいよ作業開始です。
エディタの使い方に慣れる&HTMLとCSSの学習
この記事でエディタの使い方に慣れましょう。
HTMLとCSSの使い方の記事は上記にありますので、そちらからやってみるのも良いと思います。
とりあえずjQueryが触ってみたいという場合も支障はないと思います。
その場合は次の項目に進んでください。
jQuery学習の流れ
学習は次の手順で行います。
それぞれ別の記事で解説していきます。
初級
- ボタンをクリックして要素を非表示にする（jQuery）
- 入力されたテキストをリアルタイムで表示する（jQuery）
- リストに項目を追加するボタンを実装する（jQuery）
- TOPボタンへ戻る際のアニメーション（jQuery）
中級
- 要素の色をクリックで変更する（jQuery）
- マウスホバーで要素の表示/非表示を切り替える（jQuery）
- チェックボックスの状態に応じてテキストを表示/非表示にする（jQuery）
- ドロップダウンメニューの選択によって画像を切り替える（jQuery）
- スマホドロワーメニュー（jQuery）
- ドロップダウンメニュー（jQuery）
上級
- クリックで画像をスライドショーにする（jQuery + SlickまたはSwiper）
- 入力エラーを表示するフォームを作成する（jQuery）
- クリックで複数のタブを切り替える（jQuery）
- スライダー（jQuery + SlickまたはSwiper）
