誰かに見てもらうための、簡単なデザイン

読んだ本《作りながら学ぶjQueryデザインの教科書》

私は、jQueryをコピペで使っていて、カスタムとかワケの分からない部分はなるべく見ないふりをしています。

ところが、最近「姫路ゆるいWeb勉強会」などで、JavaScriptやjQueryの話題がちらほら出てきて…ああ…ついていけてないな…と。
そんな中でこの本と出会ったのですが、なかなか分かりやすかったので、レビューがてらご紹介します。

IMG_1953

作りながら学ぶjQueryデザインの教科書

前回ご紹介した作りながら学ぶHTML/CSSデザインの教科書と同じような感じなのかな?
「HTML/CSSデザインの教科書」もとても分かりやすくて、そしてサンプルが綺麗で、「デザインの教科書」というだけあって、綺麗なビジュアルのホームページの作り方を解説してくれいている本でした。
私はこの本を見ながらサイトを2つほど作ったのですが、まぁ…コードが綺麗に書けたかはさておき…基本的な作り方や応用が効きそうな小技など解説されているので、とっても勉強になりました。

「作りながら学ぶjQueryデザインの教科書」も、サンプルがとても綺麗で、そして解説も丁寧です。
私はHTMLとCSSしか分かりませんが(そしてそれも完全に理解しているわけではない)そんな私でもするっと入ってくる内容で、「jQueryこわい」という謎な恐怖を取っ払ってくれる足がかりになってくれると思います。

jQueryから入る本

この本ですが、jQueryの本であって、JavaScriptの本ではありません。
といっても、JavaScriptとjQueryの違い、そしてその2つの基本的な考え方は最初に解説してあり、「JavaScriptってそうやって動くんだ!」「そんな仕組みだったんだ!」ということは、初めて触れる人でも分かるように書かれています。
そしてそこからjQueryの実習に移ります。それから後はJavaScriptについて解説していることは少ないので、jQueryに特化した、jQueryを始めるための本だと思います。
最初は簡単なサンプルを作ったり、ブラウザについている開発ツールの使い方を解説してくれたりで、JavaScriptもjQueryも分かってなくてもついていけて、なおかつ動作検証のしかたにも困らない内容だと思います。
私はjQueryをコピペで使っていますが、コードの意味を分かって使用しているわけではないので、何をどうするコードが書いてあるかはさっぱり分かっていません。
ですが最初の方の解説を読んで、今まで書いていたコードの意味は少し理解出来ました。

JavScriptとjQueryの違いですが、JavaScriptを扱いやすく、書きやすくしたのがjQueryなので、JavaScriptを理解していなくても、それは特に気にする必要はなくjQueryの学習は進められるのかな、と思いました。

HTMLとCSSの理解は必須

私は、HTMLとCSSは、複雑なものは書けないけれど何とか分かる程度です。
そんな状態でjQueryまで理解するのはハードルが高い…と思っていましたが、そうではないようです…。
JavaScript、jQueryとはHTMLやCSSを操作するもので、無関係では決してないですし、HTMLとCSSを理解していれば、JavaScriptやjQueryの意味は、意外に理解できるっぽいです。
今まで「別物!」といった感じで、jQueryと聞くと「それは知りません!」と即答していたのですが、JavaScriptやjQueryは、HTMLタグを付け加えたり書き換えたり、CSSのデザインを変えたりする、という機能があって、それにはHTMLタグやCSSプロパティなども関係していて、HTMLやCSSを勉強して学んだことも使われて出来ている…ということが分かってから、急に理解しやすくなりました。
このあたりのことがこの本には詳しく書かれていて、今までやってきたHTMLやCSSの知識の延長を知る感覚で入っていけたと思います。
実際はそれだけではなく、もっと踏み込んだことをしていくのですが、全く知らないことをやるわけではないのです。
というわけで、jQueryを勉強するのであれば、ある程度HTMLやCSSを知っておかないとツライかもしれません…。

配列とか演算子とか

んで、その踏み込んだことというのが、配列や演算子などです。
この辺り、私もまだちゃんと理解できていないのですが、CSSやHTMLを簡単に操作する方法を学んだ後は、要素を代入したり並べたり取得したり足したり引いたりする構文を書いていきます。
ここややこしいですけど、構文は決まってたりするので、最初は見ながらでも書いたらいけるのかな?
この辺りの考え方や使う記号についても解説があります。
私もよく分かってません。読みながらこんがらがるところなのですが、これは書いて経験して覚えていくしかなさそうです。

最初からレスポンシブ

この本の特徴でしょうか…最初からコードがレスポンシブです。とりあえずパソコン向けのコードを書いてから、スマホ対応は後で…ではなく、同時進行で進めていきます。
レスポンシブを実現するためのCSSやその操作方法についても書かれているので、CSSの勉強にもなります。
jQueryと、それに効果を発揮するためのCSSが沢山書かれているので、レスポンシブデザインに有効なCSSの書き方が学べます。
jQueryを勉強しながらレスポンシブもするなんて!と、ちょっと大変に思うかもしれませんが、ちょっとのコードを付け足すだけで対応できるので、あまり苦にはならなさそうです。

ちなみに、パソコン向けもそうですが、スマホ向けのデザインも、今のトレンドというか…この機能は押さえておきたい!というものがサンプルに盛り込まれていますので(アコーディオンメニューとかトップへ戻るスクロール、選択部分をハイライトさせる、スライドショーなど)実用性も高いと思います。
デザインも、綺麗に見せるための小技がきいたものばかりで、デザインの勉強にもなりました。

AjaxとJSON

聞いたことあるけどなにこれ?な言葉たち。
後半ではAjaxとJSONを利用するjQueryコードを書いていきます。
これは初心者からしたら、かなり踏み込んだ内容です…。
AjaxやJSONとはどのようなものか、基礎の解説があり、あまり難しいことはしないのですが、ややこしくなるところ…。
しかしこれの仕組みを知っておくと、もっと便利なjQueryのコードを書けるわけで、そのための第一歩かなと思いました。
これも使って覚えていくしかなさそう。

まとめると

HTMLとCSSの知識があれば入っていけて、最初は簡単だけど、後の方は結構高度なことをする(ように思える)内容でした。

流れとしては、jQueryとは何か?という解説から入り、HTMLやCSSを簡単に操作する方法、jQueryの処理の流れ、実際にスクリプトを書いてみる、アコーディオンやレスポンシブナビゲーションなどを作る…というように、基本的な考え方から入って、簡単な実習をしていきます。

HTMLとCSSを知っていれば、この本にチャレンジする敷居は低いと思います。それくらい分かりやすくて丁寧でした。
何よりレスポンシブ前提で作られているところが時代にも合ってますし、レスポンシブの勉強もできて、今すぐ使える技術が満載の本だと思います。
この本を見ながらコードを書くだけで、レスポンシブで動きがあり、デザインも今風に整ったサイトがすぐ作れます。
私にはちょっとレベルが高いかも、と思って読みましたが、そんなことはなかったです(後半はちょっと苦戦しましたが…)。
HTMLやCSSを勉強して、次新しいことを学びたい、という方にピッタリではないかと思います。

なんかもー偉そうに書いてるように見えて、素人が読んだ感丸出しの書評ですが…。自分で書ければいいな、というコードが沢山載っていたので、これからのサイト作りの参考にしたいと思います。

それでは!Have a nice design!!