XAMPP(ザンプ)でJavaScriptを実行する。HTMLに直接記述する方法とJSを読み込んで実行する方法の2つ。

XAMPPでJavaScriptを実行する方法_003

PC内にローカルサーバーを構築できるフリーソフト「XAMPP:ザンプ」を使用してJavaScriptをlocalhostで動作させる方法です。

XAMPPを使ってローカルサーバーを作る方法は調べればたくさん出てきますが、初めて使う場合はどこにJavaScriptを書き込み、どのように実行したら良いのか分からないと思います。

そこでXAMPPを使ってJavaScriptを動かす方法を簡単にまとめました。

直接定義と外部定義の2つの方法で動作させる方法を記述しています。

XAMPPでJavaScriptを実行する方法

JavaScriptの開発には当然プログラムの動作環境が必要になりますが、XAMPPを使えば簡単にその動作環境をPC内に構築できます。

XAMPPは無料で使用することができ、面倒な設定も一切なく、PCにインストールするだけでローカルサーバーが構築できてしまいますのでおすすめです。

関連記事

【インストール方法はコチラ】
XAMPPのインストール方法まとめ。ザンプでローカル環境にWordPressを構築しよう!オフラインで使えるテスト環境。
JavaScriptを実行するだけならインストールの項目だけでOKです。

インストール後はPC内の適切なディレクトリにJSファイルを配置して読み込めばJavaScriptが実行できるのですが、この配置場所が案外どこにも書かれていません。

分かる方からすれば基本過ぎることなのだけど、インストール直後だとプログラムをどこに書けば良いのか分からなくて詰まります。

そこで、この記事でJavaScriptを実際に動作させるところまでご案内します。

JavaScriptの主な実行方法は直接定義と外部定義の2種類があります。

JavaScriptの主な実行方法

  • 直接定義:HTMLの<body>内に直接JavaScriptを書き込んで実行する方法。
  • 外部定義:拡張子が.jsのファイルを別の場所から読み込んで実行する方法。

この2つの方法をそれぞれご紹介します。

直接定義でJavaScriptを実行する

「index.html」を用意してその中にHTMLを記述し、さらにHTML内のbodyタグの中にscriptタグを使ってJavaScriptを書き込んでいく方法です。

手順は以下です。

  1. XAMPP内にフォルダを作成する。
  2. 作成したフォルダにindex.htmlを作成する。
  3. index.html内にJavaScriptを記述する。
  4. http://localhost/作成したフォルダ/にアクセス。

では画像を踏まえてじっくり確認しましょう。

htdocs内にフォルダを作成する

まずはインストールしたXAMPP内にフォルダを作成します。
変更していなければ下記の場所に作成すればOKです。

xampp > htdocs

htdocs直下でも可能ですが、JavaScriptの動作環境ということで専用のフォルダを作成しておいた方が後々分かりやすいです。

作成したフォルダ内にindex.htmlを作成する

XAMPPでJavaScriptを実行する方法_001

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でJavaScriptを実行する方法_002

XAMPPのApacheを起動する

XAMPPを起動してApacheのStartボタンを押します。
起動したら下記のURLでlocalhostにアクセスすればOK!

https://localhost/test/

作成したフォルダまでのパスで大丈夫です。これでindex.htmlが開きます。

XAMPPでJavaScriptを実行する方法_003
実行されました!

外部定義でJavaScriptを実行する

拡張子が「.js」となるファイルをHTML内で読み込んで実行する方法です。
後々プログラムが増えていっても分かりやすいため、こちらがオススメです。

プログラム用のフォルダを作成する

まずはJSファイルだけを保存するためのフォルダを作りましょう。

XAMPPでJavaScriptを実行する方法_004

xampp > htdocs > ○○フォルダの中にjsフォルダを作成

場所は先ほど作成したindex.htmlと同階層のフォルダに作ります。
今回は「js」という名前にしました。

プログラムファイル「○○.js」の作成

続いてその中にプログラムファイルを作成しましょう。

XAMPPでJavaScriptを実行する方法_005

JavaScriptファイルを作成する

sample.jsという名前にしました。
コードは以下のように記述しました。

var a;
var b;
var c;
a = 2;
b = 8;
c = a + b;
document.write(c);

内容は気にしないでください。遠回りしてますがただの足し算ですw

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でJavaScriptを実行する方法_006

XAMPPのApacheを起動する

ローカルサーバーを起動して...下記にアクセス。

https://localhost/test/

これでindex.html内でjs/sample.jsが読み込まれます。

XAMPPでJavaScriptを実行する方法_007

sample.jsが実行された

JavaScriptがローカル環境で実行できました。

まとめ

XAMPPを使ってlocalhostでJavaScriptを実行する方法でした。

分かる方には基本なのですが、初めてJavaScriptを動かしたい場合には何から始めればよいのか分かりませんよねぇ...

phpもXAMPP内のhtdocs内にプログラムを設置し、そこにブラウザでアクセスすれば実行できます。

最後になりましたが、別の手段としてはブラウザ上でもJavaScriptは実行できます。

-ソフト_サービス
-

ありがとうございました。
良かったらシェアしてネ・w・

© 2022 ソロ学