はじめに
この記事を読めば、JavaScript初心者でも31種類のコードを理解し、実践できるようになります。
JavaScript基本文法
JavaScriptを使いこなすためには、まず基本的な文法を理解することが大切です。
ここでは、変数宣言、条件分岐、繰り返し処理、関数定義など、JavaScriptでよく使われる基本文法をご紹介します。
コード一覧と解説
それでは、JavaScript初心者にも分かりやすいように、31種類のJavaScriptコードを紹介します。
それぞれのコードには、簡単な説明とサンプルコードが付いていますので、すぐに実践してみてください。
○コード1：変数の宣言と代入
JavaScriptでは、変数を宣言する際にはletやconstを使います。
letは再代入可能な変数、constは再代入不可能な変数（定数）です。
let name = "John";
const age = 30;○コード2：条件分岐
条件分岐は、ある条件が成立した場合に処理を行い、成立しない場合には別の処理を行う構文です。
if文を使って条件分岐を行います。
if (age >= 20) {
console.log("成人です。");
} else {
console.log("未成年です。");
}○コード3：繰り返し処理
繰り返し処理は、同じ処理を繰り返し実行するための構文です。
for文やwhile文を使って繰り返し処理を行います。
for (let i = 0; i < 5; i++) {
console.log(i);
}○コード4：関数の定義と呼び出し
関数は、処理をまとめたものです。
関数を定義することで、処理を再利用できます。
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("John");○コード5：DOM操作
DOM（Document Object Model）操作は、HTML要素をJavaScriptで操作する方法です。
DOM操作を行うことで、ページの内容を動的に変更できます。
document.querySelector("#title").innerHTML = "New Title";○コード6：イベントリスナー
イベントリスナーは、ブラウザで発生するイベント（クリックやキーボード入力など）に対して、処理を実行する機能です。
document.querySelector("#button").addEventListener("click", function () {
console.log("Button clicked!");
});○コード7：配列操作
配列は、複数の値をまとめて扱うためのデータ構造です。
配列を操作するためのメソッドが多数用意されています。
let fruits = ["apple", "orange", "banana"];
fruits.push("grape");
console.log(fruits); // ["apple", "orange", "banana", "grape"]○コード8：オブジェクト操作
オブジェクトは、キーと値のペアで構成されるデータ構造です。
オブジェクトを操作する際には、ドット記法やブラケット記法を用いてアクセスします。
let person = {
name: "John",
age: 30
};
console.log(person.name); // "John"○コード9：AJAX
AJAX（Asynchronous JavaScript and XML）は、JavaScriptを使って非同期通信を行う技術です。
XMLHttpRequestオブジェクトを使用してサーバーとのデータのやり取りを行います。
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data");
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();○コード10：プロミス
プロミスは、非同期処理の結果を表現するオブジェクトです。
プロミスを使うことで、非同期処理の成功時や失敗時に実行する処理をより簡潔に記述できます。
function getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data received!");
}, 1000);
});
}
getData().then((data) => {
console.log(data);
});○コード11：async/await
async/awaitは、プロミスをより簡潔に記述できる構文です。
async関数の中では、awaitを使って非同期処理を待機させることができます。
async function fetchData() {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
}
fetchData();○コード12：テンプレートリテラル
テンプレートリテラルは、文字列を簡単に組み立てるための構文です。
バックティック（“）で囲んだ中で、${}を使って変数を埋め込むことができます。
let name = "John";
let message = `Hello, ${name}!`;
console.log(message); // "Hello, John!"○コード13：アロー関数
アロー関数は、関数を短く記述できる構文です。
また、アロー関数はthisの扱いが通常の関数と異なり、レキシカルスコープに従います。
const add = (a, b) => a + b;
console.log(add(1, 2)); // 3○コード14：デストラクチャリング
デストラクチャリングは、配列やオブジェクトから値を取り出して変数に代入する構文です。
簡潔に変数の宣言と代入ができます。
const [a, b] = [1, 2];
console.log(a, b); // 1 2○コード15：スプレッド構文
スプレッド構文は、配列やオブジェクトを展開して、新しい配列やオブジェクトを生成する構文です。
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]○コード16：モジュールのインポートとエクスポート
モジュールは、関数やオブジェクトをまとめて管理するための仕組みです。
exportを使ってモジュールを公開し、importを使って他のファイルから利用できるようにします。
// module.js
export const add = (a, b) => a + b;
// main.js
import { add } from "./module.js";
console.log(add(1, 2)); // 3○コード17：クラス
クラスは、オブジェクト指向プログラミングで使用される概念で、オブジェクトの設計図のようなものです。
コンストラクタやメソッドを定義して、インスタンス化することができます。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const john = new Person("John", 30);
john.greet(); // "Hello, my name is John and I am 30 years old."○コード18：プロトタイプ継承
プロトタイプ継承は、オブジェクト指向プログラミングで使用される継承の概念です。
プロトタイプチェーンを使って、親オブジェクトのプロパティやメソッドを子オブジェクトが引き継ぐことができます。
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function () {
console.log(`${this.name} makes a noise.`);
};
function Dog(name) {
Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function () {
console.log(`${this.name} barks.`);
};
const dog = new Dog("Rex");
dog.speak(); // "Rex barks."○コード19：イベントリスナー
イベントリスナーは、HTML要素で発生するイベントに対して、JavaScriptの関数を実行する仕組みです。
addEventListenerメソッドを使ってイベントと関数を関連付けます。
const button = document.querySelector("button");
button.addEventListener("click", () => {
console.log("Button clicked!");
});○コード20：DOM操作
DOM（Document Object Model）は、HTML文書を構造化されたオブジェクトとして扱うための仕組みです。
DOM APIを使って、要素の追加や削除、属性の変更などを行うことができます。
const newElement = document.createElement("p");
newElement.textContent = "This is a new paragraph.";
document.body.appendChild(newElement);○コード21：エラー処理
エラー処理は、プログラムで発生するエラーに対処するための仕組みです。
try-catch文を使って、エラーが発生した場合の処理を記述します。
try {
const result = someFunctionThatMightThrowAnError();
console.log(result);
} catch (error) {
console.error("An error occurred:", error);
}使い方・対処法・注意点・カスタマイズ
これまでに紹介したJavaScriptの基本文法を使って、さまざまな実用的な機能を実装することができます。
しかし、プログラムを作成する際には、使い方や対処法、注意点、カスタマイズ方法などにも注意を払いましょう。
応用例とサンプルコード
ここでは、JavaScriptを用いた応用例とそれに対応するサンプルコードを紹介します。
応用例1：スライダー
スライダーは、画像やテキストを自動的に切り替えるアニメーション効果を持つウェブページの要素です。
下記のサンプルコードは、シンプルなスライダーの実装例です。
let slideIndex = 0;
showSlides();
function showSlides() {
const slides = document.getElementsByClassName("mySlides");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}応用例2：フォームバリデーション
フォームバリデーションは、ユーザーが入力したデータが正しいかどうかをチェックする機能です。
下記のサンプルコードは、簡単なフォームバリデーションの実装例です。
function validateForm() {
const name = document.getElementById("name").value;
if (name === "") {
alert("Name must be filled out");
return false;
}
}応用例3：タブ切り替え
タブ切り替えは、複数のコンテンツをタブで切り替えて表示する機能です。
下記のサンプルコードは、タブ切り替えの実装例です。
function openTab(evt, tabName) {
let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}応用例4：アコーディオンメニュー
アコーディオンメニューは、クリックすることでコンテンツが展開・収束する機能を持つメニューです。
下記のサンプルコードは、アコーディオンメニューの実装例です。
function toggleAccordion(element) {
element.classList.toggle("active");
const panel = element.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}応用例5：インクリメンタルサーチ
インクリメンタルサーチは、入力された文字に応じてリアルタイムで検索結果を表示する機能です。
下記のサンプルコードは、インクリメンタルサーチの実装例です。
function incrementalSearch(input) {
const filter = input.value.toUpperCase();
const list = document.getElementById("myList");
const items = list.getElementsByTagName("li");
for (let i = 0; i < items.length; i++) {
const text = items[i].textContent || items[i].innerText;
if (text.toUpperCase().indexOf(filter) > -1) {
items[i].style.display = "";
} else {
items[i].style.display = "none";
}
}
}応用例6：モーダルウィンドウ
モーダルウィンドウは、ページ上にポップアップする小さなウィンドウです。
下記のサンプルコードは、モーダルウィンドウの実装例です。
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.style.display = "block";
}
function closeModal(modalId) {
const modal = document.getElementById(modalId);
modal.style.display = "none";
}応用例7：ドラッグアンドドロップ
ドラッグアンドドロップは、要素をマウスでドラッグして別の位置にドロップする機能です。
下記のサンプルコードは、ドラッグアンドドロップの実装例です。
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
const data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}応用例8：カレンダー
カレンダーは、日付を表示・選択するためのウィジェットです。
下記のサンプルコードは、シンプルなカレンダーの実装例です。
HTML
<div id="calendar"></div>JavaScript
function createCalendar(elementId) {
const currentDate = new Date();
const currentMonth = currentDate.getMonth();
const currentYear = currentDate.getFullYear();
const calendar = document.getElementById(elementId);
function renderCalendar(month, year) {
const firstDay = new Date(year, month).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
let calendarHTML = "<table>";
calendarHTML += "<tr>";
for (let day of days) {
calendarHTML += `<th>${day}</th>`;
}
calendarHTML += "</tr>";
let date = 1;
for (let i = 0; i < 6; i++) {
calendarHTML += "<tr>";
for (let j = 0; j < 7; j++) {
if (i === 0 && j < firstDay) {
calendarHTML += "<td></td>";
} else if (date > daysInMonth) {
break;
} else {
calendarHTML += `<td>${date}</td>`;
date++;
}
}
calendarHTML += "</tr>";
}
calendarHTML += "</table>";
calendar.innerHTML = calendarHTML;
}
renderCalendar(currentMonth, currentYear);
}
createCalendar("calendar");応用例9：トースト通知
トースト通知は、一定時間表示された後に自動的に消える短いメッセージを表示する機能です。
下記のサンプルコードは、トースト通知の実装例です。
function showToast(message, duration = 3000) {
const toast = document.createElement("div");
toast.className = "toast";
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.classList.add("fade-out");
setTimeout(() => {
document.body.removeChild(toast);
}, 500);
}, duration);
}応用例10：無限スクロール
無限スクロールは、ページの最下部までスクロールすると自動的に次のコンテンツが読み込まれる機能です。
下記のサンプルコードは、無限スクロールの実装例です。
let isLoading = false;
window.onscroll = function () {
if (isLoading) return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
isLoading = true;
fetchMoreData();
}
};
function fetchMoreData() {
// ここで、データを取得し、ページに追加する処理を行います。
// 処理が完了したら、isLoadingをfalseに戻します。
}まとめ
これらの応用例は、JavaScriptを使用して実用的な機能を実装する際の参考になります。
各応用例の使い方や対処法、注意点、カスタマイズ方法にも注意を払い、実際のプロジェクトで応用してみましょう。
