10年間JavaScriptをコピペしていた僕がJavaScript本格入門して知った驚愕のJavaScript言語仕様覚書

niwatako
  • このエントリーをはてなブックマークに追加

JavaScriptをなめていた私が勉強しなおした結果、色々驚愕の事実が発覚したお話。JavaScriptをご存じの方には当然の内容かもしれません。

むかしむかし

私にとってJavaScriptといえば、高校生時代(10年ぐらい前…)にブログアフィリエイトをするために、当時流行っていたホバーウィンドウで広告を目立たせるなどといった浅はかな用途に、何処かからコードをコピペしてくるシロモノでした。

というわけでJavaScriptといえば「コピペすれば使える」「プログラマじゃなくても使える簡易的な言語」「広告を表示するために利用される鬱陶しい奴」というイメージが正直な所でした。

進化し、利用シーンが広がり、エンジニアとして無視できなくなりつつあるJavaScript

しかしながらその10年前から現在までに、広告や無駄な装飾に多用され有益な使い方と言えばアクセス解析かな、的印象だったJavaScriptは、ひょっとするとあの頃からJavaScriptが一番目ざましく進化したんじゃないかと思うぐらい、WEB業界の中心で発展を遂げてきたように思われます。

HTML5とスマートフォンの登場でWEB製作には欠かせない存在となり、さらにフロントエンドにとどまらずコマンドラインやサーバーサイドまでカバーしてWEB業界の中心あるいはIT業界の中心にいらっしゃるJavaScript様をそろそろきちんと勉強しなければ、と思っていたところへ、ちょうど仕事でJavaScriptを使うことになったので、年末年始のお休みを使って勉強してみました。

JavaScript本格入門を読んでみたよ

どうやって勉強するかはJavaScriptを専門言語として勉強している人に聞くのが一番。おすすめの本を教えてもらいました！

勉強を始めようと思ったのが旅行出発前だったので、Amazonでは間に合わないぞということで本屋に駆け込んで、在庫があったJavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまでを購入しました。

※ 現在では改訂版が出版されています
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

この本は、他の言語やオブジェクト指向の知識を持った人がJavaScriptの クラスがないオブジェクト指向 を理解しやすいように配慮されており、JavaScriptの場合はこんな仕様なんだ、アレはこう表現するんだ、というのがとてもわかりやすかったように思います。

読んでみてJavaScript以前のレベルで知らなかったこと

これらを知らなかったのはお恥ずかしい話ですが、この本を読んだことがきっかけで知ったこと〜優しい編〜 ですっ！(/・ω・)/

HTMLを勉強したのは小学生だったので全然名前とか意識してなかった〜

<script type="text/javascript"></script>の中に直接書いてた！！

JavaScriptの言語仕様にまつわる衝撃の事実

1.知らなかった！var省略の恐怖！！


うぉーーvar省略すると勝手にグローバルスコープにするのかぁ！！


無知は恐ろしい。

2.まだある変数とスコープの恐怖！！


ローカル変数内で、グローバル変数に値を代入したつもりが、できてない…！？
JavaScriptでは、変数はどこで　var を付けて宣言されても、スコープ先頭から有効なんですねー。


最初に全部var付けて宣言しておけば、グローバルとローカル間違えないですもんね。。

3.これで終わったと思うな、制御構文の恐怖！！


あばばばば
他の言語やってると、for文の中で宣言した変数は、for文抜けたら無効だと思いますよね！JavaScriptだと、for抜けてからも値が変数に残っている（というか変数が残っている）んです！forの前に同じ名前の変数があったら、そいつの中身が変わっちゃうんです！
過去のコードが怖くなる話だ！！(/ω・＼)

最難関、プロトタイプ継承

JavaScriptはオブジェクト指向言語です。しかし、多くのオブジェクト指向言語でつきものである”クラス”は存在しません。


クラスがないオブジェクト指向ってどういうことでしょう。


こんなのオブジェクト指向なんでしょうか！？
もしかして、無理矢理オブジェクト指向を実現するためにJavaScriptの仕様をハックしたんじゃないの？
本当に最初からオブジェクト指向で設計してたわけ？？


なんと、クラスがないのは意図された仕組みだったようです。
どういうこと…！？
どうしてクラスを捨てたの！！


クラスベースのオブジェクト指向で継承を使ってプログラムを作ると、たくさんのクラスに継承されている根幹のクラスを仕様変更するのは影響が大きくなりすぎてしまい、そうやすやすと機能追加できなくなる。

そこで、継承した子供の方から、継承元を拡張できるべきではないのか、という発想でJavaScriptが採用したのが、プロトタイプベースのオブジェクト指向だそうです。（間違っていたら遠慮なくコメントでツッコミをいただけますと幸いでございます( ≧ω≦)っっっ）

というわけでJavaScriptのオブジェクト、プロトタイプ、プロトタイプチェーンという概念の理解が、JavaScript言語設計の根幹に関わる最重要項目なわけですが、、、


オブジェクト指向に始まりプロトタイプチェーンなど、
この辺を理解するのが凄く難しいのです。

プロトタイプわけわかめ

わけわかめなプロトタイプチェーン、果てはタイムラインにこんなコラージュが届くに至りました。
プロトタイプ継承難しい！！

ちなみに、プロトタイプ継承を使いこなす色々なパターンはオブジェクト指向JavaScript
のほうが多く例が載っているかもしれません。

また、現在主流になりつつあるJavaScriptの新しい仕様ECMAScript5では、オブジェクト指向周りが強化されており、新しい内容についてはオブジェクト指向JavaScriptの原則が詳しいと思われます。

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまででひと通り学んだら、上記2冊も参考にされると理解が深まる（場合によっては謎が深まる可能性もありますが）と思います！！

あとはこちらのスライドがわかりやすいという情報を頂きました。


ひと通り勉強してからこのスライドを見ると、学んだことがとても良く整理されました。こちらで復習されることをオススメします！！

お役に立ちましたか？

  • このエントリーをはてなブックマークに追加

3 thoughts on “10年間JavaScriptをコピペしていた僕がJavaScript本格入門して知った驚愕のJavaScript言語仕様覚書”

  1. 何も知らない初心者ってJavaScirpt っていう言葉しか知らず
    JavaScirpt 使うよと言うと、知ったかぶりだ！と意味不明な事を言われたりします。

    多分、揚げ足を取るタイプなんだと思いますが、プログラムが出来ない人に
    JavaScirpt の話は禁句に近しい程、難しい話になり兼ねないです（上手に話出来る人は別だけれど）。

    JavaScirpt 程身近なのにJavaScirpt 程奥が深い言語も今ではこの言語くらいではないでしょうか？

    最近のブラウザの立場が曖昧だけれど、V8とかエンジンがしっかり制定されてバグがなければ
    必ず同一に動こうと振る舞うので便利ですが
    ブラウザ上のDOMの扱いも共通化されていても違いがあったりするので
    初心者にはDOM、オブジェクト指向やらインスタンス、プロトタイプを説明しても
    分かりにくいかもしれないです

    いろいろ言語かじってからJavaScirpt に入らないと
    辛い部分があるのではないかと思います。

    極論自分で覚えるのならば、JavaScirpt で始まっても、途中で他の言語をして
    再びJavaSicprt に戻ってくるなどをした方が良いと思います。

    そもそもトランジスタやらフリップフロップなどの処理装置から物事を考えていない人に
    プログラムを教えても、パソコンが処理してくれる、スマホが処理してくれるものだから・・・とか
    言いかねないので、簡単なマイコンのプログラムや、トランジスタを使った半加算器やら
    全加算器くらい作らないで理解している今時の人達の気持ちが分からないです

    なんでしょうね、この時代の違いを感じるのは

    返信

  2. すごくどうでもよい事なのですが、
    gistfile1.js で一度 hoge(); をするのを忘れている気がします（あれだと当然ですよね…）。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です