JavaScript Tips
.js外部ファイル編
jsファイルでメンテナンスを楽にする



■  [2] 複数ページで.jsによるテンプレートを利用する

.jsファイルはHTML内のスクリプトを外に出すことでHTMLをシンプルにするとともに さまざまなスクリプト関連のメンテナンスをHTMLから切り離すことができます。 今回は、ページのヘッダ/フッタ部分や目次リンクなどの定型化可能なHTML要素を JavaScriptで書き出すことで複数のHTMLには触ることなくメンテナンスを可能にする方法について紹介します。

  • 1: テンプレートを作ってみる
  • 2: 目次のダイジェストリンク
  • 3: データも別ファイルに




  • 1: テンプレートを作ってみる

    下記HTML(testA0.htm)はテーブルを 使ったタイトル用のバーです。
    
     testA0.htm
    
    
    <html> <head> </head> <body> <table bgcolor="orange" width="95%"> <tr> <td> タイトル </td> </tr> </table> </body> </html>
    これ自体は簡単なHTMLです。でもここで、 ちょっとだけ想像してみてください。 もし、このタイトルと同じスタイルのタイトルバーをページ内や他のページ でもたとえば100回も使うとしたらどうでしょう。

    もし100回使うなら同じHTMLを100回繰り返して 書かなければなりませんし、テーブルのレイアウトなどを変更したくなったときにも やはり100回書き直さなければなりません。

    そこでまず、同じページ内でスクリプトを使って楽をしてみるという方法が次のサンプル (testA1.htm)です。
    
     testA1.htm
    
    
    <html> <head> <script type="text/javascript"> <!-- function templa(title) { //htmlテンプレート html = '<table bgcolor="orange" width="95%">' + ' <tr>' + ' <td> ' +title+ ' </td>' + ' </tr>' + '</table>' //書き出し document.write( html ) } //--> </script> </head> <body> <script type="text/javascript"> <!-- templa( 'タイトル' ) //--> </script> </body> </html>
    これはテーブルタグの書き出し部分を関数にまとめてタイトルはその関数の引数として 渡すようにしたものです。これで、同じページ内に同じバーが何度出てこようと修正が あろうとすべてのテーブルタグを書き直すという必要がなくなります。

    バーを表示した居場所へ次のソースを書くだけです自動的にテーブルタグを書き出してくれます。
    
    
    <script type="text/javascript"> <!-- templa( 'タイトル' ) //--> </script>
    ちなみに testA2.htm は、バーを5回使ったサンプルです。

    とはいえ、これでも、スクリプト自体をページ内に直接書き込んでいますから 何かの事情があってタイトルを変更する場合などにはすべてのHTMLファイルを 直接開いて修正する必要があります。つまりもし1000ページあれば1000個のファイルを 開かなければなりません。

    おまたせしました(笑)。ここで、.jsファイルが活きてくるというわけです。次のサンプル (testA3.htm)はtestA1.htmの関数templa()を.jsファイル としてtestA3.jsという名前のファイルに書いて外に出し、スクリプトタグで読み込んでいます。

    
     testA3.htm
    
    
    <html> <head> <script type="text/javascript" src="./testA3.js"></script> </head> <body> <script type="text/javascript"> <!-- templa( 'タイトル' ) //--> </script> </body> </html>
    このように、よく使うHTMLをスクリプトで書き出すようにすることでテンプレート化し 、更に.jsファイルとして外に出すことでHTML内はシンプルになり、 修正も簡単になります。たとえば、もしこのテンプレートを1万ページで利用していたとしても .jsファイル内のスクリプトをたった一度いじるだけでなんと1万ページすべてが書き換わってしまうという 楽ちんワザなのです。


  • 2:
  • 3:


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。