【JavaScript】サンプルコードとは？実務に役立つ使い方やポイントを初心者向けに解説

フロントエンド開発•2025/2/15

はじめに

皆さんは、JavaScript を使ってWebサイトに動きを与える方法に興味を持ったことはないでしょうか。
ボタンをクリックしたときにメッセージが出たり、画面遷移せずにフォームを送信できたりと、さまざまなインタラクションがJavaScriptで実装できます。
しかし、いざ学び始めると「何から始めればいいのか」「具体的にどうコードを書けばいいのか」がわからなくなることも多いです。
とくに初心者の方は、実際のサンプルコードを見ながら、自分なりに動かしてみるのが理解への近道となります。
この記事では、実務でも活用できる JavaScriptのサンプルコード を多彩に紹介し、初心者向けに丁寧に解説していきます。

JavaScriptはWebブラウザ上で動かすことが多いですが、サーバーサイドなどさまざまな場面でも役立ちます。
実際に企業のWebアプリケーションやサービス開発現場でも、フロントエンドを中心にJavaScriptが活用されています。
それだけに「コードの読み方・書き方」をしっかり学んでおくことは、将来的に大きな力になるでしょう。

この記事を読むとわかること

JavaScriptの基本的な構文や用途
DOM操作やイベント処理に関する具体的なサンプルコード
実務で活用しやすいサンプルコードのポイント
非同期処理やコールバック関数にまつわる注意点
初心者がつまずきやすい部分とその対処方法

これらを学ぶことで、ブラウザ上での操作や動作がイメージしやすくなり、より実践的なスキルの習得につながります。

JavaScriptサンプルコードの概要

JavaScriptで何ができるのかを、ざっくり把握しておきましょう。
主な役割としては、Webページを動的に変化させることが挙げられます。
HTMLとCSSだけでは、ページの構造と見た目を決めることしかできません。
しかしJavaScriptが加わることで、ユーザー操作に応じて部分的に表示内容を変えたり、サーバーと通信したりできます。

ここからは、具体的なサンプルコードを示しながら、どのように書いてどう役立つのかを丁寧に見ていきます。
コードと一緒に、実際の業務でよくあるシチュエーションにも触れますので、イメージを膨らませながら読み進めてみてください。

変数の宣言と扱い方

JavaScriptの基本構文でまず覚えておきたいのが、変数の宣言 です。
実装シーンとしては、フォーム入力の一時保存、ボタンの表示・非表示のフラグ管理などが挙げられます。

var, let, const の違い

かつては変数を宣言する際に var が一般的でしたが、今では let や const が主流です。
let は値を再代入できる変数、const は再代入できない定数を宣言するときに使います。
以下のサンプルコードで、それぞれの使い方を見てみましょう。


// 再代入が可能
let userName = "Tom";
userName = "Mike"; // ここで値を置き換えられる

// 再代入が不可能
const siteTitle = "JavaScript サンプルサイト";

// 従来の書き方：スコープ管理が曖昧になるので注意
var oldStyleVar = "これは昔の変数宣言";

たとえば会員登録画面などで、一時的に入力したユーザー名を保持する場合は let を使い、サイトのタイトルなど絶対に変わらないものは const を使う、といった形で実務では使い分けます。
書き手によるミスを減らすためにも、基本的には let と const を積極的に利用するといいでしょう。

データ型と型変換サンプル

JavaScriptの変数には、数値、文字列、真偽値など、さまざまな型があります。
たとえば、商品価格 を管理する変数は数値、ユーザーからのメッセージ は文字列といった具合に実務で使い分けるケースが多いです。


let price = 1000;         // 数値型
let productName = "パン"; // 文字列型
let isAvailable = true;   // 真偽値型

// 型変換例
let priceText = String(price); // "1000" という文字列に変換
let numericValue = Number("12345"); // 数値の 12345 に変換

ここでは商品の在庫管理や、ユーザーが入力した文字列を数値に変換して計算に使うときなど、型変換が自然に利用されるでしょう。
とくに文字列から数値への変換は、価格計算や合計金額を表示する処理でよく出てきます。

配列やオブジェクトのサンプル

実務で扱うデータは、単純な文字列や数値だけではありません。
たとえば 商品リスト、ユーザー情報 などをまとめて扱う場合、配列やオブジェクトがよく利用されます。


// 配列：商品の一覧を入れるイメージ
let products = ["りんご", "みかん", "バナナ"];

// オブジェクト：ユーザー情報をまとめるイメージ
let user = {
  name: "Alice",
  age: 28,
  isMember: true
};

// 配列の操作例
products.push("ぶどう");    // 後ろに要素を追加
products.splice(1, 1);     // 指定した位置の要素を削除 (ここでは "みかん" を削除)

// オブジェクトの操作例
user.age = 29;             // プロパティを更新
user.email = "test@example.com"; // 新しいプロパティを追加

商品管理のシステムでは商品一覧を配列で管理し、在庫情報をオブジェクトで扱うと便利です。
オブジェクトを使うときは、プロパティを追加したり更新したりできるので、登録フォームに入力されたユーザーのプロフィールをまとめて保持する場合にも役立ちます。

関数やスコープのサンプルコード

ある処理をひとまとまりにして、再利用しやすくするための仕組みが関数です。
「会員登録処理」「コメント投稿処理」などをまとめる場合に関数が活躍します。

関数の基本構文

以下はごくシンプルな関数の例です。
引数にユーザー名を受け取ってあいさつを表示するイメージだと思ってください。


function greetUser(name) {
  console.log("こんにちは、" + name + "さん");
}

greetUser("Haruka"); // "こんにちは、Harukaさん" と表示

実務では、この greetUser のような関数が複数登場し、それぞれの役割をきちんと切り分けることで、後からコードを見た人が読みやすく保守しやすい形になります。
とくにチーム開発であれば、関数名を見ただけで意図がわかるよう命名を心がけることが重要です。

アロー関数

関数式を簡潔に書けるのが アロー関数 です。
近年のプロジェクトではよく使われる書き方です。


const greetUserArrow = (name) => {
  console.log("ようこそ、" + name + "さん");
};

// 即時実行
greetUserArrow("Yuta");

コード量を減らして可読性も上がりやすいので、UIのイベント処理などで非常によく見かけます。
たとえば、ボタンをクリックしたときの挙動をアロー関数でシンプルにまとめると、同僚とのやりとりがスムーズになるはずです。

スコープの注意点

JavaScriptでは変数の宣言場所によって、アクセス可能な範囲（スコープ）が異なります。
たとえば関数の中で let で宣言した変数は、その関数内でしか使えません。
逆に、グローバルに宣言するとどこでもアクセスできてしまうため、名前の衝突などトラブルが発生することがあります。


function exampleScope() {
  let localVar = "ローカルスコープ";
  console.log(localVar); // "ローカルスコープ"
}

exampleScope();
// console.log(localVar); // エラーになるためアクセス不可

実務のプロジェクトでは、たいてい多くのファイルが連携して動きます。
うっかりグローバル変数を使いすぎると、思わぬ競合が発生するので注意してください。

DOM操作とイベント処理のサンプル

DOM操作 とは、Webページに表示される要素（タグ）をJavaScriptで操作することです。
たとえば、ユーザーがボタンをクリックしたら要素を追加する、フォーム送信の前に確認メッセージを表示するなどが挙げられます。

基本のDOM取得と書き換え

以下のようなHTMLがあった場合、JavaScriptで特定の要素を取得して内容を書き換えるには document.getElementById や document.querySelector を使います。


<!-- HTML例 -->
<div id="targetArea">テキストが表示されます</div>
<button id="changeBtn">変更</button>


const target = document.getElementById("targetArea");
const changeBtn = document.getElementById("changeBtn");

changeBtn.addEventListener("click", () => {
  target.textContent = "テキストが変更されました";
});

ここで target.textContent を変えると、画面上のテキストが書き換わります。
実務では「新着情報の更新」「エラーメッセージの表示」などの場面でDOM操作が必須になります。
また、要素の取得にはセレクタ方式である document.querySelector や document.querySelectorAll もよく使われるので、慣れておくと便利です。

CSSの操作

JavaScriptから CSS をいじることも可能です。
たとえばエラー発生時に文字を赤色にするときなど、画面表示の切り替えに活用されます。


<div id="errorMsg" style="display: none; color: red;">エラーです</div>
<button id="showError">エラーを表示</button>


const errorMsg = document.getElementById("errorMsg");
const showErrorBtn = document.getElementById("showError");

showErrorBtn.addEventListener("click", () => {
  errorMsg.style.display = "block";
});

このように、スタイルを直接書き換える他にも、HTMLクラス属性を付け替えてCSSを変更する方法があります。
大規模サイトやチーム開発では、クラスの切り替えによりレイアウトを変える手法がよく使われます。

イベント処理の活用シーン

クリックイベントだけでなく、マウスオーバー、スクロール、キーボード入力など、さまざまなイベントをハンドリングできます。
ユーザーの操作に応じてリアルタイムで結果を反映させる仕組みがJavaScriptの魅力です。


const inputField = document.getElementById("userInput");

inputField.addEventListener("keyup", (event) => {
  console.log("入力中の文字:", event.target.value);
});

フォーム入力のリアルタイムチェックや、マウスホバー時のツールチップ表示など、実務での幅広いユーザーインタラクションに対応できます。
こうしたイベント制御は、ユーザー体験を高めるうえで欠かせないポイントとなるでしょう。

非同期処理とコールバックのサンプル

Web開発において 非同期処理 は非常に重要です。
特にサーバーからデータを取得するときなど、処理が終わるのを待たずに別のタスクを進める仕組みが必要になります。

コールバック関数

JavaScriptでは関数を引数として渡すことができ、これを活用すると非同期処理後の動作を指定できます。
以下の例では、データ取得完了後に callback を呼ぶイメージです。


function fetchDataFromServer(callback) {
  setTimeout(() => {
    const data = { message: "サーバーからのデータ" };
    callback(data);
  }, 1000); // 実際のAPIコールなどを想定
}

fetchDataFromServer((response) => {
  console.log("受け取ったデータ:", response.message);
});

実務では、サーバーからの応答を受け取ってから画面に表示させるケースが多々あります。
たとえば在庫情報や天気予報APIなどを呼び出した後、結果をHTML要素に反映するといった流れです。

Promiseとasync/await

コールバックが増えすぎるとコードが読みづらくなるため、Promise や async/await を使う書き方が主流になっています。
同じ処理を async/await で書く例を見てみましょう。


function fetchServerData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = { message: "サーバーからのデータ" };
      resolve(data);
    }, 1000);
  });
}

async function main() {
  const result = await fetchServerData();
  console.log("受け取ったデータ:", result.message);
}

main();

実務では複数のAPIを連携することも珍しくありませんが、async/await を使うと、処理の流れが順番に上から下へ追いやすくなります。
これにより、バグを減らしたりメンテナンス性を高めたりできるのです。

イベントループとパフォーマンス

JavaScriptはシングルスレッドで動き、非同期処理はイベントループの仕組みで管理されます。
初心者の方は「なぜ並行で処理が動くように見えるのか？」と戸惑うかもしれません。
これはJavaScriptエンジンがイベントキューを順番に処理する方式を採用しているためです。

実務では、読み込みが重い画像を表示する処理や、膨大なデータを一度に描画する処理などがあると、UIがカクつく問題が発生することがあります。
そこで、非同期処理 を上手く組み合わせてユーザーが快適に操作できるように配慮することが大切になります。

イベントループやパフォーマンスについて深く理解すると、画面の動作が「サクサク」になるコードを書けるようになります。

長いリストを部分的に読み込みつつ表示する手法や、Web Workerを活用して重い計算をメインスレッドから切り離す方法などが、その代表的な例です。
ただし初心者の方は、まずは基本の非同期処理とDOM操作を組み合わせて、動きのイメージをつかむとよいでしょう。

実務で多用されるサンプルコード例

実務に近い形でのサンプルをもう少し見てみます。
たとえば「検索フォーム」と「検索結果の表示」をJavaScriptで動かす場合を想定すると、以下のような構成が考えられます。

フィルター機能を備えたサンプル


<input type="text" id="searchInput" placeholder="キーワードを入力" />
<button id="searchBtn">検索</button>
<ul id="resultList"></ul>


const searchInput = document.getElementById("searchInput");
const searchBtn = document.getElementById("searchBtn");
const resultList = document.getElementById("resultList");

// 仮のデータ
const dataList = ["JavaScript", "Java", "Python", "C++", "Ruby"];

searchBtn.addEventListener("click", () => {
  const keyword = searchInput.value.toLowerCase();
  const filtered = dataList.filter(item => 
    item.toLowerCase().includes(keyword)
  );
  
  resultList.innerHTML = ""; // 一度表示をクリア
  
  filtered.forEach(item => {
    const li = document.createElement("li");
    li.textContent = item;
    resultList.appendChild(li);
  });
});

ユーザーが検索ボタンを押すたびに、入力されたキーワードに合致する要素だけがリスト表示されます。
こうした機能は製品検索やユーザー検索など、実務でよく取り入れられる処理です。
DOM要素を動的に生成・削除しながら、検索結果を反映していく様子がわかるでしょう。

JSONデータの扱い

また、サーバーから受け取ったデータは多くの場合 JSON 形式でやり取りします。
JSON文字列をJavaScriptのオブジェクトに変換するには、JSON.parse() を使います。
逆に、オブジェクトをJSON文字列にするには、JSON.stringify() を使います。


const jsonText = '{"title":"JavaScriptサンプル","count":3}';
const parsedData = JSON.parse(jsonText);
console.log(parsedData.title); // "JavaScriptサンプル"

parsedData.count = 4;
const newJsonText = JSON.stringify(parsedData);
console.log(newJsonText); // {"title":"JavaScriptサンプル","count":4}

実務のプロジェクトでは、バックエンドと通信して得られたJSONをそのまま画面に反映することが多いです。
このため、JSONの扱いは覚えておいて損はないと言えるでしょう。

バリデーションとエラーハンドリング

ユーザー入力が想定外の内容だった場合や、サーバーがエラーを返した場合など、エラーハンドリング を実装しておくことは非常に重要です。

簡易バリデーション

以下の例では、ユーザー名が空の場合にエラーメッセージを表示するコードを示します。
こうしたバリデーションは会員登録フォームなどで必ずと言っていいほど登場します。


<input type="text" id="userName" placeholder="ユーザー名" />
<button id="submitBtn">送信</button>
<div id="errorNotice" style="color: red; display: none;">
  ユーザー名が未入力です
</div>


const userNameInput = document.getElementById("userName");
const submitBtn = document.getElementById("submitBtn");
const errorNotice = document.getElementById("errorNotice");

submitBtn.addEventListener("click", () => {
  const value = userNameInput.value.trim();
  if (!value) {
    errorNotice.style.display = "block";
  } else {
    errorNotice.style.display = "none";
    // サーバー送信など実行
    console.log("入力されたユーザー名:", value);
  }
});

業務システムでは、さらに複雑なバリデーション（メールアドレス形式のチェックや、半角英数字かどうか、など）を実施します。
JavaScript側である程度のエラーを防ぎつつ、万が一サーバー側にもチェックを入れておくことで、セキュリティを高めることが多いです。

try/catchによるエラーハンドリング

JavaScriptでは、想定外のエラーをキャッチして処理を続行するために try/catch 文が利用できます。
たとえばJSONのパースに失敗する場合などを想定し、以下のように書くことがあります。


try {
  const result = JSON.parse("不正な文字列");
  console.log(result);
} catch (error) {
  console.error("JSONのパースに失敗しました:", error);
}

実務ではAPIから受け取ったデータが予期しない形式だったり、ネットワーク障害などで通信が途切れたりすることがあり得ます。
それらに対処する際に、エラーをキャッチしてユーザーにわかりやすいメッセージを提示する工夫が欠かせません。

テンプレート文字列と文字列操作

JavaScriptには、バッククォート ` ` で囲んで文字列を柔軟に扱える テンプレート文字列 があります。
実務のメール本文を生成したり、HTML片を組み立てたりする際に非常に役立ちます。


const userName2 = "Kana";
const greetingMessage = `こんにちは、${userName2}さん。JavaScriptを楽しんでいますか？`;
console.log(greetingMessage);

プラス記号（ + ）で文字列を連結するよりも読みやすく、変数の埋め込みもわかりやすくなります。
とくに長文や複数の変数を組み合わせるときは、テンプレート文字列がおすすめです。

実務での活用ポイント

ここまで紹介したサンプルコードを踏まえ、実際に仕事でJavaScriptを扱う場面をもう少し掘り下げてみましょう。

フロントエンドフレームワークとの連携

たとえばReactやVue.jsなどのフレームワークを導入すると、より大規模な画面開発が容易になります。
しかし、その前段階として今回のような 生のJavaScript をしっかり理解しておくことはとても大切です。
DOM操作やイベント処理がどう動いているのかを理解していないと、フレームワークが内部で何をしているのかイメージしにくくなるからです。

既存システムの保守

レガシーなプロジェクトなどでは、jQueryを中心に動いているケースもあります。
そうしたプロジェクトでも、JavaScriptの基本である関数スコープやイベント処理の流れを理解しておけば、保守や改修がスムーズになります。
実務では新規開発だけでなく、既存コードを読み解く作業が多いので、基礎がしっかりしていることが何より強みになります。

連携APIとJSONの整合性チェック

API連携の多いプロジェクトでは、取得したデータが常に正しい形式とは限りません。
そこで、JavaScript側でバリデーションを行ったり、想定外のフィールドがあれば無視したりと、堅牢な処理を組む必要があります。
非同期通信と組み合わせて実装する場面は多いので、サーバー側の担当者とも話し合いながら、データ形式の仕様を詰めることが大切でしょう。

非同期処理でデータを取得するときは、受け取るデータの形式やエラー時の挙動を事前に想定しておく必要があります。

これを怠ると、テスト環境ではうまく動いていたのに本番で落ちる、といった事態が起きてしまうかもしれません。

実務活用を見据えた学習の流れ

初心者のうちは「イベント処理」「DOMの書き換え」「非同期通信」といった要素をそれぞれ個別に練習すると、混乱しにくいです。
そして小さな機能を組み合わせながら、徐々に複雑なアプリケーションへと発展させていきましょう。

ステップ1: 変数や関数など、基本文法を確認
ステップ2: DOM要素の取得とイベント処理に慣れる
ステップ3: 簡単なバリデーションやエラー処理に挑戦
ステップ4: サーバー通信を使った非同期処理とデータ表示
ステップ5: さまざまな外部API連携と複雑なロジックへの応用

この流れを踏めば、実務で必要な大半の機能をスムーズに習得できるはずです。
また、実際に動くサンプルコードをたくさん試し、自分のPCやブラウザ上で確認していくことが理解の近道になるでしょう。

テストやデバッグの重要性

JavaScriptを使った開発では、コードが長くなるほどデバッグも複雑になりがちです。
そんなときは コンソール を活用して、エラーが発生した箇所や変数の中身を随時チェックしましょう。


console.log("デバッグ情報: ", someVariable);
console.error("ここでエラーが発生しました");

業務では、ブラウザのデベロッパーツールを使ってブレークポイントを設定し、ステップ実行しながら変数の状態を確認するケースが多いです。
また、単体テストを導入して自動化する方法もありますが、まずは小規模なコードの動作確認で慣れていくのが良いでしょう。

まとめ

ここまで、JavaScript サンプルコード をキーワードに、初歩的な構文から実務に近い活用シーンまで幅広く紹介してきました。
変数の宣言方法、DOM操作、イベント処理、非同期通信など、どれもWeb開発の現場でよく使われる要素ばかりです。
実装イメージをつかみやすいよう、少しでも分かりやすく具体的なコード例を示しました。

初心者の方が最初につまずくポイントは、イベントやスコープの取り扱い、そして非同期処理の流れではないでしょうか。
しかし、今回触れたようにコールバックやPromiseを理解すれば、データをスムーズに扱えるようになります。

実務の現場では、さらに高度な設計パターンやフレームワークを取り入れつつ、エラーハンドリングやログ収集などを組み合わせてプロジェクトを構築します。
しかし、どれもJavaScriptの基礎がしっかりしていればこそ、真価を発揮できるものばかりです。
ぜひ、ここで紹介したサンプルコードをベースに、実際に手を動かしながら理解を深めてみてください。