MENU
プログラミングとか趣味とか、なんかいろいろ。
  1. ホーム
  2. プログラミング
  3. JavaScript
  4. [JavaScript講座] 最初のJavaScriptコード

[JavaScript講座] 最初のJavaScriptコード

プログラミング JavaScript
当ページのリンクには広告が含まれています。
目次

1つのファイルに書く「最初のプログラム」

Node.jsで実行する hello.js というファイルを作成し、以下のように記述します。

console.log("Hello JavaScript!");
console.log(1 + 2);
console.log("1 + 2 の結果は", 1 + 2);

ターミナルで以下を実行します。

node hello.js

実行すると、以下のように出力されるはずです。

Hello JavaScript!
3
1 + 2 の結果は 3

ここで学んでほしいポイントは3つです。

  1. 上から順番に実行される
    • 1行目 → 2行目 → 3行目の順で実行
  2. console.log() は「ログを出す関数」
    • 中に書いた値を表示してくれる
    • 開発中は、ほぼずっと使うと言っていいくらい重要
  3. 式の結果をそのまま渡せる
    • console.log(1 + 2); で、「計算結果」が表示される
    • "文字列", 値 のようにカンマで区切って複数表示もできる

コメントの書き方

コメントは自分と未来の自分のためのメモでもあります。
JavaScript では、次の2種類のコメントがあります。

行コメント（//）

// ここから処理を開始
console.log("start");

// この行は無視される
// console.log("実行されない");
  • // から行末までがコメント扱い
  • 主に 一行の説明 に使う

複数行コメント（/* ... */）

/* 
  ここは複数行コメントです。
  途中に // があってもそのままコメント扱いです。
*/
console.log("コメントの外なので実行されます");
  • /* と */ で囲まれた部分が全部コメント
  • 複数行のメモ、注意書き、テストコードを一時的に無効化する場合などに使用する

コメントは「なぜ」を書く

これから仕様寄りのところも学んでいきますが、その途中で自分でもロジックを説明する習慣をつけると理解が深くなります。

悪い例：（見れば分かるコメントは意味がない）

// 変数を宣言
let x = 10;

良い例：

// 上限値。将来設定から変更できるようにする予定
let maxCount = 10;

「なぜこの値なのか」「何のための変数なのか」を書くと、後から見て理解しやすいです。

実行の流れを見てみる

「上から順に実行される」という感覚をもう少し強くするために、次のコードを書いてみましょう。

console.log("1. プログラム開始");

console.log("2. 計算をします");
const result = 10 + 20;

console.log("3. 計算結果は", result);

console.log("4. プログラム終了");

実行結果：

1. プログラム開始
2. 計算をします
3. 計算結果は 30
4. プログラム終了

ここで覚えておきたいこと：

  • JS は基本的に上から順に1行ずつ実行する
  • 変数を使用して計算結果を記憶できる（const result = 10 + 20; で「計算した結果（30）」を記憶する）
  • 記憶した変数の値は後から参照できる（ console.log("3. 計算結果は", result); で記憶した値を表示する）

ブラウザ側の「最初のコード」

ブラウザでも同じように「上から順に動く」ことを確認しておきます。

hello.html を次のように書いてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Hello JS in Browser</title>
</head>
<body>
  <h1>ブラウザでのJavaScript</h1>

  <script>
    console.log("1. scriptタグの中のコードが実行されます");
    alert("2. alertが表示されました");
    console.log("3. alertのOKを押したあとに、このログが出ます");
  </script>
</body>
</html>

ブラウザで開いて、以下の操作を行ってください。

  1. まず DevTools の Console を開く
  2. 画面読み込み → alert が表示される
  3. OK を押すと、Console に 3. のログが追加されている

この動きから、以下の感覚がつかめると思います。

  • <script> の中身も上から順に実行される
  • alert が出ているあいだ、プログラムの実行は一時停止した状態になる

よくあるエラーと修正の仕方

プログラムを書き始めるとエラーが出る場合があります。
ここでは代表的なものを一つだけ紹介します。

シンタックスエラー（SyntaxError）

console.log("Hello"
// 最後の ) と ; が抜けている

実行結果：

hello.js:1
console.log("Hello"
            ^^^^^^^

SyntaxError: missing ) after argument list

ポイント：

  • SyntaxError は「書き方（文法）が間違っている」という意味
  • エラーメッセージには、
    • エラーの種類（SyntaxError）
    • 簡単な説明（missing ) …）
    • ファイル名と行番号（syntax-error.js:1）
      が載っている

エラーの見方を早いうちから慣れておくと、この先の学習がかなり楽になります。

<<前へ（開発環境と実行方法）

>>次へ（構文ルールと “use strict”）

プログラミング JavaScript
JavaScript Node.js
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

コメント

コメントする

CAPTCHA


目次