JavaScript 共通ソース

共通のソースコードを外部ファイルに記述し JavaScript で読み込む

メニューのリンクリストやフッターなど、各ページに共通の部分があります。共通部分も、各ページに同じソースコードを記述する必要があります。ところが、ページ数が増えてきたりすると、共通のソースコード部分を修正したくなった場合、全てのページを修正しなければならなくなります。
そこで、共通部分は外部ファイルに書いて、必要なページでその外部ファイルを読込めば、もし修正が合った場合など、外部ファイルだけの修正で済みます。
外部ファイルを読込むことが出来る HTLM 用の言語は、色々ありますが、一番身近なのは JavaScript でしょう。ここでは、JavaScript をつかって、外部ファイルに書かれた共通ソースコードをインクルードする方法を、紹介します。

外部ファイルに書かれた共通ソースコードをインクルード

次のサンプルをクリックして、外部ファイルに書かれた HTLM を読込む例を確認してください。
サンプル：　外部ファイルの HTLM を読込むサンプル
このサンプルの HTLM ソースコードは、次の通りです。方法は、外部ファイルの document.write コマンドで、共通部分を書き出すだけです。

したがって、外部ファイルを読込む部分は、外部ジャバスクリプトを読込む次の記述になります。

document.write では、> や < のタグも有効になりますので、HTLM も記述できます。改行は、使えません。ただし、「"」ダブルコーテーションや「'」シングルコーテーション「\」円記号（バックスラッシュ）などを使用したい場合は、「\」を前につけて、エスケープする必要があります。document.open() は、ドキュメントを開いて書き出し可能な状態にします。openメソッドで出力を開始したドキュメントは、document.close() で出力を終了します。document.write だけでも、動作することが多いようですが、 openメソッドを利用したほうが、トラブルが少ないようです。
上の部分にインクルードした、JavaScript で書かれた外部ファイルのソースコードは次の通りです。改行が使えないので、ちょっと読みづらくなります。

改行を使った 外部ファイルの例

上記例は、改行が使えず、ソースコードがちょっと読みづらくなりました。JavaScript には、ヒアドキュメントのような記述がありませんので独自のスクリプト関数をつくらないと、document.write に、HTLM のソースコードをそのまま記載することは出来ません。
つぎに、簡易的に改行を使って、HTLM の表示を見やすくする方法を示します。記述を見やすくする例ですので、気に入った方法を利用してください。

str1 は、改行の前に「\」をつけてエスケープしています。なんと、改行もエスケープできるのです。
str2 は、一行ごとにダブルコーテーションで囲った文字列を「+」で接続しています。「+」で接続しているので、そこで改行できます。