【JS実践】JavaScript 入門

参照データ: https://ja.javascript.info/intro

---

1. JavaScript 入門の定義と基本構文

JavaScriptは、ブラウザー上で実行されるプログラミング言語です。HTML、CSSと共に使用され、ユーザーインターフェースを制御するための重要なツールです。

変量宣言
変量はvar、let、constを使って宣言します。

let greeting = ‘こんにちは’; // 変量名と値を指定します。

操作
数値、文字、booleanの演算が可能です。

let num1 = 5, num2 = 3; // 数値の宣言例
console.log(num1 + num2); // 8を出力します。

条件判断
if、else、switchを使って条件に応じた処理を実行します。

if (num1 > num2) {
console.log(‘num1がnum2以上です’);
} else {
console.log(‘num1はnum2以下です’);
}

ループ
for、while、do-whileを使って反復処理を行います。

for (let i = 0; i < 5; i++) { console.log(i); } 関数
関数は特定の操作を実行するために定義します。

function greetingFunction(name) {
return こんにちは、${name}さん!;
}
console.log(greetingFunction(‘鈴木’)); // ‘こんにちは、鈴木さん!’と表示されます。

モジュール化
複雑なコードを分割し、管理しやすくします。

// モジュールとして定義
function greetingModule(name) {
return こんにちは、${name}さん!;
}

// 使用例
const greeting = greetingModule(‘鈴木’);
console.log(greeting); // ‘こんにちは、鈴木さん!’と表示されます。

JavaScriptは、フロントエンド開発で広く使用される言語です。ブラウザーやネイティブアプリで実行され、ユーザーインターフェースを制御するために適しています。基本的な知識を習得すれば、さまざまな応用可能性があります。

2. JavaScript 入門の基本例題

JavaScript は、ウェブ開発における重要な言語です。以下に、基礎的な例題と解説を示します。

1. 変数宣言と基本演算

変数は、値を保留するための手段です。let、const、var などのキーワードで宣言されます。

let num = 10; // 変数numに数字10が代入されます。
console.log(num); // 10を表示します。

2. 条件判断

if文は、条件に応じて実行するコードを選択します。

let season = ‘春’;
if (season === ‘春’) {
console.log(‘現在は春です’);
} else if (season === ‘夏’) {
console.log(‘現在は夏です’);
} else {
console.log(‘季節が不明です’);
}

3. ループ

forループは、一定の回数で実行するコードを指定します。

let sum = 0;
for (let i = 1; i < 10; i++) { sum += i; } console.log(sum); // 1+2+...+9=45を表示します。 4. 関数の定義

関数は、特定の操作を実行するために定義されます。

function greeting(name) {
return こんにちは!${name}さん;
}
console.log(greeting(‘alice’)); // ‘こんにちは!aliceさん’を表示します。

5. モジュール化

モジュールは、コードを分割して管理する手段です。

// another-file.js
export function multiply(a, b) {
return a * b;
}

import { multiply } from ‘./another-file.js’;
console.log(multiply(3, 5)); // 15を表示します。

6. DOM操作

DOM(ドキュメント オブジェクト モデル)が、HTMLの要素を管理する仕組みです。

document.addEventListener(‘DOMContentLoaded’, function() {
const h1 = document.querySelector(‘h1’);
h1.textContent = ‘JavaScriptが楽しい!’;
});

**7. fetch API

3. 実務で役立つ応用パターン

JavaScriptの実務的な場面では、いくつかの応用パターンが頻繁に使用されます。以下に、実務に役立つ3つのパターンとそのコード例を紹介します。

1. データ加工と表示

データをAPIから取得し、加工してユーザーに表示することがよくあります。例えば、以下のような流れです:

// APIからデータを取得
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => {
// データを加工
const processedData = data.map(item => ({
id: item.id,
name: item.name,
value: item.value
}));

// HTMLに表示
const container = document.getElementById(‘data-container’);
container.innerHTML =

${processedData.map((item, index) =>

).join ”}

${item.id}

${item.name}

${item.value}

;
});

2. 非同期処理 (AJAX)

データを送り返すことが必要な場面では、非同期通信が便利です。以下の例は、ボタンをクリックするとデータが追加される仕組みです:

document.querySelector(‘button’).addEventListener(‘click’, function() {
const container = document.getElementById(‘container’);

// 非同期リロード
fetch(‘https://api.example.com/add’)
.then(response => response.json())
.then(data => {
container.innerHTML +=

;
});
});

3. 状態管理

状態を保持する必要がある場合、例えばフォームの入力保存、以下のような方法が役立つです(ReactのuseStateを使用)。

import React, { useState } from ‘react’;

function FormExample() {
const [inputValue, setInputValue] = useState(”);

return (