[JavaScript講座] 開発環境と実行方法

2025年11月14日

当ページのリンクには広告が含まれています。

JavaScriptの開発環境と実行方法について解説します。

必要なもの一覧

前提として以下のものが必要になります。

OS：Windows / Mac / Linux（何でもOK）
ブラウザ：Google Chrome（何でもOKですが、DevToolsが分かりやすいのでChrome推奨）
エディタ：Visual Studio Code（何でもOK）
ランタイム：Node.js

すでに入っていればそのままでOKです。

ブラウザでJavaScript実行する

DevTools の Console で実行

一番手軽な実行環境がブラウザのコンソールです。
手順は以下の通りです。

Chromeを開く
適当なページを開く（GoogleでもOK）
キーボードで
- Windows: F12 または Ctrl + Shift + I
- Mac: Command + Option + I
開いたパネルの中から Console タブを選択

Consoleで以下のように入力します。

1 + 1

Enterキーを押すと以下のように出力されます。

次に以下のように入力します。

console.log("Hello JavaScript");

Enterキーを押すと以下のように出力されます。

Hello JavaScript

これが一番小さい「JSプログラム」です。

HTMLファイル＋`<script>`タグで実行

次は、ファイルとして保存して動かす方法です。
適当なフォルダに hello.html というファイルを作成して、以下の内容をコピペしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Hello JS</title>
</head>
<body>
  <h1>JavaScriptテスト</h1>

  <script>
    console.log("hello from script tag");
    alert("JavaScriptが動きました！");
  </script>
</body>
</html>

hello.html をダブルクリックしてブラウザで開きます。（ブラウザにファイルをドラッグしたのでもOK）
画面上に「JavaScriptが動きました！」というアラートが出れば成功です。
また、DevToolsのConsoleタブを開くと hello from script tag が見えるはずです

上記HTMLの<script> ... </script> の中身がブラウザで実行されるJavaScript です。

今後、DOM操作やイベントなどを学ぶときは、この「HTML＋script」という形を使います。

VS Codeを編集環境として使用する

ブラウザのコンソールでも勉強できますが、
本格的に書くときは VS Code を使用するのがおすすめです。

プロジェクトフォルダを作る

任意の場所にフォルダを作成（例：js-study）
VS Code を開く
「ファイル」→「フォルダーを開く」から js-study を選択

これで、js-study が「作業フォルダ」になります。

最初の `.js` ファイル

VS Codeの左のエクスプローラーから「新しいファイル」を選択し、ファイル名を hello.js にしてください。
hello.jsに以下を記述してください。

console.log("Hello from hello.js");

次章で、Node.js を使ってターミナルから実行する方法を解説します。

Node.jsでJavaScriptを実行する

Node.jsのインストール

Node.jsの公式HPからインストーラをダウンロードして、インストールしましょう。

公式HP

Node.js — Download Node.js® Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.