JavaScriptの使い方【入門】基本構文や簡単なプログラム例を初心者向けに解説

JavaScriptは、Webページに動きを加えるために欠かせない言語です。しかし、HTMLやCSSとの違いや、JavaScriptがどのような役割を果たしているのかを正確に理解している人は意外と少ないかもしれません。本章ではJavaScriptの基本的な概要とともに、「何ができるのか」「なぜ必要なのか」「どう使われているのか」について、初心者にもわかりやすく解説します。

JavaScriptはWebに動きを与えるプログラミング言語

JavaScriptは、Webページに「動き」や「操作性」を追加するためのプログラミング言語です。

HTMLがWebページの構造、CSSがデザインを担うのに対し、JavaScriptはユーザーの操作に応じた反応や処理を実行する役割を持っています。近年のWebサイトは静的な表示にとどまらず、インタラクティブな要素が求められており、その実現にJavaScriptが不可欠です。

例えばボタンをクリックすると文字が変わる、入力フォームでメールアドレスの形式が自動チェックされる、ページをスクロールするとヘッダーが固定されるといった機能はすべてJavaScriptによって実現されています。

「JavaScriptはプログラミング言語ではない」という誤解

「JavaScriptはプログラミング言語ではない」という意見は誤解です。

このような誤解が生まれる理由は、JavaScriptがWebブラウザ上で動作し、HTMLと一緒に使われる「軽いスクリプト」として紹介されることが多いからです。しかしJavaScriptは、正式にはECMAScriptという国際規格に準拠したプログラミング言語です。

JavaScriptには、変数・関数・条件分岐・ループ・配列・オブジェクト・非同期処理など、他の主要な言語と同等の構文と機能が用意されています。現在では、Node.jsを使えばサーバーサイド開発でもJavaScriptが利用できます。

JavaScriptは、軽量でありながらも高機能な正真正銘のプログラミング言語です。Web制作のみならず、業務システムやモバイルアプリ開発など、さまざまな分野で活躍しています。

JavaScriptが動作する環境とブラウザ対応

JavaScriptは、主要なすべてのモダンブラウザで標準対応しており、特別な準備なしで利用できます。

HTMLと同様、JavaScriptもブラウザが直接解釈・実行できるため、開発者やユーザーがプラグインなどを別途用意する必要はありません。また、スマートフォンの標準ブラウザでもJavaScriptは動作するため、幅広い環境で通用する技術です。

Google Chrome・Mozilla Firefox・Microsoft Edgeといった主要ブラウザでは、JavaScriptが初期設定で有効化されており、ボタンクリックによる処理・アニメーション表示・非同期通信といった機能がスムーズに動作します。

つまり、JavaScriptは最初から「使える」状態で提供されているため、初心者でもすぐにWeb開発に取り入れることが可能です。

2.JavaScriptの基本構文と書き方の基礎

JavaScriptを使いこなすためには、まず基本的な構文と書き方を理解することが重要です。本章では、変数や関数・条件分岐・ループ処理などJavaScriptの基礎を構成する要素を取り上げ、わかりやすく解説していきます。

<script>タグと記述場所

JavaScriptは、HTML内の<script>タグを使って記述するのが基本です。

JavaScriptはHTMLファイル内に直接書くことも、外部ファイルに分けて読み込むこともできます。場所によって処理のタイミングが異なるため、正しい記述位置を理解しておく必要があります。

HTMLの<head>や<body>の最後に以下のように書くことで実行されます。

alert('Hello, world!');

</script>

一般的にはHTMLの一番最後（</body>の直前）に記述すると、HTML要素の読み込み後にスクリプトが実行され、エラーを防ぎやすくなります。このように、JavaScriptを使う際は<script>タグの使い方と記述位置を意識することで、安定した動作を実現できます。

変数宣言：var・let・constの違い

JavaScriptでは、var・let・constの3つの方法で変数を宣言できます。

これらは使い方が似ていて混同しやすいですが、スコープ（有効範囲）や再代入の可否といった重要な違いがあります。目的に応じて適切に使い分けることで、バグを防ぎやすくなります。

var：古い書き方で、関数スコープ
let：ブロックスコープで再代入可
const：ブロックスコープで再代入不可

let name = "Taro";

name = "Hanako"; // OK

const age = 25;

age = 30; // エラーになる

このように、基本はletを使い、変更しない値はconstを使うというのが現代の標準的な書き方です。

データ型と型変換の基本

JavaScriptでは、データ型の基本と型変換の仕組みを理解することが重要です。異なる型を組み合わせて処理を行うとき、意図しない挙動が発生することがあります。そのため、各データ型の特徴と、型変換の基本を知っておく必要があります。

JavaScriptの主なデータ型には以下があります。

文字列（String）: "hello"
数値（Number）: 123
真偽値（Boolean）: true / false
配列（Array）: [1, 2, 3]
オブジェクト（Object）: { name: "Taro", age: 25 }
null型：null
undefined型：undefined

let num = "10";

let result = Number(num) + 5; // 15

JavaScriptは動的型付け言語ですが、型の概念を理解しておくことで、エラーを減らし安全なコードが書けます。

条件分岐と繰り返し処理

条件分岐と繰り返し処理は、JavaScriptの中でも重要な構文です。状況に応じて処理を変えたり、一定の処理を繰り返したりすることで、柔軟なアプリケーションを作ることができます。

// 条件分岐

let score = 80;

if (score >= 70) {

console.log("合格です");

} else {

console.log("不合格です");

}

// 繰り返し処理

for (let i = 0; i < 5; i++) {

console.log(i); // 0〜4を出力

}

このような構文は多くのプログラムで必須となるため、初心者のうちに繰り返し練習して習得することをおすすめします。

関数の定義と使い方

関数は、複数の処理を1つにまとめて再利用できる仕組みです。

関数を使えば、同じ処理を何度も書かずに済み、コードの保守性が高まります。また、関数に名前を付けて意味を持たせることで、可読性も向上します。

function greet(name) {

return "こんにちは、" + name + "さん";

}

console.log(greet("Taro")); // こんにちは、Taroさん

関数はJavaScriptの中核機能です。最初は短い関数を作るところから始めて、徐々に応用力を身につけていきましょう。

【初心者向け】JavaScript入門完全ガイド｜基本構文や勉強方法（入門本や学習サイト）など解説

JavaScript配列完全ガイド｜初期化・追加・操作から配列操作・連想配列まで徹底解説

3.JavaScriptでできる簡単なプログラム例

JavaScriptの基本構文を理解したら、次は実際に簡単なプログラムを動かしてみましょう。コードが動く実感を得ることで、学習のモチベーションも高まります。本章では、初心者が最初に取り組みやすい代表的なJavaScriptの例を4つ紹介します。

アラート表示でダイアログを出す

アラートは、JavaScriptで最もシンプルな出力方法の1つです。ユーザーにメッセージを表示する方法として、画面上にポップアップを出せるalert()関数は非常にわかりやすく、初心者でも直感的に使えます。

alert("こんにちは！JavaScriptを始めましょう。");

ブラウザ上でこのコードを実行すると、メッセージ付きのダイアログボックスが表示されます。アラートは簡単な確認やデバッグにも使える基本的な手段なので、JavaScriptの最初の一歩としてぜひ試してみましょう。

ボタンで文字を切り替える

ユーザー操作に応じて表示内容を変える処理は、JavaScriptの基本です。HTMLのボタン要素とJavaScriptのイベント処理を組み合わせることで、ページの内容を動的に変化させることができます。

<p id="message">こんにちは</p>

<button onclick="changeText()">文字を変更</button>

function changeText() {

document.getElementById("message").innerText = "こんばんは";

}

</script>

ボタンを押すと、「こんにちは」が「こんばんは」に変わります。このような動的変更は、ユーザーインターフェースの基本です。

入力値のバリデーション

入力内容のチェックも、JavaScriptで簡単に実装できます。JavaScriptを使えば、送信前に入力値を確認し、正しくない場合に警告を表示することが可能です。これにより、ユーザーの操作ミスを防ぎ、サーバー側の負担も減らせます。

function validate() {

const email = document.getElementById("email").value;

if (email.includes("@")) {

alert("送信完了");

} else {

alert("メールアドレスが正しくありません");

}

</script>

このように、入力チェックは業務用システムやECサイトでも頻繁に使われるため、初心者のうちから慣れておくことが重要です。

画像や色を切り替える

画像や背景色を動的に変えることも、JavaScriptの得意分野です。見た目の変化があると学習も楽しくなり、DOMのプロパティやCSSとの連携について理解が深まります。

function changeImage() {

document.getElementById("img").src = "image2.jpg";

}

</script>

このコードでは、ボタンを押すと表示されている画像が切り替わります。動的な画像や色の変更は、見栄えのするコンテンツ制作に欠かせない要素です。コードを動かして仕組みを体験してみましょう。

JavaScriptのalert完全ガイド｜自動で閉じる方法や非推奨理由、alert以外の方法を紹介

4.JavaScriptの実用的な活用例

基本的な構文と簡単なプログラムに慣れてきたら、次は実際のWebサイトでよく使われている「実用的な機能」にチャレンジしてみましょう。本章では、スライドショー・スムーズスクロール・非同期通信といった、Web制作や業務効率化で活躍する代表的な実装例を紹介します。

スライドショーの自動再生機能

スライドショーは、JavaScriptを使って画像や情報を順番に表示できる便利な機能です。トップページやキャンペーン紹介などでよく使用されており、自動再生することでユーザーの目を引く効果が高まります。また、setIntervalなどの関数を使うことで簡単に実装できます。

const images = ["img1.jpg", "img2.jpg", "img3.jpg"];

let index = 0;

setInterval(() => {

index = (index + 1) % images.length;

document.getElementById("slide").src = images[index];

}, 3000);

</script>

このコードでは3秒ごとに画像が切り替わります。

ページ内リンクでスムーズスクロール

JavaScriptを使えば、ページ内リンクの移動を滑らかにするスムーズスクロールが実現できます。通常のアンカーリンクでは即座に移動しますが、スムーズスクロールを導入することでUXが向上し、ユーザーに優しいページになります。

<a href="#target" onclick="scrollToElement(event)">ここへ移動</a>

<div id="target">ここがターゲット</div>

function scrollToElement(event) {

event.preventDefault();

document.getElementById("target").scrollIntoView({ behavior: 'smooth' });

}

</script>

非同期通信（fetch）の導入

JavaScriptのfetch関数を使えば、サーバーと非同期でデータ通信を行うことができます。ページを再読み込みせずにデータを取得・更新できるため、動的なWebアプリケーションを作る上で不可欠な技術です。ユーザー操作に応じてリアルタイムにデータを扱うシーンで活躍します。

fetch('https://api.example.com/data')

.then(response => response.json())

.then(data => {

console.log(data);

});

このコードでは、外部APIからJSONデータを取得して、内容をコンソールに出力します。

【JavaScript】スライドショーの作り方｜横スクロールやボタン付きなどおしゃれなパターンを紹介

JavaScriptフレームワーク徹底解説【2025年版】

5.JavaScriptのエラーとデバッグ方法

JavaScriptの学習や開発を進めていくと、避けて通れないのが「エラー」の存在です。初心者にとってエラーはつまずきの原因になりやすいですが、原因と対処法を理解すれば恐れる必要はありません。本章では、JavaScriptでよくあるエラーの種類や、Google Chromeのデベロッパーツールを活用した基本的なデバッグ方法を紹介します。

初心者が陥りやすいエラーの種類

JavaScriptのエラーにはパターンがあり、よくあるものを知っておけば対処しやすくなります。初心者に多いエラーの多くはタイポ（綴り間違い）や文法ミス、未定義の変数など、基本的なミスによって発生します。エラー内容を読む力をつければ、早期に原因を突き止められます。

Uncaught ReferenceError：存在しない変数を使用した場合
SyntaxError：文法に誤りがある場合
TypeError：使えない操作をしようとした場合

console.log(namme); // ReferenceError（変数名のミス）

エラー内容はメッセージとして表示されるため「どこで、何が原因か」を冷静に読むことが解決の第一歩です。

Chromeデベロッパーツールの使い方

Chromeに搭載されているデベロッパーツールを活用することで、JavaScriptのデバッグが効率的に行えます。このツールは、Webページ上で実行されているJavaScriptのエラー確認・変数の中身のチェック・実行順の追跡などができ、初心者でも視覚的に問題点を見つけやすくなります。

F12キーまたは右クリック→「検証」で起動
「Console」タブでエラーメッセージを確認
「Sources」タブでスクリプトの中身とブレークポイントの設定が可能

デベロッパーツールは、プロのエンジニアも日常的に使用する必須ツールです。初心者でも積極的に使い方に慣れていきましょう。

console.logを使ったログ出力

console.log()を使うことで、変数の中身や処理の流れを確認できます。

コードのどこで何が起きているかを知るためには、「見える化」が不可欠です。console.log()は、簡単に情報を出力できる便利な方法として、初心者にも扱いやすいです。

let score = 80;

console.log("スコアは", score);

これにより、コンソール上に「スコアは80」と表示され、処理の流れを追いやすくなります。小さなコードからconsole.log()を習慣的に使うことで、バグを早期に見つける力が養われます。まずは出力して「確認するクセ」をつけましょう。

6.JavaScript学習の進め方とおすすめリソース

JavaScriptを独学で学ぶ上で大切なのは、「順序立てて学習すること」と「信頼できるリソースを活用すること」です。本章では、初心者がスムーズにスキルを習得していくためのステップや、おすすめの学習サイトをご紹介します。

ステップアップの道筋

JavaScriptの学習は、模写→改造→自作の順で進めるのが効果的です。

いきなり複雑なコードを書くのはハードルが高く、挫折の原因になります。まずは正しく動くコードを模写し、少しずつ改造を加え、最終的にオリジナルの作品を作ることで理解が定着します。

模写：書籍やWebのサンプルコードをそっくりそのまま書いて動かす
改造：色やテキストを変更して動作を確認
自作：ToDoリストや電卓など、自分でテーマを決めて作成

ステップごとに難易度を上げることで、無理なく実力が身につきます。

無料学習サイト・入門教材の活用

初心者はまず、無料で学べるオンライン教材を積極的に活用しましょう。基礎を繰り返し学ぶには、コストをかけずに何度でもアクセスできる教材が適しています。多くの学習サイトは演習形式で、アウトプットを通じて自然に理解を深められます。

Progate：スライド＋実践形式で初心者に最適
ドットインストール：3分動画でテンポよく学習できる
MDN Web Docs（Mozilla）：正確で網羅的なリファレンス
The Modern JavaScript Tutorial：体系立てて解説されている中上級者向け教材

まずはProgateやドットインストールなど、初級者に優しい教材から始め、理解が深まったらMDNやThe Modern JavaScript Tutorialに進むと効率的です。

7.まとめ

JavaScriptは、Webページに動きを加えるために不可欠なプログラミング言語です。基本構文や簡単な動作の実装から始めて、非同期通信などの応用まで幅広い活用が可能です。

本記事では初心者向けにJavaScriptの基礎知識から、実践的な活用方法・よくあるエラーの対処法・学習リソースまでを体系的に解説しました。まずは小さなコードから始め、自分の手で動かす経験を重ねることが上達への近道です。継続的な学習を通じて、実務にも活かせる確かなスキルを身につけていきましょう。

本記事が皆様にとって少しでもお役に立てますと幸いです。

「フリーランスボード」は、数多くのフリーランスエージェントが掲載するITフリーランスエンジニア・ITフリーランス向けの案件・求人を一括検索できるサイトです。

開発環境、職種、単価、稼働形態、稼働日数など様々な条件から、あなたに最適なフリーランス案件・求人を簡単に見つけることができます。

単価アップを目指す方や、自分の得意なスキルを活かせる案件に参画したい方は、ぜひ「フリーランスボード」をご利用ください。

自身に最適なフリーランスエージェントを探したい方はこちらよりご確認いただけます。