ProgrammingJavaScript講座第1章 JavaScript言語仕様
第1章 JavaScript言語仕様

JavaScriptの基礎

式

プログラミング言語には様々な種類の式があります。例えば、前節でコンソールに入力した「1 + 1」は算術式です。算術式は + や - といった演算子と呼ばれる記号を使い、加算や減算などの演算を行います。

上記は数学の式と同じで、10に20を加算しています。

コンソールで確認しよう
10 + 20
出力結果

30

代入式

次に紹介するのは代入式です。代入式は代入演算子（ = ）を使い、左辺の変数に右辺の値を代入します。

上の式を実行すると、valの値は10になります。

コンソールで確認しよう
val = 10
出力結果

10

代入式は文字列も使えます。

コンソールで確認しよう
s1 = "Hello world"

式は代入の際に計算することもできます。次の式では、xに5を代入し、100にxを足し、その結果をyに代入しています。xは5になっているので、yには「100 + 5」の結果の値105が代入されます。

コンソールで確認しよう
x = 5
y = 100 + x
出力結果

105

文

プログラミング言語は、日本語や英語のような自然言語と同じように文法があります。ここではJavaScriptの基本的な文法を説明します。

プログラミング言語での文は処理を行うための単位で、文の終端を表すセミコロン（ ; ）までが一つの文です。特別な操作をしない限り、文は上から順番に処理されます。先に紹介した式は論理式や代入式など値を返すもので、主に文の一部として使われます。

今までの例のように、1行に1文のみの時は終端のセミコロンを省略できます。ただし、文の終了として明示的にセミコロンを入れることをお勧めします。

セミコロンで区切れば、次のように1行に複数の文を記述できます。

コンソールで確認しよう
a = 1; b = 2;

命令文は単一行に記述することがほとんどですが、改行を使って複数行にすることもできます。長い文になる際などに有効です。

コンソールで確認しよう
console.log(
	"There is nothing either good or bad, but thinking makes it so."
);
var text =
	"A fool thinks himself to be wise, but a wise man knows himself to be a fool.";

コード行の分割

文字列を複数行にしたい場合、バックスラッシュ（ \ ）を末尾に追加します。バックスラッシュ（ \ ）の後は改行以外の文字があると構文エラーになります。

コンソールで確認しよう
console.log("Hello \
World!");
出力結果
Hello World!

if文

後の章で詳しく説明しますが、条件を満たす場合に実行する、というif文を紹介します。if文は、カッコ（ () ）で囲んだ条件式を評価し、式の値が真なら if ブロック内の命令を実行します。

if ( 条件式 ) {
	1つ目のifブロック内の命令
}

条件式が真の場合、if ブロックが処理されてブロック内のコードが実行されます。

// 条件式の値が true の場合
if ( true ){
    console.log("true");
 }

コメントアウト

コードを無効にしたい場合や、コードの説明などを書きたい場合、コメントアウトを使います。コメントアウトしたコードは無視され、実行されません。JavaScript には一行コメントアウトと複数行コメントアウトの2種類が用意されています。

一行コメントアウト

一行コメントアウトは、コメントアウトしたい文字の前にスラッシュ2つ（ // ）を挿入します。次の行はコメントアウトされているので、実行されません。

コンソールで確認しよう
// console.log("test");

命令文の後にコメントアウトを追加することもできます。次のコードはセミコロンまでの命令文が実行され、// 以降の文字列はコメントアウトとして扱われます。

コンソールで確認しよう
console.log("test"); // コメント

複数行コメントアウト

複数行のコメントは /* で始まり */ で終ります。この /* */ の間に何行あっても問題ありません。

コンソールで確認しよう
/*
console.log("test");
console.log("test");
*/

複数行コメント内に複数行コメントがあると、構文エラーが発生するので注意してください。埋め込まれた複数行コメントの終わりを示す */ が、複数行コメント全体の終わりとして解釈されてしまうからです。

次のコメントアウトは構文エラーになります。

コンソールで確認しよう
/*
console.log("hello");
/*console.log("world");*/
*/

SCRIPTタグ

JavaScriptを実行するには、SCRIPTタグを使います。SCRIPTタグには2つの使い方があります。ひとつはHTMLの中にスクリプトを書く方法で、もうひとつは外部のJavaScriptファイルを読み込むという方法です。

まずはHTMLの中に直接スクリプトを書く方法を紹介します。次のように、SCRIPTタグの開始タグと終了タグの間にJavaScriptのコードを記述直接記述します。

SCRIPT要素内にスクリプトを記述する例
<script>
// ここにスクリプトを記述する
</script>

次に外部スクリプトファイルを読み込む方法です。SCRIPTタグのSRCに属性に読み込みたいJavaScriptファイルのURLを指定します。

外部スクリプトを読み込む例
<script src="ここに外部スクリプトのURLを記述する"></script>

SCRIPTタグを記述

それでは早速、JavaScriptを実行するHTMLを作成してみましょう。HTMLを保存したら、ブラウザで表示確認してみてください。「Hello World」という文字が表示されれば成功です。

BODY要素内にJavaScriptを宣言する方法
<html>
<body>

<script>
document.write("Hello World");
</script>

</body>
</html>

複数の SCRIPTタグを記述

SCRIPT タグは書かれている順番に実行されます。変数もSCRIPTタグ内にとどまらず、別のSCRIPTタグからも参照可能です。

1つ目のSCRIPTタグで変数 x の値を設定し、2つ目のSCRIPTタグから変数 x を参照しています。変数はSCRIPTタグを超えて参照可能なので、document.write() により変数 x の値の 10 がブラウザに表示されます。

<html>
<body>

<script>
var x = 10;
</script>
<script>
document.write( x );
</script>

</body>
</html>

外部スクリプトファイル

それでは、SCRIPTタグのもう一つの機能、外部のJavaScriptファイルを実行する方法を紹介しましょう。まず、拡張子が .js のファイルを作成し、そのファイルにスクリプトを記述します。ここでは、JavaScriptのファイル名を print_msg.js とします。JavaScriptファイルを作成する際は拡張子を「.js」にしてください。

作成したJavaScriptファイルに下記のコードをコピー＆ペーストしてください。外部ファイルに記述する場合はSCRIPTタグで囲む必要はありません。

function printMsg() {
	alert("Hello!");
}

次はHTMLファイルを用意します。ファイル名は何でも良いですが、JavaScriptと同じファイル名のprint_msg.htmlとしましょう。下記のHTMLファイルを作成し、ブラウザで表示してみてください。HTMLファイルと同階層に print_msg.js ファイルがあれば、アラートが表示されるはずです。［OK］ボタンを押してもアラートが表示されます。

<html>
<body>

<script src="print_msg.js"></script>
<input type="button" value="OK" onclick="printMsg()">

</body>
</html>

このように、SCRIPTタグから外部のJavaScriptファイルを読み込むには、SRC属性にJavaScriptファイルのURLを指定します。もしjsという下層のフォルダにJavaScriptがある場合、次のようにフォルダ名も記載します。

<script src="js/print_msg.js"></script>

関連記事