Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
JavaScript
入門編
- トップページ
- JavaScript入門編 - JavaScriptの記述場所
JavaScriptの記述場所
みなさまどうもこんにちは。
さて、JavaScriptの概要を学んだ所で続いて記述場所や読み込み方法についての解説をしていきたいと思います。
基本的にプログラム言語というのは実行環境を作るところから始まります。例えばC言語だとコンパイラというものがどうしても必要になってきます。
コンパイラというのは記述したプログラムコードを機械語(0と1で構築されたプロセッサーが直接理解できるバイナリ)に変換するためのツールです。
C言語では高機能のSDK(開発用に配布されるツール)などを使わない限り、コンパイラで一度コンパイルをしないと動作確認できなかったりするので慣れるまでちょっと大変なんですが、JavaScriptの実行環境というのは非常に簡単で、テキストエディタとブラウザがあれば事足ります。JavaScriptはプログラムコードを書いてそのままブラウザで実行させることができるのでとっても楽です。特に何もインストール等をする必要がありません。
JavaScriptのように書いたコードをそのまま読み込ませて動かせるものをインタプリタ型と呼びます。
そして地味なC言語とかと比べてJavaScriptでは文字を表示させたり、色を変えたり、オブジェクトを動かしたりと見た目も楽しいのでそれもナイスな部分かもですね。
ただしJavaScriptは目には見えない裏側の動きがかなり多く、ややこしい事も多い言語です。一昔前は超ボロクソに言われてました。最近JavaScriptは再評価され、だいぶ日の目を浴びるようになってきましたがJavaScriptのややこしいところは昔からそのまま変わってません。というわけでJavaScriptを勉強するときはちょっと大変な事も多いかと思います。そこは気合で頑張っていきましょう。
では話を戻してJavaScriptってどこに記述するのか、という事ですがインラインで直接書く方法と外部ファイルを読み込ませる方法があります。CSSと同じですね。それぞれ詳しくみていきましょう。
インラインでJavaScriptを記述するパターン
まずインラインでJavaScriptを書くときはscript要素の中に書きます。 こんな感じですね。
<script> // ここにJavaScriptの処理かくよー </script>
このように要素の中にJavaScriptを記述すればそのまま実行することができます。
昔はtype属性というものを指定して、
<script type="text/javascript"> // ここにJavaScriptの処理かくよー </script>
と書いていたのですが、HTML5の場合はデフォルトのtype属性がJavaScriptなのでtype属性を特別記載する必要はありません。あ、ちなみに『 type="text/javascript"』を書いちゃっても大丈夫です、全く問題ありません。
CSSの場合は特殊な設定を入れない限りhead要素の中に記述する、という文法ルールがありました。しかしscript要素はHTMLファイルの中のどこに書いてもOKです。
記述する場所は大きく分けて3つですね。『head要素の中』、『body要素の中』、『bodyタグの閉じタグの直前』の3つです。
この記述する場所というのが結構重要になってきます。最近のJavaScript業界ではbodyタグの閉じタグの直前にscriptタグを記述するのが一般的な作法となっています。
その理由としてすべてのブラウザではJavaScriptを読み込んで処理している間は他のレンダリング(HTML要素の読み込み)を中断するという処理になっているからです。HTML5から非同期で読み込みできるasync属性などが追加されましたが、そういった特別な事をしていない限りほぼ全てのブラウザで同じようにレンダリングが行われます。
例えばhead要素にJavaScriptを書いてしまうとJavaScriptが読み込まれた瞬間にはページを構成している全てのHTML要素の読み込みが終わっておらず、何かHTML要素を操作するJavaScriptが記述されていた場合は『要素が読み込まれた後に処理を実行して！』という記述を追加しないといけません。bodyタグの閉じタグの直前にJavaScriptを記述すればほぼ全てのHTML要素が読み込まれた状態でJavaScriptの読み込みを始めることができるのでスムーズな処理を構築することができます。
もちろんhead要素の中にscriptタグを書くことも間違い、というわけではありません。状況によってはページを読み込ませる前にJavaScriptを走らせないといけない場合があったりしますので目的別で使い分ければOKです。ただし、当記事は入門編というわけでbodyタグの閉じタグの直前に書くという事で進めて行きたいと思います。
というわけでインラインで記述する場合はこんなところになりますね。
続いて外部JavaScriptを読み込ませるパターンです。
外部ファイルから読み込ませるパターン
続いて外部ファイルからJavaScriptを読み込ませる方法です。こちらCSSとほぼ一緒です。
CSSの場合はlink要素のhref属性にパスを記述して読み出ししていましたが、JavaScriptの場合はscript要素にsrc属性をつけて、その値にパスを記述します。
JavaScriptファイルの拡張子は『.js』です。仮に『hoge.js』というファイル名だとするとこんな感じですね。
<script src="./hoge.js"></script>
link要素を使用した場合と違ってscriptタグは閉じタグが必要なので忘れないようにしましょう。
この読み込み用のscriptタグの記述場所についてはインラインでJavaScriptを記述した場合と同じで、head要素の中やbody要素の中など基本的にどこに書いてもOKです。イメージとしてはインラインで書いていた処理がそっくりそのまま外部ファイル化されているだけ、という感じですのでインラインの時と同じようにbodyタグの閉じタグの直前に書くというのが一般的です。
さて、インラインの時には意識する必要がなかった事柄があります。それは文字エンコーディングです。HTML5の推奨文字エンコーディングは『utf-8』となっているのでJavaScriptファイルも『utf-8』で記述する必要があります。
もしHTMLファイルとJavaScriptファイルで別の文字エンコーディングにする必要があるときはcharset属性に指定します。こんな感じですね。
<script src="./hoge.js" charset="Shift_JIS"></script>
このようにHTMLファイルとJSファイルで文字エンコーディングが違う、という状況は古いウェブサイトをHTML5へアップデートする時ぐらいにしか存在しませんのであまり出くわすことはないかと思いますが念のため覚えておきましょう。
というわけで読み込み方法とか記述場所とかの解説は以上となりますがいかがでしょうか？ちょっと慣れないと難しいかもしれませんが書いていけば徐々に慣れていくと思います。
次の記事ではコメントアウトとアラートについて勉強していきましょう。次から本格的に記述をしていきたいと思います。
ではではー。
この記事は桜舞が執筆致しました。
著者が愛する小型哺乳類 |
桜舞 春人 Sakurama HarutoISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。 |
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
