JavaScriptの「ことば」を理解しよう

WEB制作

前回の記事で、JavaScriptがWebサイトに「動き」をつける魔法だと学びましたね。今回は、その魔法の呪文、つまりJavaScriptの基本的な「ことば」(文法)を一緒に見ていきましょう。

プログラミングの文法は、人間が話す言葉の文法と似ています。ルールを少しずつ覚えて、文を作っていく感覚です。難しく考えず、一つずつ一緒に読み解いていきましょう。


1. 変数:情報を「箱」にしまう

プログラミングでは、後で使いたい情報を一時的に保存しておく「」が必要です。この箱のことを「変数」と呼びます。

JavaScriptでは、letconstを使って変数を作ります。

JavaScript

// 変数`message`を作り、「こんにちは」という文字を入れます
let message = "こんにちは";

// 変数`number`を作り、数字の10を入れます
let number = 10;

ポイント:

  • let: 中身を後から変えることができる箱
  • const: 中身を一度決めたら変えられない箱(定数)

2. 演算子:計算や比較をする

JavaScriptでは、算数のように計算をしたり、情報を比較したりできます。これに使われるのが「演算子」です。

JavaScript

// 足し算
let result = 10 + 5; // resultは15になります

// 文字の結合
let greeting = "Hello" + " World"; // greetingは"Hello World"になります

// 比較
let isGreater = 10 > 5; // isGreaterはtrue(正しい)になります

よく使う演算子: +(足し算)、-(引き算)、*(掛け算)、/(割り算)、=(代入)、==(等しい)、>(より大きい)、<(より小さい)など。


3. 関数:決まった仕事をまとめておく

何度も同じ作業を繰り返すのは面倒ですよね。そんな時、決まった仕事をまとめて「関数」として保存しておけば、必要な時に呼び出すだけでその作業を実行してくれます。

関数は、レシピのようなものです。

JavaScript

// 「挨拶をする」という関数を作ります
function sayHello() {
  console.log("こんにちは!");
}

// 関数を呼び出します
sayHello();

functionという言葉で関数を定義し、関数名(sayHello)の後ろに()をつけます。{}の中に関数が行う作業を書きます。

4. 条件分岐:もし〇〇だったら、◇◇をする

「もし雨が降っていたら傘を持つ」「もしお腹が空いていたらご飯を食べる」のように、状況に応じて動作を変えたいときに使うのが「条件分岐」です。

JavaScriptでは、ifという言葉を使います。

JavaScript

let score = 80;

// もしscoreが70より大きかったら
if (score > 70) {
  console.log("合格です!");
} else {
  console.log("不合格です。");
}

if (条件)のように書き、条件が正しければ{}の中のコードが実行されます。elseは、条件が正しくなかった場合に実行するコードです。


まとめ:JavaScriptの文法は難しくない!

今回は、JavaScriptの基本中の基本である「変数」「演算子」「関数」「条件分岐」を学びました。これらは、まるでアルファベットのように、JavaScriptのあらゆるプログラムの土台となっています。

一気にすべてを覚える必要はありません。まずは簡単なプログラムを書いて、少しずつこれらの文法に慣れていくのが一番の近道です。

次回は、これらの文法を使って、実際にWebサイトに動きをつける方法を解説していきます。お楽しみに!

タイトルとURLをコピーしました