HTMLとJavaScriptの基本。役割や呼び出し方を解説。

2020-12-03 00:26

Webサイトの構築にはCSSやHTMLを使いますが、アクティブなデザインを構築するにはJavaScriptを覚える必要があります。ジョブサポートのフロントエンド講座でも学ぶ事ができますが、HTMLでJavaScriptを呼び出す方法、それぞれの言語が担う役割について学びましょう。

目次[非表示]

1.HTMLとJavaScriptの基本

1.1.HTMLの役割とは
1.2.JavaScriptの役割とは
1.3.HTMLとJavaScriptの関係性

2.HTMLでJavaScriptを呼び込む

2.1.インラインスクリプトを使う
2.2.外部ファイルとして呼び出す

3.JavaScriptでHTML要素を取得

3.1.ID属性値を利用する
3.2.class属性値を利用する

4.HTML要素を動的に生成する方法

4.1.createElementを使う
4.2.jQueryライブラリを読み込む

5.動的で洗練されたデザインのWebサイトを構築する

HTMLとJavaScriptの基本

Webサイトを構築するための言語には色々な種類があります。その中でHTMLとJavaScriptはよく併用して使われます。

その理由は、HTMLとJavaScriptがそれぞれ異なる役割を持った言語だからです。どのような役割を持っているのかを個別に解説します。

HTMLの役割とは

HTMLとは「Hyper Text Markup Language」の略です。日本語に訳せば、「ハイパーテキストを構築するための言語」ということになります。

この「Hyper Text 」とは、通常のテキストとは異なり、複数の文書を関連付けることで、別サイトや動画、音楽などへのリンクを貼ることができるというものです。ハイパーリンクを使って、Webサイトを構築するために使われます。

現在のWebサイトのほとんどが、このHTMLによって作成されています。

JavaScriptの役割とは

Webページでのやりとりは、ユーザー側のブラウザと、ページを用意しているクライアント側のサーバーの通信によって行われています。JavaScriptとは、この双方のやりとりを円滑にし、動的な機能をWebページに加えるために利用されます。

例えば、Webページの一部を部分的にリロードする、カーソルを合わせたときに動画を流すなどといった機能はJavaScriptによるものです。Webサイトの多くで、JavaScriptが利用され、ユーザビリティの高いページが構築されています。

HTMLとJavaScriptの関係性

JavaScriptは、HTMLをコントロールする目的で使われることが多いです。

フロントエンド(HTML・CSS・JavaScript)入門5日－株式会社ジョブサポート

HTMLのみでサイトをデザインしたとしましょう。その場合、ブログのように、文書やリンクが貼り付けられただけのデザインになってしまいます。

JavaScriptを使うことで、パーツをスライドしたり、アニメーションとして動かしたりといったことができるようになります。画面上に動きを出すために、JavaScriptが使われるのです。

HTMLでJavaScriptを呼び込む

HTMLのコードは、JavaScriptを呼び出すことができます。どのように呼び込むのか、オーソドックスな方法を解説します。

インラインスクリプトを使う

インラインスクリプトとは、HTML文書内の<Script>タグを使って、直接文書内にJavaScriptを埋め込む方法です。以下のように記述します。

<script type="text/javascript"> // スクリプトの処理を記述する </script>

非常にシンプルで書きやすいので、簡単な動作であれば問題ありません。しかし、この記述を埋め込んだページ内でしか動作せず、他のページでインラインスクリプトを使おうと思った場合、そのページのHTMLにも埋め込む必要が出てきます。

そのため、次に紹介する方法の方が、一般的にはよく使われています。

外部ファイルとして呼び出す

もう一つは外部ファイルとして呼び出す方法です。これは、別の場所にあらかじめJavaScriptのファイルを用意しておき、それをHTMLファイルから呼び出すことでJavaScriptの処理を行います。

この方法であれば、インラインスクリプトのようにページごとにJavaScriptの処理を書き込む手間は必要なく、HTMLとJavaScriptが別々の場所で保管されるため、セキュリティの面から見ても優れています。

企業がWebサイトやアプリを開発する場合に使われるのがこの方法です。呼び出すための記述は、下記になります。

<script src="(対象のJavaScriptファイル)"></script>

JavaScriptでHTML要素を取得

JavaScriptでHTML要素を取得して、変更や参照を行うことができます。その方法について、よく使われているものを2種類紹介します。オンラインでも学べるフロントエンド講座はこちら

ID属性値を利用する

一つは、getElementById()というメソッドを使う方法です。

このメソッドは、指定したID値を持つ要素をElementオブジェクトとして返します。具体的な記述と共に使い方を見ていきましょう。

<p id="dat">おはようございます</p> <script> var p = document.getElementById('dat'); console.log( p ); </script>

p要素のid属性「"dat"」を設定しています。この「"dat"」をgetElementById()の引数に指定することで、P要素を取得することが可能です。

class属性値を利用する

class属性値から取得する場合は、getElementsByClassName()メソッドを用います。

getElementsByClassName()は、対象となるクラス名が設定されているHTML要素をすべて取得するためのメソッドです。

<p class="dat">おはようございます</p> <p class="test">こんにちは</p> <script> var p = document.getElementsByClassName('dat'); console.log( p[0] ); </script>

class属性は、同じものを複数の要素に付与できます。そのため、同じクラス名がたくさん存在する場合は、getElementsByClassName()のメソッドを使った方が便利です。

HTML要素を動的に生成する方法

JavaScriptを使って、新しくHTML要素を生成する方法について解説します。主な方法を2種類見ていきましょう。

createElementを使う

createElememt()メソッドは、JavaScriptでHTML要素を動的に生成するために使います。記述の方法は以下の通りです。

const element = document.createElement(タグ名)

具体的な例を見ていきましょう。

const h2 = document.createElement('h2');

h1.textContent = 'createElementの使い方とは;

document.body.appendChild(h1);

1行目ではh2タグを生成していて、JavaScriptから「createElementの使い方」という文字列を設定しています。

3行目で、「appendChild」というメソッドを使い、HTMLソースに組み込んでいます。

jQueryライブラリを読み込む

jQueryは、JavaScript専用のライブラリです。ライブラリは、よく使う機能のプログラムを集合させたファイルのことです。

createElementとappendChildを利用して、jQueryライブラリを動的に読み込むこともできます。

jQueryを読み込む方法は2つあります。一つは、公式サイトからダウンロードして使用する方法です。もう一つは、他のサーバーにあるjQueryを読み込むという方法になります。

直接HTMLファイルに記述する場合は<head><body>のいずれかに記述します。

<script type="text/javascript" src="HTMLソース"></script> <script type="text/javascript"> /* この中にjQueryのコード */ </script>

上記のような形で記述することになります。

動的で洗練されたデザインのWebサイトを構築する

HTMLもJavaScriptも、Webサイトを作る上では欠かせないプログラミング言語です。2つの言語は役割が明確に違うこともありますが、双方に呼び込むことができるので親和性が高い言語でもあります。若手、新人エンジニアの成長を阻む人材育成5つの失敗と解決策

洗練されたWebサイトを構築するためには、2つの言語を学び、どちらも呼び出せるようになると良いでしょう。

HTMLとJavaScriptの基本。役割や呼び出し方を解説。