Javascriptを使ったホームページ制作などをしている際に、ちょっと動作を確認しようとブラウザでファイルを直接開いた場合(URLがfile:// ~ の場合など)、JSが動作しない時があります。
これは同一性ポリシーと呼ばれる制約を受けるからなのですが、私を含め多くのプログラミング初心者はこの時初めて同一性ポリシーについて知ると思うので、この場面に直面した時の「じゃあ結局どうすれば動作確認できるようになるの？」について紹介します。
あくまで、初心者に対する動作確認をするための紹介であり、同一性ポリシー及びCORSについての説明はほとんどしません。(知りたい人は各自調べてください。)
対象でない人
Apacheとかnginxを自分でセットアップできる人
解決策の手順
解決方法は２つあります。
1. VSCodeの「Live Server」拡張機能を使用する
2. python3を用いてターミナルでpython -m http.serverを使用する
ここで、python3としているのは現在のpythonの標準がpython3だからで特に理由はありません。python2を使っている人は想定していません。
解決策１について
これが最も簡単だと思います。私も普段はVSCodeでプログラムを書くことが多いのでチャチャっと確認したいときはこれを使用する時があります。
手順1(インストール)
VSCodeがインストールされている状態だと仮定します。
(インストールしていない人はこちら(VSCodeの公式サイト)より自身のOSにあったタイプをインストールしてください。)
インストールができたら、VSCodeの拡張機能にある「Live Server」を検索してインストール
起動方法
インストール後、VSCodeを再起動して右下の「Go Live」をクリックすると自動でデフォルトブラウザが起動して表示されます。
また、一度閉じてしまっても、http://127.0.0.1:5500/(http://localhost:5500/でも良い)にアクセスすることでも同様に開くことができます。(デフォルトのポートは5500番)
ちなみに、この時最初に表示されるのは、VSCodeで開いているディレクトリです。
index.htmlがあればindex.htmlが、なければディレクトリの中身が表示されます。
解決策2について
Mac, LinuxなどのUnix系OSを使っている人であればpython3は標準でインストールされていると思うのでターミナルで
$ python3 -m http.server
と入力しするとターミナルのカレントディレクトリに対応した場所が開かれローカルサーバーが立ちます。
簡単に説明するとフラグ-mはモジュールの使用を意味するので、httpパッケージのserverモジュールを使用するという意味になります。(間違ってたらごめんなさい。)
もし、Python2系、WindowsOSを使用している場合は、
Homebrewもしくは公式サイト(こちら)よりインストールしてきて上記のコマンドを実行することでローカルサーバーが立ちます。
終わりに
良いローカルサーバーライフを！(笑)