Webサイトに動きをつけたくて、ProgateでjQueyを学習しようと思うけど、どれくらいのスキルや何ができるようになるの？
実際にjQueryコースを学習した人の感想を聞いてみたい！
今回の記事では、動的なWebサイトを作ろうとjQueyをプロゲートで学ぼうと思われている方向けに、何が学習できるのか、終わった後にはどんなスキルが身につくのかなどの全体像と、実際にjQueyコースをやってみた感想をご紹介します！
結論から言うと、Webサイトに、アコーディオンや、ハンバーガーメニューなどを実装したい方はProgateのjQueyコースをやれば十分実装可能なスキルが身につきます！
HTML/CSSを学んだ後はjQueyコースを学習するようにしましょう！
- ProgateのjQueyコースの概要がわかる
- jQueyコースを本気でやるとどれくらいのスキルが身につくか分かる
- ProgateのjQueyコースが終わった後にやる事が明確になる
僕自身も、そこまでjQueyは得意ではないですが、書き方さえ覚えれば便利なライブラリやネットの記事を参考にすれば実装できます！
まずは基礎知識を知ろう！
まず始めに、Progateとは何なのか？Progateの効率の良い学習法について、jQueyに関しての基礎知識を知りましょう！
これらをまず始めに知っておくことで、Progateでの学習効率が上がったり、やるべきことが明確になります！
Progate（プロゲート）とは？
Progate（プロゲート）は、「プログラミング学習の入り口」（プログラミングのゲート＝＞プロゲートかな？）とも言える、非常に優秀なオンライン学習サービスで、初学者の多くが利用しているサービスです！
Progateのビジョンとして「初心者から、創れる人を生み出す」ことを掲げており、プロゲートを学習すれば、初心者でも簡単なシステムくらいは自分で作れるようになります。
Progateの特徴としては、以下のことが挙げられます。
- 17のプログラミング言語が学べる
- スライド学習→コーディング学習ができる
- ユーザーインターフェースが高い
- 操作が簡単
- 何か小さなシステムを作る体験ができる
- 基本無料（一部有料980円）
このように、まずはスライドで全体の概要を掴んだ後に、すぐに実践学習に移ることができるので、インプット→アウトプットをすぐに行えます。
jQueyの学習は書く事（アウトプット）が非常に重要なので、効果的です！
プログラミングする際は、ネットでカンニングしてOKなので、Progateを何周もして暗記するのではなく最大でも１〜２周程度で十分です！
「プログラミングはカンニングOK！」この概念を植え付けましょう！
jQueyとは？
jQuey（ジェイクエリ）はJavaScriptをより簡単に、少ないコードで書くためのライブラリというものですす。
JavaScriptは親、jQueyは子というイメージでOKです。
つまり、JavaScriptとjQueyの記述法は似ており、jQueyで実装できることはJavaScriptでも実装可能です。
JavaScriptは複雑なコードだけど、jQueyを使えば、数行でシンプルな記述で実装できるんだね！
jQueyは主にWebサイトに動きを実装する際によく用いられており、アコーディオンやアニメーションなどを実装することが可能です。
→ 【jQuery入門】jQueryとは〜導入まで、初心者向けに使い方を解説
- フェードイン・フェードアウト
- ハンバーガーメニュー
- アコーディオン
- スムーズスクロール
- モーダルの表示
- 入力フォームの操作
- パララックス
- スライダー
このようなことをjQueyでは実装できて、HTML/CSSで作られたサイトに華やかな動きを追加することができます！
最近では、インパクトのあるWebサイトが増えてきており、アニメーションがたくさん沢山あったりしますが、全てjQueyで実装されています！
HTML/CSSだけでもWebサイトは作れますが、あまりクオリティーの高いサイトとは言えません。
ユーザーインターフェースを高めるためにもjQueyは必要です！
ProgateのjQueyコース全体像
プロゲートのjQueyコースの全体像を学習をする前に把握しておきましょう！
- 全4コース（初級〜上級レベルまで）
- 学習時間の目安：10時間
- jQueyでWebサイトに簡単あ動きを実装する
- JavaScriptのスキルがなくても学習できる
- HTML/CSSのスキルは必要
jQueyコースの全体像はこのようになっており、初めに基本的なjQueyの書き方を学んで、実際にWebサイトでもよく用いられている、モーダルやアコーディオンを実装しながらjQueyの知識を深めていきます！
実際に書いたコードによって、Webサイトが動くサイトに変化するので、やっていて非常に楽しいと思います！
JavaScriptと比較してもオブジェクト思考など難しいことは学ばないので、つまづくことなくサクサクと学習を進めれるでしょう！
- jQueyの基本的な書き方
- イベントの使い方
- モーダルの作り方
- アコーディオンの実装
- フォームの操作
- アニメーションの実装
- スムーズスクロールの実装
このように、Web制作でもよく利用するjQueyの用法を網羅的に学習することができます！
ProgateのjQueyコースでどれくらいのスキルが身につく？
ProgateのjQueyコースを本気でやったら、仕事できるレベルまでスキルが身につく？
HTML/CSSのサイトに簡単な動きをつける程度なら、仕事でも十分使えるスキルが身につきます！
実際に、jQueyコースを僕がProgateで一通り学習してみましたが、Web制作で必要なjQueyの使い方はだいたい学べるので、実践でも使えると思います。
jQueyには、プラグインと呼ばれる便利な機能がたくさん用意されており、そのプラグインファイルを読み込む事で、複雑な動きなどを簡単に実装できます！
つまり、仕事の際に「この動きをサイトに実装したいな〜！」となった時はその都度調べて実装すればOKです！
- 今後仕事でも使える基本的なスキル
- 他人のjQueyコードをカスタマイズできる
- プラグインを利用して高度な実装もできる
ProgateのjQueyコースが終わった後にするべき事は？
プロゲートのjQueyコースが終わった後にするべき事は2つで、「jQueyにどんなプラグインがあるのか知る」と「Web制作を実際に行う」の2つです。
jQueyには非常の豊富なプラグインがあり、スピード感を重視するWeb制作の場合は、0からjQueyのコードを書くのではなく、プラグインをインストールして実装する場合が多いです。
jQueyのプラグインを使用すると下記のような高度な動きを実装することが可能です！
- ページ遷移のロード効果
- マウスオーバーのイベント発生によって拡大される画像
- 波紋の効果
- 写真のスライド表示
- 要素の回転アニメーションなど
プラグインは使用しすぎると、ページの読み込みが遅くなるので使うのはほどほどにしておきましょう！
次にやるべきことは、「実際にjQueyを用いてWebサイトを作ってみる」ということです！
最も効果的なのが、jQueyが実装されているWebサイトを模写することと、jQueyを用いた自分のオリジナルのポートフォリオサイトを作ることです。
ちなみに僕が初めて作ったポートフォリオにもjQueyを使用しています！
→ https://hikopro.com/myportfolio/
僕のポートフォリオを真似してjQueyの勉強をしてもらってもOKなので、実際に手を動かして実戦でも使えるjQueyのスキルを身につけましょう！
本気でフロントエンドエンジニアを目指すには？
「Web系の言語を極めてフロントエンドエンジニアになりたい！」「JavaScriptをもっと極めて、さらにリッチなサイトを作りたい！」このように思われる方もいると思います。
そんな方は、プログラミングスクールに行くことをオススメします！
ぶっちゃけ、独学でフロントエンドエンジニアを目指すとなると、ほとんどの方が途中で挫折することになると思います。
プログラミングスクールを活用することで以下のようなメリットがあります。
- プロのエンジニアから教えてもらえる
- 挫折する確率が非常に低い
- 転職、案件獲得サポート付きのスクールがある
- 大規模なシステムを開発しながら学べる
- いつでも質問できる環境がある
テックアカデミーのフロントエンドコースがオススメ！
テックアカデミーのフロントエンドコースは、高度なjQueryを学習して、実務でもよく使うAPIを用いた実装や、チャットアプリ、オリジナルサイトの開発を行うことができます！
このテックアカデミーのフロントエンドコースを受講すれば、フロントエンドエンジニアとして働けるスキルは十分身につきます！
- HTML5/CSS3
- JavaScript/jQuery
- Vue.js
- Bootstrap
- Web API
- Firebase
- サーバーの構築
このようなWebに関することを網羅的に学習できるので、フリーランスとして個人で稼ぐスキルも十分身につきます！
まとめ
プロゲートのjQueryはWebサイトを作りたい人には必須のコースだね！
いかがでしたでしょうかか！
HTML/CSSだけのサイトでは、なんだか味気ないサイトに仕上がってしまうので、もっとクオリティーの高いサイトを作りたい方はプロゲートのjQueryコースを学習すれば十分です！
ぜひこの記事を参考に、jQueryを学習してみてはいかがでしょうか！
