JavaScriptの基本文法を学ぶ｜初心者が最初に覚える文法とは

date_range 2025/11/18
GUARDIAN Creative BLOG
記事no156

Webサイトに動きを加えたり、ユーザーの操作に応じて表示を変えたりするには「JavaScript」が欠かせません。
HTMLやCSSと並び、フロントエンド開発には必須の言語として、多くの現場で活用されています。


この記事では、JavaScriptの基本文法を初心者向けにわかりやすく解説します。
「プログラミングは初めて…」という方でも安心して読める内容となっており、読み終えるころには、コードを読めて、書ける第一歩を踏み出せるはずです。


JavaScriptの学習を始めたい方は、まずここからスタートしてみましょう。

JavaScriptの特徴と書き方の基本

JavaScriptは、Webページにインタラクティブな機能を追加できるプログラミング言語です。
たとえば、ボタンをクリックしたときに内容を切り替えたり、フォームの入力内容をチェックしたりする処理が可能です。
HTMLが「構造」、CSSが「見た目」を担当するのに対し、JavaScriptは「動き」や「操作」を担います。


JavaScriptのコードは、HTMLファイル内に`<script>`タグを使って直接書くこともできますし、`.js`という拡張子の外部ファイルに分けて記述することも可能です。

初学者には、HTMLファイルの下部に`<script>`を記述する方法がわかりやすいでしょう。


```html

<script>


console.log("こんにちは、JavaScript！");

```

このように書くと、ブラウザの「開発者ツール」のコンソールに文字列が表示されます。

Google Chromeでは、F12キーや右クリックから「検証」を選んでコンソールを表示できます。


まずはこのようなシンプルなコードで、JavaScriptがどのように動作するのかを体験してみてください。

まず覚えるべき基本構文7選

JavaScriptを扱ううえで最初に覚えておきたいのは、プログラムの基本的な構文です。
ここでは、初心者向けに厳選した7つの文法を紹介します。


変数の宣言（`let` / `const`）

JavaScriptでは、値を一時的に保存する「変数」を宣言できます。
代表的な宣言方法は以下の2つです。


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

`let`はあとから値を変更できる変数、`const`は変更不可の定数です。

基本的には`const`を優先して使い、必要に応じて`let`を使うとよいでしょう。

なお、古い書き方として`var`もありますが、現在では推奨されません。


データ型（文字列、数値、真偽値、配列、オブジェクト）

JavaScriptにはさまざまなデータ型があります。


```javascript
let name = "Hanako"; // 文字列
let score = 88; // 数値
let passed = true; // 真偽値
let fruits = ["りんご", "みかん"]; // 配列
let user = { name: "Ken", age: 30 }; // オブジェクト
```
データの型を確認するには、`typeof`を使います。


```javascript

console.log(typeof score); // "number"

```

演算子（+ - \* / % など）

数値や文字列の計算・操作には演算子を使います。

```javascript

let total = 10 + 5; // 加算 → 15

let message = "こんにちは" + "世界"; // 文字列の結合

```


また、`++`（インクリメント）や`--`（デクリメント）も覚えておくと便利です。


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


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

複数の条件があるときは`else if`、複雑な条件には`switch`文も使えます。


繰り返し（`for / while`）

同じ処理を繰り返すには`for`や`while`を使います。


```javascript

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

for (let i = 0; i < fruits.length; i++) {

console.log(fruits[i]);

}

```


このように配列と組み合わせて使うことで、データを順番に処理できます。


関数の定義と呼び出し
関数とは、処理をひとまとまりにしたものです。


```javascript
function greet(name) {
console.log("こんにちは、" + name + "さん");
}
greet("Yuki");
```


また、アロー関数という短い書き方もあります。


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


コメント（`//` と `/* */`）
コードにメモを残したいときはコメントを使います。
```javascript
// これは1行コメントです
/*
これは
複数行のコメントです
*/
```


コメントはコードの理解を助けるためにとても重要です。

これも押さえておきたい！初心者がつまずきやすいポイント

JavaScriptを学び始めたばかりの方が、意外とつまずきやすいポイントがいくつかあります。
ここではその代表例を紹介します。


まず、「セミコロン」の使い方についてです。
JvaScriptでは文の終わりにセミコロン（`;`）を付けるのが基本ですが、省略しても動作するケースがあります。
ただし、思わぬバグを防ぐためにも、毎行セミコロンをつける習慣をつけておくことをおすすめします。


次に注意したいのは「大文字と小文字の違い」です。
JavaScriptは大文字・小文字を厳密に区別します。
たとえば、`Let`や`Name`などと書いてしまうと、エラーになってしまいます。


また、「全角スペース」や「全角記号」をうっかり使ってしまうのも初心者によくあるミスです。
特に日本語キーボードでは入力モードの切り替えミスに注意が必要です。


エラーが出たときは、ブラウザの開発者ツールの「コンソール」タブを開いて、エラーメッセージを確認しましょう。
エラー内容と発生箇所が表示されますので、落ち着いて見直してみてください。

まとめ

JavaScriptの基本文法を理解するためには、何より「実際に書くこと」が重要です。
今回紹介した初心者向けの文法を使って、少しずつコードを書く習慣をつけてみてください。
次は、DOM操作やイベント処理といった実践的な内容に進んでいくと、よりJavaScriptの楽しさが広がります。

一覧に戻る

NEW

CATEGORY

ARCHIVE