どうやってJavaScriptを覚えたか？

中村：僕はFlashのActionScriptから覚えたんです。でも今はもう使われていないActionScript1だから、あんまり参考にならないかもしれない。

外村：でも自分で覚えた方法を話すってわけじゃなくて……

中村：まあ初心者に向けた勉強方法だよね。でも、自分が覚えた方法以外は、聞いた方法でしかないから、あんまり説得力がないような気もする。

——初めになにから手を付けたらいいですか？　例えば、定番のオライリーの『初めてのJavaScript』を読むというのはどうですか？

中村：読んだことないからわからないです。初心者が最初にオライリー本読むと寝ちゃうと思うんだけどね（笑）。

——そういうのからはいかない方がいい？

中村：うん、いかない方がいいと思います。少なくとも僕は読めないです。僕はActionScriptのベースがあった状態で、JavaScriptの勉強もしようと思ってたんです。それであるイベントの懇親会のときに出版社の人に『最近JavaScriptの本がないから出してください』っていったら、『書いてください』って言われた（笑）。まあ、ActionScriptと文法はほぼ一緒だし、書けないこともないかなと思って、勉強しなからでいいんだったら書きますっていって書いた。

——本を書いて覚えた？

中村：本を書いて覚えました（笑）。

JavaScriptとDOMを覚える

——初めての著書の『WebクリエイティブのためのDOM Scripting』ですね。DOM（Document Object Model）って言われて、なかなかぱっとはわからないのですが。

外村：言葉で説明しようとすると難しいですね。要はDOMっていうのはHTMLをJavaScriptからアクセスしたり変更したりする仕組みなんです。それにDOMとか、たいそうな名前が付いてるからよくわからなくなるんですよ。

JavaScriptっていう言語に限っていうと、DOMは本来ぜんぜん関係ないんです。だからDOMの仕様とJavaScriptの仕様を策定している団体はまったく別なんです*。そこははっきり分かれてる。ブラウザで使っているJavaScriptは、ECMAScriptの言語仕様の上にDOMって仕様が乗っかっているのをいうんですよ。でもJavaScriptだけを理解するだけならDOMはぜんぜん関係ないんです。でもブラウザでなにかしたいってなったら、DOMを理解しないといけない。

*注：DOMの仕様とJavaScriptの仕様

DOMの仕様はW3Cによって、JavaScriptが準拠しているECMAScriptはECMA Internationalによって策定されている。

中村：『仕様ごとに覚えたらいい』って僕はよくいってます。整理しないでDOMとJavaScriptをまぜまぜに覚えていくとわけわからなくなっていくから。なんの仕様のなにをやろうとしているのかをはっきりさせた方がいいと思います。例えばJavaScriptを覚えたいんだったら、DOMとか忘れてJavaScriptだけを覚えた方がいいと思う。

外村：僕が出した本『ノンプログラマのためのJavaScriptはじめの一歩』も実は2章はif文とか、for文とか、関数とか、文字列とか、いわゆる言語としてのJavaScriptの話だけで、HTMLはぜんぜん出てこないです。3章はDOMの話ってきっちり分けているんですよ。言葉ではいってないですけど、そこははっきり分かれるような構成にしてます。

——じゃあ、JavaScriptを勉強し始めた頃ってそういう区別はついていました？

外村：ついてないですね（笑）。初めはごっちゃになっててもいいんですけど、ちゃんと使えるようになるには、分けて考えられるようにならなくちゃいけない。これはちょっと中級者くらいの話なのかもしれないですね。

中村：初心者はわからなくてもいいかもしれない。だっていきなりHTMLが出てこないJavaScriptだけを勉強してもブラウザではなにもできないから（笑）。

——ブラウザで実際に動くような具体的な成果物がないような形でやっていると、わりとすぐ忘れますよね。

外村：そうですね。

——Web制作をやっている人だと必ずHTMLの要素をごにょごにょしたいっていう文脈でJavaScriptが出てくるじゃないですか。

外村：だから……また宣伝になっちゃうかもしれないけど（笑）、2章でJavaScriptだけをやっても、実際の成果物がないとよくわからないので、ブラウザで動くスライドショーのコードを出して、JavaScriptはこうやって使われるって見せてます。

中村：僕が昔書いた本だと、一番始めの方はif文とか使わないコードを出しました。DOMを普通に操作する文を書いているんだけど、if文とか出てこない。クリックすると、なにか要素が現われるとか。例えば、display: noneになっているdiv要素がdisplay: blockになるようなコードですね。こういう単純な操作だったらif文とか出てこないので。

たぶん、勉強するときって自分がどんなバックグラウンドを持っているかによると思うんです。僕の書いた本はHTMLとCSSをかなりわかっている人向けに書いているので、そういう人であればDOMは入りやすいと思います。代わりにJavaScriptの言語仕様的なところは、始めの方では説明しなかったですね。本によっていろいろなアプローチがあると思うので、僕の本はDOMと関連している部分から入りました。

具体例から入るか？　仕様から入るか？

——いろんなアプローチがあるんですね

中村：どのアプローチがいいとか悪いとかはないんです。JavaScriptの言語仕様からしっかりやった方が、いいこともあるし、悪いこともあるし。

——言語仕様からから始めるといい部分というのは？

中村：JavaScriptの土台ができていて、その上にいろいろ積み重ねていく方がきれいにはいくかなという気がします。

外村：例えばDOMから始める場合も、さっきの例でいくと、クリックしたらなにか現われるみたいな処理は、functionとかイベントのコールバックとか出てくるはずなんです。けれど、それがわからないうちは、なにか「おまじないみたいなものがある」となってくるんですよ。

中村：そうそう。基礎がないからね。こう書けばこう動くみたいなことしかわからないから、それしかできないようになってしまうこともあります。

外村：ずどさん（高津戸のこと）の著書『WebデザイナーのためのjQuery入門』は、けっこうそういうイメージしやすい感じに作られていて、こう書けば、こう動くっていう具合に書いている。でもそこにあるfunctionとかは決まりごと、つまり、暗黙の了解になっています。

中村：functionとかの意味は本当はわかっていないので、それだけだとコピペしているのと同じ状態じゃないですか。でも、一方で、書けた気にはなるっていうのはあって、そこからステップアップしていくのはアリです。初めはおまじないでも「functionってなんだろう」って調べていくのもいいんです。順番はどちらでもいいので。

外村：うん、そうですね。

——じゃあ、言語的な構文からがんばれる人はそこから始めればいいし、それだとイメージできなくてキツい人は、こう書いたら、こう動く、っていうところから始めて、functionってなに？って思った時点で言語仕様を調べる。

中村：そう。最終的には言語仕様的な部分に行き着くので、わかっている人は、そこから始めた方が早いっていうのはあります。

——イチから覚えるまっさらな状態だったら？

中村：そういう人ならDOM操作とかってすぐ見た目がわかるし、マークアップができる人なら、今ある知識が使える。さっき言及した本も、そう思ってDOMの解説を書きました。

CSSセレクタが書ける人はDOMの理解も早いはず

外村：初心者の人がどっちの方法から始めた方がいいかは、正直ぜんぜんわからないですね。人にもよるだろうし。どっちの方がわかりやすい人が多いのかはわからないですね。

小山田：DOMなしで覚えるんだったら、例えばcanvasで絵を描くのもいいかもしれません。canvasはcanvas要素の取得はあるんですけど、あとはDOM操作は特になくて、コードを書くとブラウザ上に描画されるんです。

外村：その代わり、canvasのAPIを説明する必要はある。まあ、DOMよりは大きな仕様じゃないんですけどね。

——よく初心者向けのアドバイスとして「書く」ことですよね、って言われることがありますが、あれは？

小山田：ディアゴスティーニ形式とかどうですかね。1年間購読すると、ロールオーバーが書けるようになるとか。

全員：一年間かけてロールオーバー（笑）！？　けっこう、ゆっくりなペースですね。

外村：まあ、『書く』ってことは問題ですよね。

中村：HTML／CSSができるっていっても、実はぜんぜんわかってなかったり、HTML／CSSしか書けないっていっている人が、仕様のすごい細かいところまで知っていたりするので、一概には言えないですよね。仕様書をちゃんと読んでるレベルの人だったら、DOMはわかりやすいんですよね。

小山田：CSSのセレクタを理解できている人は、DOMも理解できるんですよ。例えば、CSSだとheader要素の中のh1要素を赤にするとかありますよね。それってHTML要素のツリー構造を理解していないとセレクタが書けないんですよ。DOMも同じツリー構造なので、セレクタを書ける人は、DOMも理解しやすいと思います。

中村：最近のJavaScriptだとquerySelectorというのもあります。そうするとCSSのセレクタの知識がそのまま使えますよ。まあ、CSSのセレクタが書けない人でも「マークアップエンジニア」って名乗っているのを何回も見たことあるので（笑）。そういう人だったら、いっそJavaScriptの言語仕様からやれば、HTMLの知識関係ないじゃないですか。JavaScriptの言語仕様から始めた方が、みんな素直に同じレベルから始められる。

やりたいことがあるのは上達の近道

中村：あとはなにをやりたいかにもよりますよね。サーバーサイドでなにかやりたいんだったら、node.jsやればいいと思うし。ブラウザでなにか操作したいということであれば、DOMから始めるといいと思う。Flashみたいなことをやりたいんだったら、canvasから始めるのだっていいと思う。

——でも初めは、自分のやりたいことがどの技術で実現できるのか、対応関係すらわからなかったりしますよね。

外村：確かにね。

中村：そうだね。まず自分のやりたいことがJavaScriptでできるか確認するのはいいかもしれないです。流行っているから、JavaScriptやりたいっていうのは、まず100％挫折するので。

小山田：いまJavaScriptでできることって広いんですよね。

——自分のやりたいことから突っ込んでいくのもアリ？

外村：アリですね。

中村：というか、それしかない。やりたくもないことをやるのはムリだから（笑）。

小山田：例えば、俺だったら休みの日にthree.jsで深海魚を作ろうってひらめいて、実際やってたんですけど（笑）。そういうのって普通にプライベートな時間を使ってでもやりたいって思うので。

外村：家で深海魚のビデオ見てたら、よもつ（小山田のこと）が『これをthree.jsでやりたい』って言い出したんですよね（笑）。

小山田：やりたいことを見つけるとたぶんおもしろくなるんです。

——じゃあ、まずJavaScriptを勉強したら「これができるようになりたい」っていう目標を持つことが重要なんですね。

外村：やりたいことがないのにJavaScript勉強したいっていうのはどういう心境なのかな、とも思いますけど（笑）。実際、もっとふわっと「なんかJavaScriptやりたい」って人はいますけどね。「なんか仕事で役に立ちそうだから覚えたい」とか。

小山田：例えば、UIを作りたいって思ったら、jQueryとかのJavaScriptライブラリを使ったJavaScriptを勉強すればUIが作れるようになったりします。ただ、今度はFlashみたいなことをやりたいと思うと、また別のことを勉強しなければなりません。でもUIを作りたいと思って勉強したことはけして無駄にはならなくて、次の分野の勉強にも生かされます。

——ひとつのことを深めていれば、別の分野の学習も楽になる？

外村：うん。それができるのがいちばん理想的ですね。今、「デザイナーもJavaScriptをやるべき」みたいな意見をめぐって炎上してますけど（笑）、そういうのを読んで「やれるようにならなければいけないんだ」みたいな人はちょっとどうすればいいかわからないです。

中村：なにかわかりやすい目標みたいなのがあればいいんだけどね。こういうのを作りたいみたいな。例えば、FlashでActionScriptを始めた頃は、みんな中村勇吾さんの作品とかを見て、こういうの作りたいって思ってました。

小山田：こういうのを作りたいっていうのを見つけて、それができることを勉強すると……

中村：まあ、それがたまたまFlashだったり、JavaScriptだったりしたと。

人に聞くのもいい方法

——やりたいことを実現するにはなにをすればいいかってどうやって探すんですか？

外村：それを調べるのが「勉強」だったりするじゃないですか。まあ、ソースを見て、それがcanvasで動いているのか、DOM操作で動いているのか見ればわか……らないのか、初心者は（笑）。そういうのはどうすればいいんだろう？　うーん、人に聞くっていうのがいいかも。でも、周りにそういう人がいないとちょっと無理かな？

——周りに聞ける人がいない人が、聞けるサイトとかあるんですか？

外村：今だと「jsdo.it」とかに、やりたいことを実現しているようなコードがあれば、その作者にコメントで聞いてみるとかはできるかもしれないですね。そういう聞ける人がいそうなコミュニティで聞いてみることができるといいんですけどね。

中村：CodeGridにそういう機能が搭載されるといいね。

小山田：読者の質問に答えます企画とかいいんじゃないですか？

——いいですね！

外村：やっぱりそんな具合に、知ってそうな人に聞くのがいいです。だいたい周囲にひとりふたりはいるんじゃないですか？　いない人はjsdo.itとかで聞く。

——とりあえず、コードをコピペしてみて自分で動かして、ちょっと改造しようとしてうまくいかなかったら、聞いてみると答えてくれる人もいる？

外村：だいたいそういうところに公開している人って、やさしい人が多いので答えてくれる場合が多いです。

中村：でも絶対答えが返ってくると思ってはいけないですね。例えば、「業務でこういうのをやっているんですけど……」とかいうことを聞くのは、失礼だから（笑）。それはお金払いなさいっていうレベルですよね。

始めはまねからでいい

外村：やっぱりゼロから書くっていうのは最初は難しいと思うので、始めは他人のコードをまねるでいいと思います。

中村：ここをこういうふうに変えたんだけどとか、目的がない人はちょっと難しいかも。

——ふわっとJavaScriptを覚えたいっていう人は……

中村：まあ、JavaScriptの構文からどうぞってことですね。

外村：いちばんいいのは仕事でやらざるをえない状況に自分を置くっていうのがあります。

——背水の陣？

外村：それがいちばんおすすめですね。『JavaScriptやります』って宣言しちゃうとか。それを会社の中でできたらいちばんよくて、会社でできなくなったら、JavaScriptの会社に転職しちゃうとか、それくらいやればいいでしょう。

まとめ

今回はHTMLとCSSについての知識があるマープアップエンジニアがJavaScriptを学ぶにはというテーマで、ゆっくり1時間ほど話をしてもらいました。ここで、会話の中に出てきた学びのヒントをまとめておきます。

JavaScriptビギナーのための学びのヒント

• やりたいことを見つける
• それと似たことをやっているサイトを見つける
• コードをまねてみる
• どうしてもわからないところは人に聞く（聞ける人がいない場合は、ソーシャルコーディングサイトなどをうまく使って質問）
• JavaScriptをやらざるを得ない状況にあえて自分を追い込む

次回はすでにJavaScriptがある程度書けるようになっているプログラマのための、JavaScript上達の道を探ります。