前回の記事で、JavaScriptがWebサイトに「動き」をつける魔法だと学びましたね。今回は、その魔法の呪文、つまりJavaScriptの基本的な「ことば」(文法)を一緒に見ていきましょう。
プログラミングの文法は、人間が話す言葉の文法と似ています。ルールを少しずつ覚えて、文を作っていく感覚です。難しく考えず、一つずつ一緒に読み解いていきましょう。
1. 変数:情報を「箱」にしまう
プログラミングでは、後で使いたい情報を一時的に保存しておく「箱」が必要です。この箱のことを「変数」と呼びます。
JavaScriptでは、let
やconst
を使って変数を作ります。
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サイトに動きをつける方法を解説していきます。お楽しみに!