【JavaScript入門】HTMLへの追加から変数・関数まで｜初心者向け簡単Web開発

JavaScriptはWebページに動的な機能を追加するために不可欠なプログラミング言語です。

HTMLへの追加方法から変数、データ型、条件分岐、繰り返し、関数、イベント処理、DOM操作まで、基礎知識を丁寧に解説します。

この記事では、JavaScriptの概要から環境構築、基礎知識、Web制作で頻出する関数、学習方法、そしてよくある質問まで、JavaScriptを学ぶ上で必要な情報を網羅的に提供します。

この記事を読むことで、JavaScriptの全体像を把握し、スムーズに学習を始めることができるでしょう。

この記事でわかること

• JavaScriptの概要、歴史、環境構築
• JavaScriptの基礎知識（記述場所、変数、データ型、条件分岐、繰り返し、イベント処理、DOM操作）
• Web制作で頻出する関数（DOM操作、イベント処理、配列操作など）
• おすすめのJavaScript学習方法

JavaScript入門前に知るべきこと

• JavaScript概要
• JavaScript歴史
• JavaScript環境構築

JavaScriptを学ぶ前に、その概要、歴史、環境構築について理解しておくことが重要です。

これらの知識は、JavaScriptをより深く理解し、効果的に学習するための土台となります。

以下に、JavaScript概要、JavaScript歴史、JavaScript環境構築について解説します。

JavaScript概要

JavaScriptは、Webページに動的な機能を追加するためのプログラミング言語です。

具体的には、Webページの見た目や動きを制御したり、ユーザーの操作に応じてWebページの表示内容を変更したりできます。

Webブラウザ上で動作することが一般的ですが、Node.jsという実行環境を用いることで、サーバーサイドの開発にも利用可能です。

JavaScriptは、Web開発において必要不可欠な技術と言えるでしょう。

JavaScript歴史

JavaScriptは1995年に、ネットスケープコミュニケーションズ社のブレンダン・アイク氏によって開発されました。

当初はLiveScriptという名前でしたが、後にJavaの人気にあやかってJavaScriptに改名されました。

当初はWebブラウザ上での簡単な処理を行うための言語でしたが、Ajaxの登場やWebアプリケーションの普及に伴い、その重要性が増しました。

現在では、Web開発だけでなく、モバイルアプリ開発やデスクトップアプリ開発にも利用されています。

JavaScript環境構築

JavaScriptの環境構築は非常に簡単です。

Webブラウザがあれば、すぐにでもJavaScriptのコードを実行できます。

具体的には、HTMLファイルを作成し、<script>タグの中にJavaScriptのコードを記述することで、Webブラウザ上でJavaScriptを実行できます。

開発効率を上げるためには、Visual Studio Codeのようなテキストエディタや、Chrome DevToolsのような開発ツールを導入すると良いでしょう。

JavaScript基礎知識

• JavaScript記述場所
• JavaScript変数
• JavaScriptデータ型
• JavaScript条件分岐
• JavaScript繰り返し
• JavaScriptイベント

JavaScriptの基礎知識は、Web開発に不可欠であり、HTMLに動的な要素やインタラクティブな機能を追加するために重要です。

続く各項目では、JavaScriptの記述場所から変数、データ型、条件分岐、繰り返し、関数、イベント処理、DOM操作まで、JavaScriptの基礎を網羅的に解説します。

JavaScript記述場所

JavaScriptは、HTMLファイル内に直接記述するか、外部ファイルとして読み込むことでWebページに組み込むことができます。

JavaScriptをHTMLに記述する方法は2種類あり、<script>タグを使う方法と、外部JavaScriptファイルを読み込む方法があります。

方法	説明	メリット	デメリット
<script></script>	HTMLファイル内に<script>タグを記述。 その中にJavaScriptコードを記述します。	簡単なコードを記述する 場合に適しています。HTMLとJavaScriptを まとめて管理できます。	HTMLファイルが肥大化しやすいです。 複数のページで同じコードを共有する場合、各ページに同じコードを記述する必要があります。
<script src=”script.js”>	HTMLファイル内に<script src=”script.js”>タグを記述。 別ファイルを用意し、JavaScriptコードを記述します。	複雑なコードを記述する 場合に適しています。HTMLとJavaScriptを 別々で管理できます。	HTMLファイルが簡潔でわかりやすくなります。 複数のページで同じコードを共有する場合、各ページに同じコードを記述する必要がありません。

外部ファイルとして読み込むことで、JavaScriptコードを複数のHTMLファイルで共有でき、コードの再利用性と保守性が向上します。

JavaScript変数

JavaScriptでは、変数を使ってデータを格納し、プログラム内で再利用することができます。

変数とは、データを格納するための名前付きの記憶場所であり、let、const、varを使って宣言します。

宣言方法	特徴	スコープ	再代入	再宣言
let	ブロックスコープを持ち、再代入可能。ES6(ECMAScript 2015)で導入されました。	ブロック内でのみ有効	可能	不可
const	ブロックスコープを持ち、再代入不可。定数を定義する際に使用します。ES6で導入されました。	ブロック内でのみ有効	不可	不可
var	関数スコープを持ち、再代入可能。古いバージョンのJavaScriptで使用されていましたが、letやconstの登場により、使用頻度は減っています。	関数内でのみ有効。関数外で宣言された場合はグローバルスコープになります。	可能	可能

基本的には、constで宣言します。
理由として、以下が挙げられます。

• 予期せぬ変更を防止できる：一度値を設定したら変更されないことが保証されるため、バグの発生を減らせます。
• コードの意図が明確になる：「この変数は変更されない」という意図が明確になり、コードの可読性が向上します。
• パフォーマンスの最適化：JavaScriptエンジンによっては、constで宣言された変数の最適化がしやすくなる場合があります。

letとconstはブロックスコープであるため、変数が定義されたブロック内でのみ有効です。

JavaScriptデータ型

JavaScriptには、文字列、数値、真偽値、配列、オブジェクトなど、さまざまなデータ型が存在します。

JavaScriptのデータ型は、プリミティブ型とオブジェクト型に分けられます。

データ型	説明	例
文字列	文字の並びを表すデータ型。シングルクォーテーション(')またはダブルクォーテーション(")で囲みます。	"Hello, world!"、'JavaScript'
数値	整数や浮動小数点数を表すデータ型。	123、3.14、-10
真偽値	trueまたはfalseのいずれかの値を持つデータ型。	true、false
null	値が存在しないことを表すデータ型。	null
undefined	変数が宣言されたものの、値がまだ割り当てられていないことを表すデータ型。	undefined
配列	複数の値を順序付けて格納するデータ型。	[1, 2, 3]、["apple", "banana", "orange"]
オブジェクト	キーと値のペアを格納するデータ型。	{ name: "John", age: 30 }、{ x: 10, y: 20 }

JavaScriptでは、変数のデータ型を明示的に宣言する必要はありません。

JavaScript条件分岐

JavaScriptでは、if文やswitch文を使って、条件によって異なる処理を実行することができます。

条件分岐を使うことで、プログラムの実行フローを制御し、さまざまな状況に対応した処理を行うことができます。

構文	説明
if文	条件式がtrueの場合に、指定された処理を実行します。elseやelse ifを使って、複数の条件を記述することもできます。
switch文	複数の条件分岐を扱うための構文です。特に同じ変数の値に基づいて複数の処理を分岐させたい場合に便利です。

if (age >= 20) {
    console.log("成人です");
} else {
    console.log("未成年です");
}

switch (fruit) {
  case "apple":
    console.log("りんご");
    break;
  case "banana":
    console.log("バナナ");
    break;
  default:
    console.log("その他の果物");
}

switch文では、breakを省略すると、後続のcaseの処理も実行されるため、注意が必要です。

JavaScript繰り返し

JavaScriptでは、for文やwhile文を使って、同じ処理を繰り返し実行することができます。

繰り返し処理を使うことで、大量のデータを効率的に処理したり、特定の条件が満たされるまで処理を繰り返したりすることができます。

構文	説明
for文	指定された回数だけ処理を繰り返します。
while文	特定の条件が満たされるまで繰り返します。

for (const greet = function(name) { i < 10; i++) {
    console.log(i);
}

let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

for文は、繰り返しの回数が決まっている場合に、while文は、特定の条件が満たされるまで繰り返す場合に適しています。

JavaScript関数

JavaScriptでは、関数を使って、複数の処理をまとめて再利用可能なコードの塊として定義することができます。
関数を使うことで、コードの可読性と保守性を高め、同じ処理を何度も記述する手間を省くことができます。

種類	説明
関数宣言	functionキーワードを使って関数を定義します。

function greet(name) {
    console.log("Hello, " + name + "!");
}

const greet = function(name) {
    console.log("Hello, " + name + "!");
};

const greet = (name) => {
  console.log("Hello, " + name + "!");
};

関数を定義する際には、引数と戻り値を指定することができます。

JavaScriptイベント

JavaScriptでは、イベントを使って、ユーザーの操作やWebページの読み込みなど、さまざまな出来事に対応した処理を実行することができます。

イベント処理を使うことで、Webページにインタラクティブな機能を追加し、ユーザーエクスペリエンスを向上させることができます。

イベント	説明
click	要素がクリックされたときに発生します。

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
    console.log("ボタンがクリックされました");
});

イベント	説明
mouseover	要素にマウスが乗ったときに発生します。

const element = document.getElementById("myElement");

element.addEventListener("mouseover", function() {
    console.log("マウスが乗りました");
});

イベント	説明
mouseout	要素からマウスが離れたときに発生します。

const element = document.getElementById("myElement");

element.addEventListener("mouseout", function() {
    console.log("マウスが離れました");
});

イベント	説明
keydown	特定のキーが押されたときに発生します。

document.addEventListener("keydown", function(event) {
  console.log("キーが押されました: " + event.key);
});

イベント	説明
load	ページが読み込まれたときに発生します。

window.addEventListener("load", function() {
    console.log("ページが読み込まれました");
});

操作	説明	例
要素の取得	document.getElementById()、document.getElementsByClassName()、document.querySelector()などを使って、HTML要素を取得します。	“`javascript

イベントリスナーを追加することで、特定のイベントが発生したときに実行される関数を指定することができます。

JavaScriptDOM

JavaScriptでは、DOM（Document Object Model）を使って、HTML要素を操作することができます。
DOM操作を使うことで、Webページのコンテンツを動的に変更したり、スタイルを調整したり、新しい要素を追加したりすることができます。

const element = document.getElementById("myElement");
element.innerHTML = "新しいテキスト";
element.style.color = "red";
element.style.fontSize = "20px";

const newElement = document.createElement("p");
newElement.innerHTML = "新しい段落";
document.body.appendChild(newElement);
document.body.removeChild(element);

DOM操作は、Webページに動的な機能を追加するために不可欠な技術です。

Web制作頻出関数

• DOM操作
• イベント処理
• 配列操作
• オブジェクト操作
• 非同期処理
• タイマー関数
• ユーティリティ関数
• jQuery関数
• WebAPI

Web制作で頻繁に使用する関数を理解することは、効率的な開発に不可欠です。

これらの関数を使いこなすことで、Webサイトの操作性や機能性を高められます。

ここでは、DOM操作からWeb APIまで、主要な関数について解説します。

各関数の概要と具体的な使用例を把握することで、JavaScriptの応用力を高められます。

Web制作におけるJavaScriptのスキルアップを目指しましょう。

DOM操作

DOM（Document Object Model）操作とは、HTMLやXML文書をプログラムから操作するための仕組みです。

JavaScriptを使用することで、Webページの要素を動的に変更したり、追加したりできます。

DOM操作を理解することで、ユーザーの操作に応じてWebページの表示を変化させることが可能です。

例えば、ボタンをクリックした際に特定の要素を表示したり、非表示にしたりする処理を実装できます。

関数名	説明
getElementById	ID属性で要素を取得
getElementsByClassName	クラス名で要素を取得
getElementsByTagName	タグ名で要素を取得
querySelector	CSSセレクタで要素を取得
querySelectorAll	CSSセレクタで複数の要素を取得
createElement	要素を作成
appendChild	要素を追加
removeChild	要素を削除
innerHTML	要素のHTMLコンテンツを変更
textContent	要素のテキストコンテンツを変更

DOM操作は、Webサイトに動的な変化を加えるための重要な技術です。

イベント処理

イベント処理とは、Webページ上で発生するさまざまなイベント（クリック、キー入力、マウスオーバーなど）に対し、特定の処理を実行する仕組みです。

ユーザーの操作に応じてWebサイトが反応することで、インタラクティブな体験を提供できます。

イベント処理を実装することで、例えば、ボタンをクリックした際にアラートを表示したり、フォームが送信された際にデータを検証したりする処理を実行できます。

イベント名	説明
click	要素がクリックされたとき
mouseover	マウスが要素上に移動したとき
mouseout	マウスが要素から離れたとき
keydown	キーが押されたとき
keyup	キーが離されたとき
submit	フォームが送信されたとき
load	ページが読み込まれたとき
change	フォーム要素の値が変更されたとき

イベント処理は、Webサイトにインタラクティブ性をもたらすための重要な要素です。

配列操作

配列操作とは、複数のデータをまとめて扱うための「配列」に対して、データの追加、削除、検索、並び替えなどの操作を行うことです。

JavaScriptでは、配列を柔軟に操作するための様々なメソッドが用意されています。

配列操作をマスターすることで、例えば、複数の商品情報を配列に格納し、価格の安い順に並び替えたり、特定の条件に合致する商品を検索したりする処理を効率的に実装できます。

メソッド名	説明
push	配列の末尾に要素を追加
pop	配列の末尾から要素を削除
shift	配列の先頭から要素を削除
unshift	配列の先頭に要素を追加
splice	配列の要素を削除または置換
slice	配列の一部を抽出
concat	配列を結合
indexOf	配列内の要素を検索
forEach	配列の各要素に対して処理を実行
map	配列の各要素を変換して新しい配列を作成
filter	配列の要素をフィルタリングして新しい配列を作成
reduce	配列の要素を畳み込んで単一の値を作成
sort	配列をソート

配列操作は、大量のデータを効率的に処理するために不可欠な技術です。

オブジェクト操作

オブジェクト操作とは、複数のプロパティ（キーと値のペア）をまとめて扱うための「オブジェクト」に対して、プロパティの追加、削除、変更、参照などの操作を行うことです。

JavaScriptでは、オブジェクトを柔軟に操作するための様々な方法が用意されています。

オブジェクト操作を理解することで、例えば、ユーザー情報をオブジェクトとして管理し、名前、年齢、住所などの情報を効率的に扱えるようになります。

操作	説明
プロパティの追加	オブジェクトに新しいプロパティを追加
プロパティの削除	オブジェクトから不要なプロパティを削除
プロパティの変更	オブジェクトのプロパティの値を変更
プロパティの参照	オブジェクトのプロパティの値を取得

オブジェクト操作は、複雑なデータを構造的に扱うために不可欠な技術です。

非同期処理

非同期処理とは、処理の完了を待たずに次の処理に進むことで、Webページの応答性を高めるための仕組みです。

JavaScriptでは、コールバック関数、Promise、async/awaitなどの方法で非同期処理を実装できます。

非同期処理を導入することで、例えば、サーバーからデータを取得する際に、データの取得が完了するまでWebページが操作不能になるのを防ぎ、ユーザーエクスペリエンスを向上させることができます。

種類	説明
コールバック関数	非同期処理の結果を受け取る関数
Promise	非同期処理の状態を表すオブジェクト
async/await	Promiseをより簡潔に記述するための構文

非同期処理は、Webアプリケーションのパフォーマンスを向上させるために重要な要素です。

タイマー関数

タイマー関数とは、一定時間後または一定間隔で処理を実行するための関数です。

JavaScriptでは、setTimeoutとsetIntervalの2つのタイマー関数が用意されています。

タイマー関数を活用することで、例えば、Webページを開いてから5秒後に特定のメッセージを表示したり、1秒ごとに現在時刻を更新したりする処理を実装できます。

関数名	説明
setTimeout	指定時間後に一度だけ処理を実行
setInterval	指定時間ごとに繰り返し処理を実行
clearTimeout	setTimeoutで設定したタイマーを解除
clearInterval	setIntervalで設定したタイマーを解除

タイマー関数は、Webサイトにアニメーションや自動更新などの機能を追加するために役立ちます。

ユーティリティ関数

ユーティリティ関数とは、様々な場面で再利用できる汎用的な関数のことです。

文字列操作、数値処理、日付処理など、様々な種類のユーティリティ関数が存在します。

ユーティリティ関数を整備することで、例えば、文字列の空白を削除したり、数値を特定の形式にフォーマットしたり、日付を扱いやすい形式に変換したりする処理を簡単に行えるようになります。

カテゴリ	関数例
文字列操作	trim、toUpperCase、toLowerCase
数値処理	parseInt、parseFloat、toFixed
日付処理	getDate、getMonth、getFullYear

ユーティリティ関数は、コードの再利用性を高め、開発効率を向上させるために重要な要素です。

jQuery関数

jQuery関数とは、JavaScriptライブラリであるjQueryによって提供される関数群のことです。

DOM操作、イベント処理、アニメーションなど、様々な処理をより簡潔に記述できます。

jQuery関数を利用することで、例えば、HTML要素の表示/非表示をアニメーション効果付きで切り替えたり、複数の要素に対して同じイベントリスナーを一度に設定したりする処理を簡単に実装できます。

カテゴリ	関数例
セレクタ	$()
DOM操作	.html(), .text(), .attr()
イベント処理	.on(), .click(), .hover()
アニメーション	.fadeIn(), .fadeOut(), .slideUp()
Ajax	.ajax(), .get(), .post()

jQueryは、Web開発を効率化するための強力なツールです。

WebAPI

Web APIとは、Webブラウザーが提供する機能を利用するためのインターフェースです。

Geolocation API、Canvas API、Web Storage APIなど、様々な種類のWeb APIが存在します。

Web APIを活用することで、例えば、ユーザーの位置情報を取得して地図上に表示したり、Canvas APIを使って動的なグラフィックを描画したり、Web Storage APIを使ってブラウザにデータを保存したりする処理をWebページ上で実現できます。

API名	説明
Geolocation API	ユーザーの位置情報を取得
Canvas API	グラフィックを描画
Web Storage API	ブラウザにデータを保存
Fetch API	HTTPリクエストを送信
WebSockets API	リアルタイム通信を実現

Web APIは、Webアプリケーションに高度な機能を追加するために不可欠な要素です。

JavaScript学習方法

• 学習サイト
• 学習書籍
• 学習動画

JavaScriptの学習方法は多岐に渡りますが、自分に合った方法を見つけることが重要です。

様々な学習方法を組み合わせることで、より効率的に知識を習得できます。

学習サイト

JavaScriptを学習できるWebサイトは数多く存在し、初心者から上級者まで、レベルに合わせた学習が可能です。

自分に合ったサイトを見つけて、体系的に学習を進めましょう。

サイト名	特徴	おすすめポイント
MDN Web Docs	Mozillaが提供する公式ドキュメント	最新の情報が網羅されており、詳細な解説が魅力
freeCodeCamp	無料でインタラクティブな学習が可能	プロジェクト形式で実践的なスキルが身につく
ドットインストール	3分動画で手軽に学習できる	短時間で様々なトピックを学べる
Progate	イラスト中心で初心者にもわかりやすい	ゲーム感覚で楽しく学習できる

学習書籍

書籍は、Webサイトとは異なり、体系的にJavaScriptを学ぶことができます。

紙媒体でじっくりと学習したい方におすすめです。

書籍名	特徴	おすすめポイント
JavaScript Primer	JavaScriptの基礎を網羅的に解説	初心者でも理解しやすい丁寧な解説が魅力
JavaScript 第7版	JavaScriptの標準仕様を詳細に解説	より深くJavaScriptを理解したい方向け
JavaScript コードレシピ集	豊富なサンプルコードで実践的に学べる	実践的なスキルを身につけたい方向け

学習動画

動画は、視覚的にJavaScriptを学ぶことができるため、初心者にも理解しやすいです。

通勤時間や休憩時間など、スキマ時間を活用して学習を進めましょう。

チャンネル名/サービス名	特徴	おすすめポイント
YouTube	JavaScriptの基礎をわかりやすく解説	短時間でJavaScriptの概要を理解できる
Udemy	有料講座が豊富	質の高い講座で体系的に学習できる
Skillshare	クリエイティブなスキルを学べる	JavaScriptを使ったWebデザインやアニメーションなどの応用スキルも学べる

JavaScriptの学習方法は様々ですが、自分に合った方法で継続することが大切です。

色々な方法を試してみて、楽しく学習を進めましょう。

参考

• JavaScriptに関する他の記事はこちら
• MDN web docs

よくある質問（FAQ）

まとめ

JavaScriptはWebページに動的な機能を追加するために必要不可欠なプログラミング言語です。

この記事では、JavaScriptの概要から環境構築、基礎知識、Web制作で頻出する関数、学習方法までを網羅的に解説します。

• JavaScriptの概要、歴史、環境構築
• JavaScriptの基礎知識
• Web制作で頻出する関数
• おすすめのJavaScript学習方法

この記事を参考にJavaScriptの学習を始め、Web開発のスキルアップを目指しましょう。