JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

インラインスクリプトと外部JavaScriptファイルの使い分け方｜パフォーマンス最適化のポイント

インラインスクリプトと外部JavaScriptの使い分け

パフォーマンスを向上させたいのであれば、JavaScriptはできる限り外部ファイルとして管理することをおすすめします。コードをHTMLから分離しておくことで、Webブラウザがスクリプトをキャッシュしやすくなり、再訪問時のページ表示速度が大幅に改善されます。

一方、インラインスクリプト（HTML内に直接記述するJavaScript）が適しているのは、単一ページで完結する小規模なウェブサイトを作成する場合など、限定的なシーンです。

外部JavaScriptファイルを使うメリット

基本的には、外部コード、つまり外部JavaScriptファイルの利用が望ましいと言えます。主なメリットは以下の通りです。

  • キャッシュの活用： ブラウザがスクリプトをキャッシュするため、2回目以降のアクセス時に読み込みが高速化されます。
  • 保守性の向上： HTMLとJavaScriptが分離されるため、コードの管理や修正が容易になります。
  • 再利用性： 同じスクリプトを複数のページで共有できます。

外部JavaScriptファイルの作成と読み込み方法

JavaScriptを外部ファイルに配置するには、まず拡張子「.js」を持つ外部JavaScriptファイルを作成します。作成後、HTMLファイル内の<script>タグからそのファイルを読み込みます。このとき、src属性を使って外部JavaScriptファイルへのパスを指定します。

また、複数の外部JavaScriptファイルがある場合も、それぞれを同じWebページに読み込むことで、ブラウザのキャッシュ機能を最大限に活かし、ページ全体のパフォーマンス向上につなげられます。

外部JavaScriptファイルのサンプル

例として、以下のnew.jsを外部JavaScriptファイルとします。

function display() {
   alert("Hello World!");
}

実装例

次に、この外部JavaScriptファイルをHTML Webページに追加してみましょう。

<html>
   <body>
   <form>
      <input type = "button" value = "Result" onclick = "display()"/>
   </form>

   <script src = "new.js">
   </script>
   </body>
</html>

このように、ボタンをクリックすると外部ファイル内のdisplay()関数が呼び出され、「Hello World!」というアラートが表示されます。HTMLとJavaScriptを分離することで、コードの見通しが良くなり、サイト全体の保守性も高まります。

  1. 【初心者向け】JavaScriptのFileとFileReaderを使ってファイルを読み込む方法

    JavaScriptにおけるFileとFileReaderとは？ JavaScriptでは、<input type=file>要素を使うことで、ユーザーにローカルファイルを選択させることができます。選択されたファイルはFileオブジェクトとして取得でき、ファイル名・サイズ・MIMEタイプなどの基本情報へアクセス可能です。 さらに、FileReaderオブジェクトを利用すれば、選択されたファイルの中身を非同期で読み込み、テキストやデータURLとして扱うことができます。 サンプルコード 以下は、JavaScriptでFileとFileReaderを使用して、ファイルの詳細情報を表示し

  2. JavaScriptのアロー関数を使ってはいけない場面とは？オブジェクトメソッドでの落とし穴

    JavaScriptのアロー関数（矢印関数）は、コードを簡潔に書ける便利な構文ですが、あらゆる場面で使えるわけではありません。特にオブジェクトのメソッドとしてアロー関数を定義するのは避けるべきです。 その理由は、アロー関数には独自のthisが存在しないためです。アロー関数は、定義された場所を取り囲むレキシカルスコープからthisの値を受け取ります。グローバルスコープで定義した場合、そのthisはオブジェクト自身ではなくwindowオブジェクトを参照します。 その結果、本来なら対象オブジェクトのプロパティに対して行うはずの設定や参照が、誤ってwindowオブジェクトのプロパティに対して実行され