文字を出力してみよう

第一回では、数字を足し算したり文字を作ったりしました。 第二回では作った文字を表示してみます。表示ってなんやねん?というのはやってみたら分かります。

理屈はおいといて、以下のコードを実行してみましょう。

結果:

 

文字がウィンドウに出てきたと思います。おーすげー。プログラムっぽい。

文字を表示するには、MessageBox.showというのを使います。
これを使うと、画面にメッセージボックスが表示されます。
(実は文字を表示するのはちょっと難しい問題があるのですが、その事についてはコラムで解説します)

MessageBox.showと書いた後に、かっこ、つまり()をつけて、中に表示したい文字を入れます。

おぉ、突然難しくなりましたね。
分からん!と思うかもしれませんが、なんだか良く分からない時は似たようなのを幾つか見るのが良いです。

という事で幾つか他のも見てみましょう。 なにはともあれ、まずは「むぇ〜〜〜」を表示してみます。

結果:

 

なんだか難しそうなのは相変わらずですが、良く見ると一つ前の例とほとんど同じです。どこが違うか良く見比べてください。
表示させたいメッセージを変えたい時には、どこを変えたらいいか分かるでしょうか?

もう一つ見てみましょう。クラウド女学院、と表示させたければこうなります。

結果:

 

この位見ると、なんとなくどう使えばいいのか分かってきたでしょうか? 上のコードを変更して、「こちんこちん」とかいろいろ表示してみて下さい。

さて、第一回では文字を作る他に、もうひとつやった事があります。 覚えていますか?数字の計算です。

ここでは「12 引く 3」を計算して表示してみましょう。 以下のコードで実行ボタンを押すと何が起こると思いますか?

結果:

 

なんと、「12-3」と表示されずに、それを計算した結果である「9」が表示されてしまいました。 JavaScriptでは、カッコの中を計算した結果が表示されます。 何言ってるか分からないならあんまり気にしなくてOKです。

第一回ではもうひとつ、文字の連結、という事をやりました。覚えていますか? ここでは「こーしーを」と「しゅるしゅるする」を連結して表示してみましょう。

結果:

 

ここでも表示されるのは、つなげた結果になっていますね。

課題: 「もぅ、しみっしみ、もぅ」と表示してみよう

MessageBox.showを使って、もぅ、しみっしみ、もぅと表示してみて下さい。 なお、この課題は第二回で一番難しいと思います!

結果:

答え:
MessageBox.show("もぅ、しみっしみ、もぅ");

JavaScriptでは文字は表示出来ない!?(環境ってなんなのさ)
実は、JavaScriptには文字を表示する機能はありません。
このシリーズで使っている「MessageBox.show」という物は、説明の為に私が作った物で、普通のJavaScriptには存在しません。
でもツクールMVでもwebでもSecond LifeでもUnityでも文字は表示しています。これはどうした事でしょう?
 
これらは、実はJavaScriptを動かす側が勝手に決める、という決まりになっています。動かす側、というのは、ツクールMVとかwebとかUnityとかSecond Lifeとかの事です。
これら、JavaScriptを動かしている人を「環境」と呼んだりします。
JavaScriptでプログラムを書く為には、普通「JavaScriptプログラムの勉強」と、「それを動かす環境の勉強」の両方をする必要があります。
 
なんてこった、大変じゃないか、と思うかもしれませんし、実際ちょっと大変です。
ただ、環境はどれも似ている事が多いので、一つ何かのプラグインの書き方とか覚えてしまえば、他の環境を勉強するのは、最初思うほどにはたいした事ありません。
 
また、世の中のプラグインなどの入門サイトなどが難しく感じるのは、プログラムと環境を一緒に説明しているからです。
プログラムの方だけこのシリーズでマスターしてしまえば、環境の所についての入門だけ注意して読めば良くなるので、以前全然分からなかった入門サイトもずっと簡単になります。
 
本シリーズでは、基本的にはツクールMVやUnityの環境を参考に、なるべく似ているが、一部説明の為に簡単にした物を作って使っていきます。
本シリーズで勝手に決めている部分についてはこうしてコラムの形で触れていきますが、最初のうちはあまり細かい事は気にしないで、全部JavaScriptだと思って進めていってOKです。
 
そもそもこのコラムも最初は意味分からないですよね。それでOKです。そのうち分かる日が来るだろう、くらいに思って先に進んでください。

セミコロンをつけよう

セミコロンってなんやねん!って思うかもしれませんが、「;」こういう記号です。 この変な記号、;がセミコロンって奴です。 点2つで、下がにょろってなってる奴。

さて、JavaScriptでは、行の最後に;は、つけてもつけなくても良い、という決まりになっています。 例えば以下の二行は、どちらも正しいJavaScriptのコードです。

結果:

 

つけてもつけなくてもいいって何なの…って思うかもしれませんが、JavaScriptはそういう奴なのです。
で、理由は話すと長くなるので話しませんが、本シリーズでは今後はセミコロンをつける事にします。 理由なんて気にせず、そういうもの、と思って飲み込んでください。

子供「ママー、なんで?」
ママ「なんでもっ!」

という感じです。

セミコロンをつけると、同じ行にいくつも、MessageBox.showを書く事が出来ます。

結果:

 

いのしかちょう?(意味不明)
あまり同じ行に並べても良い事はありませんが、こんな事も出来ますよ、という事で。

セミコロンっているの?
セミコロンをつけるかどうかは、JavaScriptでは少し論争のある所です。
 
だいたいの人はつけていると思いますが、JavaScriptには「セミコロンオートインサーション」という、セミコロンを忘れてるっぽかったら勝手につけて解釈する、という機能があり、これが意図的につけないコードをつけ忘れと勘違いして、非常に分かりにくいバグを生んだりします。
そこで最初からつけない方が良いのでは無いのか、という人も結構居ます。
 
ですが、このシリーズでは全てつける事にしました。理由としては、このコースの目的が、JavaScriptだけでなく、JavaScriptに「似た」言語でプラグイン等を書く場合も視野に入れているからです。
JavaScripに似た言語、例えばUnity Scriptや吉里吉里のTJS、SecondLifeのLSLなどは、セミコロンが必須となっています。
 
何も考えずにつけておくのがゆとりの生き様って奴でしょう。

コメントをつけよう

JavaScriptにはコメントという物をつける事が出来ます。 コメントとはプログラムの結果には影響は無く、人間があとでコードを読む時の為のものです。説明とかメモを書いておきます。

コメントには二種類あります。順番に見ていきましょう。

一行コメント

プログラムの中に、「//」が入っていると、そこから行の最後までが、コメントになります。

結果:

 

コメントの部分は実行されません。 実行されない物になんの意味があるのか?と思うかもしれませんが、 ちょっとコードのそばにメモを書いておきたい、とかいう時に使います。
このシリーズでも今後使っていく事になるので、ありがたさはその時に分かります。今はコメントという物があるらしい、という事だけ知っておいてください。

メモの他に、コードの一部を一時的に削りたいけど、すぐ後に戻せるようにしておきたい、 という時にも、コードの一部をコメントにします。

下のテキストの先頭の//をつけたりとったりして実行してみてください。

結果:

 
コードの一部をコメントにして実行されなくする事を、「コメントアウト」とか言ったりします。 カタカナとか使ってなんか偉そうですよね。

なお、行の途中に//があると、そこより右側だけがコメントになります。

結果:

 

コメントはメモを書いておけるだけで、別になんの意味もありません。

課題: まんなかの行をコメントにせよ

以下の三行のプログラムのうち、二行目だけをコメントにしてみてください。

結果:

答え:
MessageBox.show("ここは表示させたまま");
// MessageBox.show("ここの行をコメントにせよ");
MessageBox.show("ここも表示させたまま");

 

こんな風にプログラムの一部を一時的に無効にしたり、メモを書いたりするのがコメントです。

複数行コメント

JavaScriptには二種類コメントがあります。

これまで見てきたのは一行コメントとという物ですが、JavaScriptにはもうひとつ、複数行コメントという物があります。

複数行コメントは、/*から始まって、*/で終わります。間に挟まれた物はコメントとなります。 例を見てみましょう。

結果:

 

複数行コメントはその名の通り、複数行を一気にコメントに出来ます。 複数行コメントもコメントなので、動作には影響がありません。

課題: 上4行を一気にコメントせよ

以下の五行のプログラムのうち、上四行を、複数行コメントを使ってコメントにして、最後のここだけ残すだけ表示されるようにしてください。

結果:

答え:
/* MessageBox.show("一行目、ここはコメントアウト");
MessageBox.show("二行目、ここもコメントアウト");
MessageBox.show("三行目、ここもコメントアウト");
MessageBox.show("四行目、ここもコメントアウト");
*/ MessageBox.show("ここだけ残す");

 
このように、複数行コメントという物を使うと、プログラムの複数の行を一気にコメントに出来ます。 一時的にたくさんの行を無視したい時や、長いメモを書くのに便利です。

昔は謎のアニメのSSなどがコメントで書かれていた事も多かったのですが、最近は減りましたね…

コメントに意味がある場合もある
JavaScriptのコメントは動作に関係無い、というのは正しいのですが、世の中のプラグインなどでは、こっそりこのコメントに意味を持たせている環境もあります。
 
例えば、ツクールMVのプラグインでは、コメントの中に@plugindescとか@authorなど、アットマークで始まる行は、プラグインの管理画面に表示されます。また、@paramでパラメータを設定出来たりします。
これらはJavaScriptの機能という訳では無いので、JavaScriptの本などには使い方は載っていません。あくまでツクールMVが勝手にやっている事なので、ツクールMVのドキュメントでこれらの特殊なコメントの使い方は勉強する必要があります。

第二回 まとめ

さて、第二回はいかがでしたでしょうか? 幾つか良く分からない所も残ったと思いますが、それは今後説明していくので、現時点ではなんとなく分かってもらえればOKです。

第二回では以下の事を学びました。

  • MessageBox.show("何か") という形で文字が表示出来る
  • 行の最後はセミコンという奴、つまり;という点二つの下がにょろっとしているのを付ける
  • コメントというのがあって、一行コメントと複数行コメントというのがある
    • 一行コメントは//で始まり、そこより右側がコメントになる
    • 複数行コメントは/*で始まり、*/で終わる。複数行を一気にコメントに出来る
    • コメントは実行する時には無視されるので、メモなどを好きに書いておける

なんだかいろいろ出てきましたね。
文字を表示する所は今後詳しく話をしていくので、まずは何も考えずにコピペで表示出来るようになればOKです。