JavaScriptの環境構築

ブラウザ(Google Chrome)インストール

まず、ブラウザをインストールする。

JavaScriptはブラウザに標準搭載されているため、ブラウザがあればすぐに実行できる。

どのブラウザでも構わないが、ここではGoogle Chromeを例に説明する。

DevToolsの利用

Google ChromeにはDevToolsという開発者向けツールが搭載されている。

DevToolsを利用することで、JavaScriptのコードを実行したり、デバッグすることができる。

DevToolsは以下のいずれかの方法で起動できる。

• 右クリック → 検証
• 右上のメニュー(︙) → その他のツール → デベロッパーツール
• ショートカットキー(Ctrl+Shift+I)
• F12キー

DevToolsを起動したら「Console」タブを選択する。

ここでJavaScriptのコードを実行できる。

プログラムの実行

DevToolsで以下のJavaScriptのコードを実行する。

console.log("Hello, World");

実行すると、コンソールに「Hello, World」と表示される。

Node.jsインストール

インストール方法

Node.jsをインストールする。

Node.jsはJavaScriptをブラウザ以外で動かすための環境である。

Node.jsを使うとブラウザ上でしか動かせなかったJavaScriptをパソコン上で動かせるようになる。

DevToolsだと複数行のプログラムを動かしにくいのでNode.jsをインストールする。

以下がNode.jsのインストール手順である。

Node.js公式サイトにアクセスして、「Node.jsを入手」をクリックする。

自分のOSを選択してインストーラーをダウンロードする。

バージョンは「Current(最新版)」、「LTS(長期サポート版)」などがあるがLTSを選んでおけば問題ない。

LTSは安定して長く使えるバージョンである。

※私はWindowsなので「Windowsインストーラー(.msi)」をクリックする。

ダウンロードしたインストーラーを起動する。

インストーラーを起動したら「Next」をクリックする。

チェックボックスを選択して、「Next」をクリックする。

インストール先のフォルダは、特にこだわりが無ければデフォルトのまま「Next」をクリックする。

「Next」をクリックする。

チェックボックスは選択しないで「Next」をクリックする。

※ここのチェックボックスは今回は使わないのでチェックしない。

「Install」をクリックするとインストールが開始される。

インストールが終了したら「Finish」をクリックする。

コマンドプロンプトを起動して「node -v」と「npm -v」を入力してバージョンが表示されたらインストールは正常にできている。

実行方法

Node.jsがインストールできたら、実際にJavaScriptファイルを実行してみよう。

ステップ1：JavaScriptファイルを作成

以下のコードを「hello.js」とファイル名を付けて保存する。

console.log("Hello, World");

※保存場所はどこでも良いが、デスクトップなどの分かりやすい場所がおすすめ

ステップ2：コマンドプロンプトを起動

Windowsの場合、以下の方法でコマンドプロンプトを起動できる：

• スタートメニューから「cmd」と検索
• または、Windowsキー + R → 「cmd」と入力してEnter

ステップ3：ファイルがある場所に移動

cdコマンドを使って、hello.jsを保存した場所に移動する。

cd C:\Users\あなたのユーザー名\Desktop

※デスクトップに保存した場合の例

ステップ4：プログラムを実行

「node hello.js」と入力してEnterキーを押すと、プログラムが実行される。

node hello.js

正しく実行されると、「Hello, World」と表示される。

うまく動かない場合