第30回：JavaScript講座本編1「文字出力と変数」
どうも、シノです。
本日、初めてBluetoothのイヤホンを買いました。
ビックカメラのポイントが2000ptちょっとあったので、最初は試しということでポイントで全部払えるくらいのを。
予想以上に音質がよくて、びっくりしました。これならもっと早く買えばよかった。
どうも、無線だとどうしても音質が下がってしまうんじゃ…という固定概念がありました。反省。
ちなみにこれです。オススメなので是非どうぞ。
さて、ここは別に商品紹介コーナーではなく、講座です。
ここからが本番です（笑）
今回は、JavaScript講座本編第1回！
ついに、JavaScriptを書いていきます。
まずは、文字の出力と、ほぼ確実に使うであろう変数について見ていきます。
早速、今回の目次です。
0.前回の復習
前回は、そもそもJavaScriptって何？ってことを解説しました。
まあ、難しく考えなくても、とりあえずブラウザでなんか計算とか処理とかしてくれるやつなんだな程度でいいです。
1.「Hello World!!!」
いきなりこんなこと言われて「は？」と思う方もいるかもしれませんね。
これは、よくプログラミングの最初に出力をする文字列です。なんでこれなんだろう…
とまあ、そんなことは置いておいて、これを出力してみます。
今までと同様に、新しいHTMLファイルを作成してください。ファイルの作り方はこちらをどうぞ。
あ、挑戦する方は是非JSファイルに書いてHTMLで読み込んでみてください。やり方はこちら。
そして、以下の内容を記述します。
<script>
document.write("Hello World!!!");
</script>
この3行です。そうして表示すると…
こんな表示になったのではないでしょうか。
これで、文字列が表示できました！
1-1.とりあえずの方向け解説
このdocument.write("文字列");は、そこの部分が、HTML上ではそのまま文字列に書いた内容に置き換わるイメージです。
なので、上の3行を1ファイルに書いた場合、HTMLとして「Hello World!!!」と書いただけと同じになります。
処理した結果をHTMLで表示する場合などに使えます。
もちろんですが、これの<script>から</script>までを別のタグ(h1など)で囲むと、それもしっかり反映されます。逆に、この文字列表示でタグを書いてもOKです。
例として、h1でscriptタグを囲むとこんな感じ。
あ、iframe内だと目次に反映されないんだ…いえ、こっちの話です。
それと、最後についてるセミコロンですが、一応省略しても動きはします。
でも、処理の切れ目を表す印なので、しっかり入れるようにしてください。
1-2.しっかり理解したい方向け
いきなり難しいことを書くので、よくわからない人は飛ばしてください（笑）
まずは、ソースコードを見てみましょう。
document.write("Hello World!!!");三つに色分けしました。一つずつ見ていきましょう。
・document
これは、HTML文章全体を表します。このJavaScriptを実行するHTMLファイルに書かれている文章データを表しています。このページから情報を取得したり、逆に情報を表示したりするときは、基本的にこのdocumentから情報を出し入れする対象を持ってくるんですね。
また、この中にはあらかじめ決まった処理が定義されていて、それを呼び出して処理させることもできます。今回はこちらです。
直後にあるドットは、このHTML文章の「何を持ってくるか」というのを後ろに書くためのものです。今回は、writeってやつを持ってきています。
・write(文字列)
documentの解説の中でwriteって書きましたが、正確にはwrite(文字列)です。これは「関数」といって、情報を渡して、何か処理をするまとまりだと思ってください。渡すものがない関数もありますが、その場合でも括弧は必須です。
今回のwrite関数は、「文字列を渡して、渡した文字列をHTML文章として表示する」という意味になります。つまり、この中にHTMLタグを入れると、その通り表示されます。
・"Hello World!!!"
実際に表示している文字列のことです。
これは、関数から見た場合、「引数」と言います。関数に渡す情報ですね。
で、もう一つ名前を。このように直接記載する文字列や、その他ソースコードに書く具体的な数字などのことを「リテラル」と言います。これは、あとで解説する変数内でも触れます。
なお、文字列の場合は、ダブルクォーテーション(「"」)で囲む必要があります。ここからここまでが文字列なんだよと教えてあげる必要があるんですね。
ここまで紹介した用語を使って言うと、この処理は
「"Hello World!!!"というリテラルを、documentっていうこのJavaScriptが書かれているHTML文章データの中にあるwrite関数という処理の塊に渡して、文字を表示させている」
となります。
たった1行ですが、かなり情報量が多いですね。
特に、documentに関してはこの段階だとまだ理解しづらいと思います。
理解できない方は、それでもいいので先に進みましょう。あとで戻ってくればわかるかもしれません。
2.変数を使ってみよう
さて、メインコンテンツ2つ目。変数にいきます。
変数…と言えば、何を思い浮かべるでしょうか。
多くの方は、中学数学でやった数学の変数ですかね。xとかyとか。
その理解でほとんど問題ないです。ただ、「数字以外も入れることができる」ことが違いでしょうか。
改めて…変数とは、「数字や文字列などの情報を格納しておく箱」のことです。
変数を使うときは、これを変数として使うよと定義してあげましょう。これを「変数を宣言する」と言います。
var (変数名);
これだけで、変数名のところに書いたものを変数として使うことができます。
でも、用意するだけでは使えないので、情報を入れてあげましょう。この変数に値を入れることを「代入する」と言います。
この入れる情報について、具体的なものをリテラルといいます。
例えば、数字の1や2、100などだったり、上の"Hello World!!!"という文字列もそうです。
ただし、文字列の場合、ダブルクォーテーション(「"」)で囲ってあげてください。その中身が実際の文字列になります。
また、一部の特殊な文字(バックスラッシュ「/」、ダブルクォーテーション「"」など)をこの文字列に入れたい場合、エスケープシーケンスというものを使う必要があります。上手く表示されない場合、この特殊な文字の前に半角スラッシュ「\」(表記によっては半角の￥マーク)を入れてあげましょう。
さて、じゃあ変数に値を代入しましょう。
(変数名) = (リテラルなど);
代入は、イコールを使います。プログラミングにおいては、ほとんどの場合、イコール1つは代入を表します。
なお、宣言と代入を同時に行うこともできます。
var (変数名) = (リテラルなど);
右側にリテラルなどと書きましたが、もちろん別の変数もここに入れることができます。
具体的な例を出しましょう。
var a = 1;
var b = 2;
var c = a;
document.write(c);
c = b;
document.write(c);
こんな感じでしょうか。これをscriptタグで挟んで実行すると、以下のようになります。
あれ、「1と2」とか「cが2つ」とかじゃなくて「12」が出たぞ…って方、それで正解です。
さっき、document.write(文字列);でHTML文章としてそこに出力すると書きました。
で、HTMLでは改行は…<br />を入れないと改行されないんですね。以前解説しました。
まず、これが1行で出力されている理由です。
次に、ccと表示されていない理由。
文字列を表示してみる例では、Hello World!!!というものをダブルクォーテーションで囲っていました。
これが、文字列を表すリテラルであるという意味になります。
で、今回のcにはダブルクォーテーションがついてません。つまり、リテラルではないんですね。
更に、前でcを変数として宣言しています。
このように、変数を入れると、その中に入っているものをリテラルとして渡すイメージになります。
今回、1個目の出力ではcの中にaが、つまりその中に入っていた1を渡しています。
そのあと、bを代入することで、cの中身が2に置き換わったんですね。
これが、ccではなく12と出力された理由です。
では、ここで問題です。以下の出力になるように、修正してみてください。
できた方、すばらしいです。文句なしで先に進んでいいでしょう。
やろうとしたけどできなかった方、学ぶ姿勢が完璧です。どんどん使ってどう書くか覚えていってください。
何もせず続きを見ようとしてる方、まずは一回自分で考えてみましょう…これまでの内容で書けるようにしたつもりです。
ちょっと改行を挟みましょうか。ヒントを2つほど書きましたが、それ以外にも方法はあります。
ヒント1です。追加するのは1行。
ヒント2です。追加するのは、「document.write(何か);」。これをどこかに入れてあげてください。
最初の12が、改行されて1と2になってますね…
答えです。以下1行を、document.write(c);の1個目と2個目の間に追加します。
document.write("<br \/>");これを含めたソースコードは以下の通りですね。できなかった方は、この通りに直して再度表示してみてください。
var a = 1;
var b = 2;
var c = a;
document.write(c);
document.write("<br \/>");
c = b;
document.write(c);
なお、これ以外にも方法はあります。
とにかく、変数の中身が2つ、改行されて出力されていればそれで正解です。
あ、ただしHTMLで
1<br />2
とか書くのは反則ですよ（笑）
ちなみに、HTMLでscriptタグを使って書いている方は以下のような例でも可能です。
これまで解説していませんでしたが、同じHTMLファイルなら、以前別のscriptタグ内で定義した変数を使用することができます。
<script>
var a = 1;
var b = 2;
var c = a;
document.write(c);
</script>
<br />
<script>
c = b;
document.write(c);
</script>
もう一つ、文字列も入れてみましょう。
var str = "Hello World!!!";
document.write(str);strという変数名にしたのは、プログラミングでよく文字列をStringというからです。ここに入り始めるとちょっとややこしくなるので名前だけ。
で、上のものを表示しても、最初の例と同じものが出てくると思います。
まとめ
いかがだったでしょうか。
これで、とりあえず計算はできるようになりました。あと、その結果や他の文字列の表示もですね。
次は、基本的な処理である「条件分岐」、「繰り返し」についてやろうと思います。いよいよプログラミングらしくなってきました。
あ、私の更新を待つ必要は一切ありません。気になる方はどんどん自分で調べてみましょう。
Twitterでも更新情報を呟いてますので、よかったら覗いていってください。
次回：条件分岐(2020/1/16投稿しました！！！)
それでは。
