ローカルテストサーバーを用意するには

ほとんどの学習領域では、ブラウザーでサンプルを直接開くだけで済みます。 HTML ファイルをダブルクリックするか、ブラウザーウィンドウにドラッグ＆ドロップするか、ファイル > 開く...を選択して HTML ファイルを選択するなどです。これを達成する方法はたくさんあります。

ウェブアドレスのパスが file:// で始まり、その後にローカルハードドライブのファイルへのパスが続く場合、ローカルファイルが使用されています。対照的に、 GitHub でホストされている例 (または他のリモートサーバーの例) を見ると、ウェブアドレスは http:// または https:// で始まっており、ファイルが HTTP 経由で受信されたことを示します。

一部のサンプルはローカルファイルとして開くと実行されません。これにはさまざまな理由があります。最も可能性が高いのは、

• 非同期リクエストを特徴としている。 一部のブラウザー (Chrome を含む) は、ローカルファイルからサンプルを実行するだけでは非同期リクエストは実行しません (サーバーからのデータの取得を参照)。これはセキュリティ上の制限があるためです (ウェブセキュリティの詳細については、ウェブサイトのセキュリティを参照してください)
• サーバー側の言語を使用している。 サーバー側の言語 (PHP や Python など) では、コードを解釈して結果を提供する特別なサーバーが必要です。
• 他のファイルをインクルードしている。 ブラウザーは通常、file:// スキーマを使用してリソースを読み込むリクエストをオリジン間リクエストとして扱います。 そのため、他のローカルファイルを入れることができるローカルファイルを読み込むと、 CORS エラーが発生することがあります。

非同期リクエストの問題を回避するには、ローカルウェブサーバーを介して実行することによって、そのようなサンプルをテストする必要があります。

HTML と CSS と JavaScript だけが必要で、サーバーサイドの言語が必要ない場合、最も簡単な方法はコードエディターの拡張機能を調べることです。ローカルの HTTP サーバーへのインストールと設定するには、自動化するだけでなく、コードエディターとうまく統合されます。 HTTP サーバーのローカルファイルをワンクリックでテストできます。

VSCode については、以下の無料拡張機能を調べると良いでしょう。

• vscode-preview-server。ホームページでチェックできます。

これを実現するためのもう一つの方法は、 Python の http.server モジュールを使用することです。

このためには次のようにします。

1. Python をインストールします。 Linux または Mac OS X を使用している場合は、既にシステム上で使用可能になっているはずです。 Windows ユーザーの方は、 Python ホームページからインストーラーを入手し、インストーラーの指示に従ってインストールすることができます。

   • python.org に進みます
   • ダウンロードセクションの下で、 Python "3.xxx" のリンクをクリックします
   • ページ下部の Windows Installer を選択してダウンロードします
   • ダウンロードしたら、実行します
   • インストーラーの最初のページで、 "Add Python 3.xxx to PATH" チェックボックスをオンにします
   • [インストール]をクリックし、インストールが完了したら[閉じる]をクリックします

2. コマンドプロンプト (Windows)/ターミナル (macOS/ Linux) を開きます。 Python がインストールされていることを確認するには、次のコマンドを入力してください。

   bash

   python -V
   # 上記のものが失敗する場合は、次のようにする
   python3 -V
   # または、 "py" コマンドが使用できる場合は、次のようにする
   py -V
   

3. これによりバージョン番号が返されます。 これで OK であれば、 cd コマンドを使用して、テストしたいウェブサイトのコードを格納するディレクトリーに移動します。

   bash

   # 入力するディレクトリー名を入れる。例えば次のようにする
   cd Desktop
   # 必要であれば、 2 つのドットを使用するとディレクトリーを 1 つ上にジャンプする
   cd ..
   

4. そのディレクトリーにあるサーバーを起動するコマンドを入力します。

   bash

   # 上記で Python のバージョンが 3.X と返ってきた場合
   # Windows では、 "python -m http.server" or "py -3 -m http.server" のようにする
   python3 -m http.server
   # 上記で Python のバージョンが 2.X と返ってきた場合
   python -m SimpleHTTPServer
   

5. 既定では、これはローカルウェブサーバー上のディレクトリーの内容を 8000 番ポート上で実行します。このサーバーにアクセスするには、ウェブブラウザーで localhost:8000 の URL に移動します。ここにディレクトリーの内容が表示されるので、実行する HTML ファイルをクリックしてください。

Python の http.server （Python 2 では SimpleHTTPServer）モジュールは便利ですが、単なる静的ファイルサーバーに過ぎません。 Python、PHP、JavaScript などの言語で書かれたコードの実行方法はわかりません。これを処理するには、必要なことがあります。必要なのは、実行しようとしているサーバー側の言語に依存します。いくつかの例があります。

• Python のサーバー側コードを実行するには、Python ウェブフレームワークを使用する必要があります。 Python のウェブフレームワークには、 Django（ガイドが利用できます）、Flask、Pyramid など人気のものが多く存在します。

• Node.js (JavaScript) サーバー側コードを実行するには、生のノードまたはその上に構築されたフレームワークを使用する必要があります。 Express は良い選択です - Express Web Framework (Node.js/JavaScript) を参照してください

• PHP サーバー側コードを実行するには、PHP の組み込み開発サーバーを起動してください。

  bash

  cd path/to/your/php/code
  php -S localhost:8000