javascript入門

こんにちは

今回は短編です。
今回することは、javascriptの入門編です。
では、やっていきたいと思います。

はじめに...

では、はじめに色々なことを説明していきます。
まず、javascriptって何ができるの？ということを説明します。
簡単に説明すると『動的なサイトの作成』です。
でも、これだけじゃ何言ってるのかはわかりませんよね？
では、具体的に説明します。
例えば、私がしているのは、RPG開発です。
こういう感じにまず作り方を考えます。
↓
キャラクターを動かしたいな〜...
①キャラクターを表示させる場所(canvasと言います)を表示させる
②キャラクターを表示させる
③キーが押されたかを検知する
④色々な場所にキャラクターを表示させる

このように一つ一つ考えていきます。
では、今回は入門編なので簡単な文法を覚えていきます。

作動環境

まず動く前提として、javascriptを許可しているかを確認します。
そして許可されていなければ許可をしてください。

次にわたし的にコードを書く中で、使いやすいと思ったのがCodePenです
上の「CodePen」という文字をクリックしていただいて、
メールアドレスで登録してくだされば簡単に使えます

そしたら、うえのメニューから「NewPen」というところを
押していただければ準備完了です
このようになっていたらOKです

本編スタート

では、実際に書いていきたいと思います
書くのは、だいたい英語なので、スペル等も覚えていければいいと思っています

console.log

まずはじめに紹介するのはconsole.logです
これは、色々なところで使うので覚えましょう
では、こちらのコードを１番右の「JS」という部分に打ってください

console.log("hello!");

そしたら、左下の「Console」という部分を見てください
中に「hello!」となっていると思います
このconsole.logはコンソールに文字を打ち出すというものです

そして注意してほしいところが２つあります。

それは、文字列と変数というのが存在していて、
変数というのは後で紹介するので飛ばしますが、文字列というのは、
「hello」や「:@!」のような文字の集まりのことです
これには、変数というものと区別しないといけないので、
ダブルクォーション(")というものを両端に付けないといけません
これをつけないとエラーが出てしまいますので気をつけてください
打ち方は、shift+2です

もう一つは、文章の最後にセミコロン(;)をつけないといけないということです
これは、打たなくても作動しますが、
打たないと色々と自分が思っていることと違うことが多く起こります

これで、１つ目の文法が完了です
これからこのようにしてどんどん覚えていきます

変数

変数というのは、変わる数(文字)ということが言葉から読み取れて、
例えば「number」という名前の変数に「1」という数字を入れたり、
「hello」という名前の変数に「ok」という文字を入れたりして、様々な使い道があります
もちろん、これから覚えていく文法にもどんどん使います
では、使い方です

var number_var = 1;
let number_let = 1;
const number_const = 1;

このようなことを打ち込んでください
しかし、まだコンソールには何も命令していないので表示されません
では、これを表示させていきたいと思います
ここで、さっき学んだconsole.logの出番です！
さっき入れた下にこれを打ち込んでください

console.log(number_var);
console.log(number_let);
console.log(number_const);

そしたら、コンソールには１１１と改行されて表示されたと思います
よくみると、前のコンソールで見たダブルクォーション(")がありません
これは、変数なのでつけなくてもいいのです！
しかし、文字列として、例えばnumber_varと
表示させたいときはつけるようにしましょう
では、次にこの色々な変数たちの違いを見ていきましょう！

①var型
メリット
変数の値を変えることができる
変数名を同じにして宣言できる

デメリット
他の２つよりも圧倒的に不具合が多くなる

②let型
メリット
変数の値を変えることができる
var型と比べてバグが少なくてすむ

デメリット
同じ変数名で宣言できない
これが不具合のもととなる

③const型
メリット
不具合がなくなる

デメリット
値を変更することができない

私はよく、let型かconst型を使います
var型はそれしか知らなくて使っている時がありましたが、
不具合がとても多くなるのでlet型にしました

では、値の変更方法を順番に見ていきましょう

var型

var number = 1;
console.log(number);
number = 2;
console.log(number);
var number = "hello";
console.log(number);

これでコンソールを見ると１，２、helloと表示していると思います
順番に見ていきましょう
※◯数字は行番号としてみてください
①まず、numberという変数を宣言します。その中には、「1」を入れます
②そしてそのnumberの中の「1」の方をコンソールに出力します
③numberを「1」から「2」へと変更します
④またそれをコンソールに出力します
⑤numberを再宣言します。その中には「hello」を入れます
⑥最後にそれをまたコンソールに出力します

このようにして、上から順番に読み取っていきます。
それと、「hello」は文字列なので、ダブルクォーション(")を忘れずにつけてください
そしたら、let型はどうでしょうか

let number = 1;
console.log(number);
number = 2;
console.log(number);
number = "hello";
console.log(number);

let型は再宣言ができないという決まりを思い出してください
なので、⑤の「helloの前」にはletをつけません
もしつけてしまったら、エラーが起こってしまうので注意してください
では最後にconst型です

const number = 1;
console.log(number);

これは、定数というもので、変えられない数です
もし変えようとnumber = 2;と入れてもエラーになってしまいます
しかし使い方があります
それは、後で紹介する連想配列というものです
これで、変数編を終わります

コメント

これは簡単なことです
例えば、変数を作ったけれどなんの変数かわからないやどう動くのかがわからないを
コメントを書いてわかりやすくするということです
書き方は、「//」です
また、「/*〇〇*/」としても書くことができます
実際に使ってみましょう

let number = 1;//数字を入れる変数
number = 2;//「number」の値を「2」に変更
console.log(number);
/*
コンソールに
「number」変数を出力
*/

わかりやすく言うと「//」は一行じゃないといけません
そして「/*〇〇*/」は、何行でもいいけれど、しっかりと囲ってあげないといけません
では次からコメントも活用していきます

if文

ここからは本格的なプログラムを組んでいきます
ifというのは和訳するともしということです
もし、〇〇なら...という文章を書くことができます
では、使ってみましょう

let number = 10;//「number」という変数の中に「10」を入れる
if(number==10){
console.log("十");
};
number = 21;//「number」の変数の値を「21」に変更
if(number==21)console.log("二一");

これがif文です
ではまた順番に見ていきましょう
①「number」という変数の中に「10」を入れる
②もし「number」という変数の値が「10」なのであれば...
③コンソールに「十」と出力
④if文の終了
⑤「number」という変数を「21」に変更
⑥もし「number」という変数の値が「21」なのであればコンソールに「二一」を出力

これで、if文を書くことができます
一個めと二個めの違いはもちろん変数の値が違うということもありますが、
一個めは{}で囲っていて、二個めは囲っていません
私の使い分けとしては、作業が一つなら後者・二つ以上なら前者と使い分けています
では、これでif文の解説を終わります

if...else文

終わりますと言いましたが、これの応用があります
それがif...else文です
elseとは何かというと、ではないときを表します
では、使い方を見ていきましょう

let string = "pepar";//変数「string」の値をpeparにする
if(string=="hello"){
string="ok";
}else{
string="no";
};
/*
もし「string」が「hello」なら「string」を「ok」に
ではないのなら「string」を「no」にする
*/
console.log(string);//コンソールに「string」を出力

中に書いてあるとおり、条件を指定できます
もし〜であれば〇〇をする・でなければ☓☓をするというようなものです
peparは、helloでは無いので、下の処理であるstringをnoにするを行います
これは、何個でも繋げられます
例えばこうしたりします

let age = 28;
if(age>=30){
console.log("あなたは30歳以上です");
}else{
if(age>=20){
console.log("あなたは30歳未満・20歳以上です")
}else{
console.log("あなたは20歳未満です");
}
}

else文の中にif文を入れて繰り返すことができます
この上の場合だと、こうなります
・変数「age」の値を28にする
・もし、変数「age」の値が30以上なら、あなたは30歳以上ですとコンソールに出力
・ではなく、20以上なら、あなたは30歳未満・20歳以上ですとコンソールに出力
・30以上でも20以上でもないのであれば、あなたは20歳未満ですとコンソールに出力

これでif...else文を終わります

演算子

今回は簡単です
演算子というものがあって、例えば身近なもので言うと+記号などです
こういう計算に使う記号などを演算子と言います
しかし、javascriptの演算子は少し違います
これを簡単に覚えていきましょう

演算子	意味
+	足す
-	引く
*	かける
/	割る
++	１を足す
--	１を引く
**	累乗
%	あまり

足し算と引き算の記号はそのままですが、掛け算・割り算が全然違う記号になっています
しかし普通の使い方と同じで、例えば、2×3÷6をしたいときには2*3/6と打つだけです

そして、javascriptでよく使われているもので、++と--があります
これは上にも書いてあるとおり、１を足したり、１を引いたりするものです

そして、中学生以上の方はわかると思いますが、累乗というものもあります
これは、◯を☓回かけるという意味です
例えば、2**4だと2×2×2×2=16となります

そして最後は、あまりです
これは、例えば8を3で割ったあまりは2ですが、
これを式にすると8%3=2というようになります

これで、計算の演算子は終わりです
しかし、まだ条件分岐の演算子が残っているのでこれも見ていきます

演算子	意味
==	等しい
===	常に等しい
<	左よりも右のほうが大きい
>	右よりも左のほうが大きい
<=	右よりも左のほうが大きいか、等しい
>=	左よりも右のほうが大きいか、等しい
&&	〇〇かつ〇〇
｜｜	〇〇または〇〇

※||の部分がテーブルの都合上全角になっていますが正確には半角です

これではじめに覚えておきたい演算子の全てです
この演算子たちはさっき習ったif文などに使えます
ではこの演算子たちもどんどん使っていきます

文章の連結

これはとても簡単です。
文字列を含む文と文字列か数列を+で囲むだけで連結することができます
では、使ってみます

console.log("名前："+"ルル");
console.log("年齢："+28+"歳");
console.log(6+8);
/*コンソールの結果
名前：ルル
年齢：28歳
14
*/

このように何個もつなぐことができますが、数列だけで+を使うと、
普通に足し算されてしまいますので気をつけてください

####for文
ゲーム開発で必ずと言ってもいいほど作るものが、メインループです
そしてその中の一つとしてfor文というものがあります
では、どのような使い方をするのかを見ていきましょう
さっき習った演算子を使って書いていきます

for(let i = 1;i<=10;i++){
console.log(i);
}

パット見ても初めて見る人にはなんだこれとなると思います
では、これを実行してみてください
そしてコンソールを見ると、きれいに1,2,3...10と表示されています
これは、繰り返しというものです
上の段から順番に読み取っていくとこうなります

①変数「i」の値を1にして宣言する
②変数「i」の値が10よりも大きいか、等しくなるまで繰り返す
③変数「i」の値を1ずつ足していく
④①〜③を繰り返し、コンソールに変数「i」の値を出力する

このようにして、繰り返しが作られていきます
では、for文の言うことはこれだけなので終わります

while文

for文と同じ繰り返しです
しかし、このwhile文は条件が違うようになるまで繰り返すです
では実際に使ってみましょう

let i = 1;
while(i<=10){
console.log(i);
i++;
}

iが10より大きくなるか等しくなるまで１を足すという処理を繰り返すという意味です
さっき習ったfor文と同じ形です
しかし、こういうことはあまりしないほうがいいです

while(1==1){
console.log("だめ")
}

1という数字はどうしても1にしかならないのでこれこそ本当の無限ループになって
最悪の場合フリーズしてしまうこともあります
では、短いですが、while文を終わります

関数とは？

関数とはfunctionといい、if文やfor文のようなことをできます
では、使い方を見ていきましょう

function hoge() {
//行いたい処理
}
hoge();

まず、はじめに関数名を決めてあげます
ここではhogeとしていきます
そしたら、行いたい処理を書きます
そしてそのfunctionのしたに関数名を入力するだけで、処理が行われます
しかしこれだと面白くありません
これをもっと実用的にしていきます

function status(name,age){
console.log("名前は"+name+"です"+"・"+"年齢は"+age+"歳です");
}
status("ルル",28);

このstatusの隣りにある、「name」や「age」とは引数(ひきすう)といい、
たとえば、nameを「ルル」にし、ageを28にした場合、
「名前はルルです・年齢は28歳です」というようになる
引数によってコンソールの内容が変わってくるということがわかります
これで一応functionを終わります

最後に...

何かわからないことがあればここのコメントに書いてください
これでjavascript入門を終わります