javascript入門

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

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

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

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

そしたら、うえのメニューから「NewPen」というところを
押していただければ準備完了です
このようになっていたらOKです
![Screenshot 2022-01-01 20.46.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1783198/1cd291d0-b915-ce1a-3865-5e7c931c219c.png)

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

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

```javascript
console.log("hello!");
```

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

`var型`

```javascript
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型はどうでしょうか

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

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

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

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

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

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

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

#### `if文`

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

```javascript
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`とは何かというと、`ではない`ときを表します
では、使い方を見ていきましょう

```javascript
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にする`を行います
これは、何個でも繋げられます
例えばこうしたりします

```javascript
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文など`に使えます
ではこの演算子たちもどんどん使っていきます

#### `文章の連結`

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

```javascript
console.log("名前："+"ルル");
console.log("年齢："+28+"歳");
console.log(6+8);
/*コンソールの結果
名前：ルル
年齢：28歳
14
*/
```
このように何個もつなぐことができますが、数列だけで`+`を使うと、
普通に足し算されてしまいますので気をつけてください

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

```javascript
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文は`条件が違うようになるまで繰り返すです
では実際に使ってみましょう

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

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

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

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

#### `関数とは？`

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

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

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

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

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