ちゃんと学ぶ、JavaScriptJavaScriptで画面に文字を表示しよう

記事を共有：

JavaScriptを学ぶに当たって、まずは一番基本的な「画面に文字を表示する」というプログラムを作成してみましょう。

先の手順で、基本のHTMLを準備したら、bodyタグに次のように入力します。

<body>
  <p>12345 + 67890 = ?</p>
</body>

これで、ファイルをWebブラウザで表示したら、次のように計算式が表示されます。

ではこの時、この計算結果はなにになるでしょう？　これをJavaScriptに計算させて、答えを表示してみましょう。

JavaScriptを書くにはscriptタグを書こう

HTML内にJavaScriptを書く場合は「script」というタグを使います。次のように追加しましょう。

<p>12345 + 67890 = 
<script>

</script>
</p>

このタグの中に、JavaScriptのプログラムコードを書くことができます。次のように追記しましょう。

12345 + 67890 =
<script>
  document.write(12345 + 67890);
</script>

これで完成です。ファイルを保存して、Webブラウザに表示してみましょう。

瞬時に計算結果が表示されました。なお、うまく表示されない場合は次の「デバッグをしよう」を確認しましょう。

書いたプログラムを確認しよう

ここで「script」タグの間に書いた内容が、これから学ぶ「JavaScript」というプログラミング言語で書かれた、プログラムの内容です。次のようなプログラムを書きました。

document.write(12345 + 67890);

ここで重要なのは「write」という記述です。これは、JavaScriptの「命令文」で「メソッド」といいます。JavaScriptでは、このメソッドというものを操りながら、ブラウザにさまざまな「命令」を出すことができます。

オブジェクトとメソッド

例えばここで記述した「write」という命令は「表示してください」といった意味になります。ではどこに表示するのでしょう？　それを表すのが、メソッドの前に書かれた「document」という部分です。

これは、writeメソッドの「対象」を表すもので「オブジェクト」といいます。documentというオブジェクトは「Webブラウザの画面」を表していて、つまり「document.write」という記述で「Webブラウザの画面に表示して」という命令になります。

パラメータ

続いて、メソッドの後にはかっこが続きます。この中に書くのが「なにを？」を表すもので、これを「パラメータ」といいます。ここでは、「12345 + 67890（の計算結果を）」という意味となり、これによってこのプログラム全体で「12345 + 67890の計算結果を、画面に表示して」という意味の命令文になります。

そして、最後のセミコロン（;）は文章の終わりを表します。こうして、プログラムが完成します。改めて、JavaScriptの一番基本的な書式を紹介しておきましょう。

オブジェクト.メソッド(パラメータ);

となります。

JavaScriptはこのように、かなり独特な書式で英単語を組み合わせながら文章を作っていきます。最初のうちは、この単語（＝メソッドやオブジェクト）と、文法（＝書式やパラメータ）などに戸惑ったり、分からないものを調べなければならないなど、苦労する部分が多いですが、それを乗り越えたら、自由にプログラムを作成して便利なサービスを作ったり、クライアントの要望にあわせたシステムを開発したりできるようになります。

JavaScriptは、他のプログラミング言語に比べれば、かなり簡単に作られています。また、JavaScriptを理解できれば、他のプログラミング言語への足がかりにもなります。是非諦めずに、一歩一歩学習を進めていきましょう。

文章を表示しよう

writeメソッドは、画面上にさまざまなものを表示することができます。例えばここでは「こんにちは」と画面に表示してみましょう。

<p>
   <script>document.write(こんにちは);</script></p>

しかし残念ながら、これはなにも表示されません。

なぜなら、JavaScriptのルールに従っていないためです。writeメソッドのパラメータ（に限らず）、「文章を扱うときは両端にクオーテーション記号が必要」というルールがあります。

そこで、次のように変更します。

<p>
    <script>document.write();</script>
</p>

これで表示されるようになります。

なぜこのようなルールがあるかは後述しますが、JavaScriptにはかなり細かくさまざまなルールが決められていて、それに従わないと全く動作しなくなってしまいます。

例えば、ここまでプログラムをすべて小文字で記述しましたが、大文字に変えることも許されていません。

<p>
    <script>DOCUMENT.write('こんにちは');</script>
</p>

ただし、すべてが小文字かと言えばそんなことはなく、逆に「大文字で書かなければならない」というルールの場合もあります。

1つ1つルールを確認しながら、慎重に打ち込むようにしましょう。

曖昧なルール

このように、厳格なルールが定められているJavaScriptのように思えますが、曖昧な部分は曖昧だったりします。

例えば、文字列の両端のクオーテーション記号は、シングルクオートの他に、次のようなダブルクオートもあり、これはどちらでも利用できます。

<p>
    <script>document.write("こんにちは");</script>
</p>

また、文章の最後に書くセミコロン（;）も省略しても動作します。

document.write("こんにちは")

このように、厳密さと曖昧さがあるプログラミング言語ですが、慣れてきたらこの曖昧さが心地よくなりますので、まずは厳格なルールをしっかり理解しながら学習を進めていきましょう。

前のレッスン次のレッスン