JavaScript 基本構文を完全ガイド！10個の実例で学ぶサンプルコード最強の方法

はじめに

JavaScriptは、HTMLとCSSで作ったWebページに動きや状態変化を加える言語です。ボタン操作、フォーム検証、API通信、画面更新など、ブラウザ上の多くの処理でJavaScriptが使われます。

初心者は基本構文を単独で覚えるより、短いサンプルコードを動かしながら変数、条件分岐、ループ、関数、配列、オブジェクトの関係を整理すると理解しやすくなります。基礎から応用例まで同じ流れで確認すると、JavaScriptの使い方を段階的に整理できるのが基本です。

公式仕様やブラウザAPIの詳細は、MDNのJavaScriptドキュメントとECMAScript仕様が一次情報です。使い方で迷った場合は、サンプルコードだけで判断せず、公式ドキュメントで現在推奨される構文を確認すると安全です。

JavaScriptとは

JavaScriptは、Webページの構造を表すHTML、見た目を整えるCSSと並び、ブラウザで動く処理を担当します。ユーザーがボタンを押したらaddEventListenerでイベントを受け取り、documentやquerySelectorで要素を取得し、表示を切り替える流れが基本です。

Node.jsを使えばサーバー側でもJavaScriptを書けるため、同じ言語でフロントエンドとバックエンドをつなげられます。ただし、ブラウザAPIとサーバー実行環境では使える機能が異なるため、前提を分けて考えますし、ここがポイントです。

JavaScriptの概要と歴史

JavaScriptは1995年にNetscapeで登場し、その後ECMAScriptとして標準化されました。現在のJavaScriptは、let、const、class、Promise、async、awaitなどを含む仕様の上に成り立っているのが基本です。

これらの構文は、古いvar中心の書き方よりスコープや非同期処理を読み取りやすくします。既存コードでは古い基本構文も残るため、初心者は現行の書き方を優先しつつ、過去の記法も読める状態を目指すとよいでしょう。

JavaScriptの役割と実務上の位置づけ

JavaScriptの中心的な役割は、静的なページをユーザー操作に応じて変化させることです。フォームの値をvalueで読み取り、条件に応じてtextContentやclassListを変える処理は、Webアプリの最小単位です。

基本構文を理解すると、イベント処理、API通信、画面更新、データ整形まで見通しが立ちますが、これは押さえたい点です。イベント処理に進む場合は、JavaScriptイベント徹底解説！30個の使い方と応用例も関連します。

💡 Tips: JavaScriptの学習では、構文名だけでなく、どの値を受け取り、何を返し、どのタイミングで画面を変えるのかを追うと理解が安定するのが目安です。

JavaScriptの環境設定

JavaScriptを始めるために必要なものは、テキストエディタとWebブラウザです。初心者はVisual Studio Codeで.htmlファイルと.jsファイルを作り、ChromeやFirefoxの開発者ツールでconsole.logを確認すると扱いやすいです。

ブラウザがJavaScriptエンジンとしてコードを解釈するのが目安です。エディタは入力補完や構文ハイライトを担い、ブラウザはDOM操作やコンソール出力を確認する場になります。

必要なツールと設定方法

基本の構成は、コードを書くエディタ、表示を確認するブラウザ、問題を調べる開発者ツールです。ファイルを分ける場合は、index.htmlからscript.jsをscript要素で読み込み、HTMLとJavaScriptの役割を分離します。

HTML側で<script src="script.js" defer></script>のように書くと、HTMLの解析後にJavaScriptが動きますし、これが一つの目安です。deferを付けるとDOM要素の取得タイミングでつまずきにくく、初心者向けの注意点として重要です。

開発環境の準備とテスト

短いJavaScriptをコンソールに出し、ブラウザがコードを解釈できているか確認します。console.logは値や処理の流れを追う基本関数で、デバッグの入口です。

console.log("Hello, World!");

結果: 期待される出力は、ブラウザのConsoleにHello, World!という文字列が表示される状態です。

表示されない場合は、script要素の読み込み先、ファイル名、Consoleタブを確認します。JavaScriptの使い方に慣れるまでは、エラー文をコピーして原因を分解すると効果的です。

JavaScriptの基本構文

JavaScriptの基本構文は、値を入れる、比べる、繰り返す、処理をまとめる、データを構造化する流れで整理できるのがポイントです。この順序なら後半のサンプルコードも追いやすくなるのがポイントです。

変数とデータ型

JavaScriptでは、変数宣言にlet、定数宣言にconstを使うのが一般的です。varも使えますが、関数スコープで初心者が混乱しやすいため、新しいコードではletとconstを中心に考えます。

データ型には、Number、String、Boolean、null、undefined、Object、Arrayなどがあるのが一般的です。nullは意図的な空、undefinedは値がまだ入っていない状態です。

演算子の種類と使用方法

演算子は、値を計算したり比較したりする記号です。算術演算子は+、-、*、/、%、比較は===、!==、>、<、論理判定は&&、||、!を使います。

==は型変換を伴う比較のため、意図しない一致が起きる場合があります。JavaScriptの基本構文を学ぶ段階では、厳密比較の===と!==を優先するのが現実的です。

制御構造：条件分岐とループ

条件分岐は、入力値や状態に応じて処理を切り替える構文です。if、else if、elseを組み合わせると、条件に合う場合と合わない場合を分けられますし、ここがポイントです。

let score = 85;
if (score >= 80) {
  console.log("優秀です！");
} else {
  console.log("もっと頑張りましょう。");
}

結果: 期待される出力は、scoreが80以上のため優秀です！がConsoleに表示される状態です。

このサンプルコードでは、scoreが条件式score >= 80を満たすかどうかで分岐します。条件式を変えれば、合格判定、在庫判定、入力チェックにカスタマイズできると整理できます。

for (let i = 0; i < 5; i++) {
  console.log(i);
}

結果: 期待される出力は、Consoleに0から4までが順に表示される状態です。

i < 5が繰り返しの終了条件です。無限ループを避けるため、ループの使い方では開始値、終了条件、更新式をセットで読みますが、これは押さえたい点です。

関数の定義と使用

関数は、複数回使う処理に名前を付ける仕組みです。functionで定義し、引数で値を受け取り、returnで計算結果を返すと再利用しやすくなります。

function addNumbers(a, b) {
  return a + b;
}
console.log(addNumbers(5, 3)); // 期待される出力: 8

結果: 期待される出力は、addNumbers(5, 3)の戻り値として8がConsoleに表示される状態です。

この関数は、aとbを受け取り、+演算子で合計を返すると理解できます。関数名を処理内容に合わせると、JavaScriptのサンプルコードを後から読むときも意図を追いやすくなるのが一般的です。

オブジェクトと配列

オブジェクトは、関連する値をキーと値の組でまとめる構造です。ユーザー情報ならname、age、isEmployedのように意味のあるプロパティ名を使います。

let person = {
  name: "山田太郎",
  age: 30,
  isEmployed: true
};
console.log(person.name); // 期待される出力: 山田太郎

結果: 期待される出力は、person.nameで取得した山田太郎がConsoleに表示される状態です。

配列は複数の値を順序付きで扱いると覚えるとよいでしょう。添字は0から始まるため、3番目の値を取り出すときはnumbers[2]です。

let numbers = [10, 20, 30, 40, 50];
console.log(numbers[2]); // 期待される出力: 30

結果: 期待される出力は、配列のインデックス2にある30がConsoleに表示される状態です。

これらの基本構文が読めると、後半の実践サンプルコードで扱う一覧表示やタスク管理も理解しやすくなります。配列処理を深めたい場合は、forEach・mapの使い分け術も関連します。

実践サンプルコード

実践サンプルコードでは、JavaScriptの基本構文を小さな処理に落とし込みますが、覚えておくと役立つでしょう。初心者はコード全体を一度に覚えず、値の入口、処理の分岐、戻り値の出口を順に追うと理解しやすいです。

サンプルコード1：シンプルな計算プログラム

計算プログラムは、関数と算術演算子の使い方を同時に確認できるのが現実的です。引数として受け取った値を処理し、戻り値として返す形は多くのJavaScript処理で使われます。

function add(a, b) {
  return a + b;
}
console.log(add(5, 3)); // 期待される出力: 8

結果: 期待される出力は、5と3を加算した8がConsoleに表示される状態です。

このサンプルコードは、returnで結果を返す点が要点です。足し算を引き算や掛け算に変えるだけで、計算処理をカスタマイズできると考えられます。

サンプルコード2：条件分岐を使ったプログラム

条件分岐は、値に応じてメッセージや処理を切り替える場面で使いると整理できます。フォーム入力、年齢判定、在庫確認など、JavaScriptの使い方として頻出します。

function checkNumber(num) {
  if (num > 10) {
    return `${num}は10より大きいです。`;
  } else {
    return `${num}は10以下です。`;
  }
}
console.log(checkNumber(12)); // 期待される出力: 12は10より大きいです。
console.log(checkNumber(8));  // 期待される出力: 8は10以下です。

結果: 期待される出力は、12では10より大きい文、8では10以下の文がConsoleに表示される状態です。

この例では、template literalの中に${num}を埋め込んでいると言えるでしょう。文字列連結より読みやすく、メッセージ生成のカスタマイズにも向いています。

サンプルコード3：ループを利用したデータ処理

ループは、配列の各要素に同じ処理をかけるために使います。初心者がつまずきやすいのは、numbers.lengthと添字iの関係です。

let numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

結果: 期待される出力は、配列内の1から5までが順番にConsoleへ表示される状態です。

iが配列の添字として働きますし、ここを基本と考えるとよいでしょう。関連処理には、forEachでreturnを活用するテクニックもありますが、最初はfor文の流れを読める状態にします。

サンプルコード4：関数を使ったモジュール化

複数の関数をオブジェクトに入れると、関連する処理を整理できます。小規模なJavaScriptでも、名前空間を意識すると関数名の衝突を避けやすくなるのが基本です。

// モジュール化された数学関数
const mathModule = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

// 関数の使用
console.log(mathModule.add(5, 3)); // 期待される出力: 8
console.log(mathModule.subtract(5, 3)); // 期待される出力: 2

結果: 期待される出力は、加算結果の8と減算結果の2がConsoleに表示される状態です。

このサンプルコードでは、mathModule.addとmathModule.subtractで関数を呼び分けます。処理が増えても、同じ目的の関数をまとめて管理できます。

サンプルコード5：オブジェクトと配列を使ったデータ構造

複数ユーザーの情報は、オブジェクトを配列に入れる形で表せますし、ここがポイントです。実装では、一覧データを配列で持ち、各要素をオブジェクトとして扱う形がよく使われますし、これが一つの目安です。

let users = [
  { name: "山田太郎", age: 25 },
  { name: "鈴木花子", age: 30 },
  { name: "佐藤健", age: 28 }
];

// ユーザーの名前をコンソールに表示
for (let i = 0; i < users.length; i++) {
  console.log(users[i].name);
}

結果: 期待される出力は、山田太郎、鈴木花子、佐藤健が順番にConsoleへ表示される状態です。

users[i]で配列内のオブジェクトを取り出し、.nameで名前を参照します。年齢で絞り込む、名前だけ表示する、HTMLに反映するカスタマイズにもつながりますが、これは押さえたい点です。

よくあるエラーと対処法

JavaScriptのエラーは、文法、参照、型、非同期処理、DOM取得のタイミングに分けると原因を探しやすくなります。エラー文は、どの行で何が失敗したかを示す手がかりです。

エラーの原因と解決策

文法エラーは、括弧、波括弧、引用符、セミコロン周辺の不一致で発生すると理解できます。SyntaxErrorが出たら、エラー行だけでなく直前の行にも閉じ忘れがないか確認するのが目安です。

参照エラーは、存在しない変数や関数を使ったときに起こります。ReferenceErrorでは、変数名の綴り、宣言位置、letやconstのスコープ、読み込み順を確認します。

型エラーは、値の型が想定と異なるときに発生するのがポイントです。nullに対してプロパティを読もうとするとTypeErrorになるため、DOM取得後の値が本当に要素か確認する注意点があると覚えるとよいでしょう。

初心者はconsole.log(typeof value)やconsole.log(value)で値の中身を確かめるとよいでしょう。エラー対処の使い方を覚えると、JavaScriptの基本構文を読む力も上がります。

デバッグの基本とテクニック

デバッグでは、値の変化と処理の順番を確認するのが一般的です。開発者ツールでは、Console、Sourcesタブのブレークポイント、Networkタブの通信確認、ElementsタブのDOM確認を使い分けます。

console.error、console.table、debuggerも役立ちますが、覚えておくと役立つでしょう。公式ドキュメントによれば、Console APIにはログ出力以外のメソッドもあり、配列やオブジェクトの確認に使えるのが現実的です。

公開用コードに大量のログを残すと、不要な情報がConsoleに出続けます。開発中に使ったログは、動作確認後に整理します。

JavaScriptの応用例

JavaScriptの応用では、DOM操作、API通信、フォーム検証、ゲーム、簡易アプリなどに基本構文を組み合わせます。入力を受け取り、状態を変え、結果を表示する流れが軸です。

サンプルコード6：Webページの動的な変更

Webページの表示切り替えでは、対象要素を取得してstyle.displayを変更すると理解できると言えるでしょう。ボタンのクリック処理と組み合わせる場合は、JavaScriptにおけるイベントハンドラの実践サンプルコードも参考になります。

function toggleVisibility(elementId) {
    var element = document.getElementById(elementId);
    if (element.style.display === "none") {
        element.style.display = "block";
    } else {
        element.style.display = "none";
    }
}

結果: 期待される表示は、指定したidを持つ要素の表示状態がnoneとblockで切り替わる状態です。

元記事の構造を保つためvarを残していますが、新しく書く場合はconst elementが扱いやすいです。対象要素がない可能性がある場合は、if (!element)で早期に止めます。

サンプルコード7：APIとの連携

API連携では、fetchでURLへリクエストを送り、レスポンスをjsonとして扱います。非同期処理のため、成功時と失敗時を分ける使い方が必要です。

function fetchData(url) {
    fetch(url)
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Error:', error));
}

結果: 期待される出力は、指定URLのAPIがJSONを返す場合に、そのデータがConsoleへ表示される状態です。

実際のAPIでは認証、CORS、HTTPステータス、ネットワーク失敗を考慮すると覚えるとよいでしょう。公式ドキュメントによれば、Fetch APIはPromiseベースで、catchだけではHTTPエラーの全てを扱えない点にも注意します。

サンプルコード8：フォーム検証スクリプト

フォーム検証では、送信前に入力値を確認し、空欄や形式の誤りをユーザーへ伝えます。JavaScriptだけに頼らず、サーバー側でも検証することが安全面の注意点です。

function validateForm() {
    var name = document.forms["myForm"]["name"].value;
    if (name === "") {
        alert("Name must be filled out");
        return false;
    }
}

結果: 期待される表示は、name欄が空のときにアラートが出て、フォーム送信が止まる状態です。

このサンプルコードは最小構成ですが、実際にはtrimで空白だけの入力を除外し、エラーメッセージをHTML上に表示するカスタマイズがよく使われますし、これが一つの目安です。ユーザー体験を考えるなら、alertだけに依存しない設計が扱いやすいです。

サンプルコード9：シンプルなゲーム開発

数字当てゲームでは、乱数、条件分岐、状態管理をまとめて確認できます。JavaScriptの基本構文を遊びの形に変えると、値の変化を追いやすくなります。

let randomNumber = Math.floor(Math.random() * 100) + 1;
let guesses = 0;

function guessNumber(userGuess) {
    guesses++;
    if (userGuess === randomNumber) {
        return `正解です！ ${guesses} 回で当たりました。`;
    } else if (userGuess < randomNumber) {
        return "もっと高い数字です。";
    } else {
        return "もっと低い数字です。";
    }
}

結果: 期待される戻り値は、推測値が正解なら正解メッセージ、小さければ高い数字を促す文、大きければ低い数字を促す文です。

Math.randomとMath.floorで1から100までの整数を作ります。入力値が文字列で渡る場合は、Number(userGuess)のように数値へ変換する注意点があります。

サンプルコード10：小規模なウェブアプリケーション

小規模なタスク管理では、配列にデータを保存し、追加、表示、削除を関数で分けますが、覚えておくと役立つでしょう。JavaScriptのサンプルコードとして、状態管理の最小単位を確認しやすい題材です。

let tasks = [];

function addTask(task) {
    tasks.push(task);
    return `タスク '${task}' が追加されました。`;
}

function displayTasks() {
    if (tasks.length === 0) {
        return "タスクはありません。";
    } else {
        return `現在のタスク: ${tasks.join(', ')}`;
    }
}

function removeTask(task) {
    let index = tasks.indexOf(task);
    if (index !== -1) {
        tasks.splice(index, 1);
        return `タスク '${task}' が削除されました。`;
    } else {
        return `タスク '${task}' は見つかりませんでした。`;
    }
}

結果: 期待される戻り値は、タスク追加時の完了文、一覧表示文、削除成功または未発見の文です。

pushで追加し、joinで一覧文字列を作り、indexOfとspliceで削除します。実用寄りにするなら、タスクを{ id, title, done }のようなオブジェクトに変えるカスタマイズが考えられます。

サンプルコード9：シンプルなゲーム開発

同じ数字当てゲームでも、画面入力と組み合わせる場合は、関数の戻り値をHTMLへ反映する処理が必要です。基本構文は同じですが、DOM操作が加わる点で使い方が変わりますし、ここを基本と考えるとよいでしょう。

let randomNumber = Math.floor(Math.random() * 100) + 1;
let guesses = 0;

function guessNumber(userGuess) {
    guesses++;
    if (userGuess === randomNumber) {
        return `正解です！ ${guesses} 回で当たりました。`;
    } else if (userGuess < randomNumber) {
        return "もっと高い数字です。";
    } else {
        return "もっと低い数字です。";
    }
}

結果: 期待される戻り値は、入力値と乱数の比較結果に応じたヒントまたは正解文です。

画面表示にカスタマイズする場合は、ボタンのclickイベントで入力値を読み取り、結果表示用の要素へtextContentを入れます。イベントの詳細は、JavaScriptイベント徹底解説と合わせると理解しやすいです。

サンプルコード10：小規模なウェブアプリケーション

タスク管理のサンプルコードは、配列操作の使い方を整理する題材です。データが増えるほど、削除対象を文字列で探すより、idで管理するほうが安全です。

let tasks = [];

function addTask(task) {
    tasks.push(task);
    return `タスク '${task}' が追加されました。`;
}

function displayTasks() {
    if (tasks.length === 0) {
        return "タスクはありません。";
    } else {
        return `現在のタスク: ${tasks.join(', ')}`;
    }
}

function removeTask(task) {
    let index = tasks.indexOf(task);
    if (index !== -1) {
        tasks.splice(index, 1);
        return `タスク '${task}' が削除されました。`;
    } else {
        return `タスク '${task}' は見つかりませんでした。`;
    }
}

結果: 期待される戻り値は、配列tasksの状態に応じた追加、表示、削除の各メッセージです。

Webアプリに近づけるなら、入力欄、追加ボタン、一覧表示領域、削除ボタンを用意します。ファイル名や拡張子の扱いを含む応用に進む場合は、JavaScriptで拡張子を活用する方法も関連します。

JavaScriptの最新トレンドと将来性

JavaScriptの周辺では、React、Vue、Svelte、Next.js、Node.jsなどのエコシステムが広く使われていると考えられますし、ここを基本と考えるとよいでしょう。これらは基本構文の上にあるため、関数、配列、オブジェクト、非同期処理を読める状態が役立ちます。

ツールの流行だけを追うと、なぜその書き方になるのかが曖昧になります。JavaScriptの基本構文を土台に置き、UI構築、状態管理、ビルド、テストの役割を分けて学ぶのが堅実です。

現在のトレンドと将来の展望

現在のWeb開発では、SPA、SSR、SSG、PWA、サーバーレス、マイクロサービスなどの設計が使われますし、ここがポイントです。どの設計でもJavaScriptは画面側の処理やAPI連携に関わり、fetch、Promise、async、awaitの理解が欠かせません。

将来性を考えると、言語の基礎と周辺ツールを分けて学ぶ必要があるのが基本です。AI連携やWebAssemblyとの組み合わせが増えても、入力値を検証し、状態を更新し、画面へ反映するJavaScriptの役割は残ります。

JavaScriptの職業としての可能性

JavaScriptは、フロントエンド開発、Node.jsを使ったサーバー開発、モバイルアプリ、デスクトップアプリ、業務画面の自動化に関わりますが、これは押さえたい点です。職業として学ぶ場合は、基本構文だけでなく、Git、HTTP、アクセシビリティ、セキュリティ、テストも扱います。

初心者の段階では、短いサンプルコードを写すだけで終えず、値を変える、条件を増やす、関数名を直す、DOM表示に変えるカスタマイズが力になるのが目安です。小さな変更を積み重ねると、JavaScriptの使い方が暗記から設計の理解へ移りますし、これが一つの目安です。

💡 Tips: 学習用コードを実務寄りに近づけるには、入力値の検証、エラー時の表示、処理の分割、名前の一貫性を意識します。小さなサンプルでも、この視点があると読みやすさが変わります。

まとめ

JavaScriptは、データ取得、入力検証、画面更新、簡易アプリ作成まで幅広く使われますし、ここがポイントです。学習では、基本構文を単独で覚えるより、短いサンプルコードを通じて値の流れを追う姿勢が役立ちます。

押さえたいのは、letとconst、if、for、functionとreturn、配列とオブジェクトです。これらを組み合わせると、JavaScriptの使い方は小さな処理からWebアプリの土台へ広がりますが、覚えておくと役立つでしょう。

エラーが出た場合は、文法、参照、型、非同期処理、DOM取得のどこで失敗しているかを分けて見ます。初心者にとってエラーは、JavaScriptの注意点を具体的に理解する材料になるのがポイントです。

基本構文とサンプルコードの関係が整理できたら、イベント処理、API通信、フォーム検証、タスク管理へ進むと学習がつながりますし、ここを基本と考えるとよいでしょう。カスタマイズを加え、自分の入力に応じて画面が変わる感覚をつかむことが力になります。

※本記事は実在のエンジニア複数名で構成される Japanシーモア編集部が、AI支援を活用して作成・校正・公開しています。

関連記事

• JavaScriptのforEachでreturnを活用する6つのテクニック
• 【保存版】JavaScriptエンジニア必見！forEach・mapの”目からウロコ”な使い分け術10選
• JavaScriptイベント徹底解説！30個の使い方と応用例
• JavaScriptにおけるイベントハンドラを完全ガイド！20選の実践サンプルコード付き
• JavaScriptで拡張子を活用する方法12選！初心者でも簡単にできる方法を紹介