0.はじめに

本講義では、JavaScript というプログラミング言語を使ってプログラミングの基礎を学びます。変数、条件分岐、ループ、配列、関数といった基本的な概念を身につけた後、探索やソートなどのアルゴリズムに取り組みます。

たとえば、この講義では次のようなプログラムを扱います。今は読めなくても問題ありません。

やりたいこと

# 最高点を見つける

5人分のテストの点数が与えられています。

80, 65, 90, 70, 85

この中から最高点を見つけてください。

## 答え

90

プログラム

const scores = [80, 65, 90, 70, 85];
let max = scores[0];

for (let i = 1; i < scores.length; i++) {
  if (scores[i] > max) {
    max = scores[i];
  }
}

console.log("最高点: " + max);

最高点: 90

講義を終える頃には、このコードが何をしているか読み取れるようになります。

このドキュメントでは、プログラムを書いて実行するための環境を準備し、基本的な操作を確認します。

1. Playground

まずはブラウザー上で動く Playground を使って、コードを書いて実行する流れを体験します。

1. Playground を開く

   Playground をブラウザーで開いてください。左側がコードを入力するエディター、右側が実行結果の表示エリアです。

2. コードを書く

   左側のエディターにプログラムを入力します。console.log("Hello, World!"); というコードが表示されているので、そのまま実行してみましょう。

3. 実行する

   画面上部の Run ボタンを押すか、Ctrl + Enter を押してください。右側に Hello, World! と表示されれば成功です。

Tip

Playground では、コードを書き換えるたびに Run で実行できます。何度でも試せるので、失敗を気にせずどんどん書いてみてください。

Warning

Playground のコードはブラウザーを閉じると消えてしまいます。残しておきたいコードがある場合は、テキストファイルにコピーしておいてください。

1-1. console.log()

console.log() は、括弧の中に書いた値を画面に表示します。

console.log("おはようございます");

おはようございます

文字列だけでなく、数値や計算結果も表示できます。

console.log(100 + 200);

300

Info

各行の末尾にある ;（セミコロン）は、文の区切りを示す記号です。日本語の句点（。）に相当します。

console.log() はこの先よく使うので、書き方に慣れておきましょう。

1-2. 複数行のプログラム

次のコードを Playground に入力して実行してください。

console.log("おはようございます");
console.log("こんにちは");
console.log("こんばんは");

おはようございます
こんにちは
こんばんは

出力を見ると、書いた順番の通りに表示されています。

Info

プログラムは上から下へ、1行ずつ順番に実行されます。

1-3. エラーメッセージ

プログラムに間違いがあると、右側にエラーメッセージが表示されます。試しに、わざと間違ったコードを書いてみましょう。

console.log("Hello, World!"

閉じ括弧 ) を書き忘れています。Run を押すと、以下のようなメッセージが表示されます。

SyntaxError: missing ) after argument list

これは「) がない」という意味です。閉じ括弧を追加して再度 Run を押すと、正常に動きます。

エラーメッセージには原因が書かれています。まずはメッセージをよく読むことが、問題解決の第一歩です。

Warning

全角スペースや全角括弧に注意してください。 日本語入力がオンのまま書くと、見た目は同じでもプログラムが動きません。たとえば （ と ( は別の文字です。エラーが出て原因が分からないときは、まず半角入力になっているか確認してください。

1-4. コメント

プログラムの中で // と書くと、そこから行末までは コメント として扱われ、実行時に無視されます。

// 計算の途中経過を確認する
console.log(100 + 200); // 300

コメントはプログラムの動作に影響しません。コードの意図をメモしたり、一時的にコードを実行しないようにしたりするために使います。この先のドキュメントでは、コード例の中に // 結果 のような形でコメントが登場します。

2. VS Code + Node.js

Playground ではブラウザー上で JavaScript を書いて実行しましたが、Node.js という JavaScript の実行環境を使う方法もあります。ここでは Node.js と VS Code（エディター）の使い方を説明します。

2-1. Node.js の確認

1. ターミナルを開く

   VS Code の画面下部にある ターミナル を開いてください。メニューから「ターミナル → 新しいターミナル」を選択します。

   ターミナルとは、コンピューターに対してコマンドを入力して操作するための画面です。マウスでクリックする代わりに、文字を入力して指示を出します。

2. Node.js の確認

   ターミナルが開いたら、以下のコマンドを入力して Enter キーを押してください。

   node --version

   v20.18.0 のようにバージョン番号が表示されれば、Node.js は正常にインストールされています。

Warning

「command not found」や「認識されていません」と表示された場合は、Node.js がインストールされていません。講師に確認してください。

2-2. 作業フォルダーの準備

本講義で作成するプログラムは、1つのフォルダーにまとめて管理します。

1. フォルダーの作成

   ターミナルで以下の2つのコマンドを順に実行してください。

   mkdir js-practice
   cd js-practice

   mkdir js-practice は、js-practice という名前のフォルダーを作るコマンドです（mkdir は「make directory」の略）。cd js-practice は、作成したフォルダーの中に移動するコマンドです（cd は「change directory」の略）。

2. VS Code でフォルダーを開く

   VS Code のメニューから「ファイル → フォルダーを開く」を選択し、今作った js-practice フォルダーを開いてください。

2-3. ファイルの作成と実行

VS Code の左側にあるファイル一覧で右クリックし、「新しいファイル」を選択してファイルを作成します。講義ではトピックごとにファイルを分けます。

• Directoryjs-practice/

  • hello.js
  • variables.js
  • conditionals.js
  • loops.js
  • arrays.js
  • …

試しに hello.js というファイルを作成し、以下のコードを書いて保存（Ctrl + S）してください。

hello.js

console.log("Hello, Node.js!");

ターミナルで以下のコマンドを実行します。

node hello.js

Hello, Node.js!

ターミナルに Hello, Node.js! と表示されれば成功です。

Info

「ファイルにプログラムを書く → ターミナルで node ファイル名 で実行する → 結果を確認する」 が VS Code + Node.js での基本的な流れです。

2-4. ターミナルでのエラー

Playground と同様に、プログラムに間違いがあるとターミナルにエラーメッセージが表示されます。hello.js を以下のように書き換えて実行してみてください。

hello.js

console.log("Hello, Node.js!"

node hello.js

SyntaxError: missing ) after argument list

Playground で見たのと同じエラーです。閉じ括弧 ) を追加して再度実行すると、正常に動きます。

Tip

エラーメッセージは「何行目で何が問題か」を教えてくれます。最初は英語で読みにくいかもしれませんが、SyntaxError（文法エラー）や TypeError（型のエラー）といったエラー名を覚えておくと、原因を特定しやすくなります。