JavaScript と DOM 操作の習得

はじめに

この実験では、ダイナミックな個人財務トラッカーを作成する任務を負った新進のウェブ開発者である Alex の目から、ウェブ開発の世界に足を踏み入れます。ユーザーが日々の支出と収入を入力し、追跡できる使いやすいアプリケーションを構築することが目的です。明確な目標は、直感的で魅力的なインターフェイスを開発し、ユーザーが何の手間もかけずに簡単に財務を管理できるようにすることです。このプロジェクトは、個人財務管理を簡素化するだけでなく、JavaScript と DOM 操作の基本概念をあなたに紹介することも目的としています。

私たちは 5 つの実験を通じて EconoMe プロジェクトを完成させます。

EconoMe project overview animation

知識ポイント:

変数宣言 (let, const)
DOM 操作の基本 (要素の取得、要素の内容の変更)
イベントリスニング (addEventListener)

基本的な JavaScript

JavaScript は、シンプルでオブジェクト指向かつイベント駆動型の言語です。サーバーからクライアントにダウンロードされ、ブラウザによって実行されます。

HTML やウェブとともに使用でき、より広くはサーバー、PC、ラップトップ、タブレット、スマートフォンでも使用できます。

その特徴は以下の通りです。

通常、クライアントサイドのスクリプトを記述するために使用されます。
主に HTML ページにインタラクティブな動作を追加するために使用されます。
インタープリタ言語であり、解釈されながら実行されます。

では、HTML に JavaScript を組み込むにはどうすればよいでしょうか？

組み込み方法は CSS と似ており、3 つの方法で行うことができます。

特に短い JavaScript コードの場合は、HTML タグ内に直接記述します。
<script> タグを使用して、JavaScript コードを HTML 文書の <head> と <body> に埋め込むことができます。
外部の JavaScript ファイルを使用する場合は、JavaScript スクリプトコードを .js 拡張子のファイルに記述し、<script> タグの src 属性を設定して組み込みます。

たとえば、F12 を押すと、このページに多くの外部 JavaScript ファイルが組み込まれているのがわかり、Event Listeners をクリックすると、ページ内に多くの種類のイベントがあることがわかります。

JavaScript event listeners example

では、~/project/index.html に <script> タグを追加して、script.js ファイルを組み込みましょう。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EconoMe</title>
    <link rel="stylesheet" href="./style.css" />
    <!-- Add the script tag to index.html -->
    <script src="./script.js"></script>
  </head>
  <body></body>
</html>

次に、JavaScript で変数を定義する方法を学びましょう！

変数とは何か

変数は、情報を格納するためのコンテナと見なすことができます。プログラミングでは、変数を使用してデータ値を格納します。JavaScript は動的型付け言語であり、つまり変数の型を宣言する必要はありません。型はプログラムの実行中に自動的に決定されます。

変数の宣言

JavaScript では、var、let、または const キーワードを使用して変数を宣言できます。

var: ES6 以前は、var が変数を宣言する主な方法であり、関数スコープを持ちます。
let: ES6 で導入された let を使用すると、ブロックスコープのローカル変数を宣言できます。
const: 同じく ES6 で導入され、一度宣言すると変更できない定数を宣言するために使用されます。

例えば：

var name = "Alice"; // Using var to declare a variable
let age = 30; // Using let to declare a variable
const city = "London"; // Using const to declare a constant

変数の型

JavaScript には、いくつかの異なるデータ型があります。

文字列 (String): "Hello, World!" のようなテキストデータ。
数値 (Number): 42 や 3.14 のような整数または浮動小数点数。
ブール値 (Boolean): true または false。
オブジェクト (Object): 複数の値や複雑なデータ構造を格納できます。
null と undefined: それぞれ「値がない」および「値が定義されていない」を表す特殊な型。

変数の使用

変数を宣言すると、プログラムで使用できます。

console.log(name); // Outputs: Alice
console.log("Age: " + age); // Outputs: Age: 30
console.log(city + " is a beautiful city"); // Outputs: London is a beautiful city

console.log() 静的メソッドは、メッセージをコンソールに出力します。

JavaScript variable declaration example

DOM 操作

DOM (Document Object Model、文書オブジェクトモデル) は、HTML および XML 文書をツリー構造として扱う、クロスプラットフォームで言語に依存しないインターフェイスです。このツリー構造では、各ノードは要素、属性、テキストコンテンツなど、文書の一部を表します。

DOM 要素へのアクセス

ウェブページのコンテンツを操作するには、まず DOM ツリー内の要素にアクセスする必要があります。要素には、ID、クラス名、またはタグ名など、さまざまな方法でアクセスできます。

let elementById = document.getElementById("elementId"); // Access element by ID
let elementsByClassName = document.getElementsByClassName("className"); // Access a collection of elements by class name
let elementsByTagName = document.getElementsByTagName("tagName"); // Access a collection of elements by tag name

EconoMe プロジェクトの ~/project/script.js ファイルに以下のコードを追加します。

const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");

要素コンテンツの変更

要素への参照が得られたら、そのコンテンツを変更できます。この目的で一般的に使用されるのは、innerHTML および textContent プロパティです。

たとえば、id=content の div 要素に <p>New HTML content</p> を挿入し、id=info の span 要素内の "Hello" を "New text content" に置き換えるには、次の JavaScript コードを使用します。

DOM content modification example

要素の追加と削除

JavaScript を使用して、ページ上の要素を動的に追加または削除できます。

例えば：

// Create a new element
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Add the new element to the document body
document.body.removeChild(newElement); // Remove the element from the document body

HTML 文書では、document.createElement() メソッドは HTML 要素を作成します。
document.body.appendChild() メソッドは、新しい要素を <body> 要素の末尾に追加します。
document.body.removeChild() メソッドは、要素を <body> 要素から削除します。

イベントハンドリング

イベントリスナーを使用すると、ユーザーのアクションに応答することができます。

addEventListener("event", function () {});

クリック、ホバー、キー押下などのアクションに対応できます。

elementById.addEventListener("click", function () {
  console.log("Element was clicked!");
});

Event handling demonstration gif

基本的な DOM 操作を学んだ後、EconoMe プロジェクトの ~/project/script.js ファイルに以下のコードを追加できます。

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("record-form");
  const recordsList = document.getElementById("records-list");
  const totalIncomeEl = document.getElementById("total-income");
  const totalExpenseEl = document.getElementById("total-expense");
  const balanceEl = document.getElementById("balance");
  let draggedIndex = null; // Index of the dragged item
});

JavaScript の DOMContentLoaded イベントは、初期の HTML 文書が完全に読み込まれて解析されたときに発生し、スタイルシート、画像、サブフレームの読み込みが完了するのを待ちません。このため、DOM が準備できたらすぐに JavaScript コードを実行するために重要なイベントであり、スクリプトが完全に解析された HTML 要素と相互作用することを保証します。

この実験では、現時点で効果をプレビューする必要はありません。後続の手順でコードを完成させた後に確認します。

まとめ

この実験では、Alex とともに個人財務トラッカーの基本的かつ重要な部分を構築する旅に出ました。プロジェクト環境を設定し、JavaScript を使用して DOM を操作することで、動的なウェブアプリケーションの基礎を築き、初期の財務状態を表示しました。重要なポイントは、JavaScript が HTML 要素とどのように相互作用してウェブページのコンテンツを動的に変更するかを理解することであり、これが後続の手順でよりインタラクティブな機能を実装するための基礎となります。

この実践的なアプローチは、JavaScript と DOM 操作の理解を深めるだけでなく、実際のウェブ開発シナリオを模擬し、これからのより複雑なプロジェクトに備えることができます。