【JavaScript入門】JavaScriptとHTML

はじめに

「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

本章では、サンプルコードをもとにHTMLファイルの構成を解説し、その中でJavaScriptがどのように動くのかを学びます。

HTMLファイルの中でJavaScriptを書く方法は3つあります。

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「002 JavaScriptとHTML」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

メモ

サンプルコードの開き方やChromeの開き方が分からない方は、前回の章をご確認ください。

【JavaScript入門】JavaScriptを動かしてみよう

HTMLファイルの構成

HTMLファイルは大きく分けて、次の3つの要素から成り立っています。

タグってなに？

HTMLは「タグ」と呼ばれるものを使ってウェブサイトを構築します。

「タグ」とは、<>　で囲ったものを指します。

「タグ」には始まりと終わりがあります。

例えば、サンプルコードに出てきたこちらのタグは「pタグ」と言うものです。

<p>こんにちは</p>

<p>が 始まりのタグ と言い、後ろの</p>が 終わりのタグ と言います。

この始まりのタグと終わりのタグの間に文章を書くとウェブサイトに表示される仕組みになっています。

タグは様々な種類があります。

それぞれのタグにはそれぞれの意味を持っています。

「pタグ」は、「パラグラフ」の略で主にまとまった文章を書くために使います。

タグの中身を変えてみよう

サンプルコードの「スタート」フォルダの「index.html」を開いてみましょう。

「ステップ1 タグの中身を変えてみよう」と記述がされています。

その「pタグ」の中身を次のように変えてみましょう。

<!-- ステップ1 タグの中身を変えてみよう -->
<p>おはようございます！</p>

Chromeでリロードして確認すると、「こんにちは」が「おはようございます！」に変わっているのを確認することができます。

それ以外にも、レイアウトを組むための「divタグ」や画像を表示するための「imgタグ」など多くのタグがあります。

HTML

HTMLは、ウェブサイトの構造を作るために特化した言語です。

文章を表示したり、画像をおいたり、ボタンをつけたりするときにその元となる要素をタグとして記述します。

CSS

CSSはウェブサイトのレイアウトや色を変えたり、デザインをするために特化した言語です。

HTMLファイルの中でCSSを書くには、次の3つの方法があります。

CSSを書いてみよう

サンプルコードの「スタート」フォルダの「index.html」を開いてみましょう。

「ステップ2 CSSを書いてみよう」と記述がされています。

その下にあるコードがCSSになります。

コードを見ると、<style> タグに囲まれているのが分かります。

この<style> タグの始まりのタグと終わりのタグの間にCSSのコードを書くことができます。

<style>
/* ステップ2 CSSを書いてみよう */
p {
font-size: 20px;
color: red;
}
</style>

このコードは、pタグの文字の大きさと色を変えています。

では、次のようにしてpタグの文字を大きくし、色を青に変えてみましょう。

<style>
/* ステップ2 CSSを書いてみよう */
p {
font-size: 100px;
color: blue;
}
</style>

ファイルを保存して、Chromeでリロードして確認してみましょう。

青文字で文字が大きくなったのが確認することができました。

このように、HTMLファイルの中ではCSSは <style> タグを使って書くことができます。

JavaScript

最後に、JavaScriptの解説をします。

HTMLファイルの中でJavaScriptを書くには、次の3つの方法があります。

一つずつ見ていきましょう。

<script>タグの中に書く

サンプルコードの「スタート」フォルダの「index.html」を開いてみましょう。

ファイルの中に次のような <script>タグで囲まれたコードがあります。

この始まりの<script>タグと終わりの</script>タグの間にJavaScriptのコードを書くことができます。

<script>
console.log("こんにちは")
</script>

外部ファイルとして読み込む

「1. <script>タグの中に書く」でも、JavaScriptを書くことができます。

しかし、一般的な開発の現場でこの方法が使われることは少ない です。

なぜなら、1つのHTMLファイルの中に大量のJavaScriptのコードが含まれる可能性があるからです。

大量のJavaScriptのコードが1つのファイルに含まれると、とても見づらくメンテナンス性が落ちます。

では、どのようにすればいいのでしょうか。

その解決策として、HTMLファイルの中にあったJavaScriptのコードを別のファイルとして分けることができます。

それを 外部ファイルとして読み込む と言います。

外部ファイルとして読み込む際には、次の作業が必要になります。

JavaScriptファイルを作る

別のファイルとして分けるときに、拡張子を「.js」にするとウェブブラウザは自動的にJavaScriptが含まれるファイルだと認識します。

それでは、「スタート」フォルダの中に、新しく「index.js」を作成しましょう。

「スタート」フォルダを選択した状態で、上部のファイルアイコンをクリックしてください。

すると、ファイル名を入力する欄ができるので、「index.js」と打ち込んでください。

入力が完了すると、次のように「index.js」ファイルが作成されるのを確認してください。

このファイルの中に、JavaScriptのコードを書くことができます。

では、試しに次のように console.log を書いてみましょう。

console.log("外部ファイルです！")

JavaScriptファイルを読み込む

次に、作成したJavaScriptファイルをHTMLに外部ファイルとして読み込ませます。

サンプルコードの「スタート」フォルダの「index.html」を開いてみましょう。

「ステップ3 外部JavaScriptファイルを読み込んでみよう」と記述がされています。

その真下に、次のようにタグを追加してください。

<!-- ステップ3 外部JavaScriptファイルを読み込んでみよう -->
<script src="./index.js"></script>

<script>タグには、srcという属性を指定することができます。

属性は次のようなフォーマットで書くことができます。

src 属性は外部のJavaScriptファイルをHTMLファイルに読み込むときに使われます。

ですので、このケースでは、src="./index.js" はindex.jsファイルを読み込むという意味になります。

これによって、外部のJavaScriptファイルとしてHTMLファイルに読み込ませることができました。

デベロッパーメニューで確認する

外部のJavaScriptファイルとして読み込まれると、自動的にJavaScriptファイルの中のコードが実行されます。

console.log はデベロッパーメニューで確認できるので見てみましょう。

「Console」画面で出力されているのが確認できました。

HTMLタグに直接書く

最後に、HTMLタグに直接書く方法を解説します。

JavaScriptのコードは、HTMLタグの中に直接書くことができます。

例を見てみましょう。

ボタンを置く

まずは、HTMLタグの一つの、<button>タグを追加します。

サンプルコードの「スタート」フォルダの「index.html」を開いてみましょう。

「ステップ4 HTMLタグに直接書く」と記述がされています。

その真下に、次のように<button>タグを追加してください。

<!-- ステップ4 HTMLタグに直接書く -->
<button>ボタン</button>

<button>タグを記述すると、次のようにボタンが追加されます。

JavaScriptを書く

次に、JavaScriptのコードをこのボタンに追加してみましょう。

ボタンをクリックしたときに、console.log で「Console」画面にメッセージを出したいと思います。

ボタンをクリックしたときの動作は、onclick 属性を使うことができます。

先ほどのコードを次のように変えてください。

<!-- ステップ4 HTMLタグに直接書く -->
<button　onclick="console.log('HTMLの中に書いています！')">ボタン</button>

ここでやっていることは、クリックしたときに「HTMLの中に書いています！」というメッセージをConsoleに出す ということです。

コードを分解すると、次のようになります。

では、Chromeで動きを見てみましょう。

リロードして、ボタンをクリックしてください。

「Console」画面に「HTMLの中に書いています！」が表示されました。

このように書くと、HTMLのタグに直接JavaScriptのコードを書くことができます。

まとめ

本章では、HTMLファイルの中でJavaScriptをどのように書くかを解説しました。

最後にもう一度、重要なことを確認しましょう。



次章では、JavaScriptの変数と定数について学びましょう！