Webページを作成する際に欠かせないのがHTMLとJavaScriptです。HTMLはWebページの「骨組み」を作る役割を持ち、JavaScriptはそれに「動き」を加えるプログラミング言語です。
JavaScriptを使うことで、動的なWebページを実現できます。本記事では、HTMLとJavaScriptについて紹介します。
さらに、HTMLをJavaScriptに読み込む方法やJavaScriptからHTMLを書き換える方法まで解説してるので、ぜひ参考にしてください。
HTMLとは
HTMLはHyperText Markup Languageの略称で、Webページを構成するためのマークアップ言語です。見出しや段落、リストなど、さまざまな要素を記述して、文書の構造を定義します。
しかし、HTML単体ではマークアップしかできません。
そのため、CSSを使ってデザインを整えたり、JavaScriptを使ってインタラクティブな動作を実装したりして一つのWebサイトを完成させます。
JavaScriptとは
JavaScriptは、Webページに動的な機能を追加できるプログラミング言語です。
HTMLやCSSと組み合わせて使用され、スライドショーやアコーディオンメニュー、ハンバーガーメニューの作成などを行えます。
また、JavaScriptはアプリ開発にも利用されており、計算アプリやチャットアプリなどの作成も可能です。
以下にJavaScriptの主な機能についてまとめてみました。
| 機能 | 説明 |
| DOM操作 | HTMLの要素を取得・変更・追加する |
| イベント処理 | ユーザーの操作に応じて動作する |
| アニメーション | CSSを変更して動きをつける |
| 非同期通信 | サーバーとデータをやり取りする |
さらに、ほかのプログラミング言語と比較して構文がシンプルでわかりやすいことから、初心者向けの言語としても知られています。
なお、JavaScriptはAI開発も行える言語です。以下の記事では、JavaScriptのライブラリを使って簡単なAIを開発する方法について解説しているので、気になる方はこちらもあわせてチェックしてみてください。
JavaScriptのファイルをHTMLで読み込む方法
JavaScriptのファイルをHTMLで読み込む方法は、以下の2つがあります。
- HTMLに直接記述する方法
- 外部ファイルとして読み込む方法
これらのJavaScriptの読み込み方法についてみていきましょう。
読み込み方法①HTMLに直接記述する方法
HTMLのscriptタグ内に直接JavaScriptコードを記述する方法です。scriptタグはheadタグ内、もしくはbodyタグ内に書きます。
コードは上から順に読み込まれていくので、headタグ内にJavaScriptを書いていれば、JavaScriptを実行してからbodyが読み込まれます。
一方で、bodyタグの最下部に書かれたJavaScriptは、HTMLがすべて読み込まれた後に実行されるのが特徴です。
HTMLを読み込んでからJavaScriptを実行する方が、エラーの発生リスクは下がります。
そのため、基本的にscriptタグは、bodyの閉じタグの直前に記述するのが推奨されています。
読み込み方法②外部ファイルとして読み込む方法
JavaScriptのコードを別のファイルに保存して、HTMLで読み込む方法です。
以下のように、headタグもしくはbodyタグの閉じタグの前にscriptタグを挿入し、src属性に外部ファイルのパスを記述しましょう。
この方法では、JavaScriptのコードをHTMLから分離できるため、管理しやすくなり、コードの再利用性や可読性が向上します。
簡単なコードであれば内部に記述する方法も有効ですが、コードが長くなる場合には外部ファイルとして読み込む方法が推奨されます。
また、JavaScriptと似た言語にPythonがありますが、両者は異なるプログラミング言語です。
以下の記事では、JavaScriptとPythonの違いについて解説しているので、気になる方はこちらもあわせてご覧ください。
JavaScriptを使えば動的にHTMLを書き換えられる
JavaScriptを使えばHTMLの内容を書き換えることも可能です。
これによって、ボタンをクリックしたときにテキストを変更したり、新しい要素を追加したりすることができるようになります。
JavaScriptを使ってHTMLを書き換える方法についてみていきましょう。
方法①HTMLの文字を変更する
textContentを使えば、HTMLのテキストを書き換えることができます。
<button id=”btn”>テキスト</button>
const btn = document.getElementById(‘btn’);
btn.addEventListener(‘click’, () => {
btn.textContent = ‘クリックされました’;
})
まず、「document.getElementById(‘btn’);」でbutton要素を取得して定数btnに格納しています。続いて、「btn.addEventListener(‘click’, () => { })」で、buttonタグがクリックされたときの処理を指定しています。
中身は「btn.textContent = ‘クリックされました’;」となっています。
これにより、buttonタグがクリックされたら「クリックされました」という文字が表示されるはずです。
方法②HTML要素を追加する
createElementとappendChildを使うと、HTMLに新しい要素を追加できます。
<button id=”addBtn”>リストを追加</button>
<ul id=”list”></ul>
const addBtn = document.getElementById(‘addBtn’);
addBtn.addEventListener(‘click’, () => {
const li = document.createElement(‘li’);
li.textContent = ‘新しいリスト’;
document.getElementById(‘list’).appendChild(li);
});
まず、「const addBtn = document.getElementById(‘addBtn’);」でbuttonタグを取得しています。
続いて、「addBtn.addEventListener(‘click’, () => { });」でbuttonタグがクリックされた際の処理を指定。
中身の「const li = document.createElement(‘li’);」で新しい<li>要素を作成し、定数liに格納しています。
「li.textContent = ‘新しいリスト’;」で追加するliの文字を「新しいリスト」に指定しています。
最後に、「document.getElementById(‘list’).appendChild(li);」で<ul>に新しい<li>を追加すれば、「リストを追加」ボタンをクリックするたびに、新しいリストアイテムが追加されるコードの完成です。
HTMLやJavaScriptの学び方
HTMLやJavaScriptを学ぶなら、以下の方法がおすすめです。
- 書籍で学ぶ
- 学習サイトで学ぶ
- プログラミングスクールで学ぶ
これらの学習方法についてみていきましょう。
学習方法①書籍で学ぶ
HTMLやJavaScriptを学ぶ際、書籍は基本的な学習方法の一つです。初心者向けの書籍では、基本的なタグや構文、プログラムの仕組みが丁寧に解説されているため、学習の入りとして最適です。
また、実践的なサンプルコードや演習問題が豊富な書籍を選ぶことで、手を動かしながら学習を進められます。
ただし、書籍の発行年によっては最新のトレンドやバージョンに対応していない場合があるため、内容をしっかり確認してから選ぶことが大切です。
学習方法②学習サイトで学ぶ
学習サイトを活用すると、HTMLやJavaScriptの知識を効率的に習得できます。
HTMLやJavaScriptは、初心者向けのチュートリアルや実践的な演習が豊富に用意されているため、学習の選択肢が豊富にあります。
また、最新の技術やトレンドを反映したコンテンツも多いので、実務で役立つスキルも身につけられるでしょう。
さらに、有料のコンテンツでも月額1,000円程度で利用できるものも多いので、コストパフォーマンスに優れているのも特徴です。
学習方法③プログラミングスクールで学ぶ
プログラミングスクールでは、HTMLやJavaScriptを体系的かつ実践的に学習できます。
講師のサポートを受けながら学習を進められるため、独学では理解が難しい部分もスムーズに習得可能です。
また、実際の開発現場を想定したカリキュラムが用意されていることが多く、実務で求められるスキルを効率的に身につけられるのも魅力です。
さらに、ポートフォリオの作成支援や就職サポートがあるスクールも多いので、Web業界への転職を考えている方にとっても有益な学習方法です。
ただし、必要な費用が高額になりやすい点は注意が必要です。
HTMLとJavaScriptについてのまとめ
今回は、HTMLとJavaScriptの関係やHTMLにJavaScriptを読み込む方法、JavaScriptでHTMLを書き換える方法などについて解説しました。
HTMLはWebページの構造を定義し、JavaScriptはそのHTMLに動的な処理を追加できます。
JavaScriptをHTMLに組み込む方法としては、scriptタグ内に直接記述する方法と外部ファイルとして読み込む方法の2つがあります。
また、JavaScriptを使うことで、textContentを使ったテキスト変更や、createElementとappendChildを使った要素の追加など、動的にHTMLを操作することが可能です。
これらの基本を理解すれば、より高度なWeb開発にも応用できるので、ぜひ押さえておきましょう。
