JavaScriptの基本構文を理解しよう！ ～「console」「.」「log」「i++」などを詳しく解説～

お問い合わせ
ホーム > ブログ > javascript > JavaScriptの基本構文を理解しよう！ ～「console」「.」「log」「i++」などを詳しく解説～

JavaScriptの基本構文を理解しよう！ ～「console」「.」「log」「i++」などを詳しく解説～

JavaScriptを学んでいると、「consoleって何？」「. はいつ使うの？」「i++ ってどういう意味？」など、疑問が出てきますよね。
本記事では、JavaScriptの基本構文の中でも特に よく使う記号や関数の意味を詳しく解説 します。

1. console.log() とは？

console.log() は デバッグ（確認）用の出力 に使われます。
コードが正しく動いているか確認したいときに便利です。

書き方

javascriptコピーする編集するconsole.log("Hello, world!");

ブラウザの開発ツール（F12キー → Console）に表示される

コピーする編集するHello, world!

「console」と「log」の意味

  • console → 「コンソール（開発ツール）」を指すオブジェクト
  • log() → consoleの中の「ログ（記録）」を出力する関数

つまり、console.log() は 「コンソールにログを出力する」 という意味になります。

2. 「.（ドット）」の意味と使い方

JavaScriptでは、「.（ドット）」は「オブジェクトの中のプロパティやメソッドを使う」ために必要 です。

例：console.log() の「.」の意味

javascriptコピーする編集するconsole.log("こんにちは");
  • console は オブジェクト（データの集合）
  • log は consoleの中にある関数（メソッド）
  • console.log() は consoleオブジェクトのlogメソッドを実行

「.」はオブジェクトの中の情報にアクセスするときに使います。
「consoleの中のlog」だから console.log() のように書きます。

「.」は毎回必要？

✅ オブジェクトの中の値を取り出すときは必要

javascriptコピーする編集するlet person = { name: "太郎", age: 25 };
console.log(person.name); // 「太郎」が表示される

❌ 単独の変数を使うときは不要

javascriptコピーする編集するlet message = "こんにちは";
console.log(message); // これはOK

message.length のように プロパティを使うときは . が必要 です。

3. i++ とは？

i++ は 変数を1ずつ増やす（インクリメント） という意味です。

例：ループで使う場合

javascriptコピーする編集するfor (let i = 0; i < 5; i++) {
    console.log(i);
}

このコードの実行結果：

コピーする編集する0
1
2
3
4

i++ は i = i + 1 と同じ意味です。

javascriptコピーする編集するlet i = 0;
i = i + 1;  // i は 1 になる

i++ は 「i の値を1増やす」省略記法 です。

4. return とは？

return は 関数の結果を返す ために使います。

例

javascriptコピーする編集するfunction add(a, b) {
    return a + b;
}

let result = add(3, 5);
console.log(result); // 8

「return a + b」 の意味

  • return は 計算結果を返す
  • result に 返された値（8）が入る
  • console.log(result); で 出力される

return がないと、関数の計算結果を他で使えません。

5. document.getElementById() とは？

Webページの要素をJavaScriptで操作するときに使います。

HTML

htmlコピーする編集する<p id="message">こんにちは！</p>

JavaScript

javascriptコピーする編集するlet element = document.getElementById("message");
console.log(element.textContent);
  • document は「Webページ全体」
  • getElementById("message") は「idがmessageの要素を取得」
  • textContent は「その要素のテキストを取得」

6. addEventListener() とは？

ボタンをクリックしたときの動作を設定 できます。

HTML

htmlコピーする編集する<button id="btn">クリック</button>

JavaScript

javascriptコピーする編集するdocument.getElementById("btn").addEventListener("click", function() {
    alert("ボタンがクリックされました！");
});

addEventListener("click", function()) の意味

  • "click" → クリックしたとき
  • function() → 実行する処理
  • alert("ボタンがクリックされました！") → クリック時にアラートを表示

7. alert() とは？

alert() は 画面にポップアップメッセージを表示 します。

例

javascriptコピーする編集するalert("こんにちは！");

メッセージを表示するだけで、他の処理には影響しません。

まとめ

  • console.log() → コンソールにログを出す
  • .（ドット） → オブジェクトのプロパティ・メソッドにアクセスするときに使う
  • i++ → 変数の値を1増やす（インクリメント）
  • return → 関数の結果を返す
  • document.getElementById() → HTML要素を取得する
  • addEventListener() → イベント（クリックなど）を設定する
  • alert() → ポップアップでメッセージを表示

JavaScriptの基本構文を理解すると、より自由にWebページを操作できるようになります。
まずは console.log() を使って、いろいろ試してみましょう。