javascriptが使えないと…
プログラミングの苦労
最近のweb制作の現場ではjavascriptを使う機会が激増している聞く。プログラマーさんとデザイナーさんが分かれているならそんなに心配はないが、状況によってはデザイナーさんが自身でプログラミングに手を出さないといけない現場もあるようだ。むしろjavascript知らないのは悪みたいな風潮もあるらしい。
只でさえデザインで神経をすり減らしているのに、プログラミングをやれなどとは過大な要求だ。でもやらないとおまんま食い上げである。
今回の記事はそんな状況の方に少しでもjavascriptを理解する材料になったらと思い書いた。よけいなお世話と言わないで。
オブジェクトオブジェクトうるせえんだよ
オブジェクト指向プログラミング
オブジェクト指向というパラダイム(考え方)の台頭のおかげでプログラミング言語の大半はオブジェクトという概念を理解する必要がある。
現在の主要言語のほとんどがオブジェクト指向でのプログラミングに対応しているし、javascriptも例外ではなくオブジェクト指向言語だ(オブジェクト指向も考え方に少し幅があるけど)
webデザイナーさんがやむを得ずjavascriptを使うとき、ただでさえプログラミングなんてやりたくもないのに、オブジェクト指向の理解を強要されることにとても苦痛があると思う。
オブジェクトという言葉がもうすでに意味不明。訳して「物体」ってなんだよ。
オブジェクトとは
この際はっきりしておこう。javascriptにおけるオブジェクトとは単に「データ構造」である。「データ構造」という言葉もなにやら難しげな感じなので、もっと簡単に言うと「箱」という理解でいいと思う。
オブジェクトとは単に「箱」の中に「名前を付けたデータ」（数字だったり文字列だったり、関数だったり)をいくつか突っ込んだだけのものである。
さらに理解がしにくい原因だと思うが、箱の中にも箱を入れられる。つまりオブジェクトの中にはオブジェクトもつっこめる訳だ。
このようにしていくとても複雑な構造を構築できるのがおわかりいただけるのではないか。オブジェクト指向の良い点は箱をこんな風に自由（あるときには複雑に）に作ることが出来る点にあるともいえる。
オブジェクトなんて所詮こんなものである。
しかし箱をうまく設計して関連させていくととても複雑な処理が行えるのだ。ざっくりいうとそれがオブジェクト指向の一端である。
ただjavascriptではwebを扱うのに特化している所為で、オブジェクトが理解しにくいと感じる大きな理由がある。 次にその理由を述べたい。
理解がしにくくなると思われる理由
オブジェクトは既に存在する
ブラウザでwebページを表示させる時、実は頼んでもいないのにオブジェクトが勝手に作られている。
それは我々がプログラミングをしやすいよう、あらかじめデータ(webページの構造などのデータ)や機能（データを操作する機能)をオブジェクト化してくれているブラウザの配慮によるものである。
一昔前のブラウザは独自でオブジェクトを作っていた。ブラウザ間での互換性は乏しかった。個々のブラウザに対してプログラミングをしなければならないような状態だったのだ。これはとても効率の悪いことなので、作るオブジェクトを規格化しようとする動きが出てきた。そして実際に仕様がまとめられた。
現在のブラウザの多くはその仕様におおむねは従ってオブジェクトを用意してくれる。いわゆるDOM(DOMオブジェクト 以下DOM箱と呼ぶ)という奴である。
こいつがjavascriptの理解を阻んでいる張本人だろうと俺は思っている。
現在のところweb(ページの作成で)でなんかやりたいと思ったらDOM箱に対しての操作が対象になる。極端な話javascriptを用いる場合の大半は「DOM箱をいじる」ということに帰結する。(javascriptの存在理由自体が「DOM箱をいじる」為に生まれたと言っても過言ではない)
webページはDOM箱で表現される
タグの情報とか、CSSの構造とかwebページを操るのに必要な情報や機能はなにからなにまで全部このDOM箱に入っている。
DOM箱、とてもとても構造が複雑である。箱の中に箱が、さらに箱が、そして箱が、しつこく箱が入りまくっている入れ子構造になっているからだ。
webページをオブジェクトで表現する為に複雑になるのは仕方のないことなのだが、正直仕様書を見ない限りとても全部を把握できるような量じゃない。
いやむしろ最初は仕様書を見たってよくわからない。DOMの仕様書を見るのが好きですと言うやつがいたらそれは変態だ。(俺は好き)
やりたいことをするときに
「CSSのここをjavascriptで書き換えたいのだが…」という欲求があったとして、みなさんはどうしているだろうか？
書き換えたいCSSの情報がどの箱にどのような名前で入っているか見当もつかないはずだ。なおかつ書き換えに使う為の関数も箱のどこに入っているのやら。仕様書見て「あっだめだこれ」と思ったかもしれない。
仕様書は英語だし、日本語訳見たってこれ日本語かと思うほどに難解な言い回しでわけわかめである。しょうがなく嫌いな先輩に聞いたり、書籍を買ったり、知恵袋などに教えを乞うたりしなければならないのではないか。
オブジェクトの概念はただの箱だから非常にシンプル。ただ、実際になんらかの構造をオブジェクトで構築するととても複雑になるという例の一つがDOMなのである。
いきなり難しすぎる
多くの人にとって初めて触れる本格的なオブジェクト構造はDOM箱だ。レベル1の勇者がバラモスに戦いを挑むようなものである。
難敵だ。勝てるわけがない。これがjavascriptは難しいと思わせる大きな理由の一つなのである。
jQueryの功罪
jQueryは便利だけど…
jQueryを使えばいいのでしょと言っているあなた。javascriptを理解していく入口としてはとてもいいと思う。jQueryは非常に優秀なプラグイン(プラグインって呼ぶのもどうなんだろ)なので使うのになんら問題はない。実際jQueryを使えばかなりの事ができると思う。
ただjQueryを使うこととjavascriptを素で使うことは別物と思った方がいい。jQueryはjavascriptでDOM箱をいじくるのをとっても簡単にしてくれている。
DOM箱のどこに何が入っているかあんまりわかっていなくてもjQueryを使えばDOM箱をいじくることが出来る。だから急激に広まったし、みんな使っている。ブラウザの差もほとんど吸収してくれるしね。
javascriptの裾野が現在の広さになったのもjQueryのおかげともいえるかもしれない。
こういった難しいことを簡単にしてくれるプログラムの事をラッパーなどと呼ぶ。難しい部分を包んで(ラッピング)簡単にしてくれるという意味だ。
使わない勇気
ただ本当にjavascriptを理解したいならjQueryは使うべきではない(勉強の時はという意味で)
なぜならDOM箱の理解が進まないからだ。これはjavascriptを習熟する為には害悪である。 あなたがDOM箱を、javascriptそのものを本質的に理解できないのは、jQueryを使っている所為かもしれない。
「jQuery使えているからjavascript使えているよ」と言う人の何たる多いことか。 あなたにはそう言ってほしくはないのである。
javascriptを理解するには
急がば回れ
正直なところプログラマーではないあなたがjavascriptを理解するにはDOM箱を理解するのが結局のところ早道になると思う。別なアプローチもあるけど、プログラマーの人にしかできないことなので、ここでは言及しない。
DOM箱を読み解くことがもっとも効率的なjavascriptの習得になるだろう。
具体的にはMDN（Mozilla Developer Network)等のDOM資料ページを少しづつでいいから毎日繰り返し見よう。見ていくうちに「こういうデータがあるんだ」「こういう関数(メソッド)があるならこういうことができるな」と思えてくるはずだ。
そしてできれば短くて構わないので実際にコードを書いて、データを表示させたり、関数の挙動を確かめたりしてみよう。 その積み重ねが確実にjavascriptの理解度を深めてくれるはずだ。
もちろんjavascriptの文法も重要だが、語彙を増やせば文章が豊かになるように、理解が進めば条件式やループの書き方もうまくなっていくはずだ。
DOM箱の構造を知っていくとブラウザの挙動や、実装されている機能や仕様にも明るくなる。それはweb全般に対しての知識を押し上げてくれる。さらに高度なことが出来ていく契機にもなるはずだ。
勉強の資料
MDN（Mozilla Developer Network) Firefoxを作っている団体のページである。ページがきれいなのでお勧め。基本的に日本語で見れるけど一部翻訳されてなく英語の部分あり
- トップ https://developer.mozilla.org/ja/
- DOMについて https://developer.mozilla.org/ja/docs/DOM/
- JavaScriptガイド https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide
- W3C DOM4(英語) http://www.w3.org/TR/dom/