2023.09.30 2024.03.31

JavaScript文法入門

salmoncode

記事内に商品プロモーション（Amazonアソシエイト含む）を含む場合があります。

この記事の目次

JavaScriptの実行方法
最初のプログラム
関数
- 関数の自作
- 自作した関数を実行する
イベント
- ドキュメントの読み込み後に実行する
- クリックされたら実行する

JavaScriptの実行方法

それではさっそく、JavaScriptを実行してみましょう。

Webサイト上で動作するJavaScriptプログラムの記述方法は、以下の2種類があります。

①htmlにscriptタグとしてbodyに直接記述する

<html>
	<head>
	</head>
	<body>
		<!-- 本文 -->
		<script>
			// ここに記述する
		</script>
	</body>
</html>

②.jsファイルを記述し、headから読み込む

<html>
	<head>
	  <script src="index.js"></script>
	</head>
	<body>
		<!-- 本文 -->
	</body>
</html>

皆さんがCSSを書くときと同様に記述方法はどちらでも問題ありませんが、可読性の観点から別ファイルに記述することをおすすめします。

この書き方からわかる通り、JavaScriptもHTMLやCSSと同様にWebページの読み込み時に解釈されます。

最初のプログラム

JavaScriptからこんにちは

まずは、JavaScriptの動作を確認するために最も簡単なサンプルプログラムを記述します。

alert("こんにちは")

こちらを記述したhtmlファイルをブラウザで開くと、「Hello」と記述されたダイアログが出現します。

これで、あなたは初めてのJavaScriptプログラムを書くことができました。

それではプログラムの中身について見ていきましょう。

プログラムといってもCSSを書いている方であれば、ある程度見慣れた形になっていると思います。例えば、url("./img/image.png") なんかに似てますよね。

alert() は画面上にダイアログを出現させる命令です。プログラミング言語の世界ではこのように、ある動作を実行する命令のことを関数と呼びます。また、関数に与えるデータ（ここでは”こんにちは”）のことを引数と呼びます。

なお、JavaScriptにおいては文字列を扱う場合は引用符「”」で挟む必要があります。

プロパティと代入演算子

それでは続いて、こちらのプログラムを記述してみましょう。

document.title = "トップページ"

こちらを実行すると、ブラウザのタブのタイトルが「トップページ」に変わります。

今度はやや見慣れない書き方になっていると思います。

document というのは実行しているページのことで、 title というのはその中のタイトル要素を指します。JavaScriptでは、このような要素のことをプロパティと呼びます。 title は変更することが可能なプロパティです。

そして、 = はプログラミング一般においても重要な文法で、代入演算子と呼ばれます。

代入演算子を使うことで、プロパティに値を入れる（代入する）ことができます。

つまり上記のプログラムを日本語に訳すと、

このページのタイトル要素に"トップページ"を代入する

となります。

名前をつける

これまでは ”こんにちは” や "トップページ" というように、文字列を直接関数に入れたり、プロパティに代入したりしていました。

プログラミングでは、こうしたデータに名前を与えることで再利用することができます。

以下のプログラムを記述してみましょう。

const title = "トップページ"

document.title = title
alert(title)

実行すると、ブラウザのタブのタイトルが「トップページ」になった上に、「トップページ」というダイアログが出現します。

これはプログラムが title という名前の箱に代入されたデータを参照しているためです。このような箱のことを変数と言います。

変数の名前は任意なので、 title の部分を pageName などにしてもよいでしょう。一般的に変数名の一文字目字は小文字に、2つ目以降の単語の頭文字は大文字で書かれることが多いです。

さて、今回は新たに const という単語を記述しました。これはJavaScript特有のもので、「一度代入するとその後に別の値を代入できない」ことを表しています。

今はおまじないだと思って、特に気にする必要はありません。

関数

関数の自作

関数は自作することができます。プログラミングでは、関数を作ることを「関数を定義する」と言います。

関数を定義するには、以下のように記述します。

() => {
  document.title = "トップページ"
}

見慣れない記述にとまどうかもしれませんが、これまでの知識+cssの知識で理解することができます。

css では、要素に適応する効果を {} で囲っていました。JavaScriptでは、処理のひとまとまりを {} で囲います。この囲われた範囲をスコープと言います。

cssにおけるセレクタの部分には、引数を入れる口を記述します。今回は特に引数を入れる必要がないので、空っぽの () を記述しています。

自作した関数を実行する

先ほどは関数を定義するプログラムを記述しましたが、このプログラムを実行しても何も起こりません。

関数を定義してはいますが、実行はしていないからです。

関数を実行するためには、後ろに () を付けます。また、どこまでが () の対象なのかを明確にするために、関数全体を () で囲います。

つまり、以下のように記述します。

(() => {
  document.title = "トップページ"
})()

これで、実行すると期待した処理が行われるはずです。

しかしこれでは分かりにくいので、名前をつけて（変数に代入して）見やすくしてみましょう。

const changeTitle = () => {
  document.title = "トップページ"
}

changeTitle()

今回は「タイトルを変更する関数」を定義したので、「changeTitle」という名前を付けました。

上記を読んでわかる通り、関数も変数に代入することができます。

そして、関数を代入した変数に () をつけることで、実行することができます。

イベント

ドキュメントの読み込み後に実行する

さて、これまでは「何をするか」をプログラムで記述していましたが、それを「いつ」するかについては意識しませんでした。

その場合、scriptタグが読み込まれた時点で(別ファイルの場合も同様)即座に実行されることになります（厳密にはそうとは限りませんが、今はそう考えて差し支えありません）。

これまではダイアログを出したり、タブのタイトルを書き換えたりといったプログラムでしたので問題ありませんでした。

しかし、ドキュメントの中身を書き換える場合はそうもいきません。scriptタグが読みこまれた時点ではその下に記述されているHTMLは読み込まれていないため、アクセスすることができないからです。

それを回避するためにはbodyタグの一番下に記述すればよいのですが、どうも不恰好です。

そこで、プログラムによって「いつ」実行するのかを記述してみましょう。

const changeTitle = () => {
  document.title = "トップページ"
}

window.onload = changeTitle

上記のプログラムを実行すると、画面の読み込み終了後に実行することができます。

それではプログラムの中身について見ていきましょう。

まず、 window は単語の通り画面のことです。そして、 onload こそがこの節のテーマ「いつ」を指す要素（プロパティ）となります。

onload は「読み込みが完了したら実行する処理」のことで、ここに関数を代入することができます。

関数の代入も代入演算子= を用いて行います。今回は変数 changeTitle を代入しています。

クリックされたら実行する

よくある機能として、「クリックされたら実行する」というものがあります。

このようなユーザとのインタラクションも、これまでの知識によって簡単に実現できます。

const changeTitle = () => {
  document.title = "トップページ"
}

window.onclick = changeTitle

上記のプログラムを実行すると、ページのどこかをクリックしたときにタブのタイトルが変わるようになります。

さて、ここまででJavaScriptの基本中の基本を学んできましたが、不思議なことがでる一方で、実用上いろいろな疑問が浮かんできませんか？

タブのタイトルではなく、「あるhtml要素(h1など)」の中身を変更するにはどうすればいいか？
「ページのどこか」ではなく、「あるhtml要素」がクリックされたら反応するにはどうすればいいか？

これらに答えるには、さらにDOM（Document Object Model）という考え方の学習が必要になります。

TechTopicはDOMについても解説していますので、ぜひご覧になってみてください。

ABOUT ME