javascriptが使えないと…
プログラミングの苦労
最近のweb制作の現場ではjavascriptを使う機会が激増している聞きます。プログラマーさんとデザイナーさんが分かれているならそんなに心配はないですが、状況によってはデザイナーさんが自身でプログラミングに手を出さないといけない現場もあるようです。むしろjavascript知らないのは悪みたいな風潮もあるらしいです。
只でさえデザインで神経をすり減らしているのに、プログラミングをやれなどとは過大な要求です。でもやらないとおまんま食い上げです。
今回の記事はそんな状況の方に少しでもjavascriptを理解する材料になったらと思い書いましました。よけいなお世話と言わないで。
オブジェクトオブジェクトうるせえんだよ
オブジェクト指向プログラミング
オブジェクト指向というパラダイム(考え方)の台頭のおかげでプログラミング言語の大半はオブジェクトという概念を理解する必要があります。
現在の主要言語のほとんどがオブジェクト指向でのプログラミングに対応しているし、javascriptも例外ではなくオブジェクト指向言語だ(オブジェクト指向も考え方に少し幅があるけど)
webデザイナーさんがやむを得ずjavascriptを使うとき、ただでさえプログラミングなんてやりたくもないのに、オブジェクト指向の理解を強要されることにとても苦痛があると思います。
オブジェクトという言葉がもうすでに意味不明。訳して「物体」ってなんだよ。
オブジェクトとは
この際はっきりしておきましょう。javascriptにおけるオブジェクトとは単に「データ構造」です。「データ構造」という言葉もなにやら難しげな感じなので、もっと簡単に言うと「箱」という理解でいいと思います。
オブジェクトとは単に「箱」の中に「名前を付けたデータ」（数字だったり文字列だったり、関数だったり)をいくつか突っ込んだだけのものです。
さらに理解がしにくい原因だと思いますが、箱の中にも箱を入れられます。 つまりオブジェクトの中にはオブジェクトもつっこめる訳です。
このようにしていくとても複雑な構造を構築できるのがおわかりいただけるのないでしょうか。オブジェクト指向の良い点は箱をこんな風に自由（あるときには複雑に）に作ることが出来る点にあるともいえます。
オブジェクトなんて所詮こんなものです。
しかし箱をうまく設計して関連させていくととても複雑な処理が行えるのです。ざっくりいうとそれがオブジェクト指向の一端です。
ただjavascriptではwebを扱うのに特化している所為で、オブジェクトが理解しにくいと感じる大きな理由があります。 次にその理由を述べたいです。
理解がしにくくなると思われる理由
オブジェクトは既に存在する
ブラウザでwebページを表示させる時、実は頼んでもいないのにオブジェクトが勝手に作られています。
それは我々がプログラミングをしやすいよう、あらかじめデータ(webページの構造などのデータ)や機能（データを操作する機能)をオブジェクト化してくれているブラウザの配慮によるものです。
一昔前のブラウザは独自でオブジェクトを作っていましました。ブラウザ間での互換性は乏しかった。個々のブラウザに対してプログラミングをしなければならないような状態だったのです。これはとても効率の悪いことなので、作るオブジェクトを規格化しようとする動きが出てきました。そして実際に仕様がまとめられました。
現在のブラウザの多くはその仕様におおむねは従ってオブジェクトを用意してくれます。 いわゆるDOM(DOMオブジェクト 以下DOM箱と呼ぶ)という奴です。
こいつがjavascriptの理解を阻んでいる張本人だろうと@MINOは思っています。
現在のところweb(ページの作成で)でなんかやりたいと思ったらDOM箱に対しての操作が対象になります。極端な話javascriptを用いる場合の大半は「DOM箱をいじる」ということに帰結します。 (javascriptの存在理由自体が「DOM箱をいじる」為に生まれたと言っても過言ではない)
webページはDOM箱で表現される
タグの情報とか、CSSの構造とかwebページを操るのに必要な情報や機能はなにからなにまで全部このDOM箱に入っています。
DOM箱、とてもとても構造が複雑です。箱の中に箱が、さらに箱が、そして箱が、しつこく箱が入りまくっている入れ子構造になっているからです。
webページをオブジェクトで表現する為に複雑になるのは仕方のないことなのですが、正直仕様書を見ない限りとても全部を把握できるような量じゃないです。
いやむしろ最初は仕様書を見たってよくわからないです。DOMの仕様書を見るのが好きですと言うやつがいたらそれは変態です。(@MINOは好き)
やりたいことをするときに
「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/
