In 'n' Out | JavaScriptを扱うための基礎知識

JavaScriptを学ぶ前に知っておきたいこと

JavaScriptは、HTMLやCSSと組み合わせて使われるプログラミング言語です。
しかし、いきなり書き方や文法を学び始めても、全体像が見えていないと理解しづらくなります。
ここでは、JavaScriptを本格的に書き始める前に、JavaScriptはどのようにページに組み込まれるのか、どんな考え方で扱われるのかといった基礎的な前提を整理します。

JavaScriptは書いただけでは何も起きない

HTMLは書けば表示され、CSSは指定すれば見た目が変わります。
一方で、JavaScriptは書いただけでは何も起きません。
JavaScriptは、処理や判断を行うための言語です。
そのため、コードが実行されて初めて結果が現れます。

コード例

alert('JavaScriptが動きました。');

このコードは、ブラウザにメッセージを表示する命令です。
正しく実行されると、ブラウザにポップアップが表示されます。
しかし、このコードをそのまま用意しただけでは、何も起きません。
JavaScriptは、どこかに書いて、読み込まれ、実行される必要があります。
その前にどのように書けばいいかをまず解説します。

構文

<script> 
    JavaScriptの内容
</script>

HTMLにJavaScriptを適用するときは、scriptタグを使います。

コード例

<script> 
    alert('JavaScriptが動きました。');
</script>

このコードをHTML内に記述すればJavaScriptが実行されます。
書き方はもう1つあります。

構文

<script src="ファイルパス"> </script>

この書き方は最初に紹介したコード例を外部のファイルとして使用し、そのファイルを読み込むという実行方法です。
一般的に外部jsと呼ばれます。
なお、当サイトでは基本的に外部jsを採用します。

コード例

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

//alert.js//
alert('JavaScriptが動きました。');

HTMLとJavaScriptファイルを組み合わせて使いますが、これでも同じ動作になります。
なお、外部jsのファイル名には、日本語などの2バイト文字は使用しないようにします。
英数字とハイフン、アンダースコアのみを使うのが一般的です。
これはJavaScriptの文法の問題ではなく、環境によって正しく読み込まれないことがあるためです。

書き方はなんとなく理解できたと思いますが、それではどこに書けばいいかに触れていきます。

書く場所は複数存在する

HTMLの中に直接書く方法もあれば、別のファイルとして用意したJavaScriptを読み込む方法もあります。
どれか一つが正しいという話ではなく、目的や状況に応じて使い分けられます。

HTML内に記述する場合

コード例

<body>
    <h1>JavaScriptを読み込みます。</h1>
    <p>この文章が表示されてからポップアップが現れます。</p>
    <script>
        alert('JavaScriptが動きました。');
    </script>
    <p>ポップアップが現れた後にこのテキストが表示されます。</p>
</body>

動作例

ここをクリックすると別タブで動作が確認できます。

このコードを読み込むと、ブラウザにポップアップが表示されます。
しかしポップアップが出るタイミングは1つ目のpが表示された後です。
ポップアップを閉じると2つ目のpが表示されます。
このようにHTMLに記述した場所により実行するタイミングが変わります。
ただし、ブラウザによって描画やスクリプトの実行タイミングが異なるため、必ずしも理論どおりの順番にならないことがあります。
JavaScriptの実行順として理論上は誤りではなく、画面に表示される順序を保証するものではありません。

head内に記述する場合

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script>
    alert('JavaScriptが動きました。');
  </script>
</head>
<body>
    <h1>JavaScriptを読み込まれた後です。</h1>
    <p>もう処理が終わったのでもうポップアップは現れません。</p>
</body>
</html>

動作例

ここをクリックすると別タブで動作が確認できます。

このコードを読み込むと、ページの内容が表示される前にポップアップが表示されます。
閉じるとポップアップはもう現れず、ページの内容が表示されます。
これはHTMLが上から読むという性質上、head内をブラウザが先に見るため、内容を後回しにしてJavaScriptが実行されます。
決してheadに書いてはいけないわけではありません。

なお、外部jsを使用した際も同様に読み込む位置で実行されるタイミングが変わります。
また、最初に重いJavaScriptを読み込むとロード時間がかかり、内容の表示に時間がかかるため、基本的には閉じbodyタグの前に配置するというのが暗黙のルールです。

JavaScriptの書き方

JavaScriptでは、書かれた内容を処理や命令として解釈します。
そのため、文字をそのまま記述すると、命令や名前として扱われ、正しく動作せず、エラーになります。

コード例

alert(JavaScriptが動きました。);

この書き方では、文字が囲まれていないためエラーになります。
JavaScriptで文字を扱う場合は、クォーテーションで囲む必要があります。

コード例

alert('JavaScriptが動きました。');

このように書くことで、JavaScriptは文字として正しく認識します。
なお、ダブルクォーテーションで囲むことも間違いではありません。
ただし、HTML内でidやclassを指定する際に使われる記号と区別しやすくするため、実務ではシングルクォーテーションが使われることが多くあります。
当サイトでも、その考え方に合わせてシングルクォーテーションを使用します。

文の終わりとセミコロン

JavaScriptでは、1行の処理の終わりにセミコロンを付けます。
セミコロンは、ここで1つの処理が終わることを示す役割を持っています。
省略できる場合もありますが、明示的に書くことで意図しない動作を防ぐことができます。

関数の呼び出し

alertは関数と呼ばれるもので、関数は()を付けることで実行されます。
()の中には、関数に渡す内容を記述します。
他にも様々な関数がありますが、仕組みについてはその都度説明しますので、ここで理解をする必要はありません。

コメントの書き方

HTML・CSSと同様、コメントは処理として実行されない説明文です。
コードの補足やメモとして使用されます。
1行のコメントは、//から始め、複数行のコメントは、/* と */で囲みます。

コード例

//alert.jsの内容
alert('JavaScriptが動きました。');
/*
alertは関数です。
文字列はシングルクォーテーションで囲みます。
*/

コメントは動作には影響を与えないため、安心して記述できます。
JavaScriptでは、コメントが重要になる場面が多くあります。
ここで何を処理させたかコメントを残すことで、可視性が上がり備忘録としても利用できます。
また、処理を試したい場合もコメントで対応することで、削除する必要がなくなるのでとても便利です。