【初心者向け】プログラミングを学ぼう！JavaScript編２
こんにちは。引地啓です。
今回はJavaScript言語の記事第2弾です。
前回はHTMLファイル内に、scriptを書き込みましたが、今回はCSSの時のように別ファイルを作成して、そこにJavaScriptのソースコードを書き込み、HTMLに埋め込む方法で書きます。早速書いていきます。
HTMLファイルとJSファイルを作成する
まずはHMLファイルとJSファイルを作成します。デスクトップに新規でフォルダを作り、2つのメモ帳を保存しましょう。１つが「index.html」でもう１つが「main.js」と付けて保存します。
このようになります。
JavaScriptでソースコードを書くときは、基本的にはmain.jsの方です。
main.jsを編集するときは右クリックして、「プログラムから開く」で、メモ帳で開きましょう。
次はindex.htmlファイルにHTML言語でソースコードを書き込みます。
次にmain.jsにJavaScript言語でソースコードを書き込みます。
そして、index.htmlを開くと次のように表示されます。
varで、変数の宣言をする
var FONT = "48px monospace";で「FONT」に 「48px monospace」を代入するという意味になります。「monospace」というクラスを使用するとテキストが等幅で表示されるようになります。
ここでは「FONT」と「ca」と「g」という文字に、それぞれ＝で代入する文を書いています。FONTで文字フォントを48pxに決め、caに「document.getElementById('main');」を代入させ、ｇには「ca.getContext('2d');」を代入させます。
「getContext("2d")」オブジェクト
getContext("2d")はオブジェクトと呼び、getContext("2d")オブジェクトは、線、ボックス、円、などを描画するメソッドを持っており、2D描画コンテキストを取得します。ゲームを作るときなどに使います。
そして「g.fillText()」で表示させる文字を描画させます。
If文を使う
プログラミングを学ぶ上で必ず使用するもののひとつが、「If文」です。if文は、「もし～だったらA、それ以外はBになります」といった、分岐を作るためのものです。
先ほどのindex.htmlファイルを簡単にします。
そして、次のように書きます。
今度のvarでは、aとbに数字を代入してます。
「 if(a < b){} 」は、「もしも、aよりｂが大きい場合は、｛｝の中の処理をしますよ」という意味です。
｛｝には「document.write」とありますが、これは文字を描写するという意味です。
描写する文字を（）内に書き、描写する文字は「 ” ” 」で必ず囲みます。
これを実行したらこうなります。
aは10で、bは15なので、コンピューターがしっかりどちらが大きい数字か判断して文字を表示させてます。
なので、aを15にしてbを10にすると、なにも表示がでてきません。
aが大きかった場合の処理を書きます。
次の条件を書くときは「else」と入れて｛｝で処理する文を囲みます。これを実行するとこうなります。
数が同じの時の条件も加えることができます。
3つ目の条件が出てきた場合は、2つ目の条件は「else if( 条件)」をつけ、どちらも当てはまらない場合に「else｛処理｝」が表示されます。
結果はこうなります。
このように複数の条件にそれぞれの処理を行えるのが「 if 文」です。ゲームを作るときにはほぼ必ず使います。
例えば恋愛ゲームで、告白をするかしないかでストーリーを分岐させるとか、選ぶヒロインでもストーリーを分岐させないといけません。
格闘ゲームでも、ダメージを受けた後HPがゼロになった場合と、まだHPが残っている場合で分岐させたりしないといけません。
もちろんそれ以外でも使えるので、この if 文は必ずマスターしましょう。
switch case文を使う
これも if 文と同じように分岐させる文ですが、switch case文を使ったほうがいい場面もたくさんありますので、こちらも同時に覚えましょう。書き方はこんな感じです。
switch case文は、最後にbreakを必ず入れます。そして最後にcase以外の場合の「default」を入れます。
結果はこうなります。
whileループ（繰り返し処理）を使う
whileループは名前の通り、繰り返しの処理を行います。
whileで大事なのがカウント処理で、数値が増えないとループから抜け出せなくなり、延々と処理をし続けます。カウント処理は例えば「a++；」というように書きます。
５未満を表示させる処理を書きました。赤線がカウント処理です。
<br>で改行しています。
0から４まで「document.write」で表示させてます。
これは200とは300、10000でも、条件を指定して処理を続けさせることができるので大変便利です。
do whileループ
「whileループ」は頭に条件を入れるので、処理に入る前に条件判定しますが、「do whileループ」は最低1回は処理をした後に、条件判定するので、「必ず１回は処理をする」ようになっています。whileループは条件に満たなければ処理をしません。
２つの処理をそれぞれに書いています。それぞれの結果はこちらです。
このように全く同じ処理が行われます。
大事なのは,do whileは「最初は必ず処理を行い、その後条件に当てはまるか判断する」ことです。その時に合った処理になるように上手く使い分けてみましょう。
Forループ
ループはこちらのforループを使う事が多いと思います。
「for(初期化処理； 条件判定； インクリメント)」というような書き方をします。
インクリメントとは、「繰り返し処理が終わった後に実行されるものです。
大抵は「for(var a = 0; a<10; a++ )」というような形で書かれます。
これもゲームで良く使う文なので必ず覚えたいです。
forループはｂで書きます。
このように書きます。今回は10未満の条件にしています。
結果はこちらです。
Forループは10未満までループさせる処理にしているので、9まで表示されています。
「break；（ブレイク）」と「continue；（コンティニュー）」
ループを抜けるための「break；」と、ループを飛ばすための「continue；」があります。
Forループの中に if 文を入れて、条件を付けてbreak；を入れてループから抜けたり、continue；を付けてループを飛ばしたり出来ます。
上がbreakで6で処理終了、下がcontinueで2だけ飛ばします。
結果はこちらです。
このようになります。
他にもたくさんありますが、このあたりは少なくとも使えるようにしておきたいものです。この処理を、自分が思うように実行できるようになったらかなり楽しいです。
ちょっとしたゲームなら作れるようになれると思います。
最後まで見ていただきありがとうございます。
今後ともよろしくお願いします。
またお会いしましょう。
