JavaScriptはHTMLの上で動いていく。
なので、HTMLファイルに直接書き込んだり、外のJavaScriptファイルをHTMLファイルから見に行くことによって動かす形になる。
このページではJavaScriptの基本的な書き方をお伝えしよう。初心者の方は参考にしてほしい。
JavaScriptの書き方
JavaScriptはHTMLを操作できるプログラミング言語だ。
他にも色々とできるが、基本的に「HTMLを色々と動かせる！」くらいに考えておけばOKだろう。
HTMLとJavaScriptは異なるプログラミング言語だ。だから、この2つを一緒にするには特定のルールに従ってプログラミングコードを書くことが必要になる。
JavaScriptコードの書き方には、大きく分けて以下の2つがある。
これらは書きたいプログラムの目的や種類によって選ばれる。どちらの方法でも対処できるように書き方を整理しておこう。
JavaScriptの記述方法1: 直接定義
直接定義とは、HTMLファイルに直接JavaScriptのコードを書く方法のことをいう。イメージ的にそのままだ。
要するに１ファイル目も２ファイル目も、３ファイル目にもJavaScriptを書いていく方法だ。
ルールはいたってシンプルでHTMLファイルの中に<script>タグを挿入し、そこにコードを書くだけでよい。
HTMLファイルの中にJavaScriptを直接定義する最も基本的なサンプルは、以下の通りだ。実際に書いてみよう。
ファイル名はなんでもいいが、最後に「.html」をつけてHTMLファイルにしておく。
このソースコードをブラウザで実行すると以下のようになる。
<script>タグの定義位置
サンプルの<script>タグが挿入されている位置に注目してほしい。
いくつか流儀があり、実は決まった位置がない。
最近の流行りは<body>のエンドタグのすぐ上、つまりHTMLの最後にコードを書く方法となっている。
が、<head>タグの中に入っていることも多いので、どちらかで書くといいだろう。
どちらがいいかはもう少しJavaScriptについて理解してからで十分だ。まずは気にせず行こう。
JavaScriptのコードの書き方2: 外部定義
外部定義とは、HTMLには「このファイルを読み込む！」という宣言だけを書き、JavaScriptのコード自体は外部ファイルに分割して書く方法のことをいう。
同じJavaScriptを何度も書く必要がないし、変更があったときにJavaScriptファイルだけ編集すればいいので楽だ。
外部定義はscriptタグにsrc属性を指定してコードを書くだけでよい。my-sample.jsというJavaScriptファイルを用意したら
とHTMLファイルに書けば、読み込んだことになる。””の中にJavaScriptのファイル名を書けば言い訳だ。
では、実際に書いてみよう。
HTMLファイルの中にJavaScriptを外部定義する基本的なサンプルは、以下の通りだ。
HTMLファイル
ファイル名はなんでもいいが、最後に「.html」をつけてHTMLファイルにしておく。
JavaScriptファイル
こちらはmy-sample.jsという名前をつけよう。
このソースコードを用意しておいて、HTMLファイルをダブルクリックしてみよう。
外部サーバーからのJavaScript外部定義ファイルの読み込み
ここで覚えておきたいのは、src属性は自分で用意したサーバー内のファイルだけではなく、世界中にあるサーバーのファイルURLを指定することができるということだ。
具体的なサンプルとして、JavaScriptライブラリであるjQueryを公式配信サーバーから直接自分のHTMLファイルに読み込む例を挙げておく。
ライブラリというのはまだわからないと思うが、便利な道具箱のようなものだと思って欲しい。これを読み込んでおくと、JavaScriptを簡単に書けたりする。
注意: 外部ファイルを自サーバー以外から読み込む際は、セキュリティリスクが常に付きまとうことを意識し、特に配布元に十分注意すること
直接定義と外部定義の比較
以上みてきたようなコードの書き方の違いの他に、この2つの定義方法にはそれぞれメリットデメリットがある。
| 直接定義 | 外部定義 | |
| メリット | 読み込みが早い | HTMLとJavaScriptが分離され再利用しやすい、管理しやすい 何度も同じJavaScriptを書かなくて済む |
| デメリット | HTMLとJavaScriptが混在しコードが乱雑になる、管理しにくい | ファイルが増えると、読み込みが遅くなる |
| 使いどころ | テストまたは小規模なプロジェクト、他人と共有しないもの | 大規模なプロジェクト、ライブラリなど他人と共有するもの |
基本的には外部に書くことのほうが多い。なんらかの理由があるときに直接書くことが多くなる。色々なファイルで呼び出して使えたほうが便利だからだ。
これらの特徴を理解しておき、JavaScriptの効果的なコーディングを心がけよう。
まとめ
このページではJavaScripの基本的な書き方についてご紹介した。まだ何を書いているかはわからないと思うが、書く場所がわからないと何もできない。
まずはこの２つの方法があることを知ることがJavaScriptの第一歩だ。