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を入手」をクリックする。

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

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

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

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

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

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

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

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

「Next」をクリックする。

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

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

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

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

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

実行方法

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

console.log("Hello, World");

コマンドプロンプトを起動して「hello.js」が保存されているフォルダに移動する。

コマンドプロンプトで「node hello.js」と入力されるとプログラムが実行される。