ホームページを作成する時にJavaScriptをどのように使えば良いんだろう
JavaScriptってどんな機能を作ることができるの？
実際にJavaScriptをどのように使ってプログラミングすればいいのか
HTML / CSSを使ってホームページは作れるのですが、JavaScriptを使うことでリッチなWebコンテンツを作成・追加できるのは大きな魅力です。
ただ、どんなことが出来るのかイマイチよく分からないという方も少なくないでしょう。
こんにちは！ライターのマサトです。
この記事では、初心者でも今日からJavaScriptでさまざまな機能を作成する基本的な手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。
この記事はこんな人のために書きました
- JavaScriptの組み込み方法を学びたい方
- 具体的なJavaScriptのサンプル例を把握したい方
- JavaScriptでHTMLを制御したい方
JavaScriptで実現できること
一般的にHTML / CSSはホームページの骨組みや装飾などを担当しますが、JavaScriptでプログラミングすると動的なコンテンツを作成することができます。
これは、主に以下のような機能を作れることを意味します。
- JavaScript側でHTMLやCSSを構築して表示する
- ユーザーアクションを検知して処理を実行する
- 任意の箇所だけHTMLを変更・修正する
- サーバーと通信して情報処理を行う
- マルチメディアコンテンツを制御する
他にも実現できることは多数あるのですが、HTML / CSSを意図したとおりに制御できるのでJavaScript側でさまざまな処理を行えるわけです。
本記事では、これらの基本的なプログラミング方法について詳しく見ていくことにしましょう！
JavaScriptの導入
この章では、ホームページにJavaScriptを組み込む方法としてその導入を見ていきましょう。主に、記述する場所や導入方法について学んでいきます。
JavaScriptを記述する場所について
JavaScriptの実行エンジンはブラウザ内に搭載されているので、処理を実行するにはHTMLに記述する必要があります。
それではHTMLのどこに記述するのが良いのでしょうか？
一般的にブラウザはHTMLの上から下へ順番に処理をして画面に表示します。そのため、主にheadタグかbodyタグの中にscriptタグを利用して記述することになります。
例えば、headタグに記述する場合は次のようになるでしょう。
<head>
</head>
ただし、ここで1つ注意点があります。JavaScriptを実行するとその処理が完了するまで次のHTMLが読み込まれません。つまり、処理に時間が掛かる場合はしばらく画面に何も表示されないことになるわけです。
そこで、一般的にはbodyタグの最下段にJavaScriptを記述するのが望ましいでしょう。
<body>
</body>
最下段に記述することで画面にホームページが表示されたうえで、最後にJavaScriptが処理されるという流れになるわけです。
外部ファイルでJavaScriptを実行する
JavaScriptは先ほどご紹介したようにscriptタグ内に記述するわけですが、プログラムの規模が大きくなってきたり再利用することが増えてくると少し面倒になります。
そこで、JavaScriptだけを記述したファイルを作成してそれをHTMLで読み込むという方法がよく使われます。
次のサンプル例を見てください！
この例では、jsフォルダ内にあるapp.jsという名称のJavaScriptファイルを指定しています。これをHTMLに記述することで任意のJavaScriptファイルを実行できるわけです。
複数のJavaScriptファイルを順番に読み込むことも可能です。
この場合、上から処理されていくので読み込む順番に注意しましょう。例えばmain.jsに定義されている変数やオブジェクトなどをapp.jsから利用することはできません。その場合は先にmain.jsを読み込んでおく必要があるわけです。
DOMの制御
この章では、JavaScriptからHTML要素（DOM）を制御する基本的な手法について見ていきましょう。主に、HTML要素の取得・変更方法について学んでいきます。
HTML要素を取得するには？
JavaScriptからHTML要素にアクセスするにはいくつか方法がありますが、もっとも一般的なメソッドはgetElementById()を利用する方法でしょう。
HTMLにID属性を付与することで、JavaScriptから素早く要素を取得して制御することができるようになります。
例えば、以下のようなh1タグがあるとします。
サンプルテキスト
ID属性値としてtextを付与している点に注目してください。
このID属性値を利用してgetElementById()を使うと次のようになります。
const text = document.getElementById('text');
documentオブジェクトにはHTMLの要素を制御するためのさまざまなメソッドやプロパティが提供されており、getElementById()もその1つになります。引数にID属性値textを指定することで目的のHTML要素を取得できます。
取得したHTML要素は変数に格納することで、以降はその変数を利用してプログラムを構築していくことができます。
動的にHTML要素を変更する方法
HTML要素を取得できるようになったところで、今度はJavaScript側から変更する方法を見ていきましょう。
getElementById()で取得した要素は、JavaScriptから変更や修正などさまざまな制御を行うことができるようになります。ここで先ほど取得したh1要素を利用して、文字列を取得してみましょう。
const text = document.getElementById('text');
console.log(text.textContent);
実行結果
サンプルテキスト
この例では、h1要素を取得して記述されている文字列をtextContentを利用してコンソールログへ出力しています。
また、innerHTMLを利用することで動的にHTML要素を作成することもできます。
text.innerHTML = 'サンプルテキスト';
この例では、h1要素の中身をリンクに変更しています。innerHTMLはHTMLタグを認識してくれるので、このように文字列でHTML要素を構築することもできるわけです。
JavaScriptによるHTML要素の制御について、さらに詳しい知識を勉強したい方は次の記事で体系的に学べるようにまとめているのでぜひ参考にしてみてください！
イベント処理
この章では、ユーザーアクションなどを検出して処理できるイベント処理について見ていきましょう。主に、基本的な実装方法と実際のイベント処理のプログラミングについて学んでいきます。
addEventListenerによるイベント処理の実装方法
イベント処理を覚えると、例えばユーザーがクリックした時や何らかのファイルが読み込まれた時など、さまざまなタイミングでJavaScriptを実行できるようになります。
このイベント処理を実装するもっとも基本的な方法はaddEventListener()を利用することです。
使い方としては次のようになります。
document.addEventListener(‘イベント名', function() {
//ここに実行したい処理を記述する
});
第1引数にどのようなイベントを検出するのかを文字列で設定し、第2引数に実行したい処理を関数で記述します。これにより、目的のイベントが発生した時だけ処理が実行されるようになります。
ユーザーがクリックした時に処理を行う
それでは、実際にイベント処理をプログラミングしてみましょう。
今回はユーザーが画面をクリックした時に、任意の処理を実行できるようにしてみます。そこで、まずは基本的なイベント処理を次のように記述します。
document.addEventListener('click', function() {
console.log('クリックされました');
});
この例では、documentオブジェクトにイベント処理を紐づけているので、画面のどこでも好きなところをクリックするとコンソールログに文字列が出力されるわけです。
前章で学習したgetElementById()を応用すると、例えばh1要素をクリックした時だけ処理を実行することもできるようになります。
const text = document.getElementById('text');
text.addEventListener('click', function() {
console.log('クリックされました');
});
この例では、h1要素を格納した変数textにイベント処理を紐づけているので画面をクリックしても反応しませんが、h1要素の箇所をクリックするとイベント処理が実行されるようになります。もちろん、これを応用してボタン要素などにイベント処理を実装するのも良いですね。
他のイベント処理方法や実装例などを次の記事でまとめているので、さらに深堀りして学習したい方はぜひ参考にしてみてください！
まとめ
今回は、JavaScriptをホームページに組み込んで制御する手法についていくつか学習してきました！
最後に、もう一度ポイントをおさらいしておきましょう！
- JavaScriptはbodyタグの最下段に記述する
- JavaScriptからHTML要素を取得して変更・修正できる
- イベント処理を実装することで意図したタイミングで処理できる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
