JavaScript初心者がつまずいたポイントを、書籍が解決してくれた

この文章は、「ノンプログラマのためのJavaScriptはじめの一歩」を読み終わったばかりの、JavaScript初学者の勉強メモです。今までWebで検索したりしてもいまいち理解が不十分で、前に進めなかったJavaScriptを、初めて書籍でがっつり勉強しました。

1.HTML,CSSとの連携が何よりも知りたい

Web制作会社にデザイナーとして勤務していた私は、HTMLとCSSは書くことができました。一方で、JavaScriptやjQueryは、他の人が作ったプラグインなどを拝借して、ちょろっと書き換える程度。記述もまぁなんとなく分かるけれど、いざ自分で0から書けと言われると「？？？」という感じでした。Web上に無料で転がっている情報は確かに多いのですが、拙い知識でググっても、出てくるのは「配列とは」「if文とは」「関数とは」という概念的なものか、高レベルな実装手法の２極化でした。Webデザイナーとして一番知りたい「HTML,CSSとの連携」の部分はふわっとしていることが多かったのです。

そのあたりを詳しく説明している書籍を探していて、本屋で見つけたのが「ノンプログラマのためのJavaScript はじめの一歩」でした。

2.windowオブジェクト、DOMを知ることで、悩みは７割解決した

JavaScriptにはwindowオブジェクトというのがあります。これはあらかじめJavaScriptに用意されているものなので、すぐに使うことができます。下記は、「hello,world」というアラートを出すためのものです。

window.alert('hello,world');

そして、驚くべきことに、この「window」は省略することができるのです。

alert('hello,world');

上記の二つは全く同じ意味です。今までも見かけていましたが、「省略してもしなくても良い」ということを知らなかったので、それが混乱の元になっていたのだな・・・と思いました。あの有名なconsole.log();も、windowオブジェクトの一つで、初めにwindowが省略されているのだと知りました。そして、windowオブジェクトの中でも結構よく見るのが下記の記述。

window.onload = function(){

//処理

};

window.onloadは「windowの読み込みが終わったらカッコ内の処理を行います」という宣言のようなものです。この中(//処理に当たる部分)で、windowオブジェクトの一種であるDOMの処理を書いていきます。DOMとは、Document Object Modelの略で、JavaScriptからHTMLやCSSを操作する仕組みのことです。例えば、idから要素を取得したり（getElementById）、要素を作成したり（createElement）できます。

windowオブジェクトもDOMも、見かけたことも使ったこともあったはずなのですが、体系的にまとまって学習できたことはかなりプラスになりました。

3.jQueryが何者なのかが分かった

jQueryとはライブラリであり、同時に関数でもあります。つまり、jQuery（というライブラリ）を読み込むと、jQuery（という関数）を使えるようになります。そして、$マークはjQueryの別名です。何を言っているのだか・・・と思われる方もいるかもしれませんが、私はこれが整理できてだいぶスッキリしました。

//下記の二つは書き方違うだけで同じ　
//一つめ

$(function(){

});

//二つめ

jQuery(function(){

});

また、jQueryオブジェクトの変数の先頭に付いている$はただの習慣であり必須ではなく、つける人とつけない人がいるというのも驚きでした。頻繁に登場する$マークは、全てに文法的な意味があるものと信じきっていました。

//下記の二つは書き方違うだけで同じ　
//一つめ

var $box = $('#box'); 

//二つめ

var box = $('#box'); 

3.JavaScriptをちゃんと理解してからjQueryをやる

jQueryは、生のJavaScriptに比べ、見た目もCSSに近く、簡単そうに見えます。上で書いたようなwindowオブジェクトやDOMを使った記述も、実際にはどんどん複雑になりますが、jQueryで書けばよりシンプルに書けます。だからといってjQueryだけやればいいのかというと、そうではなく…。やはり大元を理解することで、「何が簡略化できているのか」が分かるのは大きいです。また、Webデザイナーとしては、JavaScriptやjQueryは「人のコードを元に書き足す、書き直す」ことがとても多いです。だから、自分が書けるかどうかも大事ですが、まずは読めることが必要なので、そういう意味でも、基本的な知識が備わっていた方がいいなと思います。

4.これから

Webの技術だからWebに情報はたくさんあるのですが、書籍でまとまった知識が得られるのはかなり大きかったです。ちなみに、電子書籍ではなく物理本なので、たくさん書き込みしたり付箋貼ったりしながら勉強しました。理論が少しだけ分かったので、これからどんどんコード書いていこうと思います。それで壁にぶち当たったら、また勉強しようかなと。以上です！