uhyohyo.net

JavaScript初級者から中級者になろう

基礎第一回

このページの最終更新日：

JavaScriptの書き方

基礎のページでは、JavaScriptを1から解説します。JavaScriptはもともとインターネットブラウザ上で動くプログラミング言語として誕生しました。ここでは、それに倣ってブラウザ上、つまりウェブページの上でJavaScriptを動かしてみましょう。

ブラウザが表示するウェブページというのは、HTMLにより記述されています。この講座ではHTMLの解説はしません。HTMLが分からないという人は、軽くでいいのでどこかのウェブサイトで勉強しておくとよいでしょう。

さて、ウェブページ上でJavaScriptを動かすには、scriptという要素を使います。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <script type="text/javascript">
      alert("test");
    </script>
    <p>test</p>
  </body>
</html>

これを適当なhtmlファイルに保存して開いてみると、「test」というアラートが出ます。

さて、scriptタグを置く場所ですが、head内に置くのがよく見られますが、基本的にどこでもいいです。body内に置いてもいいですし、bodyの一番最後に置くパターンも実はそれなりにあります。

アラートを出す

先ほどのサンプルを見てみると、JavaScriptが書いてある<script>〜</script>内には、次の一行しかありません。

alert("test");

この一行がアラートを出す処理をしています。ちなみに、JavaScriptは（というか、ほとんどのプログラミング言語は）基本的に上から順番に処理が実行されていきます。この一行ですが、初めから解説するとなるとたった一行でも非常に大変な解説になります。

ちなみに、このアラートですが、実際にWebページで使わないほうがよいでしょう。今回は分かりやすいので採用しましたが、これが出ると他の操作ができなくなり、非常に邪魔です。

関数

まず「関数」というものを解説します。とりあえず、関数とは何かしらの機能を我々に提供してくれるということを分かってください。関数がもつ機能を使うことを「実行する」とか「呼び出す」といいます。数学で「関数」という用語がありますが、それとはまた結構違うものです。

関数は次のようにして呼び出します。

関数名()

今回の場合、「alert」が関数名です。つまり、alertという関数が持つ機能を呼び出すという意味です。

しかし、今紹介した形と、上のサンプルは多少違っています。上のサンプルでは、括弧の中に「"test"」というものが挟まっています。

これは「引数（ひきすう）」というもので、関数に与える情報です。

どういうことかというと、alertの場合、この関数はアラートを出すという機能を持つ関数ですが、ただalertを使っても、何を表示すればいいのか分かりません。そこで、この場合は何を表示するかという情報をalertに与える必要があります。これが引数です。もちろん、どういう引数を渡せばいいかは関数によって違います。

この場合、alertの引数は"test"ということになります。また、引数が2つ以上必要な場合もあります。その場合、「,」で区切ります。例えば、aaaという関数に3つの引数を渡したい場合、次のようにします。

aaa(引数1, 引数2, 引数3)

ちなみに、このサンプルでは「,」の後に余計な空白が入っていますが、JavaScriptでは自由に空白を入れることができます。ただし、「aaa」という関数名を「aa a」というように分けることができません。単語を分けると2つの別の単語と見なされるからです。あくまで単語と単語（より正確には、トークンとトークン）の区切りなどに空白を入れることができます。

さて、引数が「"test"」ですが、実際にアラートに出るのは「test」です。両端の記号（ダブルクォーテーションマーク）が抜けていますね。これはなぜかというと、両端の記号は、「ここからここまでが文字列である」ということを表しています。

文字列とは、「test」のように「文字の並び」のことです（ただし、0文字や1文字でも文字列です）。つまり、「"test"」が引数だというのは、実は「『test』という文字列」を引数として渡していたのです。

この記号を省略してしまうと、意味が変わってしまいます。文字列は「"」で囲むということを覚えましょう。（ちなみに、"test"のようにプログラム中で""を用いて文字列を表している部分を文字列リテラルと呼びます。）

だから、前のコードの「"test"」を"あああああ"などに変えると任意に出る文字列を変えることができますが、「ああああ"」のように"で囲まないとエラーが出てしまいます。

また、次のようなことができます。

alert(100);

「"」で囲んでいないのに、ちゃんと「100」と表示されます。

これはなぜかというと、この100は、文字列ではない別のものに解釈されます。それは数値です。JavaScriptには、文字列のほかに数値というものがあります。これは文字列ではないので、"で囲む必要はありません。（100のようにプログラム中で数値を表す部分は数値リテラルといいます。）

文の区切り

今までの解説で、最初のサンプルでまだ謎の部分が一つだけあります。最後の「;」です。

これは、ひとつの文が終わることを表す記号で、基本的に文の終わりにはこの記号をつけます。（ただし、JavaScriptではほとんどの;を省略することが可能で、;を省略してプログラムを書く流儀もあります。）

文とは、処理の一単位です。alert("test");でひとつの文ということになります。次回からは、2つ以上の文からなるプログラムが出てきます。