WEB開発で使われるJavaScriptの基本の解説です。
「とりあえずこれだけ知ってればなんとかなるよ」というくらい超基本部分を説明します。それ以外の部分は追々少しずつ覚えていけばいいです。
プログラミング初心者にはすべてチンプンカンプンなことだと思うのでいきなり全部理解しようとせず「なんとなくわかった気がする」程度でOKです。使ってるとそのうち分かってきますから(‘ω’)ノ
JavaScriptはC言語の仲間
まず最初にJavaSciprtという言語について簡単に説明します。JavaScriptはC言語というプログラム言語の仲間です。
C言語とは1972年に誕生した古い言語ですが未だに開発の中心にいるすごい言語です。
すごい言語なのでC言語から派生した言語がたくさんあります。JavaScriptもそのうちの一つです。
これら派生言語の基本文法はC言語と同じです。だから一つ覚えると他の派生言語もなんとなくわかるようになります(基本文法の部分だけね)。
なのでどれか一つ覚えれば他の派生言語を覚えるときは少し楽ができます。
まずは準備
最初にJavaSciprtの勉強の準備をしましょう。
とりあえずwindowsのメモ帳を開きます。
<html> <body> javascriptの練習 <script> </script> </body> </html>
メモ帳に上の内容をコピーして貼り付けてください。そして「index.html」という名前でデスクトップに保存してください。
次はchromeを起動してこのindex.htmlをchromeにドラッグ＆ドロップして開きます。左上に「javascriptの練習」と出ていればOKです。
次にchromeの右上の点々になってるボタンを押して「その他のツール」→「デベロッパーツール」を開いてください(わからない人は下の図を見てね)。
すると右側に何やら枠が表示されます。
これで準備OKです。
演算子について
演算子とは＋とかーとか計算に使う記号のことです。
- + 足し算
- – 引き算
- * 掛け算
- / 割り算
- % 割り算のあまりを出す
- = 代入
プログラムでは「＝」は等号ではなく代入を意味します。代入とは入れるということです。入れるという意味に関しては次の変数で説明します。
「%」は割り算のあまりを出す記号で例えば「８%3」という式だった場合余りの「２」が答えになります。
また演算子には比較を行うものもあります。
「<」「<=」「>」「>=」「!=」「==」
「<」「>」は算数で使うのと同じです。「=」がつくと以上または以下ということになります。
「!=」は等しくないことを意味します。
「==」は等しいです。「=」一つは代入なので比較の時は2つ並べて使います。
変数について
変数とはプログラムで数字などのデータを入れておく入れ物みたいなものです。
この変数はC言語では「型」というものがありますがjavascriptにはありません。この型とは変数に入るデータの内容が文字ならchar型、整数ならint型みたいに決まっていて違う型のデータを入れられないようになっています。
javascriptでは型が無いので簡単な気がしますが型が無いことによって生じる問題もあります(ここでは説明しません)。
変数の使い方は
var kotae = 3 + 5;
みたいな感じで書きます。var は新しい変数の宣言です。kotaeは変数の名前です。この式では「3+5」の答え８が変数kotaeに代入されます。上の「＝」で説明した代入です。代入とは「変数に入れる」のような感じの意味です。「＝」の右側の答えを「＝」の左側にある変数などに入れる仕事をします。
宣言は新しい変数を使うときに行います。もうすでに宣言している変数を使う場合は必要ありません。
宣言はvar以外にもletとconstがありますが今のところはvarだけわかっていれば十分です。
変数の名前は英数字なら何でもOKです。ただし最初の一文字目だけは数字は使えません。
では実際使ってみましょう。
最初に用意したメモ帳(index.html)の<script>と</script>の間に
var kotae = 3 + 5; console.log(kotae);
と書いてみましょう。そしてメモ帳を保存してchromeを再読み込みしてください。
すると右側の部分に「８」と表示されているはずです(赤くなって違うものが表示されたらどこかが間違っています)。
これは<script></script>で挟まれた部分がjavascriptということをブラウザが理解して処理を行っています。
console.log()はブラウザコンソール(ブラウザの右側の部分のところ)に出力(表示)を行います。
console.log()の()の中に出力したい変数(または値を直接入れてもOK)を入れて使います。
この後の説明も同様に自分で入力して使ってみてください。
配列について
変数が連なったものを配列と言います。配列は
var test = [50, 80, 70, 40];
のように[]で挟み、各値は「,」で区切ります。
また配列の場所を指定したい場合は
test[0]
などのように番号を使います。配列の番号は０番から始まります。上の例ではtest[0]は50、test[2]は70となります。
また
test[3] = 15;
のように値の代入もできます。
条件分岐について
ある条件を満たしてるかどうかを判断するにはif文を使います。
if(a > 3){
//処理１
}else{
//処理２
}
if(a > 3)を満たしていれば処理１を、違っていれば処理２を行います。変数aの中の数字が何かによって処理が変わってきます。
この「a > 3」正しいときは「true」、違うときは「false」という値が発生しています。比較演算子を使うとtrueかfalseで答えが返ってきます。そしてその答えをif文が分岐させてるわけです。
なので「if(true)」のように書くと必ずtrueなので↑の例では処理１しかしないことになります。
if文ではtrueの場合だけ処理を行いたいのであればelseの部分は使う必要はありません。また逆にさらに条件を追加したい場合は
if(a > 100){
//処理１
}else if(a > 90){
//処理２
}else if(a > 80){
//処理３
}
みたいに書くこともできます。
条件分岐は他にswitch文というのもありますがとりあえずはif文だけで十分です。
繰り返し処理について
一定の条件の間処理を繰り返したい場合があります。その場合はfor文を使います。
for(var i = 0; i < 5; i++){
//処理
}
for文には3つのパートがあります。各パートは「;」で区切られています。
一つ目のパートは初期化エリアです。for文を使う前に必要な処理をします。上の例では変数iを宣言して０を代入しています。
二つ目のパートは条件式です。上の例では変数iが５より小さいかチェックします。このチェックがtrueなら処理を行います。
三つ目のパートは処理が終わった後に行われます。「++」はインクリメントと呼ばれるもので「i = i + 1」と同じ意味です(インクリメント以外にも特殊な算術演算子の書き方がありますがここでは説明しません)。
そしてまた二つ目のパートに戻り条件式をチェックします。つまりこの条件式がfalseになるまで(上の例ではiが５になるまで)同じ処理が繰り返されます。
同じ繰り返し処理ではwhile文というのもあります。これは
while(i < 10){
//処理
}
のように条件式だけ書きます。
関数について
プログラミング初心者が最初につまずくポイントの一つがこの関数だと思います。なのでなかなか理解できなかったとしても気にしないでください(‘ω’)ノ
まず基本的な書き方は
function namae(){
//処理
}
functionは関数の宣言です。namaeは関数の名前です。処理はこの関数が行う処理です。
関数は書いただけでは何も行われません。宣言したものを呼び出して使います。
namae();
と書くとこのname関数が実行されます。
引数と戻り値
関数には引数と戻り値というものを設定できます。
- 引数・・関数にもっていくもの
- 戻り値・・関数から戻ってくるもの
と考えてください。使い方は以下のようになります。
function keisan(a, b){
return a + b;
}
var kotae = keisan(3, 5);
まず関数名の後にある()内にあるaとbが引数です。これは関数が呼び出されるとき(keisan(3, 5)のところ)に()内に入ってるものが順番にあてがわれます。なのでaには３、bには５が入ります。
returnは関数から抜ける処理で値があればそれを返します(これが戻り値)。上の例ではa + b の答え、つまり８を返しています。
変数kotaeにはkeisan(3, 5)から返ってきた８が入ります。
ちなみに変数名()の書き方が関数の実行命令です。また関数は自分で作るもの以外にもjavascriptですでに用意されていたりゲームエンジンで用意されている関数も使うことができます。よく使うconsole.log()も関数です(これは厳密には関数とはちょっと違うんだけどね)。
全部使ってみるとこんな感じ
最後は全部使ってやってみましょう。
function kotae(a, b){
for(var i = 0, c = 0; i < a; i++){
c = c + b;
}
if(c > 50){
return "50より大きい";
}
return "50以下";
}
console.log(kotae(3, 10));
数字を変えて試してみてね。
そしてどうしてそうなるかもちゃんと考えてみてね(‘ω’)ノ
★良かったら私の作ったゲームを遊んでみてね(‘ω’)ノ
