HTMLからJavaScriptってどう呼び出すの？
JavaScriptの処理を呼び出す方法は2つだけ！ここではそれを教えるよ。
ボタンクリックしたタイミングでJavaScriptの処理を呼び出す方法については、また別の機会に教えるね。
HTMLからJavaScriptを呼び出す方法は2つ！
- インラインスクリプト：Scriptタグ内に直接書く
- 外部スクリプト：Scriptタグから外部ファイルを呼び出す
基本的には外部スクリプトを選ぼう！
- HTMLからJavaScriptを呼び出す方法
- インラインスクリプトと外部スクリプトのメリット
【復習】HTMLとJavaScriptってどういうもの？
HTMLがどういうものかわかっている必要があるので、こちらの記事も読んでおきましょう！
また、JavaScriptについてもこちらでまとめているのでHTMLとJavaScriptの関係がわからなければ、こちらも読んでおきましょう。
HTMLからJavaScriptを呼び出す方法2つ
HTMLからJavaScriptを呼び出す方法は以下の二つです。
- インラインスクリプト：Scriptタグ内に直接書く
- 外部スクリプト：Scriptタグから外部ファイルを呼び出す
それぞれの呼び出し方、メリットデメリットについてみていきましょう。
インラインスクリプト：Scriptタグ内に直接書く
<script>タグの中に直接JavaScriptコードを記述する方法です。
現場ではよく「直書き」などと言ったりします。
例えば以下のようになります
<!DOCTYPE html>
<html>
<head>
<title>JavaScriptの呼び出し</title>
</head>
<body>
<!-- ここにHTMLのコンテンツを記述 -->
<script>
// JavaScriptコードをここに記述
</script>
</body>
</html><script>タグの中にJavaScriptコードを直接記述することで、HTML内にJavaScriptを埋め込むことができます。
メリットやデメリットについては後程教えますね。
ざっくりだけ言うと、手軽で書きやすいけど処理が散らばりやすいのがインラインスクリプト。
外部スクリプト：Scriptタグから外部ファイルを呼び出す
HTMLの<head>タグ内、または<body>タグ内に<script>タグを追加し、その中にJavaScriptのソースファイルパスを記述する方法です。
例えば以下のようになります
<!DOCTYPE html>
<html>
<head>
<title>JavaScriptの呼び出し</title>
<script src="path/to/your/javascript/file.js"></script>
</head>
<body>
<!-- ここにHTMLのコンテンツを記述 -->
</body>
</html>
src属性にはJavaScriptファイルのパスを指定し、そのファイルに記述されたJavaScriptコードがHTMLに読み込まれます。
ざっくりだけ言うと、管理はしなきゃいけないけど再利用しやすいのが外部スクリプト。
インラインスクリプトのメリット
実装が簡単
インラインスクリプトはHTML内に直接JavaScriptコードを記述するので、外部ファイルの読み込みや関数の定義などを考えずに、HTMLファイル内で即座にJavaScriptを実行することができます。
デプロイ（配置）が簡単
インラインスクリプトを使用することで、JavaScriptファイルの別途のリクエストや管理が不要になります。
1つのHTMLファイルにすべてのコードが含まれているため、デプロイ（配置）が簡単になります。
お手軽でとりあえず試したい時などに使いやすいのが、インラインスクリプト。
わかドリは主に動きを確認したい時とか、処理をどうするか考える時に使います。
インラインスクリプトのデメリット
可読性と保守性の低下
インラインスクリプトはHTML内にJavaScriptコードを直接記述するため、コードが分散し、可読性と保守性が低下する可能性があります。
つまり読みにくく、メンテナンスが大変になります。
大規模なプロジェクトや複雑な機能を持つ場合には、外部ファイルにJavaScriptコードを分離して管理する方がいいでしょう。
記述したファイルにしか適用されない
インラインスクリプトは記述したファイルにしか適用されないため、同じ処理を別ページで使いたい時などには使うことができません。
同じ処理を別ページで使いたい場合は外部スクリプトにする必要があります。
逆に、記述したファイルでしか使用しない処理はインラインスクリプトで問題ないでしょう。
処理が散らばりやすく管理も大変なので、わかドリがいたプロジェクトではあまり多用はしていません。
外部スクリプトのメリット
可読性と保守性の向上
外部スクリプトを使用すると、JavaScriptコードを別のファイルに分離して管理することができます。
複数のHTMLファイルで同じJavaScriptコードを共有することができるため、コードの可読性と保守性が向上します。
キャッシュの活用
外部スクリプトはブラウザのキャッシュを活用することができます。
一度読み込んだJavaScriptファイルはキャッシュに保存されるため、同じファイルを他のページで使用する場合には、再度読み込みを行う必要がありません。
これにより、パフォーマンスの向上が期待できます。
再利用性の向上
外部スクリプトを使用すると、複数のHTMLファイルで同じJavaScriptコードを共有することができます。
これにより、JavaScriptコードの再利用性が向上し、開発効率が高まります。
管理とかが必要な分、管理さえ出来てしまえば再利用も簡単なのが外部スクリプト。
外部スクリプトのデメリット
ファイルの読み込みによる遅延
外部スクリプトを読み込む際には、HTTPリクエストが発生するため、ファイルの読み込みによる遅延が発生する可能性があります。
また、外部スクリプトが複数ある場合には、それらの読み込み順序に注意する必要があります。
場合によっては重くなることもあるけど、最近はPCとかスマホの性能もよくなったからそこまで気にしなくてOK。
読み込み順序に注意しなきゃいけないのは？
処理によっては順序が変わると結果が変わるよね？JavaScriptは呼び出された順に処理されるから、順序によっては結果が変わってしまうから注意！
ファイルの管理が必要
外部スクリプトを使用するには、別途のJavaScriptファイルを作成し、管理する必要があります。
ファイルの配置や命名規則、バージョン管理などを考慮する必要があります。
インラインと外部スクリプトはどっちを使う？
可能な限り外部スクリプトを使用するようにしましょう。
なぜならば、管理しやすく再利用性が高く、最終的なタイムパフォーマンスが高いから。
同一サイト内の場合、基本的なJavaScriptの処理は使いまわすことが多いです。
その場合にインラインスクリプトだと、同じ処理を各ファイルに書く必要が出てきて、改修する場合にもファイル数分修正する必要が出てきます。
これが3ファイル程度ならまだいいのですが、20ファイルを超えたあたりから修正漏れが出始めます。
外部スクリプトの場合、最初管理を考える必要はありますが、何ファイルに増えても直す箇所は1ファイルだけなので、圧倒的に楽なのです。
サイトが5ページとか少なくても外部スクリプトのがいい？
うん、それでも外部スクリプトのがいいよ。最初5ページとかでもドンドンページが増えていくこともあるからね。
このページではこれだけ覚える！
HTMLからJavaScriptを呼び出す方法は2つ！
インラインスクリプトと外部スクリプト！可能な限り外部スクリプトを使ってね！
今回のゼロわか
- HTMLからJavaScriptを呼び出す方法
- インラインスクリプト：Scriptタグ内に直接書く
- 外部スクリプト：Scriptタグから外部ファイルを呼び出す
- インラインスクリプトと外部スクリプトのメリット
- 手軽だけど管理が大変なのがインラインスクリプト
- 再利用しやすいのが外部スクリプト
- 可能な限り外部スクリプトを使おう！
お疲れさまでした。
今回は、HTMLからJavaScriptを呼び出す方法についてお伝えしました。
基本だけど、意外と説明しにくい場所。今日も学んだあなたが偉い！
プログラミングをゼロから学ぶあなたはこちらから▼
