【JavaScript入門】初心者向けに基本構文を解説

// アラートを表示する
alert("Hello, World!");

// コンソールにメッセージを表示する
console.log("This is a message");

// 変数を使用する
let userName = "John";
console.log("Hello, " + userName);

This is a message
Hello, John

// 変数（再代入可能）と定数（再代入不可）の宣言
let userName = "John";  // 文字列型の変数
const PI = 3.14159;  // 数値型の定数（変更不可）
console.log("name:", userName);
console.log("PI:", PI);

name: John
PI: 3.14159

// さまざまなデータ型の例
let num = 42;  // 数値型
let str = "Hello";  // 文字列型
let bool = true;  // 真偽値型（trueまたはfalse）
let arr = [1, 2, 3];  // 配列（複数の値をリストとして格納）
let obj = { name: "John", age: 30 };  // オブジェクト（キーと値のペア）
console.log("num:", num);
console.log("str:", str);
console.log("bool:", bool);
console.log("arr:", arr);
console.log("obj:", obj);

num: 42
str: Hello
bool: true
arr: [1, 2, 3]
obj: {name: 'John', age: 30}

// if文による条件分岐
let age = 18;
if (age >= 18) {
  console.log("成人です");  // 条件が真の場合に実行
} else {
  console.log("未成年です");  // 条件が偽の場合に実行
}

// switch文による条件分岐
let fruit = "apple";
switch (fruit) {
  case "apple":
    console.log("りんごです");
    break;  // caseの処理が終わったらswitchを抜ける
  case "banana":
    console.log("バナナです");
    break;
  default:  // どのcaseにも当てはまらない場合
    console.log("不明な果物です");
}

成人です
りんごです

// for文によるループ（0から4まで5回繰り返し）
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while文によるループ（条件が真の間繰り返し）
let j = 0;
while (j < 5) {
  console.log(j);
  j++;  // jを1増やす
}

0
1
2
3
4
0
1
2
3
4

// 関数の定義（名前を引数として受け取り、挨拶を返す）
function greet(name) {
  return `Hello, ${name}!`;
}

// アロー関数の定義（2つの数値を掛け算する）
const multiply = (a, b) => a * b;

<!-- HTML要素にクリックイベントを設定（クリックするとアラートが表示される） --> 
<button onclick="alert(greet('World'))">Greet</button>

// DOM操作：要素の内容を変更
document.getElementById("demo").innerHTML = "Hello, World!";
// DOM操作：要素のスタイルを変更
document.querySelector(".myClass").style.color = "red";

<!-- 操作対象のHTML要素 -->
<p id="demo"></p>
<p class="myClass">This text will be red</p>

/* CSSスタイルの定義 */
.myClass {
  font-size: 18px;
}

// イベントリスナーの追加（クリックするとアラートが表示される）
document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

<!-- イベントリスナーを設定するHTML要素 -->
<button id="myButton">Click me</button>

// 配列操作
let fruits = ["apple", "banana", "orange"];
// 元の配列の内容を表示
console.log("Original fruits:", fruits);

fruits.push("grape");  // 配列の末尾に要素を追加
// push後の配列の内容を表示
console.log("Fruits after push:", fruits);

// filter関数で条件に合う要素だけを抽出（文字数が5より大きい果物）
let filteredFruits = fruits.filter(fruit => fruit.length > 5);
// フィルタリング後の新しい配列を表示
console.log("Filtered fruits:", filteredFruits);

Original fruits: [ 'apple', 'banana', 'orange' ]
Fruits after push: [ 'apple', 'banana', 'orange', 'grape' ]
Filtered fruits: [ 'banana', 'orange' ]

// オブジェクトの定義と操作
let person = {
  name: "John",
  age: 30,
  greet: function() {  // オブジェクト内のメソッド
    console.log(`Hello, I'm ${this.name}`);
  }
};

// personオブジェクトの内容を表示
console.log("Person object:", person);

person.greet();  // オブジェクトのメソッドを呼び出し

Person object: { name: 'John', age: 30, greet: [Function: greet] }
Hello, I'm John

// 非同期関数（APIからデータを取得する例）
async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');  // データの取得を待つ
    let data = await response.json();  // JSONデータの解析を待つ
    console.log(data);
  } catch (error) {
    console.error('Error:', error);  // エラーが発生した場合の処理
  }
}

// モジュールのエクスポート（別ファイルで定義）
// math.js
export function add(a, b) {
  return a + b;
}

// モジュールのインポートと使用
// main.js
import { add } from './math.js';  // 他のファイルから関数をインポート
console.log(add(2, 3));  // インポートした関数を使用

<!-- モジュールスクリプトの読み込み -->
<script type="module" src="main.js"></script>

5