気になった事を事細かに調べてまとめています

javascript外部化の為のまとめ ~javascript初心者向け~

2012年8月27日 [月] 11:48
javascript.png

javascriptってのをホームページとかに組み込む場合、多くの場合は外部化されます。また、A8のブログサービス「ファンブログ」の場合は、デザインテンプレート の文字数制限が割と少ない為、javascriptを多様する場合は外部化が必須だったりします。(文字数とかは覚えてないですが。。)
そこで、今回はその方法とかを書くつもりだったんですが、そういう記事は既に多くの方が書いているため、それをまとめる事にしました。

そんな訳で、javascriptを外部化するメリットとか、方法とか、その他javascriptの外部ファイルに関する事を書いている記事をいくつか紹介します。javascriptを学び始めたばかりの方とか、このブログのスクリプトをいくつか使って下さっている方とかの参考になればな、と思います。

javascript外部化のメリット


分かりやすい事のみを上げると、以下の様な物があります。
  1. 外部化したファイルがキャッシュされる事でページの表示速度が速くなる
  2. 複数の箇所で使っている同じコードの修正が楽になる
  3. <とかの記号に注意する必要がない
参考:JavaScript External File - JavaScript 外部ファイルについて

2つ目については、ブログサービスによっては1つのテンプレートで動作しているので、「外部化しなくてもコードの修正は1箇所だ!」って事もあるとは思います。ファンブログの場合は、アーカイブとか1記事とかプロフィールとか別々のテンプレートなので、そういう部分をまたいで共通のコードを使う場合は外部化した方が修正は楽ですし、修正し忘れがなくなります。

3つ目については、htmlファイルの記述言語によっては問題ないのですが、xhtmlで記述している場合には外部化しないと面倒な事があります。htmlファイルの最初の方に以下の様な記述があると思うんですが、これにxhtmlって書いてあったらxhtmlです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
面倒な事の詳細については、以下の記事が分かりやすく書いてあるので、そちらを参考にして下さい。
XHTMLファイルでのスクリプトの記述 - JavaScriptの記述方法 - JavaScript入門

seo的な効果を訴えている記事もありましたが、それについては確証がないので、個人的には「分からない」と言っておきますw

外部化の方法


外部化の方法は簡単です。基本的には、scriptタグの間に書いてあるjavascriptのコードをテキストファイルに貼り付けて、保存して、それを読み込むだけです。
具体的に書いてある記事があったので、それを紹介しておきます。
javaScriptの外部ファイル化 - FC2ブログのテンプレート工房

ただし、この記事で書かれている、>-- や --<はもともと無い場合もありますし、headタグ以外に記述してある場合もあります。まあそういう部分については、htmlとjavascriptのコードの違いが分かるくらいの初心者であれば説明する必要もないと思いますw
ファンブログでjavascriptを外部化した場合、アップロードの時とかに参考になりそうな記事があるので紹介しておきます。

javascriptとページの読み込み速度について


外部化とは関係ないjavascriptの基礎的な部分も含め書いてある分かりやすい記事を紹介しておきます。ちなみに、自分は面倒なので圧縮、軽量化はしてないですw
コードの圧縮や外部ファイル化とページの読み込み速度について|Webpark

また、読み込み順序に関する事を図も使って分かりやすく説明している記事があったので、そちらも紹介しておきます。
2/2 外部CSSと外部JavaScriptで表示速度の低下を防ぐには [ホームページ作成] All About

基本的な事なので知っている方も多いかとは思います。ただ、やはりjavascriptの記述が多くなると読み込みが遅くなってしまうので、なるべく必要最低限のコードを使う様に心掛ける必要はあるかな、と思います。

その他たまたま見付けた記事とかw


その他、javascriptの外部化について調べていたら見付けた、javascriptに関連する子ネタ的な記事を3つ程紹介します。
  1. なぜ!?CSS,JavaScriptなどの外部ファイルが読み込まれない原因 | CreaMo!-クリーモ!-クリエイティブをMotto!集めるブログ
  2. なぜアマゾンはcssやJavaSAcriptを外部ファイルにせず直書きしているのでしょうか? | Webデザイン・CSSのQ&A【OKWave】
  3. 一行で IE の JavaScript を高速化する方法 - IT戦記

1つ目はなった事がなかったので知りませんでした。もしもの為に紹介。
3つ目は、その記事の追記にも書いてある様に効果は薄い様ですね。興味ある方は、自分のページである時とない時で表示速度を比較して、実際に使ってみるかどうか確認してみると良いと思います。自分は面倒なので確認も、1行追加もしてませんw

最後に


最後のたまたま見付けた記事以外はかなり基本的な事ばかりだったと思います。javascript初心者としては知っておくべき事かなと思います。自分も初心者なんですけどねw
まあjavascriptは結構便利ですし、最近ではgoogleさんもjavascriptをある程度は認識しているっぽいので、表示速度が遅くなり過ぎない程度にjavascriptで色々やってみると良いんじゃないかな、と思います。
参考:googleさんは結構しっかりjava scriptも認識しているんじゃないか - ファンブログハック
name:
text:
筆者:おーとえす
好きな物:メロンパン
RSS
@time_is_panacea
モバイル版RSS@time_is_panacea
QLOOK BLOG