JavaScript

JavaScriptのコード一覧

JavaScriptの基本的なコードを一覧にまとめるね。これを見ながら、一緒に学んでいこう!

1. 変数の宣言

// 変数を宣言する
let name = "太郎";
const age = 25;
var isStudent = true;

2. 基本的なデータ型

// 文字列
let greeting = "こんにちは";

// 数値
let number = 123;

// 真偽値
let isTrue = true;
let isFalse = false;

// 配列
let fruits = ["りんご", "バナナ", "みかん"];

// オブジェクト
let person = {
    name: "花子",
    age: 30,
    isStudent: false
};

3. 条件分岐

let score = 85;

if (score >= 90) {
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else if (score >= 70) {
    console.log("C");
} else {
    console.log("D");
}

ループ

// forループ
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// whileループ
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// 配列のループ
let fruits = ["りんご", "バナナ", "みかん"];
for (let fruit of fruits) {
    console.log(fruit);
}

5. 関数

// 関数を定義する
function greet(name) {
    return "こんにちは、" + name + "さん!";
}

// 関数を呼び出す
console.log(greet("太郎"));

6. アロー関数

// アロー関数を定義する
const add = (a, b) => {
    return a + b;
};

// アロー関数を呼び出す
console.log(add(3, 5));

7. DOM操作

<!-- HTML -->
<div id="greeting">Hello, world!</div>
<button onclick="changeGreeting()">Click me!</button>
// JavaScript
function changeGreeting() {
    document.getElementById("greeting").innerText = "こんにちは、世界!";
}

8. イベントリスナー

<!-- HTML -->
<button id="myButton">Click me!</button>
// JavaScript
document.getElementById("myButton").addEventListener("click", function() {
    alert("ボタンがクリックされました!");
});

9. タイマー

// 1秒後にメッセージを表示する
setTimeout(() => {
    console.log("1秒が経過しました!");
}, 1000);

// 1秒ごとにメッセージを表示する
setInterval(() => {
    console.log("1秒ごとに表示されます!");
}, 1000);

10. 非同期処理(Promise)

// Promiseを使った非同期処理
let promise = new Promise((resolve, reject) => {
    let success = true;

    if (success) {
        resolve("成功しました!");
    } else {
        reject("失敗しました...");
    }
});

promise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.error(error);
});

11. 非同期処理(async/await)

// async/awaitを使った非同期処理
async function fetchData() {
    try {
        let response = await fetch("https://api.example.com/data");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("データの取得に失敗しました", error);
    }
}

fetchData();

12. JSONの操作

// JSONをオブジェクトに変換する
let jsonString = '{"name": "太郎", "age": 25}';
let jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name);  // "太郎"

// オブジェクトをJSONに変換する
let newJsonString = JSON.stringify(jsonObject);
console.log(newJsonString);  // '{"name":"太郎","age":25}'

13. クラス

// クラスを定義する
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return "こんにちは、" + this.name + "さん!";
    }
}

// クラスのインスタンスを作成する
let person1 = new Person("太郎", 25);
console.log(person1.greet());  // "こんにちは、太郎さん!"

14. モジュールのインポート/エクスポート

// math.js - モジュールを定義する
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js - モジュールをインポートする
import { add, subtract } from './math.js';

console.log(add(5, 3));  // 8
console.log(subtract(5, 3));  // 2

まとめ

これがJavaScriptの基本的なコード一覧だよ。これを参考にして、いろいろなプログラムを書いてみてね。もしわからないことがあれば、いつでも質問して!

楽しんでプログラミングを学んでね!

スポンサーリンク

-JavaScript