【環境構築】JavaScriptの開発環境

JavaScriptの開発環境を構築する方法を解説します。JavaScriptはブラウザさえあれば動作するため、特別なインストールなしですぐに始められます。

ブラウザの開発者ツールで実行する

最も手軽な方法です。ブラウザに標準搭載されている開発者ツールのコンソールを使えば、JavaScriptをすぐに試せます。

手順	操作
1	ブラウザ（Chrome推奨）を開きます。
2	『F12』キー（macOSは『Cmd + Option + I』）で開発者ツールを開きます。
3	『Console』タブをクリックします。
4	コンソールにJavaScriptのコードを入力して『Enter』を押すと、即座に実行されます。

『Console』タブを開くと以下のような画面が表示されます。

開発者ツールのConsoleタブ

コンソールにコードを入力して実行してみましょう。

// コンソールに入力して試してみましょう。
console.log("Hello, Yagami Iori!");
alert("こんにちは！");
1 + 2  // 結果: 3

実行結果が以下のように表示されます。

Consoleでの実行結果

HTMLファイルの script 要素に書く

HTMLファイル内の『<script>』要素にJavaScriptを記述する方法です。ブラウザでHTMLファイルを開くだけで実行されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript テスト</title>
</head>
<body>
  <h1>JavaScriptのテスト</h1>
  <script>
    document.write("JavaScriptから出力しました！");
  </script>
</body>
</html>

上記の内容をテキストエディタに貼り付けて『index.html』として保存し、ブラウザで開いてみてください。

外部JavaScriptファイルを読み込む

JavaScriptのコードを別ファイル（.js）に分離し、HTMLから読み込む方法です。実際の開発ではこの方法が一般的です。

まず『script.js』ファイルを作成します。

script.js

console.log("外部ファイルから実行されました！");
document.getElementById("output").textContent = "Hello from Southtown!";

次に、HTMLファイルからこのJSファイルを読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>外部JSファイルの読み込み</title>
</head>
<body>
  <p id="output"></p>
  <script src="script.js"></script>
</body>
</html>

『<script>』要素は『</body>』の直前に配置するのがおすすめです。HTMLの読み込みが完了してからJavaScriptが実行されるため、要素の取得に失敗しにくくなります。

一方、『<head>』内に配置したほうが良いケースもあります。たとえば Google Analytics などの計測タグは、ページの表示前にできるだけ早く読み込む必要があるため『<head>』内に配置します。また『defer』属性を付けると、HTMLの解析を止めずにダウンロードし、解析完了後に実行されるため、『<head>』内でも安全に読み込めます。

<!-- defer: HTMLの解析完了後に実行されます。 -->
<script src="script.js" defer></script>

迷ったときは『</body>』の直前に配置しておけば問題ありません。『defer』や『async』属性の詳細は『<script>』を参照してください。

Node.js で実行する（補足）

Node.js をインストールすると、ブラウザを使わずにターミナル（コマンドプロンプト）でJavaScriptを実行できます。サーバーサイド開発やツール作成に使われます。

OS	インストール方法
Windows	nodejs.org からインストーラーをダウンロードして実行します。
macOS	公式サイトのインストーラーか、Homebrew で『brew install node』を実行します。Homebrew はmacOS用のパッケージマネージャです。インストールされていない場合は公式サイト（https://brew.sh/）の手順に従ってインストールしてください。

hello.js

console.log("Hello from Southtown!");

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

node hello.js
Hello from Southtown!

ファイルの書き方やコメントの記述方法については『.jsファイルの作成と実行方法』を参照してください。

コマンドが見つからないとき

Node.js をインストールしたのに、ターミナルで『node: command not found』と表示される場合は、PATH（パス）が通っていない可能性があります。以下の手順で確認・設定してください。

1. コマンドの場所を探します

node コマンドの場所を確認します。

which node

見つからない場合、よくあるインストール先を確認します。

ls /usr/local/bin/node
ls /opt/homebrew/bin/node

2. 使用しているシェルを確認します

echo $SHELL

『/bin/zsh』と表示されたら『~/.zshrc』、『/bin/bash』と表示されたら『~/.bashrc』に設定を書きます。

3. PATH に追加します

コマンドの場所がわかったら、シェルの設定ファイルに PATH を追加します。

macOS (zsh) の場合:

echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Linux (bash) の場合:

echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

Windows の場合は「システムの詳細設定」→「環境変数」→「Path」にNode.jsのインストール先フォルダを追加します。

Node.js のアンインストール

Homebrew でインストールした Node.js をアンインストールするには以下のコマンドを実行します。

brew uninstall node

おすすめのテキストエディタ

JavaScript開発に便利なテキストエディタを紹介します。どれも無料で使えます（秀丸エディタのみシェアウェア、WebStormは有料）。

ツール	特徴
VSCode	現在最も人気のあるエディタです。JavaScript/TypeScriptのコード補完・デバッグ・ESLint連携など、JS開発に必要な機能が標準搭載されています。Windows / macOS / Linux 対応。正式名は『Visual Studio Code』。
Sublime Text	軽量で動作が非常に速いエディタです。シンプルな画面でコーディングに集中できます。Windows / macOS / Linux 対応。
秀丸エディタ	1993年リリース、日本で長年愛されている国産テキストエディタです。動作が軽快でマクロ機能も搭載。Windows 専用・買い切り型。
WebStorm	JetBrains製のJavaScript/TypeScript専用IDEです。高度なコード解析・リファクタリング・デバッグ機能を備えています。有料。

最近では『VSCode』が最も広く使われているらしいのですが、管理人はシンプルかつ軽快に動くエディタが大好物なので現在は『Sublime Text』を愛用しております。良ければ参考にしてやってください。

それと秀丸エディタについて補足をさせてください。秀丸エディタの初リリースは1993年、動作が軽快で正規表現による強力な検索・置換機能を備えており、更に『マクロ』を使って自分好みの設定にすることが可能な本当に素敵なエディタでございます。最近ですと『マクロ』は『アドオン』なんかが該当しますが、なんと1990年代からすでにその機能を実装していたという遙か先の未来を見越したような設計で、そういった面でも大変すばらしいエディタです。

実は管理人もWindows3.1からWindows7頃までずっと秀丸エディタを使ってプログラミングをしていたクチで、長年大変お世話になっておるのでございます。そして開発者の斉藤秀夫さんは未だに秀丸エディタのアップデートを続けており、例えばWindows11、その他64Bit板のWindowsでも問題なく起動させることができます。秀丸エディタはこちらから購入でき、買い切り型で価格も4000円程度、WindowsOSに入れておくと色々と捗るので買っておいて損はないかなと思います。

(´-`).｡oO(管理人は昔からお世話になっている秀夫さんを応援したいので、個別にご紹介させて頂きました...)

(´-`).｡oO(しかし30年以上使っているのに支払った金額はたった4000円前後...これほどコスパの良いものが他に存在するのかというレベルですね...)

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

JavaScript辞典