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

• ツイート
• 

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

むかしむかし

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

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

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

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

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

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

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

• JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで
• オブジェクト指向JavaScript
• JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

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

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

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

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

HTMLはかれこれ15年ぐらい触ってるはずですが、<a>タグをアンカータグと呼ぶのを初めて知ったです

— にわタコ (@niwatako) January 2, 2015

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

JavaScript って<script>タグでHTMLに埋め込むときはCDATAセクションで埋め込むんだ！知らなかった！！ / XHTMLファイルでのスクリプトの記述 – JavaScriptの記述方法 – JavaScript入門 http://t.co/zRCBo3QQ6g

— にわタコ (@niwatako) January 2, 2015

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

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

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

var 付けると付けないとでこんな違いがあるのかっ！！ Gist:JavaScriptと変数宣言 https://t.co/L81BQ5CKg7

— にわタコ (@niwatako) January 4, 2015

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

今まで書いたコードがどっかで誤作動してないかが怖い

— にわタコ (@niwatako) January 4, 2015

無知は恐ろしい。

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

まじかよ… / JavaScriptにおいて、ローカル変数は前後関係なくスコープ内全体で有効 https://t.co/8F2NtP2fd9

— にわタコ (@niwatako) January 4, 2015

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

関数の最初に変数宣言しまくってるコードが存在する理由を理解した。

— にわタコ (@niwatako) January 4, 2015

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

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

if文やwhile文はスコープにならないんだって。アババババババ

— にわタコ (@niwatako) January 4, 2015

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

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

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

"JavaScriptはれっきとしたオブジェクト指向言語です。しかしインスタンス化/インスタンスという概念はありますが、いわゆるクラスがなく…" 「オブジェクト指向＝クラスがある」と思ってた( ･`ω･´)

— にわタコ (@niwatako) January 4, 2015

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

JavaScriptってちゃんと言語仕様考えて作られたの？ハックしてこんな使い方してるの？？

— にわタコ (@niwatako) January 4, 2015

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

@niwatako この辺を見れば良いかと http://t.co/OrxT9KR8Kw あと興味があればこっちもw http://t.co/Z8cKhimwLy

— nmrmsys (@nmrmsys) January 4, 2015

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

システムがある程度まで成長すると、全体として硬直化が起きて、特に基本的なクラス群は相互の関連に縛られ、機能追加が困難となる。根本のクラスを簡単に変更できる方法がなければ、深刻な問題が生じる(要出典) Self – Wikipedia http://t.co/HZNhOGN3i3

— にわタコ (@niwatako) January 4, 2015

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

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

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

new 演算子って何者、何してるのこの子。

— にわタコ (@niwatako) January 4, 2015

概念レベル高い…1時間後ぐらいに理解する / RT: @kakusuke07: @niwatako prototypeをプロトタイプチェーンに追加したオブジェクトの生成と初期化の実行 / RE: new 演算子って何者、何してるのこの子。

— にわタコ (@niwatako) January 4, 2015

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

@niwatako pic.twitter.com/7abVV8iS04

— じばにゃん@mi (@upt0_me) January 4, 2015

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

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

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

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

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

ありがとうございます！！昨日勉強したのが整理されました！newの意味も掴めました！！ RT @Hikaru_oao: @niwatako JSに少し慣れたらこのスライドを読むとオブジェクト指向について分かりやすいと思います。 http://t.co/0LofZSsrJo

— にわタコ (@niwatako) January 4, 2015

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

お役に立ちましたか？

• ツイート
•