Takazudo hamalog

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + /

cool guy

「Webデザイナーのための jQuery入門」という本を書きました

2011/12/03permalink

2011年12月7日発売です。もう本屋に並び始めたみたい。

image

これは、Webデザイナーとか、HTML+CSSを普段書いてるような人でJavaScriptをほとんど知らないという人がターゲットで、そういった人らがjQuery使ってちょっとしたものを自分で作れるようになれるようになったらええんじゃないかという感じで書かれた本です。ちょっとしたモノっていうのは、この本で解説している、以下のような機能です。

  • 画像のロールオーバー
  • 入力フォームのガイドテキスト(「検索ワードを入力してください」みたいやつ)
  • アコーディオン
  • 外部ファイルを読み込んで表作成
  • スライドショー
  • タブコンテンツ
  • ツールチップ

僕は他のjQuery解説本はさっぱり読んでいないんですが、自分がこの本を書く上で目指したことは、「この本を読んだ人が、自分で考えてスクリプトを書けるようになれること」です。いけてるサンプル集が欲しいとか、リファレンスが欲しいとかいう人は、この本はそういうものではないので買わないほうがいいですし、既になんかしらのプログラミング言語に長けている人も、他の本の方がいいかと思います。「jQueryを使いながらしっかりプログラミング入門」というのが、イメージに近いものかなと思ってます。というか、そうなったらいいなと思ってます。

使わないと覚えられない

こういう入門書を書いておいて言うのもなんですが、個人的には、「自分でJavaScriptを書かないと覚えられるわけないでしょ」って思ってます。だから、この本を読んでも、自分で書いたりしないと忘れます。確実です。

自分は、この文章を書いている時点で、仕事として6,7年ぐらい、HTML・CSS・JavaScriptを書いており、今はほとんどJavaScriptプログラマーみたいな感じですが、JavaScriptをちゃんとやりだしたのは、jQueryが流行ってみんな使い出したちょっと前という感じです。

プログラミング言語としては、JavaScript、Python、PHPが書けるといえば書けますが、職業プログラマとして通用するのは、JavaScriptだけみたいな感じです。PHPは、3年前に興味があって本を買ってそこそこ勉強しましたが、特に何を作る機会があるわけでも無く、それ以降はwordpressをちょっといじるときに不自由がないぐらいで、まぁ、早い話、忘れてしまっています。Pythonについては、最近、Google App Engineというものを使うためにちょっと勉強したので、触り程度習得していますが、このまま使う機会が他になければ忘れてしまいそうな感じです。そういう経験からといいますか、なんといいますか、要するにそういうプログラミング言語を覚えたかったら使わないと覚えられるわけないじゃーんと思うのです。

ちなみに、自分がこれをやってかなりJavaScriptを覚えたなーと感じているのは、tinyscrollingという、ページをするするスクロールするライブラリをかなりじっくり見てみた時かなーと思ってます。それ以前は他の人が書いたものを全然読もうとしたことがなかったので、苦しみながら一つ一つ調べてよみときつつ、そういう風に書くのかーなどと思ったものでした。一行一行、そこでどういうことをしているのか、わざわざコメントを書いたりもして。これは、tinyscrollingが素晴らしく良くできているものであるということが理由で上達したというわけではなく、自発的にそんだけ研究したという点が、自分にとって大きかったものと思ってます。あとは、フリーランスをやっているとき、勉強がてら、趣味的に、この本で書いているようなちょっとした機能を沢山つくってみたことが、JavaScript習得のためにかなり役に立ってるかなと思ってます。

JavaScriptは身につけやすいかも

よく、こういう本を買う人の中には、「私もこれを買えばjQuery使えるようになるかしらワクワク」と思う人がいるかと思いますが、きっと、その本がいかに良書で、自分にびっくりするほどフィットして役立ったとしても、仕事や趣味でjQueryを使っていかなければ、さっさと忘れてしまうことでしょう。僕だって仕事でこれだけJavaScript書いていなければ忘れてしまいます当然。

ですが、JavaScriptを使う機会は、最近どんどん増えています。Webサイト上のさまざまな機能が、どんどんJavaScriptを使って作られるようになってきているのは、説明するまでもないでしょう。だから、継続的に使っていけるという意味でも、JavaScriptは覚えやすいものだと思うんです。

それと、仕事をしていて思うのですが、JavaScriptを使った機能は、依頼されることもあるといえばあるのですが、Webデザイナとかコーディングをしている人のほうから提案していくような形で仕事になることも多いのです。そういうのやりたいならそれJavaScriptでこんな感じにできまっせみたいな風に。JavaScriptを普段からやっていれば、UIの引き出しも自分の中に増えるので、そういう提案もできるようになるかもしれないですよ。そうすれば、素敵なUIのサイトも自由に作れるように。ああなんて素敵なんだみたいな。

知識なしでJavaScriptに立ち向かう人たち

Webデザイナーとか、HTMLをやっている人は、仕事上、「こういう機能が無料で使えるようになってるみたいだからこれ使ってみてよ」みたいな風に、なんかしらのライブラリを使うように頼まれ、うんうん唸りながらなんとか実装したみたいな経験がある人がいるんではないかと思います。それで、ちゃんと動かなくて、中身を見てみるもサッパリ分かんねぇ!みたいな状況とか。あとは、ロールオーバーとかタブとか、当たり前のように頼まれたりとか。そういうのは、当たり前に使われるようになってきてはいるものの、JavaScriptを自分で学んでみたことがない人にとっては、その実装は、なかなかハードルの高いことだと思うんです。

世の中には「jQueryプラグイン100選」みたいなブログ記事が山のようにあって、あーなんてjQueryって簡単で素敵なんだ鼻血ブーと思う人もいそうですが、JavaScriptの知識を持たない人がそういうのをちょろっと使ってなにかやっちゃうのは、言ってみれば、「高性能のバズーカを持って戦争に行く」みたいなもんですよ。そのバズーカは高性能だから、ボタン押せばドカンとやっちゃえるかもしれないけど、バズーカに不備があったらどうにもできないし、それって、「使い方はボタン押せば弾でます」みたいなのを知っているだけとかではないですか?そういう状態は、かなり良くない。仕事としても責任感の無いことをしてることになるんじゃないですかね。

そういう状態で思い通りに動かなかったら、超苦しむでしょう大体。でもそれは苦しんで当然なのです。しっかり訓練してからバズーカを打ったほうがいいに決まってます。しっかり訓練といかないまでも、基礎的な体力と知識を付けてから使うべきです。そうすれば、バズーカが動かなかったら何故動かないのかすぐ分かりますし、故障しても自分で直したりできるようになるかもしれないです。

いかに便利な道具があったとしても、知識なしにそれを使うのは、そういうような状態に結構近いもんじゃないかと思ってます。

JavaScriptをどうやって勉強したらいいのか

「よーしではJavaScriptをちゃんと覚えるぞー。どうしたらいいの?」という質問に対する答えは、かなり不明確です。この文章の頭のほうで、自分はこのライブラリみて覚えたとか、自分で作ってみて役に立ったとか書きましたけど、そういうモチベーションが高まってるという状況は、人生の中において結構稀だと思います。趣味でJavaScriptを書きだすという人は、変人とまではいきませんけど、滅多にいるわけではないかと思います。

そんな風に、どうすればいいかも分からないままJavaScriptを覚えよう!と思った人が、良書だと勧められてこういった本を手にとってJavaScriptを勉強しだしても、あっという間に挫折してしまうでしょう。JavaScriptの基本的な文法や機能を一から読んでいっても、それをどうやってつかうのか、さっぱり想像できないんじゃないでしょうか。(この本 - 通称サイ本は、じっくり細かいことまで余すところなく解説してくれている伝説的な良書ではあります)

ちなみに、他のプログラミング言語を勉強したことのある人であれば、こういった、JavaScriptの文法を一から見ていくという学習方法は、おおいにアリです。プログラミング言語は色々ありますが、基本的な概念は共通なので、文法がわかれば、それをどう使うのか、イメージが頭の中に思い描けたりするのです。だから、その処理の流れを実現するためのコードを書くにはどうするか調べる…みたいな感じです。それがプログラマっていう仕事です。

自分は、JavaScriptからプログラミングを覚えたような感じなので、プログラミングの基礎知識が無い状態からはじめたようなものでした。そんな自分がJavaScriptを覚えていったステップとしては、何かを作りながら、徐々に文法を覚えていったような感じです。仕事柄、ロールオーバーやポップアップをちょっと実装するみたいな機会も多かったりしましたし。こういうふうに、何かを作りながらスキルを伸ばしていくというのは、JavaScriptを覚えるって言うこと以外でも、だいたいそんな感じなのじゃないかなと思います。仕事としてデザインを行うようになり、だんだんとデザインの基礎も勉強するようになったとか、料理を作っていくうちに料理の基礎を覚えたとか。考えてみれば当たり前の話ですが。

この本の構成

で、私が書いた本の話に戻りますが、「Webデザイナーのための jQuery入門」は、読者が、プログラミングの知識が全く無い状態を考慮して構成されています。これが最適解かはわかりませんが、「よーしではJavaScriptをちゃんと覚えるぞー。どうしたらいいの?」に答えたような本にしたつもりです。最低限必要な概念や知識を説明した上で、実際にサイトで使いそうなものを作っていき、その中でJavaScriptの基礎にも触れながら、jQueryを覚えていけるような流れで書きました。

そして、jQueryの高機能なセレクタや、初心者にとって利用頻度の低い機能については一切解説しないことにしました。その代わり、コードの一行一行がどういう意味を持っているのか、いちいち細かく説明するようにしました。jQueryの機能は非常に多く、便利なものが山盛りですが、それらをすべて把握するよりも、基本的な機能を組み合わせ、やりたいことが実現できる様になったほうが有意義だと考えたので、そのようにしています。自分が初めてtinyscrollingのコードを読んで、一行一行その行がどういう意味なのかを書いてた時のように、一つ一つ意味を解説し、「これはおまじないだ」みたいな説明の仕方をしないように心がけました。

実際にロールオーバーなりタブなりの機能を作ってみる章では、それぞれにつき、基本形と発展形を用意するようにしました。基本形と発展形の動作はほとんど同じですが、「このコードはこういうふうにも書ける」とか、JavaScriptの変数や関数など、基本的な機能を理解してもらうために、このような構成にしています。

というわけで、この本はそんな感じで書かれています。
JavaScriptを覚えたいと思ってる人が読んでくれたらいいかなーと思ってます。

blog comments powered by Disqus

  1. yuechan0629 reblogged this from hamalog
  2. my-stack reblogged this from hamalog
  3. yoruaki reblogged this from hamalog
  4. snoow3 reblogged this from hamalog
  5. nun reblogged this from skaholic
  6. sanemat-blog reblogged this from hamalog
  7. sigta reblogged this from hamalog
  8. su-outoforder reblogged this from yoshitsuchi
  9. emiemihuimei-blog reblogged this from kmm
  10. zorozoro11jp reblogged this from hamalog
  11. jun26 reblogged this from hamalog
  12. skaholic reblogged this from precall
  13. kmm reblogged this from hamalog and added:
    見てみよ。
  14. qazuyayaya reblogged this from syoichi
  15. orihika reblogged this from syoichi
  16. hamalog posted this