【完全初心者向け】JavaScript基本構文の書き方ガイド

「JavaScriptを勉強したいけど、何から始めればいいかわからない…」
「プログラミングは初めてで、基本的な書き方がわからない」

そんな方に向けて、JavaScriptの基本的な書き方を、プログラミング未経験の方にもわかりやすく説明します。

この記事を読めば、JavaScriptでプログラムを書くための基礎知識がしっかり身につきます。

JavaScriptってなに？
1. JavaScriptの説明
2. なぜJavaScriptを学ぶの？
JavaScriptの基本的な書き方
1. プログラムの基本ルール
2. 実際に動かしてみよう
変数の使い方
データの種類（データ型）
計算と比較
1. 計算（算術演算子）
2. 比較（比較演算子）
条件分岐（if文）
繰り返し処理（ループ）
関数の使い方
実際に使ってみよう
1. 練習問題1：基本計算
2. 練習問題2：配列の処理
よくある間違いと対処法
まとめ：JavaScriptの基礎をマスターしよう

JavaScriptってなに？

JavaScriptの説明

JavaScriptは、ウェブサイトに動きをつけたり、便利な機能を追加したりするプログラミング言語です。

例えば、ボタンをクリックしたら画面が変わったり、フォームに入力した内容をチェックしたりする機能は、JavaScriptで作られています。

JavaScriptでできること

ウェブサイトに動きをつける
ユーザーの操作に反応する
データの計算や処理
スマートフォンアプリの開発

なぜJavaScriptを学ぶの？

ウェブ開発には必須 現代のウェブサイトには、ほぼ確実にJavaScriptが使われています

学習しやすい プログラミング言語の中では比較的わかりやすく、初心者におすすめ

すぐに結果が見える ブラウザでプログラムを実行できるので、すぐに動作を確認できます

JavaScriptの基本的な書き方

プログラムの基本ルール

文の終わりにはセミコロン（;） JavaScriptでは、1つの命令の終わりに「;」をつけます

console.log("こんにちは");
console.log("私はJavaScriptを学んでいます");

大文字と小文字を区別する nameとNameは別のものとして扱われます

コメントの書き方 プログラムの説明を書くときに使います

// これは一行のコメントです
console.log("Hello World");

/*
これは複数行の
コメントです
*/

実際に動かしてみよう

ブラウザのコンソールを使う方法

Chrome、Edge、Firefoxなどのブラウザを開く
F12キーを押す（またはページを右クリック→「検証」）
「Console」タブをクリック
下記のコードを入力してEnterキーを押す

console.log("初めてのJavaScript！");

実行結果

初めてのJavaScript！

変数の使い方

変数とは

変数とは、数字や文字などのデータを入れておく箱のようなものです。

お菓子の缶に「チョコレート」「クッキー」など、ラベルを貼って中身がわかるようにしますよね。変数も同じで、データに名前をつけて管理します。

変数の宣言方法

let を使った変数宣言

let name = "田中太郎";
let age = 25;

const を使った変数宣言

const city = "東京";
const pi = 3.14159;

var を使った変数宣言

var email = "tanaka@example.com";

letとconstの使い分け

宣言方法	特徴	使う場面
let	後から値を変更できる	年齢、カウンターなど
const	値を変更できない	固定値、設定値など
var	古い書き方	新しいコードでは避ける

実際の使用例

説明ユーザーの情報を変数に保存してみましょう。

コード例

// ユーザー情報を保存
let userName = "佐藤花子";
let userAge = 30;
const userCity = "大阪";

// 画面に表示
console.log("名前: " + userName);
console.log("年齢: " + userAge);
console.log("住所: " + userCity);

実行結果

名前: 佐藤花子
年齢: 30
住所: 大阪

解説

userName、userAge：後から変更する可能性があるのでlet
userCity：住所は変わらないのでconst
+を使って文字をつなげています

データの種類（データ型）

主なデータ型

数値（Number） 計算に使う数字

let price = 1000;
let temperature = -5.5;
let score = 85;

文字列（String） 文字や文章

let message = "おはようございます";
let name = '山田一郎';  // シングルクォートでもOK
let address = "東京都新宿区";

真偽値（Boolean） 「はい」か「いいえ」の値

let isRaining = true;   // 雨が降っている
let isHoliday = false;  // 休日ではない
let isLogin = true;     // ログインしている

配列（Array）

配列とは 複数のデータをまとめて管理できる仕組み

let fruits = ["りんご", "バナナ", "みかん"];
let numbers = [1, 2, 3, 4, 5];
let mixed = ["太郎", 25, true];

配列の使い方

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

// 最初の要素を取得（0番目から始まる）
console.log(fruits[0]);  // りんご

// 2番目の要素を取得
console.log(fruits[1]);  // バナナ

// 配列の長さを取得
console.log(fruits.length);  // 3

オブジェクト（Object）

オブジェクトとは 関連する情報をまとめて管理する仕組み

let person = {
  name: "田中健太",
  age: 28,
  city: "横浜",
  hobby: "読書"
};

オブジェクトの使い方

let person = {
  name: "田中健太",
  age: 28,
  city: "横浜"
};

// 情報を取得
console.log(person.name);  // 田中健太
console.log(person.age);   // 28

// 情報を変更
person.age = 29;
console.log(person.age);   // 29

計算と比較

計算（算術演算子）

基本的な計算

let a = 10;
let b = 3;

console.log(a + b);  // 13（足し算）
console.log(a - b);  // 7（引き算）
console.log(a * b);  // 30（掛け算）
console.log(a / b);  // 3.333...（割り算）
console.log(a % b);  // 1（割った余り）

文字列の結合

let firstName = "田中";
let lastName = "太郎";
let fullName = firstName + lastName;

console.log(fullName);  // 田中太郎

比較（比較演算子）

値の比較

let x = 10;
let y = 5;

console.log(x > y);   // true（xの方が大きい）
console.log(x < y);   // false（xの方が小さくない）
console.log(x == 10); // true（xは10と等しい）
console.log(x != y);  // true（xとyは等しくない）

厳密な比較

let num = 10;
let str = "10";

console.log(num == str);   // true（値だけ比較）
console.log(num === str);  // false（型も比較）

条件分岐（if文）

if文とは

if文は、条件によって処理を変えるときに使います。

「もし雨が降っていたら傘を持つ、そうでなければ持たない」のような判断をプログラムで表現できます。

基本的なif文

説明年齢によって異なるメッセージを表示してみましょう。

コード例

let age = 20;

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

実行結果

成人です

解説

if (条件)：条件が正しければ{}の中を実行
else：条件が正しくなければ{}の中を実行

複数の条件（else if）

説明点数によって成績を判定してみましょう。

コード例

let score = 85;

if (score >= 90) {
  console.log("優秀です！");
} else if (score >= 70) {
  console.log("良い成績です");
} else if (score >= 60) {
  console.log("合格です");
} else {
  console.log("がんばりましょう");
}

実行結果

良い成績です

switch文

説明値によって処理を分ける別の方法です。

コード例

let fruit = "りんご";

switch (fruit) {
  case "りんご":
    console.log("赤い果物ですね");
    break;
  case "バナナ":
    console.log("黄色い果物ですね");
    break;
  case "みかん":
    console.log("オレンジ色の果物ですね");
    break;
  default:
    console.log("知らない果物ですね");
}

実行結果

赤い果物ですね

解説

case "値"：その値だったときの処理
break：処理を終了（忘れると次の処理も実行される）
default：どのcaseにも当てはまらないときの処理

繰り返し処理（ループ）

for文

説明決まった回数だけ処理を繰り返したいときに使います。

コード例

// 1から5まで表示
for (let i = 1; i <= 5; i++) {
  console.log(i + "回目");
}

実行結果

1回目
2回目
3回目
4回目
5回目

解説

let i = 1：カウンターを1から開始
i <= 5：5以下の間は繰り返す
i++：毎回カウンターを1増やす

配列をfor文で処理

説明配列の中身を順番に表示してみましょう。

コード例

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

for (let i = 0; i < fruits.length; i++) {
  console.log((i + 1) + "番目: " + fruits[i]);
}

実行結果

1番目: りんご
2番目: バナナ
3番目: みかん

while文

説明条件が正しい間、処理を繰り返します。

コード例

let count = 1;

while (count <= 3) {
  console.log("カウント: " + count);
  count++;  // countを1増やす
}

実行結果

カウント: 1
カウント: 2
カウント: 3

注意点 条件が永遠に正しいままだと、無限ループになってしまいます。必ず条件が変わるようにしましょう。

関数の使い方

関数とは

関数とは、よく使う処理をまとめて、名前をつけたものです。

料理のレシピのように、一度作っておけば何度でも使えます。

基本的な関数

説明あいさつをする関数を作ってみましょう。

コード例

// 関数を定義
function sayHello() {
  console.log("こんにちは！");
}

// 関数を使用
sayHello();
sayHello();

実行結果

こんにちは！
こんにちは！

解説

function 関数名()：関数を定義
関数名()：関数を呼び出し（実行）

パラメータ（引数）のある関数

説明名前を受け取って、その人にあいさつする関数を作りましょう。

コード例

// パラメータを受け取る関数
function greet(name) {
  console.log("こんにちは、" + name + "さん！");
}

// 関数を使用
greet("田中");
greet("佐藤");

実行結果

こんにちは、田中さん！
こんにちは、佐藤さん！

値を返す関数

説明計算結果を返す関数を作ってみましょう。

コード例

// 2つの数を足し算する関数
function add(a, b) {
  return a + b;
}

// 関数を使用
let result1 = add(5, 3);
let result2 = add(10, 20);

console.log("5 + 3 = " + result1);
console.log("10 + 20 = " + result2);

実行結果

5 + 3 = 8
10 + 20 = 30

解説

return：計算結果を呼び出し元に返す
返された値は変数に保存できる

アロー関数（ES6の新しい書き方）

説明関数をより短く書く方法です。

従来の書き方

function multiply(a, b) {
  return a * b;
}

アロー関数の書き方

const multiply = (a, b) => {
  return a * b;
};

// さらに短く
const multiply2 = (a, b) => a * b;

実際に使ってみよう

練習問題1：基本計算

問題商品の価格と税率から、税込み価格を計算する関数を作ってください。

答え

function calculateTotalPrice(price, taxRate) {
  return price * (1 + taxRate);
}

// 使用例
let itemPrice = 1000;
let tax = 0.1;  // 10%
let totalPrice = calculateTotalPrice(itemPrice, tax);

console.log("税込み価格: " + totalPrice + "円");

実行結果

税込み価格: 1100円

練習問題2：配列の処理

問題配列に入っている数値の合計を計算する関数を作ってください。

答え

function sumArray(numbers) {
  let total = 0;
  
  for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }
  
  return total;
}

// 使用例
let scores = [80, 90, 75, 85, 95];
let sum = sumArray(scores);

console.log("合計点: " + sum);
console.log("平均点: " + (sum / scores.length));

実行結果

合計点: 425
平均点: 85

よくある間違いと対処法

セミコロンを忘れる

❌ 間違い

let name = "田中"
console.log(name)

✅ 正しい書き方

let name = "田中";
console.log(name);

変数名の間違い

❌ 間違い

let userName = "田中";
console.log(username);  // 大文字小文字が違う

✅ 正しい書き方

let userName = "田中";
console.log(userName);  // 正確な変数名

括弧の対応漏れ

❌ 間違い

if (age >= 20 {
  console.log("成人です");

✅ 正しい書き方

if (age >= 20) {
  console.log("成人です");
}

まとめ：JavaScriptの基礎をマスターしよう

JavaScriptの基本構文を理解すれば、プログラミングの楽しさを実感できます。

今日覚えたこと

変数：letとconstでデータを保存
データ型：数値、文字列、配列、オブジェクト
条件分岐：if文で処理を分ける
繰り返し：for文とwhile文
関数：処理をまとめて再利用

最初は簡単なコードから始めましょう。ブラウザのコンソールで実際に動かしながら学習すると、理解が深まります。

JavaScriptってなに？

JavaScriptの説明

なぜJavaScriptを学ぶの？

JavaScriptの基本的な書き方

プログラムの基本ルール

実際に動かしてみよう

変数の使い方

変数とは

変数の宣言方法

letとconstの使い分け

実際の使用例

データの種類（データ型）

主なデータ型

配列（Array）

オブジェクト（Object）

計算と比較

計算（算術演算子）

比較（比較演算子）

条件分岐（if文）

if文とは

基本的なif文

複数の条件（else if）

switch文

繰り返し処理（ループ）

for文

配列をfor文で処理

while文

関数の使い方

関数とは

基本的な関数

パラメータ（引数）のある関数

値を返す関数

アロー関数（ES6の新しい書き方）

実際に使ってみよう

練習問題1：基本計算

練習問題2：配列の処理

よくある間違いと対処法

セミコロンを忘れる

変数名の間違い

括弧の対応漏れ

まとめ：JavaScriptの基礎をマスターしよう

Youtube

カテゴリー別人気記事

コメント