JavaScriptの基本文法まとめ｜初心者が最初に覚えるべき構文とは

2025/06/26

GUARDIAN Creative BLOG

石川　航

JavaScriptは、Webサイトやアプリ開発に欠かせないプログラミング言語です。
動きのあるUIやリアルタイムのデータ更新など、Webページに「動き」や「反応」を加えるために広く使われています。
最近では、フロントエンドだけでなくサーバーサイドやモバイルアプリにも活用されており、その人気は年々高まっています。

本記事では、JavaScript初心者が最初に覚えるべき基本文法をわかりやすくまとめています。
変数の書き方から条件分岐、関数まで、これからJavaScriptを学び始める方がスムーズにコードを書けるよう、基礎構文を丁寧に解説していきます。
まずは全体の流れをつかみ、自信を持って一歩を踏み出しましょう。

JavaScriptを書くための準備

JavaScript初心者が最初につまずきやすいのが、「どうやってコードを書くのか？」という実行環境の準備です。

特別なソフトをインストールしなくても、Webブラウザの「開発者ツール（デベロッパーツール）」を使えばすぐにコードを試すことができます。

また、CodePenやJSFiddleといった無料のオンラインエディタを使えば、HTML・CSS・JavaScriptを同時に編集・実行できるので便利です。

基本的には、HTMLファイルの中に<script>タグを記述することでJavaScriptを読み込ませます。

HTMLの<head>や<body>内に直接書く方法と、外部ファイルとして読み込む方法がありますが、初心者には後者（外部ファイルを読み込む方法）がシンプルでおすすめです。

ただし、<script>タグはHTMLの読み込み順に注意が必要です。

DOM操作などを行う場合は、必ず</body>タグの直前や、defer属性を使って記述しましょう。

JavaScriptの基本文法を学ぶ前に、こうした準備をしっかり整えることで、スムーズに学習を始められます。

基本の文法と構文一覧

ここでは、JavaScript初心者が最初に押さえておきたい基本文法と構文について解説します。
プログラムを書くうえで頻繁に登場する項目ばかりなので、ひと通り理解しておくとスムーズに学習が進みます。

変数の宣言（var / let / const）
JavaScriptで値を保存するには変数を使います。
以前は`var`が主流でしたが、現在は`let`と`const`の使用が推奨されています。

```javascript
let name = "Taro";
const age = 25;
```

`let`：再代入が可能な変数
`const`：再代入できない定数
`var`：スコープの挙動が特殊なため、初心者には非推奨

データ型（文字列・数値・真偽値・配列・オブジェクト）
JavaScriptの基本的なデータ型には以下のようなものがあります。

```javascript
let str = "こんにちは"; // 文字列
let num = 123; // 数値
let flag = true; // 真偽値
let fruits = ["りんご", "バナナ"]; // 配列
let user = { name: "Taro", age: 25 }; // オブジェクト
```

`typeof`演算子を使えば、変数の型を調べることができます。

演算子（算術・比較・論理）
JavaScriptではさまざまな演算子を使って値を操作できます。

算術演算子：`+`, `-`, `*`, `/`, `%`
比較演算子：`===`, `!==`, `>`, `<`, `>=`, `<=`
論理演算子：`&&`, `||`, `!`

```javascript
let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a > b); // true
console.log(a === 10); // true
```

`===`（厳密等価演算子）は型まで一致するかを比較するため、初心者には特に意識して使うことをおすすめします。

条件分岐（if / else / switch）
処理を条件によって分岐させるには`if`文や`switch`文を使います。

```javascript
let score = 80;

if (score >= 90) {
console.log("優秀！");
} else if (score >= 70) {
console.log("合格！");
} else {
console.log("再試験！");
}
```

複数の条件分岐がある場合は`switch`文も便利です。

```javascript
let fruit = "りんご";

switch (fruit) {
case "りんご":
console.log("赤い果物");
break;
case "バナナ":
console.log("黄色い果物");
break;
default:
console.log("知らない果物");
}
```

繰り返し処理（for / while / forEach）
同じ処理を繰り返すにはループ構文を使います。

```javascript
for (let i = 0; i < 5; i++) {
console.log("カウント：" + i);
}
```

条件を満たすまで繰り返す`while`文や、配列に対して使える`forEach`もよく登場します。

```javascript
let fruits = ["りんご", "バナナ", "みかん"];

fruits.forEach(function(fruit) {
console.log(fruit);
});
```

関数の定義と呼び出し（function / アロー関数）
JavaScriptでは、よく使う処理を関数としてまとめることができます。

```javascript
function greet(name) {
return "こんにちは、" + name + "さん！";
}

console.log(greet("花子"));
```

ES6以降は、短く書ける**アロー関数**もよく使われています。

```javascript
const greet = (name) => {
return `こんにちは、${name}さん！`;
};
```

関数は、コードの再利用や整理にも役立つため、初心者にとって重要な文法のひとつです。

このように、JavaScriptには多くの基本構文がありますが、どれも実際に手を動かして書いてみることで理解が深まります。
初心者のうちは完璧に覚えようとせず、「まずは試してみる」ことを意識して、少しずつ身につけていきましょう。

最後に

JavaScriptは、Web制作やアプリ開発に欠かせない重要な言語です。
特にJavaScript初心者にとっては、今回紹介したような基本文法をしっかりと理解しておくことが、今後のステップアップに大きく影響します。
変数の使い方、条件分岐、繰り返し処理、関数など、基礎的な構文を繰り返し実践しながら身につけていきましょう。
理解するだけでなく、実際にコードを書いて動かすことで、知識がしっかり定着します。
まずは「動かしてみる」ことから、JavaScript学習を楽しく始めてみてください。