駆け出しはjQueryとSassを扱えるようになろう

「Web制作は思った以上に大変だということを再認識した」の続きになります。

ゆーすけ@Webクリエイターさんのツイート https://twitter.com/U_suke313/status/1368880542704304128

ゆーすけさんの上記のツイートを元に私なりに解説した感じの記事になってます。

駆け出しさんが見たら「うっ」ってたじろぐほどの量のロードマップだとおもったので 細かく分けて解説・批評をしていくような記事です。

基本的にはゆーすけさんの公開してくれた最短ロードマップに沿えば Web制作で月10万どころか20万普通に稼げますよって感じです。

前回はHTML+CSSの覚え方についてでした。

今回はjQueryとSassについて学ぶお話になります。

まずは結論から

ゆーすけさんの最短ロードマップそのまま全肯定ですね。

ステップ11からステップ19までそのとおりにやってみてください。

Web制作をやっていくのであればjQueryとSassの知識は必須ではないのですが、 使わないと単純に時給が減りますよっていうぐらい工数削減ができるので必須みたいなものです(笑)

jQueryはJavaScriptで組まれたものですし、SassはCSSをプログラミング的に書けるようにしたものです。

なのでJavaScriptとCSSを扱えたらjQueryもSassも使えなくても大丈夫というだけです。

でも使うと大げさのように聞こえますが10倍ぐらい納品までの速度が変わります。

なので覚えましょう。

無理に全部覚える必要はなくて、必要な時に使うものだけ覚えていくだけで大丈夫です。

最近のjQuery不要論ついて

Sass系のCSSを効率化する技術は最前線で活躍してる人も十分使ってますが、 jQueryは一部の人間からは無駄に高機能だから脱jQueryして素のJavaScriptで書こうぜ ってなってきている流れも恐らく駆け出しでも調べている人なら一度は聞いたことはあると思います。

私もjQuery要らない派なので基本的にES6と言われている記法でJavaScriptを書くようにしています。

が、それはあくまで自分の能力をあげるためにやっているだけであって 仕事の速さを求められる場合はjQueryを使ってさっさと作り上げてしまいます。

あとは既に出来ているサイトを改修してほしいという依頼も少なくは有りません。

そういうサイトっていうのは大抵jQueryが使われているわけです。

そんなサイトを1からES6で組み直しているとかなり時間がかかってしまうわけですよね。 もちろん納期内に終わらせられれば全然いいのですが、時間とお金だけでみると 自ら時給を下げてしまっていることになります。

なので明らかにjQueryを使ったほうが早い!っていう案件に対しては 素直にjQueryを使ってさっさと終わらせて次の案件に取り掛かったほうが稼げますし、 数をこなすことで実務経験の詰む速度もあがってきます。

そして勉強として仕事で作った処理をjQueryを使わずに作ってみて jQueryより簡単に作れた!とかこれは明らかにjQuery使っててよかったな っていうのが自分の中に確立できるので今後の予定建ての能力もアップします。

なので仕事する上においてjQuery不要論には反対派です。

プライベート的に言えばもうjQuery別に要らなくね?って感じですが(笑)

というのも私のスクリプトを組む能力があがってきたから言えることです。

駆け出しは素直にjQueryをマスターする勢いで大丈夫です。

Sassについて

Sass(scss)はLessとかとかStylusとかPostCSSとかいろんな系統のCSS効率化ツールが存在しています。

その中でも恐らく一番使われているのがSassという記法です。

純粋なCSSが変数・繰り返し・条件分岐・モジュール化という機能を兼ね備えていないので 何回も同じ書き方をしないといけないのが時間かかりすぎる上に、 ブラウザごとに記法が違ってたりするため素のCSSで組もうとするとめちゃくちゃ時間がかかります。

それをすべて吸収してくれるのがSassという技術です。

要はプログラミング的な書き方ができるので、前に作ったCSSを使いまわせたり 劇的に工数削減ができるのが一番のメリットになります。

何度サイトを作っていると、同じ処理になるけど色とかサイズとかがサイトによって まちまちなので毎回同じようなことを書いているという状況になりがちです。

プログラミングの場合はそれを関数化して引数にサイズや色を与えて 前に書いた処理を使い回すということを簡単にできるのですが、 CSSの場合は素ではそれができないのでSassという技術を使って可能にしたわけです。

コーダーには必須の技術ですが、Webデザイナーも避けては通れなくなっている技術になっています。

というのも、Webデザイナーはコーディングも同時にやることが多いので 素のCSSを使っていてはデザイン業務と合わせると凄い工数になるのに 報酬は対して多くないということがよくありました。

それを劇的に楽にしたのがSassですね。

めちゃくちゃ簡単に言うと工数を削減できるわけですから Sassを使うと時給がアップするというわけです。

普通のプログラミングを覚えるよりも簡単なのでプログラミング経験のない人でも 結構比較的楽に習得できるのがSassのいいところでもあります。

というのも今まで培ってきたCSSを書いた技術もそのまま使えるので Sassだとここの書き方がわからないから今までのCSSと同じ書き方でやるか! っていう妥協も問題ないわけです。

最短ロードマップの有料の部分について

最後にStep15に有料教材があるのですが、正直jQueryを学ぶぐらいなら お金を払う必要なんてありません。

もちろん他の人より早く学んで次に進むぜ!って気力のある人は お金を払って時間を節約することも可能です。

個人的には結局時間をかけて学ばないと身につかないので お金をかける必要はないなと思います。

時間がある人は検索して使いたい技術だけ学んだり、 githubで公開されているjqueryで組まれたコードを眺めるだけで十分勉強ができます。

有料教材の弊害

有料教材のメリットとしては散らばったり必要最低限の技術をまとめてくれているので 余計なことを学ばなくていいというのがあります。

その反面、デメリットとして誰かが日本語でまとめてくれていないと情報を集められない使えない人間になってしまうので 基本的にはGoogleで自分で調べて使えそうな技術を集めるという勉強のほうがいいなと思ってます。

私がこの結論になったのは当時単純にお金があんまりなくて 教材が買えないというのもあったのでGoogleで調べまくって成長しました。

今思うとそれでよかったなと思えます。

Web系の技術というかIT系の技術は基本的に日本は3年以上遅れていると言われています。

なので基本的に日本語になってまとまっている情報って鮮度が古いんですよね。

自分の力で情報を集められないようになってしまうと、 誰かが情報をまとめてくれるまで成長が止まってしまうというわけです。

なので無料で貪欲に情報をかき集める人ほど成長速度が早いので 有料教材は個人的には本当に0からの入門のときだけにしておいて、 その後は一切いらないなとおもいます。

ネットに情報があがらないタイプの技術に関しては本でしか得られないという 技術もあると思いますが、Web制作においては基本的にインターネットが一番情報があがっていますので Web制作系の書籍は本当に0からの入門者向けのものになっています。

なのでWeb制作スキルをあげたいのであれば、調べる力と英語を読める力を身に着けていきましょう。