JavaScriptの勉強を始める際まず知っておきたい３つの知識
2015/12/21
学生やWebデザイナーの方でこれからJavaScriptやjQueryを始めたいという方は多いかと思います。いざ入門書などで変数や関数などを勉強しようにも、それ以前の箇所でつまづいてしまうという方もいるかも知れません。
そこで今回は本格的にJavaScriptの勉強を始める際に知っておくべき知識を紹介しようかと思います。今回は以下の３つの内容を説明していきます。
- プログラミングに必要なツール
- プログラムはどこに書けばいいのか
- プログラミングをする上での基本的なルール
この記事の目次
プログラミングに必要なツール
プログラミングをするためにはツールが必要です。
結論から書くと以下の2点を用意してください。
- Adobe Dreamweaver
- Google Chrome
まずエディタですが、この手の記事によく書かれているのが「メモ帳があれば大丈夫」なのですがオススメしません。どう考えても使いにくいです。メモ帳はあくまでもメモ帳です。メモ書き以外の用途にはオススメできません。
JavaScriptを書く人は多少なりともHTMLやCSSのコーディング経験があるかと思いますので、アドビ製品がインストールされている方がほとんどだと思います。というわけでDreamweaverを使いましょう。
アドビ製品なんて高くて手を出せないという学生の方に朗報です。アドビ製品は学割が適用されます。アドビ製品全部入りのCreative Cloudが月々3000円（40％OFF）で使えます。さらに2014年4月14日までに購入すれば月々1980円（60％OFF）で利用できてしまいます。学生がうらやましい！！
そしてブラウザです。最終的にはあらゆるブラウザで動作確認する必要がありますが、学習目的であればGoogle Chromeが一番だと思います。軽快に動作しますし大きなバグも見当たりませんので学習の妨げになりません。
最新のブラウザであればJavaScriptのデバック機能（F12キーで起動）が搭載されています。これを利用し動作の検証をしていくわけです。この画面に「Console」というタブが存在すると思いますが、JavaScriptのデバッグで使うのは基本的にはこの部分だけです。
デバッグ機能（Console）の用途ですが主に以下のようなものがあります。
- 変数の中身の確認
- エラーの確認
特に初心者の方はエラーを多く出すと思うので、ブラウザでプレビューする際、まずはConsoleでエラーが無いか確認してください（エラーは赤文字で表示されます）。
パソコンが一般に普及していなかった頃はどうやってプログラミングしていたか？
余談ですが私が学生の頃はパソコンを持っている人がまだ少なく、学校でも自由にPCを使える環境が用意されていませんでした。そんな状況でどうやってプログラミングをしていたと思いますか？
答えはペンとノートです。
プログラムを実行させるためにはパソコンが必要ですが、プログラミングをするのにパソコンは必ずしも必要ではありません。
専門学生の頃は情報系の学科にいた私ですが最初の2ヶ月間はひたすら紙面上でプログラミングをしていましたね。かなり苦痛でした・・・。プログラムは実際に動くから楽しいわけで、動かないプログラムをひたすら書き続ける（シャドープログラミング）のは拷問です（笑）
しかし、脳内でひたすら考えないといけない為、ロジックを組み立てる能力は確実に身に付きますよ。
プログラムはどこに記述すればいいのか
プログラムを記述する場所は二通りです。
- HTMLのScript要素内
- JavaScriptファイル
こちらがHTMLのScript要素内に記述する例です。
<script type="text/javascript"> //ここにプログラムを書く </script>
そして、こちらが外部JavaScriptファイルを読み込む例です。
<script type="text/javascript" src="script.js"></script> //script.jsの中にプログラムを書く
いずれも基本的な動作に違いはありません。しかし、JavaScriptファイルを外部読み込みにすれば各ページで使いまわせます。汎用的な処理であったり各ページ共通のパーツを制御する処理は外部ファイル化したほうがよいでしょう。
Script要素はHTMLのどの位置に記述するべきか
いずれの方法もScript要素を利用すること自体は共通です。このScript要素はどこに記述すればよいのかという話になりますが、HTMLの文法上ではHead要素内、Body要素内どちらでも記述可能となっています。
プログラミングに慣れないうちは</body>（body終了タグ）の直前に記述することをおすすめします。Head要素内やBody要素内前半部分に記述すると余分に処理を書き加える必要がある為です。詳細はこちらのページをご覧ください（多少慣れてきた頃に読んだほうが良いかもしれません）。
また、ガジェットのようなプログラムは表示させたい位置にScript要素を記述することも多いですが、それはケースバイケースです。プログラムの仕様によって変わってきます。
プログラミングをする上での基本的なルール
JavaScriptは比較的にルールがルーズな言語です。
しかし、それがエラーを生み出す原因になります。自らでルールを作り堅実にプログラミングしましょう。というわけで必要最低限のルールをまとめました。参考にしてください。
- プログラムは全角文字では動作しません。原則すべての文字（全角スペース含む）は半角で記述してください。特に全角スペースは探すのも困難なので気を付けること。なお、Webページ上に出力させる文字はこの限りではありません。
- スペルミスに気を付ける。プログラムは1文字間違えただけで動かなくなります。
- 慣れないうちは一気にプログラムを書くのではなくこまめにブラウザで確認するようにしましょう。一気に書くとエラーが出た際その場所の特定が大変です。
- ソースコードには適切にインデントを付けましょう。大まかな構造が把握しやすくなりミスも減ります。
- 省略可能な文字・記号（行末のセミコロン、変数定義のvarなど）であっても省略せず明記する。意図しない動作を抑制できます。
- エラーが出ていないのに思うように動作しない場合はconsole.log()を使い変数の中身を確認しましょう。実際の記述例はこちらのページをご覧ください。
終わりに
このページを読み終えたらいよいよ本格的にプログラミングの学習がスタートします。まずは変数の概念から学習しましょう。
また、この記事を読んでいた方には下記の書籍もオススメです。「経験ゼロでも挫折することなく理解できた」と好評のようです。はじめに買う一冊としていかがでしょうか。
【おすすめ】JavaScript・HTML5などがマンツーマンで学べるオンラインプログラミングスクールCodeCampの特徴・利点