【Progate】jQueryでサイトに動きをつけたい(2)【プログラミング学習】

 

こんにちは、やまぴー(@Astro8754)です。

 

「俺のプログラミング(おれぷろ)」、第9回目の更新です。

 

 

前回は「プログラミング学習の計画」について、番外編っぽく書きました。今回は「jQueryの学習記録」について書いていこうと思います。

 

使った教材はお馴染みのProgateでして、「初級編→中級編→道場コース→上級編」の順に2周ずつ学習しました。

 



 

jQuery学習前の状況(初心者です)

 

主な学習状況は、以下のようなイメージです。

 

【HTML / CSS】 Progateを全2周、Udemyでフルスタック・Webエンジニア講座を受講、ドットインストールを1周

【JavaScript】 Progateを全2周、Udemyでフルスタック・Webエンジニア講座を少し受講、ProgateでReact.jsを1周

 

その他、アウトプットとしてポートフォリオサイトの制作をしています。その過程においてもHTML / CSS / JavaScript をググっており、インプットになっています。

 

上記の知識ではサイト制作をした際に物足りなさがあったため、サイトに動きをつけられるjQueryを学ぼうと思いました。

 

jQueryとは?

 

そもそもjQueryとは?という話ですが、Webサイトに効果やアニメーションを実装できるJavaScriptのライブラリです。

 

クリックすると表示が変わる設定だったり、登録ボタンを押したら登録フォームが出てきたり。

 

当ブログを例に言うと、トップページのヘッダー部分にある「pick up」スライドなどは、jQueryで作れます。

 

jQueryはこのようにサイトに動きをつけられる言語です!

 



 

ProgateでjQueryを学習した感想

 

そこまで難しさは感じませんでした。Progateが初心者用サービスだからかもしれませんね。それでも、自力で実装することはできそうだと感じています。

 

そもそも、JavaScriptを少し学んでいれば、覚えるべき文法も多くないです。「メソッド」と呼ばれる仕組みによって、jQueryオブジェクトを操作することの繰り返しです。

 

Progateでも、実際のサイトを作りながらいろんな種類のメソッドを使う練習をしていきます。

 

(このフリー素材はjQueryですね!)

 

ちなみに、Progateのコースを修了するのに割と時間がかかりました。

 

標準修了時間として、合計10時間40分かかるそうですが…。正直、やる気の波が引いていたためダラダラと進めてしまいまして、何時間かかったか分かりません。

 

反省です。

 

とはいえ、2周目は早く進んだ気がします!

 

ProgateでjQueryを学習する際の注意

 

jQueryのレッスン一覧を開くと、「jQueryレッスンを受講する前に、「ES5(旧版)」を受講することをおすすめします。」と書かれています。

 

ただ、僕は最新版のJavaScript (ES6)を勉強した身なのですが、講座を受け終わって今のところ問題なしです。

 

例えば、ProgateでJavaScript (ES6)を勉強した際、変数の宣言といえば “ let ” でした。一方で、jQueryのレッスンでは “ var ” で宣言します。

 

この程度の差なので、jQueryのためにES5を学び直す必要はないと思います!

 



 

jQueryを学んでサイトに動きをつけたい(まとめ)

 

今回は、jQueryの学習記録を2回に渡って残しました。

 

個人的にjQueryは楽しかったです。覚えることが少なく、サイトに動きをつけるというクリエイティブな要素が多かったからですかね。

 

JavaScript自体はぶっちゃけ面白くなかったのですが、ライブラリ言語は割と楽しいです。

 

僕には1円も入りませんが、仏の精神でProgateのリンクを貼っておきます。(Progateのアフィリエイトリンクってないのかな…。笑)

 

Progate 「Progate」トップページより画像引用 

 

最近のブログに関してはぶっちゃけ手抜きな感じですが、引き続き更新できればと思います。

 

フロントエンドをある程度勉強してきたので、サーバーサイドも使えるようになり、まずはフルスタックエンジニアに近づきたいですね!

 

最後に参考記事のリンクを載せておきます。

 

 

やまぴー
Have fun!