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の基本的なコード一覧だよ。これを参考にして、いろいろなプログラムを書いてみてね。もしわからないことがあれば、いつでも質問して!
楽しんでプログラミングを学んでね!
スポンサーリンク