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

JavaScriptを外部ファイルに記述する方法をわかりやすく解説

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

JavaScriptのコードをHTMLから分離して管理したい場合は、外部ファイルとして保存するのが一般的です。外部JavaScriptファイルは、拡張子「.js」を持つテキストファイルとして作成します。作成したファイルは、HTML側の<script>タグにsrc属性を指定することで読み込めます。

ステップ1：外部JavaScriptファイル（new.js）を作成する

まず、任意のエディタで新しいファイルを作成し、「new.js」という名前で保存します。このファイルに、実行したいJavaScriptのコードを記述します。

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

ここでは、呼び出されるとアラートを表示するdisplay()関数を定義しています。

ステップ2：HTMLファイルからscriptタグで読み込む

次に、作成した外部ファイルをHTMLページに組み込みます。<script>タグのsrc属性に、ファイルのパスを指定してください。

<html>
    <body>
        <form>
        <input type="button" value="Result" onclick="display()"/>
        </form>
        <script src="new.js">
        </script>
    </body>
</html>

この例では、ボタンがクリックされるとonclickイベントを通じてdisplay()関数が呼び出され、「Hello World!」というアラートが表示されます。

複数の外部JavaScriptファイルを読み込む場合

外部JavaScriptファイルが複数あるときは、それぞれに対応する<script>タグを同じWebページ内に追加すれば、すべてを読み込めます。

<script src="file1.js"></script>
<script src="file2.js"></script>

パフォーマンスを意識した読み込みのポイント

スクリプトファイルが増えるとHTTPリクエストの数が増え、ページの表示速度に影響することがあります。次のような工夫でパフォーマンスを維持しましょう。

  • defer属性を活用する： <script src="new.js" defer></script> のように記述すると、HTMLの解析を妨げず、ドキュメントの読み込み完了後にスクリプトが実行されます。
  • body終了タグ直前に配置する： scriptタグを</body>の直前に置くことで、HTMLのレンダリングをブロックせずに済みます。
  • ファイルを統合・圧縮（minify）する： 本番環境では複数ファイルを1つにまとめたり、余分な空白や改行を削除したりすることで、読み込み時間を短縮できます。

まとめ

外部JavaScriptファイルを利用すれば、HTML構造とロジックをきれいに分離でき、コードの再利用性や保守性が大幅に向上します。「.js」ファイルを作成し、src属性付きの<script>タグで読み込むだけで、誰でも簡単に導入できます。

  1. 【Android】ランタイム権限を使って画像ファイルを外部ストレージに保存する方法

    このチュートリアルでは、Androidアプリでランタイム権限（実行時パーミッション）を適切にリクエストしながら、画像ファイルを外部ストレージへ書き込む方法を、サンプルコードとともに段階的に解説します。 手順1：新規プロジェクトの作成 Android Studioで新しいプロジェクトを作成します。メニューから「File」⇒「New Project」を選択し、必要な項目を入力してプロジェクトを作成してください。 手順2：レイアウトファイル（activity_main.xml）の編集 以下のコードを res/layout/activity_main.xml に追加します。 <?xml vers

  2. WordPressで外部JavaScriptを結合する方法｜HTTP/2時代のサイト高速化ガイド

    JavaScriptは、Webページに動的なコンテンツを表示させるためのプログラミング言語です。WordPressサイトでは、音声や動画の埋め込み、画像ギャラリー、インタラクティブなメニュー、カウントダウンタイマーなど、さまざまな場面でJavaScriptが活用されています。 JavaScriptファイルは拡張子「.js」で保存され、一般的なWordPressサイトでは、有効化されているテーマやプラグインによってページ内に読み込まれます。たとえば、テーマのトップページスライダーには「slider.js」が必要で、お問い合わせフォームのページには「form.js」が必要といった具合です。 現