かるみに

趣味とともに生きる

【Progate】jQueryコース終了!WEBデザインのプログラミングを学ぶならここまでやろう!

f:id:trrun:20170125133116p:plain

 

 

 

HTMLとCSSを学ぶことで、WEBデザインの基本的なレイアウトやデザインが可能になりました。それでも十分オシャレなデザインを作ることが出来るんですが、もっと色々な機能をつけてみたいと欲が出てくるはずです。ナビゲーションバーや目次の項目を押すと自動でスクロールしてページ内の見出しのところまで移動してくれる機能。

 

こういったアニメーションを持たせられるのがJQueryなんですね。Progateのこのコースでは、具体的にどんなことが学べるのかについてお話しします~~

 

jQuery

初級編

 

f:id:trrun:20170125141939p:plain

このコースではjQueryの基本的なルールを学びます。プログラミング言語「jQuery」の記述方法jQueryで実装できる機能の簡単な例が学べます。

例えば…「文字の置き換え」「ボタンをクリックすると文字が現れる」「ボタンにカーソルが触れると色が変わる」といったものですね。

このコースでjQueryの基本的な使い方を学ぶわけですが、ぶっちゃけ何が出来るのか?ってまだピンとこないはずです笑

僕なんて「文字を置き換えたところでどうでもよくね?」って思っていましたし笑

 

そんな不安も次の中級編で払拭です!

 

中級編

f:id:trrun:20170125141956p:plain

jQueryの基礎を活かして更に実践的なデザインを自作できるようになります

 

要するにこんな感じのアニメーション風の機能が作れます。今のWEBサイトでよく見かけるんじゃないでしょうか。

  • リスト1
  • リスト2
  • リスト3

★タイトルをクリックしたら文字が現れるよ

 こういうデザインの制作を通して身近なデザインの構造が理解できるようになります。このコースを終えたころには「clickしたときにclassを追加して…if構文で…」って風に、デザインを作る筋道が立てられるようになります。内容はヘビーですがその達成感がたまらない!

 

上級編

f:id:trrun:20170125143848p:plain

上級編は、更に発展的な内容で実用的な要素を学びます。おしゃれなWEBサイトの多くは導入している機能ばかりを学べるので、作りおわった後の満足感は一番かも!

中級編より更に大変なんだけど、やり終わったときは明らかにjQueryを上手く扱えるようになった自覚が生まれる。何度かどうしても分からなくて「回答」を見たこともあったけど…笑

 

自分の些細な入力ミスとか抜け漏れに気づけるので回答はすごくありがたかったなあ。作っている段階じゃまったく気づかないし…。(class要素の「.」忘れとか)

 

 

実践コース

f:id:trrun:20170125143209p:plain

実践コースは今まで学んだことを自分の力で実践するコースなんだけど、これを通してやっと自分の身に着くスキルが身に着くと思う

 

 

このコースの目玉は何と言っても最後の「カルーセル実装」!カルーセルってこういうものね。画像がスライドショー形式で変化する機能。

getbootstrap.com

 

本コースの集大成だけあって堪らなく難しいんだけど、そこまで真摯に取り組んだら分かる最高のご褒美が待ってる。その価値は、しっかり学んだ人だけが感じ取れるはず!ぜひその目で確かめてほしい!

 

昔の攻略本風に言うと、「その真相は自分の目で確かめてくれ!」 

 

まとめ

jQueryを学ぶことでWEBデザインの全体像が更に掴めたと実感しています。デザインセンスはさておき、思い通りに自分の考える機能を実装できるのは気持ちいい!

ここまで学習しておくと「プログラミングやりたいな」って思ったとき簡単に対応できるスキルは身に着くはずです。