JavaScriptを基礎から学ぼう！おさらいチュートリアル

はじめに

JavaScriptは、Webフロントエンド開発に欠かせない言語です。フレームワークやライブラリに頼らない「バニラJavaScript」の基本を15のステップで解説します。

1. 変数とデータ型

JavaScriptの基本的な変数宣言と主要なデータ型を学びましょう。

let name = "田中";
const age = 30;
var isStudent = true;

2. 条件分岐

if文を使った条件分岐の基本を押さえます。

if (age >= 20) {
  console.log("成人です");
} else {
  console.log("未成年です");
}

3. ループ処理

for文を使った繰り返し処理を学びます。

for (let i = 0; i < 5; i++) {
  console.log(`${i + 1}回目のループ`);
}

4. 関数

関数の定義と呼び出し方を理解しましょう。

function greet(name) {
  return `こんにちは、${name}さん！`;
}
console.log(greet("佐藤"));

5. 配列

配列の基本操作を学びます。

let fruits = ["りんご", "バナナ", "オレンジ"];
fruits.push("ぶどう");
console.log(fruits.length);

6. オブジェクト

オブジェクトの作成と操作方法を理解しましょう。

let person = {
  name: "山田",
  age: 25,
  greet: function() {
    console.log(`私は${this.name}です`);
  }
};
person.greet();

7. DOM操作

HTMLの要素を操作する方法を学びます。

let title = document.getElementById("title");
title.innerHTML = "新しいタイトル";

8. イベント処理

ユーザーの操作に反応する方法を理解しましょう。

let button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("クリックされました！");
});

9. 非同期処理

Promiseを使った非同期処理の基本を学びます。

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
delay(2000).then(() => console.log("2秒経過"));

10. フェッチAPI

外部APIからデータを取得する方法を理解しましょう。

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data));

11. ローカルストレージ

ブラウザにデータを保存する方法を学びます。

localStorage.setItem("username", "太郎");
let savedName = localStorage.getItem("username");

12. クラス

オブジェクト指向プログラミングの基本を理解しましょう。

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name}が鳴きました`);
  }
}
let dog = new Animal("ポチ");
dog.speak();

13. モジュール

コードを分割して管理する方法を学びます。

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(5, 3));

14. エラー処理

try-catch文を使ったエラーハンドリングを理解しましょう。

try {
  let result = nonExistentFunction();
} catch (error) {
  console.error("エラーが発生しました:", error.message);
}

15. デバッグ技法

console.logを使ったデバッグ方法を学びます。

function debugExample(x, y) {
  console.log("入力値:", x, y);
  let result = x * y;
  console.log("計算結果:", result);
  return result;
}
debugExample(5, 3);

以上の15ステップを通じて、バニラJavaScriptの基礎から応用までを学ぶことができます。実際にコードを書いて試してみることで、理解が深まるでしょう。