PC内にローカルサーバーを構築できるフリーソフト「XAMPP：ザンプ」を使用してJavaScriptをlocalhostで動作させる方法です。
XAMPPを使ってローカルサーバーを作る方法は調べればたくさん出てきますが、初めて使う場合はどこにJavaScriptを書き込み、どのように実行したら良いのか分からないと思います。
そこでXAMPPを使ってJavaScriptを動かす方法を簡単にまとめました。
直接定義と外部定義の２つの方法で動作させる方法を記述しています。
この記事の目次
XAMPPでJavaScriptを実行する方法
JavaScriptの開発には当然プログラムの動作環境が必要になりますが、XAMPPを使えば簡単にその動作環境をPC内に構築できます。
XAMPPは無料で使用することができ、面倒な設定も一切なく、PCにインストールするだけでローカルサーバーが構築できてしまいますのでおすすめです。
関連記事
【インストール方法はコチラ】
XAMPPのインストール方法まとめ。ザンプでローカル環境にWordPressを構築しよう！オフラインで使えるテスト環境。
JavaScriptを実行するだけならインストールの項目だけでOKです。
インストール後はPC内の適切なディレクトリにJSファイルを配置して読み込めばJavaScriptが実行できるのですが、この配置場所が案外どこにも書かれていません。
分かる方からすれば基本過ぎることなのだけど、インストール直後だとプログラムをどこに書けば良いのか分からなくて詰まります。
そこで、この記事でJavaScriptを実際に動作させるところまでご案内します。
JavaScriptの主な実行方法は直接定義と外部定義の２種類があります。
JavaScriptの主な実行方法
- 直接定義：HTMLの<body>内に直接JavaScriptを書き込んで実行する方法。
- 外部定義：拡張子が.jsのファイルを別の場所から読み込んで実行する方法。
この２つの方法をそれぞれご紹介します。
直接定義でJavaScriptを実行する
「index.html」を用意してその中にHTMLを記述し、さらにHTML内のbodyタグの中にscriptタグを使ってJavaScriptを書き込んでいく方法です。
手順は以下です。
- XAMPP内にフォルダを作成する。
- 作成したフォルダにindex.htmlを作成する。
- index.html内にJavaScriptを記述する。
- http://localhost/作成したフォルダ/にアクセス。
では画像を踏まえてじっくり確認しましょう。
htdocs内にフォルダを作成する
まずはインストールしたXAMPP内にフォルダを作成します。
変更していなければ下記の場所に作成すればOKです。
xampp ＞ htdocs
htdocs直下でも可能ですが、JavaScriptの動作環境ということで専用のフォルダを作成しておいた方が後々分かりやすいです。
作成したフォルダ内にindex.htmlを作成する
xampp > htdocs > ○○フォルダの中にindex.htmlを作成
今回はtestというフォルダをhtdocs内に作成しました。
続いてindex.htmlというファイルを作成します。
JavaScriptを書き込む
作成したindex.htmlを開き、コードを書き込みます。
コピペで使えるテンプレを作りました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptのテスト</title>
</head>
<body>
<h1>JavaScriptのテスト</h1>
<script>
document.write('index.htmlに直書きしています！');
</script>
</body>
</html>
</body>の直前に<script>タグを使用してスクリプトを書き込みます。
JavaScriptの実行
ファイルを保存したら早速プログラムを実行してみましょう。
作成したindex.htmlにアクセスすれば実行できます。
XAMPPのApacheを起動する
XAMPPを起動してApacheのStartボタンを押します。
起動したら下記のURLでlocalhostにアクセスすればOK！
https://localhost/test/
作成したフォルダまでのパスで大丈夫です。これでindex.htmlが開きます。
実行されました！
外部定義でJavaScriptを実行する
拡張子が「.js」となるファイルをHTML内で読み込んで実行する方法です。
後々プログラムが増えていっても分かりやすいため、こちらがオススメです。
プログラム用のフォルダを作成する
まずはJSファイルだけを保存するためのフォルダを作りましょう。
xampp > htdocs > ○○フォルダの中にjsフォルダを作成
場所は先ほど作成したindex.htmlと同階層のフォルダに作ります。
今回は「js」という名前にしました。
プログラムファイル「○○.js」の作成
続いてその中にプログラムファイルを作成しましょう。
JavaScriptファイルを作成する
sample.jsという名前にしました。
コードは以下のように記述しました。
var a; var b; var c; a = 2; b = 8; c = a + b; document.write(c);
内容は気にしないでください。遠回りしてますがただの足し算ですｗ
HTMLでjsファイルを読み込む
index.htmlを開いて作成した「js」フォルダ内の「sample.js」を読み込みます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptのテスト</title> </head> <body> <h1>JavaScriptのテスト</h1> <script type="text/javascript" src="js/sample.js"></script> </body> </html>
scriptタグ内でファイルタイプとパスを指定するだけでOK！
<script type="text/javascript" src="作成したフォルダ名/ファイル名.js"></script>
こんな具合です。
JavaScriptの実行
あとは先ほどの直接定義の時と同じようにindex.htmlにアクセスすればOKです。
XAMPPのApacheを起動する
ローカルサーバーを起動して...下記にアクセス。
https://localhost/test/
これでindex.html内でjs/sample.jsが読み込まれます。
sample.jsが実行された
JavaScriptがローカル環境で実行できました。
まとめ
XAMPPを使ってlocalhostでJavaScriptを実行する方法でした。
分かる方には基本なのですが、初めてJavaScriptを動かしたい場合には何から始めればよいのか分かりませんよねぇ...
phpもXAMPP内のhtdocs内にプログラムを設置し、そこにブラウザでアクセスすれば実行できます。
最後になりましたが、別の手段としてはブラウザ上でもJavaScriptは実行できます。
