03 JavaScriptを記述する環境の整備

2023年3月13日2023年3月14日

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

JavaScriptを書くための環境ってどうやって準備すればいいんですか？具体的な手順を教えてください。

まずは、テキストエディタをインストールする必要があります。Visual Studio Code、Atom、Sublime Textなどが代表的なテキストエディタです。これらのテキストエディタは、無料でダウンロードできますよ。

了解しました。では、テキストエディタをインストールしたら次は何をしますか？

次に、ウェブブラウザをインストールします。Google Chrome、Firefox、Microsoft Edgeなどが一般的に使われています。これらのブラウザも無料でダウンロードできます。

そうなんですね。それからどうすればいいですか？

JavaScriptの動作確認には、Webサーバを用意する必要があります。代表的な開発用ローカルサーバには、Node.jsのhttp-server、PythonのSimpleHTTPServerなどがあります。これらの開発用ローカルサーバは、コマンドラインでインストールして使用します。

Webサーバってどうやって使うんですか？

サーバを起動するコマンドを実行するだけです。たとえば、Node.jsのhttp-serverを使用する場合は、コマンドラインで「http-server」と入力するだけで起動できます。サーバが起動したら、ウェブブラウザで「localhost:8080」などのアドレスを入力してアクセスすれば、JavaScriptの動作確認ができます。

なるほど。手順が分かりました。ありがとうございます。

Visual Studio Codeのインストール

Visual Studio Codeのインストール方法は、以下の手順に従って行います。

Visual Studio Codeの公式サイト（https://code.visualstudio.com/）にアクセスします。
ダウンロードページから、自分のOSに合ったインストーラをダウンロードします。
ダウンロードしたインストーラを実行します。
インストーラが起動したら、指示に従ってインストールを進めます。基本的にはデフォルトの設定でOKです。
インストールが完了したら、Visual Studio Codeが起動します。

以上が、Visual Studio Codeのインストール手順になります。インストールが完了したら、Visual Studio Codeを開いてJavaScriptのコーディングを始めることができます

Node.jsのインストールとWebサーバーの起動

Node.jsのインストール方法は、以下の手順に従って行います。

Node.jsの公式サイト（https://nodejs.org/ja/）にアクセスします。
ダウンロードページから、自分のOSに合ったインストーラをダウンロードします。Windowsの場合は、64ビット版の「Windows Installer」を選択します。
ダウンロードしたインストーラを実行します。
インストーラが起動したら、指示に従ってインストールを進めます。基本的にはデフォルトの設定でOKです。
インストールが完了したら、コマンドプロンプトやターミナルを開いて、「node -v」と入力してバージョン番号が表示されることを確認します。

以上が、Node.jsのインストール手順になります。インストールが完了したら、Node.jsを使ってJavaScriptの開発を始めることができます。

Node.jsを使ったWebサーバーの起動方法は、以下の手順になります。

Node.jsをインストールします（インストール方法は先程の回答を参照してください）。
サーバーのコードを書きます。例えば、以下のようなコードを書いて「server.js」というファイル名で保存します。

const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});