【JavaScript】１日で基本を学ぶ〜前編

# サクサク動くアプリを作りたい

今までLaravelを使用したアプリを作成してきたが、ユーザー側から見て動作が重たく感じる・・・と言うのも、ページ遷移の都度、該当ページの読み込みを行なってきたからだ。

それを解消したいと思い、フロントエンドで使用されるプログラミング言語``JavaScript``を学ぶことにした。目標はJavaScriptのフレームワークである``Vue.js``を使用することだ。自分自身のこれまでの経験から、最初からフレームワークに手を出すのは良くないと思い、まずはJavaScriptそのものを学ぼうと決めたのだ。

しかし、データベースにインフラと他に学ぶべきことが多く、１つの項目に時間をかけている余裕はない。自分のレベルについてはプログラミング初心者はおそらく卒業していると思うので、JavaScript自体は基本書でサクッと学ぶことにした。できれば１日で。

今回使用した本はこちら。プログラミング初心者がまず最初に読む本としても勧められる良本だ。
[岩田宇史「いちばんやさしいJavaScriptの教本」（インプレス）](https://book.impress.co.jp/books/1116101117)

# 作業環境

結局今の自分の状態は何なのだろうか・・・？脱初心者？基本的な動作環境は整えているので、それを掲載しておく。

- ブラウザは``Chrome``。
- エディターは``Visual Studio Code``。
- PHP、Laravel、Ruby on RailsのCRUDアプリ作成ができる。
- フロントエンドを本格的に学んだ経験はない。

# JavaScriptとは

サクッと説明する。個人的には、敷居の低さからも全くの初心者に１番勧められる言語だと思っている。

- ``非同期通信``ができる。（各ページをその都度読み込む必要がない！これが使いたい。）
- 複雑な環境構築は不要。
- HTMLやCSSの書き替えができる。
- 四則演算などの一般的な処理ができる。

## HTMLとは

HTMLとCSSについても理解が不可欠なため、こちらも簡単に説明する。

- Webサイトの見た目を構成する。
- タグや属性で構成される``要素``を組み合わせて文書構造を表す。
- ``空要素``には終了タグがない。このタグを``単独タグ``と言う。
- 特に``class属性``と``id属性``は、下記のCSSを適用させるために必須である。
- ``class属性``は同一ページにおける重複が許されるが、``id属性``は不可。

## CSSとは

- HTMLを装飾する。
- HTMLにおける場所を示す``セレクタ``と、装飾内容を示す``プロパティ``で構成される。
- セレクタにおける``class属性はドット（例：.hello）``で表す。
- 同じく``id属性はシャープ（例：#hello）``で表す。
- 同じく``タグ``も指定できる。この場合、特別な記号は必要ない。

# JavaScriptとCSSを適用する

## JavaScriptの適用

HTMLの``<script>タグ内``に記述する。方法は２つあるが、後者の方がオススメ。

- \<script\>タグ内に``処理そのもの``を記述する。
- \<script\>タグの``src属性``に``JavaScriptファイルの場所``を指定する。

## CSSの適用

HTMLの``<head>タグ``の``rel属性``と``href属性``に必要事項を指定し、CSSファイルを呼び出す。

- rel属性に``"stylesheet"``を指定する。
- href属性に``CSSファイルの場所``を指定する。

こちらも``<style>タブ``や``style属性``を利用した書き方があるらしいが・・・あまり見たことがない。

# JavaScriptの動作を確認する

``Chrome``で``option``+``command``+``I``（Macの場合）と入力すると、``デベロッパーツール``が開く。そこの``Consoleタブ``を選択し以下のコマンドを試していくと、ダイアログボックスの表示や戻り値が簡単に確認できる。

また、``HTMLをブラウザ上にドラッグ＆ドロップし、JavaScriptファイルを編集して動作確認する方法``も使用できる。この方法は上記で紹介した基本書で紹介されていた。長めのコードを記述する場合はエディターを使用すると思うので、こちらの方が良いだろう。

コードを記述した後は、行末に``セミコロン（;）``の入力をお忘れなく！

# 基本事項

このあたりはコンソールで簡単に動作確認した。

## ダイアログボックス

```
> alert('ただの警告だよ！');
< undefined

> confirm('実行してOK?');
< true

> prompt('何か入力して！');
< "test"
```

## 変数の定義

変数は``var``で定義する。変数の定義と代入を同時に行うことも可能だ。

```
> var test;
< undefined

> test = "aaaaa";
< "aaaaa"

> test;
< "aaaaa"

> var test = "bbbbb";
< undefined

> test;
< "bbbbb"
```

## 文字列の結合

数字と文字をつなぐと、結果として全て文字列となる。もちろん変数同士の結合も可能だ。

```
> "ようこそ" + "JSの世界へ！";
< "ようこそJSの世界へ！"

> "ccccc" + 12345;
< "ccccc12345"

> test + 12345;
< "bbbbb12345"
```

## 改行（特殊文字）

``\n``で改行できる。

```
> "ようこそ\nJSの世界へ！";
< "ようこそ
JSの世界へ！"
```

## 配列

配列も``var``で定義できる。``lengthプロパティ``で要素数の取得も可能だ。

```
> var country = ["日本", "アメリカ", "中国"];
< undefined

> country[0];
< "日本"

> country[1];
< "アメリカ"

> country[2];
< "中国"

> country.length;
< 3
```

# 制御文

他のプログラム言語と比べても、さほど大きな差はない。JavaScriptと言わず、改めて基本事項を確認できた。

## if文

ここではダイアログボックスの入力値を利用している。しかし、``ダイアログボックスの入力値は全て文字列``となってしまうため、``parseFloat関数``を使用して``入力値を数値に変換``している。

```app.js
var money = prompt("現在の所持金はどのくらい？");
money = parseFloat(money);

if (money >= 10000) {
  alert("次の給料日までしのげるぞ！");
} else if (money < 10000 && money >= 5000) {
  alert("節約しよう！");
} else if (money < 5000 && money >= 3000) {
  alert("ちょっとやばい？");
} else {
  alert("毎日もやし・・・");
}
```

## switch文

```app.js
var heart = prompt("今の気分は？\n\n1:最高\n2:普通\n3:最悪");
heart = parseFloat(heart);

switch (heart) {
  case 1:
    alert("よかったね！");
    break;
  case 2:
    alert("こんなもんだよね！");
    break;
  case 3:
    alert("早く寝て忘れましょ！");
    break;
  default:
    alert("1から3までの数字を入力してね！");
}
```

## for文

```app.js
for (var i = 1; i <=10; i++) {
  console.log(i + "回目の繰り返しです！");
}
```

## while文

``無限ループ``に陥らないように、必ず終了条件を記述すること。

```app.js
var number = 1;
while (number <= 10) {
  if (number % 2 == 0) {
    console.log(number + "は偶数です");
  } else {
    console.log(number + "は奇数です");
  }
  number ++;
}
```

### 条件が偽でも最低1回は処理を行いたい場合

上記のwhile文では、条件が偽の場合は一度も処理が実行されない。最低1回は処理を行わせたいならば、``do...while文``で処理を先に記述すること。

```app.js
var number = 1;
do {
  console.log(number);
} while (number > 10); 
```

### break文

この場合、numberが2になった時点でwhile文の処理は終了する。

```app.js
var number = 1;
while (number <= 10) {
  if (number % 2 == 0) {
    break;
  } else {
    console.log(number + "は奇数です");
  }
  number ++;
}
```

### continue文

上記の``break文``と``number ++;``の位置が異なることに注目してほしい。ここを間違えると無限ループの罠にハマる。

```app.js
var number = 0;
while (number <= 10) {
  number ++;
  if (number % 2 == 0) {
    continue;
  } else {
    console.log(number + "は奇数です");
  }
}
```

# 関数

月収を入力し、そこから年収を計算するプログラムを書いてみた。各関数を``calIncome関数``でくくり、1回の呼び出しで処理を終了させている。

最初、alert関数をtotalIncome関数に組み込んでしまったため、年収の表示がされなかった。ローカル変数の有効範囲と関数のくくり方には気をつけたい。

```app.js
calIncome(); 

function calIncome () {
  var monthly_income = prompt("現在の月収はいくら？");
  monthly_income = parseFloat(monthly_income);

  function annualIncome () {
    var annual_income = monthly_income * 12;
    return annual_income;
  }

  function bonus () {
    var bonus = monthly_income * 1.5 * 2;
    return bonus;
  }

  function totalIncome () {
    var total_income = annualIncome() + bonus();
    return total_income;
  }

  alert("あなたの年収は"+ totalIncome() + "円です！");
}
```

# 参考情報

はじめに紹介したが、この本はオススメ！
[岩田宇史「いちばんやさしいJavaScriptの教本」（インプレス）](https://book.impress.co.jp/books/1116101117)

こちらもわかりやすい。
[JavaScript/はじめに-Wikibooks](https://ja.wikibooks.org/wiki/JavaScript/%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)

公式サイトも見やすかった。
[JavaScript|MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)

ホントに1日で終わるのだろうか・・・という不安を抱きつつ、今回はここまで。