DESIGNMAP

WebデザイナーのためのJavaScript、jQueryの勉強法

記事公開日:2012年07月13日

Webデザイナーになる準備 独学でWeb制作を身につける

まったくのプログラミング初心者の方を対象にJavaScriptの独学方法をのべていきたい。今回とりあげるJavaScriptの勉強法はあくまでWebデザイナー向け(もしくはフロントエンドエンジニア向け)なので、Node.jsのようなサーバーサイドJavaScriptはとりあげていない。

JavaScriptとjQueryをどちらから勉強するべきか。今回はあえて邪道とわかっていながらもjQueryにふれるという順番をとった。本来は、JavaScriptの基礎をしっかりおさえてからjQueryにすすむのが正統である。今回はトップダウン方式で実践にふれてから、基礎に戻る学習法を提案したい。

jQueryはJavaScriptを楽に開発するためのライブラリで、jQuery自体はJavaScriptのコードでできている。最初にいきなりjQueryにふれて、HTMLを動的に操作する(これをDOM操作という)たのしさを味わってほしい。

いきなりjQueryから

まず最初におすすめしたいのは『Webデザイナーのための jQuery入門』である。HTML、CSSがわかっている人向けにかかれたjQueryの入門書である。jQueryの理解の最大の鍵は"jQueryオブジェクト"がイメージできるかどうかである。本書は全体的に説明がわかりやすい。jQueryオブジェクトの説明もわかりやすい。メソッドもすべてを網羅的に解説せずに、実戦でよく使うものにしぼって解説されている。

Chapter4のサンプルは、コードが読みやすく良いお手本になる。まずはそのまま真似して入力してほしい。プログラミングの上達のコツは良いコードを素直にまねることである。この本で、動的にHTMLを操作するおもしろさを知ってほしい。可能であれば、サンプルプログラムを改造していくとよいだろう。

プログラミングの基礎スキルをがっちり固める

次にやっておきたいことは、プログラミング自体の基礎をがっしり固めることである。特定の言語に依存しない"基礎スキル"をつけておくと一生の財産になる。JavaScriptの本ではないが、『新版Perl言語プログラミングレッスン入門編』をおすすめしたい。配列、ハッシュ、条件、ループ、正規表現、コンテキストの基礎がしっかりみにつく良書である。

とくに、コンテキストは重要な章である。入門書でコンテキストだけで専用の章を割いているのはすごい。この概念はJavaScript以外の言語をやる場合でも、のちのち役に立つだろう。

jQueryをつかわずにDOM操作をしてみよう

DOM Scripting 標準ガイドブック』は是非、読んでおきたい名著である。残念ながら和書は絶版で入手が難しいので、無理に買わず、図書館で借りてほしい。本書は、名著『DOM Scripting』初版の翻訳本である。原書は、現在second edition(第2版)がでている。私は、初版は翻訳本を読み、第2版は原書で読んだ。内容やサンプルの大きな変更はなかった(第2版でHTML5の章が追加になったくらい)。なので、初版の翻訳本をよんでおけば十分である。ただ、読みやすい英語なので、second editionの原書にチャレンジしてもよいだろう。はじめての英語学習の教材としても向いている。

本書の最大の特徴は、JavaScriptがオフ環境(JavaScriptのすべてや一部が動作しない環境)に配慮したコードになっていることである。最初に読んだときは、ここまで配慮して書くのかと、自分のあまさにショックをうけたのを覚えている。Graceful Degradation(グレイスフル デグラデーション) という概念をコードでたたきこまれる。jQueryを使わず、DOM操作をするので、jQueryのありがたみも分かるだろう。jQueryをつかわないDOM操作はほんとうに骨がおれる。

Graceful Degradation(グレイスフル デグラデーション)について参考になるサイト:
HTML5&CSS3入門 第6回 Graceful DegradationとPolyfill

フォトギャラリーをつくってみよう

ここでアウトプットをしておきたい。題材は定番のフォトギャラリーである。たとえば以下の順番で実装してほしい。

  1. 3枚のサムネール画像と大きい写真の画像を用意する。
  2. 各サムネール画像をクリックすると、対応する大きい写真が表示される。
  3. フェードインで写真が現れるようにする。
  4. 選択したサムネールの表示かわるようにする(例えば、サムネールが薄くなるとか)。
  5. 写真にキャプションがでるようにする(キャプションの文言は、サムネールのtitle属性から取得する仕様に)。
  6. スライドショー機能をつける

最後のスライドショー機能をつけると、ぐっと難易度があがる。最後のスライドショー機能はできなくてもかまわない。

jQueryプラグインの活用法、デザインのカスタマイズをしる

jQueryがここまで普及した理由のひとつが、プラグインの豊富さである。自分でコードを組まずに、機能を導入することができる。『現場のワークフローで覚える Webサイト制作教室』はWebサイト制作全般を解説した本だが、CHAPTER5がまるまるjQueryである。jQueryのプラグインの活用例としての本としてもおすすめできる。jQueryプラグインはブログやWebDesigningでも特集を組んだりしているので、定番プラグインを導入して、実践してほしい。

デザイナーの方はここまでの勉強で十分すぎるほど十分です。ここから先は、フロントエンドエンジニア向け、もしくはJavaScriptのコア部分まで、さかのぼって学習したい人向けの内容です。

JavaScriptのコア部分の言語仕様を勉強しよう

ある程度、jQueryのコードも書け、プラグインの活用もできるくらいになったら、いよいよJavaScriptのコア部分の勉強をやっておきたい。JavaScriptのコア部分は幸いコンパクトでシンプルである、なのに表現力は豊かな言語である。クラスをもたず、アクセス修飾子をもたないシンプル設計は、モダン言語へのアンチテーゼでもあり、中毒性がある。

コア部分を学習するのに、一番のおすすめの本は『パーフェクトJavaScript』である。Part2をなんどもなんども熟読してほしい。読むだけではなく、SpiderMonkeyというJavaScriptを解釈するC言語でかかれたプログラムをインストールして、実際にターミナル(コマンドプロンプト)にコードを書きながら読んでほしい(もしくは、Firebugのコンソールを使ってみてもよいだろう)。

とくに、本書のクロージャの解説は絶品である。このクロージャのところだけで、本の値段の数倍以上の価値がある。プロトタイプ継承の解説もわかりやすい。Part2を担当された井上誠一郎さんの独特な解説スタイルは、JavaScriptを超えてプログラミング自体の勉強になる。

表現力がゆたかなfunctionオブジェクトとオブジェクトリテラル

JavaScriptのコア学習の最大のキーになるのは、functionオブジェクトとオブジェクトリテラルである。どちらも柔軟すぎて、他の言語経験者が一番驚くところだろう。あと、thisが何をさすかというコンテキストの問題もヤマのひとつだ。applyやcallを使ったコードも読めるようにしておきたい。『JavaScriptパターン』は必読書だろう。わたしは、パーフェクトJavaScriptとともに、本書をなんどもなんども読み込んだ。JavaScriptの表現力の豊かさの神髄を味わえる本である。

ステートフルJavaScript』の1章から5章まではMVCパターン(プログラムをモデル、ビュー、コントローラーの機能にわけてアプリケーションをつくる手法)の読み応えがあるコードが読める。著者のMVCフレームワークの実装過程が学べる。ビューティフルコードに興奮する一冊。

jQueryの本体のJavaScriptのコードをよんでみよう

『パーフェクトJavaScript』、『JavaScriptパターン』、『ステートフルJavaScript』を読んだら、jQueryの本体のJavaScriptのコード(約9,500行くらい)を読んでみよう。本体のコードは簡単ではない。完全に読めななくても、何をやっているかど大筋を推理してみよう。

jQueryのソースコードリーディングの参考サイト:
jquery.jsを読み解く

jQueryの基礎から中級、上級までカバーしている本

jQueryの基礎から中級あたりまでカバーしている本だと、『コアjQuery+プラグイン/jQuery UI 開発実践技法 』と『jQueryクックブック』の二冊がおすすめである。どちらも翻訳本で、決して読みやすくはないが必読書である。

その他、おすすめ本

本文では紹介できなかったが、その他良書を簡単なレビューとともにまとめてきたい。

JavaScript: The Good Parts
2008年の発売当時、Amazon.comで評価が高く、さっそく原書で読んだがまったく歯が立たない。すぐに翻訳本がでたが、日本語でも難しくて挫折w。いま読み返すと良い本だということがわかるが、でた当時は自分には難解だった一冊。JavaScriptを代表する名著で、これをベストJavaScript本に挙げる人は多い。
Pro Javascript Techniques
jQueryの生みの親、John Resigが書いたJavaScriptの中級者向けの本。jQuery本体のコードを読める力をつけるために購入。ただ、お目当てのjQuery本体のコードの解説はなかった。翻訳本はなし。2006年時点のベストプラクティスをあつめた本。
追記(2014年9月5日):
現在は上記の本は古くなっており、John Resigの『JavaScript Ninjaの極意』をおすすめします。

ハイパフォーマンスJavaScript

JavaScript高速化のベストプラクティス集。if文の条件式の順番などのTIPSは、他の言語でも役に立つ高速テクニック。

Learning jQuery

最初に買ったjQuery本。2007年当時、まだjQueryは知られていなく、和書はほぼなかった(中村享介さんの『WebクリエイティブのためのDOM Scripting』くらいだろう)。たのしいチュートリアル形式。翻訳はないが、やさしめの英語。買うとしたら『Learning Jquery 1.3』がおすすめ。

テスト駆動JavaScript

テスト駆動開発の入門書。テストコードを継続的に実行する開発を進めるスタイルは、海外のWebサービス会社ではフロントエンドエンジニアの必須スキルになっている。

↑このページの上に戻る