Resources

1.JavaScriptの基本文法入門

  • Javascript

JavaScriptは、ウェブ開発において非常に重要なプログラミング言語です。特に、ウェブページのインタラクティブな動作を実現するために使われます。この記事では、JavaScriptの基本的な文法を紹介し、コードを書く上で必要な最も基本的な構文を学びましょう。

1. 変数の宣言とデータ型

JavaScriptでは、データを保存するために「変数」を使います。変数を宣言する方法には、let、const、varの3つがあります。現代のJavaScriptでは、letとconstを使うことが推奨されています。

変数の宣言

let message = "Hello, World!";  // 変数messageに文字列を格納
const pi = 3.14;  // 定数piに数値を格納
  • letは、後で値を変更できる変数を宣言する際に使います。
  • constは、値を変更したくない定数を宣言する際に使います。

データ型

JavaScriptには、さまざまなデータ型があります。主なデータ型は次の通りです。

  • 文字列 (String): テキストデータを格納
  • 数値 (Number): 数値データを格納
  • 論理値 (Boolean): trueまたはfalseの2つの値を格納
  • 配列 (Array): 複数の値を格納
  • オブジェクト (Object): キーと値のペアでデータを格納
let name = "John";  // 文字列
let age = 25;       // 数値
let isStudent = true;  // 論理値
let colors = ["red", "green", "blue"];  // 配列
let person = { name: "John", age: 25 };  // オブジェクト

2. 演算子

演算子は、値を操作するために使用します。主に次のような演算子があります。

算術演算子

let a = 10;
let b = 5;
console.log(a + b);  // 足し算 (15)
console.log(a - b);  // 引き算 (5)
console.log(a * b);  // 掛け算 (50)
console.log(a / b);  // 割り算 (2)
console.log(a % b);  // 剰余 (0)

比較演算子

let x = 10;
let y = 20;
console.log(x == y);  // 等しいか (false)
console.log(x !== y); // 等しくないか (true)
console.log(x < y);   // より小さいか (true)
console.log(x > y);   // より大きいか (false)

論理演算子

let isAdult = true;
let hasTicket = false;
console.log(isAdult && hasTicket); // 両方が真なら真 (false)
console.log(isAdult || hasTicket); // どちらかが真なら真 (true)
console.log(!isAdult);            // 否定 (false)

3. 条件分岐 (if文)

条件分岐は、指定した条件が真の場合に特定の処理を実行するために使います。

let age = 18;

if (age >= 18) {
  console.log("成人です");
} else {
  console.log("未成年です");
}
  • if文の条件がtrueの場合、対応するブロック内のコードが実行されます。
  • elseは、条件がfalseの場合に実行されます。

4. ループ (for文)

ループは、同じ処理を繰り返し実行するために使います。

for文

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

このコードは、0から4までの数字を出力します。

while文

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

while文は、条件がtrueの間、繰り返し実行されます。

5. 関数

JavaScriptでは、コードの再利用を容易にするために関数を使います。

関数の定義

function greet(name) {
  console.log("Hello, " + name);
}

greet("Alice");  // Hello, Alice
greet("Bob");    // Hello, Bob

関数はfunctionキーワードで定義し、引数を受け取ることができます。

アロー関数

ES6以降、アロー関数が導入されました。これを使うと、簡潔に関数を定義できます。

const greet = (name) => {
  console.log("Hello, " + name);
};

greet("Alice");  // Hello, Alice

アロー関数は、特に短い関数やコールバック関数でよく使われます。

まとめ

この記事では、JavaScriptの基本文法を紹介しました。ここで紹介した内容を基に、さらに深い学習を進めていくことができます。実際にコードを書いてみて、手を動かしながら理解を深めていきましょう！

次回の記事では、関数やスコープの仕組みについてさらに詳しく学んでいきます。