HelloWorldとは、その言語の開発環境を構築し、実行環境での表示を目的とする事で、どの言語でも、はじめの一歩となる基本的な作業になります。
「HelloWorld」という言葉自体には、あまり意味がなく、電話の「もしもし」と同じぐらいの間隔だと考えてください。
JavaScriptにおける「HelloWorld」の実現
JavaScriptは、サーバーサイドとブラウザがありますが、今回は一般的なブラウザを対象にします。（サーバーサイドは別言語として行います）
概要の確認
環境
JavaScriptの実行環境は以下のように複数の種類があるので、全ての環境で行います。
- HTMLソースに直接記述して実行
- 外部ファイルで実行
- ブラウザのデバッグコンソールで実行
今回のブラウザはchrome、OSはMacを使用しますが、他のブラウザ、OSを使用する場合は、デバッグコンソールなどの使い方が少し違うので、ググッて行なってください。
実行方法
JavaScriptにおける表示については、以下の種類があるので、環境と実行をマトリクスで行います。
- アラートダイアログに表示
- WEBページに表示
- デバッグコンソールに表示
事前準備（環境構築）
今回の基本形としてHTMLソースファイルとして以下を用意しました。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>HTML-Sample-Source</title>
</head>
<body>
<h1>HTML-Sample-Source</h1>
</body>
</html>
サンプル1.アラートダイアログに表示
HTMLソースに直接記述して実行
sample.htmlのheadタグ内に以下を記述
<script>
alert("Hello World");
</script>
ページを読み込むと以下のアラートが表示されれば完了です。
HTMLソースに直接記述して実行
sample.htmlのheadタグ内に以下のscriptタグを追加
<script src="hello.js"></script>
sample.jsファイルを作って以下を記述
alert("Hello World");
ページを読み込むと先ほどと同じようにアラートダイアログが表示されれば完了です。
デバッグコンソールに表示
まず最初にデバッグコンソールを表示します。
Macの場合は「Option」+「Command」+「j」
Winの場合は「F12」
を押すと、以下の様なウィンドウが表示されるので、「Console」タグをクリックしてください。
一番下のカーソルが点滅している箇所に下記のコマンドを記入して「Enter」キーを押すと、JavaScriptが実行されます。
alert("Hello World");
ダイアログが表示されれば、完了です。
何故複数の環境があるのか？
JavaScriptは、もともと静的なHTMLのファイルを動的にするためにプログラムする為に作られた言語で、HTMLの柔軟なタグ構成やファイル構成に適用できるように設計されています。
最近では、JavaScriptなしでは、Webページが効果的に見せられないぐらいに、なくてはならない言語になっているため、ブラウザの開発元でも、デバッグコンソールなどの機能を搭載しているようです。
ほぼ全てのブラウザにコンソールは搭載されているので、全てのブラウザで使い慣れておくとデバッグなどの作業が効率的に行えると思います。
とりあえず、今回行なった３つの環境を理解できていれば、あとはプログラムに応じてどれが効率的かを考えればいいですね。
※デバッグコンソールは、本番環境では行えないので、デバッグまたは、プログラムの簡易テストとして使うという認識で使用してください。
