「リファレンス読めばわかるよ」からの脱出 ~誰も教えてくれないリファレンスの読み方~

# 背景
昨今は、プログラミングスクールの流行で、プログラマー見習いが量産されています。

スクール卒業生曰く、スクールでは**ある決まった流れに沿ってのみプログラミングを体験していく**ため、Ruby on RailsでECコマースは作れるけど、`反復処理（forやwhileなど）`や`制御フロー（ifやSwitchなど）`といった基本的な処理を知らないという方が多いらしいです。（諸説あり）

そういった方から、**「主さんはどうしてそんなに色々なことを知っているんですか？」**なんて聞かれたりもします。

でも正直、私がすごいエンジニアというわけではなく、普通に`リファレンスで質問の答えを探している`だけなんですよね。

だからこそ、アドバイスのつもりで言ってしまいがちなのが、
### 「リファレンス読めばわかるよ」

自分も初心者の頃よく思っていました。**「そもそもリファレンスが読めないんだけど...」**

という事で、今回は初心者キラーの**`リファレンス読めばわかるよ`**から皆様を救うべく`とりあえずなんとなくリファレンスが読める`ことを目標に、誰もが一度は目にしたであろう*MDN Web Docs*からJavaScriptのリファレンスを読んでいこうと思います


https://developer.mozilla.org/ja/docs/Web/JavaScript

:::note warn
補足：
今回は初心者の方向けの記事になります。

細かい表現などおかしな点ありますが、ある程度は目を瞑っていただけたら幸い。。
とはいえ、初心者への表現としてそぐわない点ありましたら教えていただけたら嬉しいです。
:::



# まずは基礎知識（知ってる人は読み飛ばし可）
## データ型を知ろう
人は、**「0.24」**と書かれていれば**数値**、**「あいうえお」**と書かれていれば**文字**だとわかります。
**数値は計算ができる**けど、**文字は計算できない**。こんなことも当たり前です。

さて、ここで問題です。**`「二十四 + 六」`**の答えはなんでしょうか？、、、、そうです、答えは**「三十」**です。

日本人なら特別疑問もないと思います。でも、`漢字が読めない人の視点`に立つとどうでしょうか？
二十四も六も数値ではなく文字と認識されそうですよね？

つまり、上記の計算が成り立つのは、**漢数字も数値の一種**という`あらかじめ決められたルール`が存在しているからです。

言葉というのはあらかじめ決められたルールに則って使われます。
それはプログラミング言語でも同じです。
`コンピュータが理解できるように決められた言葉のルール` = `データ型`を教えてあげる必要があります。

### よく使われるデータ型
コンピュータの世界では`データ型`は、よくこのような言葉で表されます。


| 日本語 | データ型 |
|:-:|:-:|
|  文字 | String  |
|  整数 |  Number, Integerなど |
|  小数 | Float  |
|  真偽値 |  Boolean |
|  配列 |  Array |
|  オブジェクト |  Object |

JavaやVBAなど**プログラマが型を指定する必要がある言語（静的型付言語）**ではデータ型は普通の概念ですが、JavaScriptやRubyなど、**基本的にプログラマが型を指定しない言語（動的型付言語）**を使っている場合には馴染みが薄いかもしれませんね。

とはいえ、動的言語もデータ型という概念が存在しないわけではなく、コンピュータ側が自動でデータ型を予測しているのです。

>補足：
>JavaScript等でも、**誤ったデータ型**によるエラーがあります。
>デバッグなどで、**Type of**などを利用してデータ型を確認するようにしましょう。
>
>今後開発を進めていく際に、自分が今扱っている変数はどんなデータ型なのか意識しながら開発を進めるとエラーの少ないコードが書けると思います。


## プロパティとメソッド
各データ型はそれぞれに決まった性質を持っています。

こう聞くと難しそうですが、例えば`数値は計算ができる`、　`言葉には文字数がある`など思い浮かべるといくつか**固有の性質**があることに気づくと思います。

このような性質の中でも、**値として表されるもの**を`プロパティ`、**何かしらの処理**を`メソッド`と呼びます。

プログラミング言語におけるデータ型は`それぞれ固有のプロパティやメソッドを持っています`。
例えば、String（文字）型はlength（文字数）というプロパティやslice（切り取り）というメソッドなど、あらかじめ決められた性質を持っています。

このことをひとまずは意識しておいてください

```javascript:String.js
const tubuyaki = '本日のお昼ごはんもコンビニ弁当です。'; //String型

console.log( tubuyaki.length ); // 18
console.log( tubuyaki.slice(9, 15) ); // 'コンビニ弁当'
```

:::note warn
補足：
メソッドやプロパティの話をする際にはオブジェクトやクラスの話が必要かとは思いますが、今回は割愛しています。

これらを勉強すると今回の内容はより理解できると思いますので、ぜひ勉強してみてください。
:::


# 大枠を掴もう
ライブラリなどの関数を使ったりする場合、その関数自体がどう作られているか知らなくても普通に使えると思います。

関数やメソッドを使う際は、`インプット（引数）`に対して`アウトプット（返値）`が何になるかのみが重要で、スクリプトの中身は**ブラックボックス**として扱われていると思います。

リファレンスに書かれている関数やメソッドにも同じことが言えます。

**リファレンスを読む際に注目すべき**は`どのようなデータ型の引数`に対して、`どのようなデータ型の返値`が帰ってくるか、そして`返ってきたデータ型はどんなプロパティやメソッドを持っているか`なのです。


# 実践：リファレンスを読んでみよう
さて、ここまでの内容が理解できたあなたには、既にリファレンスを理解する基礎があります。
この先の実践では、まず**引数のデータ型**と**返値のデータ型**に注目してみていきます。

## Array.prototype.push()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push

配列のメソッドとして使われるpush関数を見ていきましょう。

```javascript:push.js
const array = [0, 1, 2, 3];

array.push(4);
return array; // [0, 1, 2, 3, 4]
```

リファレンスの**解説**に書かれている内容を引用すると`pushメソッドは配列の末尾に要素を追加するメソッド`です。
![スクリーンショット 2022-01-07 8.40.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673130/2cb567d2-a08e-ac6e-8965-1113ab1891a9.png)

### ①構文

まず最初に確認するのは**構文**です。
構文とは`メソッドを使う際の使い方=ルール`です。

斜体の*arr*はpushを適用する配列を指しています。
**pushは配列のメソッドなので、配列以外のデータ型では使えないこと**に注意しましょう。

[element1[,...[, elementN]]]の部分は分かりにくいので単純化すると下記のようになります。

```javascript:push.js
arr.push(引数);
```
つまり、`[element1[,...[, elementN]]] = 引数(Input)`です。
この場合、引数[element1[,...[, elementN]]は複数個のelementを引数として持てることを表しています。

```javascript:example.js
const arr = [3, 4, 5];

arr.push(2); // arr = [3, 4, 5, 2]
arr.push(0, 1); // arr = [3, 4, 5, 2, 0, 1]
```


### ②引数と返値

次に確認するのは**引数と返値**です。引数 elementNは配列の末尾に追加したい要素です。
**文章内にデータ型を表す文章がないため**、`elementNはあらゆるデータ型(Any)`を指定することができます。

```javascript:push.js
const arr = [];

arr.push(1);
arr.push('a');
arr.push([1, 2], {a: 1, b: 2});

return arr; // [1, 'a', [1, 2], {a: 1, b: 2}]
```

そして、**返値**を見てみましょう。

pushメソッドは普段配列に要素を追加するだけの目的で使われることが多いため、返値を見たことがある方は少ないかもしれません。
感覚的には、要素が追加された配列が返ってきたりするのかな？と思ったりしませんか？

さて、**pushメソッドを格納した変数pushedには一体何が格納されているのでしょうか？**

答えは、`メソッドが呼び出されたオブジェクト（配列）の新しい length プロパティ`です。

```javascript:push.js
const arr = [0, 1, 2, 3];

const pushed = arr.push(4); // arr = [0, 1, 2, 3, 4]

console.log(pushed); // 5
console.log(arr.length); // 5
```

### その他の項目

解説や例などは、pushメソッドをより詳しく説明している部分ですが、**pushメソッドの使い所や実際の使用例を見たい場合などに読むもの**なので、`読まなくても問題はありません`。

引数と返値、そして構文が理解できたあなたは、もうpushメソッドを使いこなせます。

### 結局ここに書いてあること
最終的にまとめると、pushメソッドは**引数としてAny、返値としては新しい配列のlengthプロパティ（Number型）が得られる**ことがわかりました。

得られたNumber型のプロパティやメソッドを利用することもできます。

```javascript:advanced.js
const animals = ['dog', 'cat', 'fish'];

const newAnimalNumber = animals.push('bird');

console.log(`新しい動物はNo. ${newAnimalNumber}です。`); //新しい動物はNo. 4です。
```


## Array.prototype.pop()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

せっかくなのでもう一つメソッドを見ていきましょう。

今回も同じく配列のメソッドとして使われるpop関数を見ていきます。

```javascript:pop.js
const plants = ['cauliflower', 'cabbage', 'kale', 'tomato'];

const poped = plants.pop();

console.log(plants); // ["cauliflower", "cabbage", "kale"]
console.log(poped); // "tomato"
```

popメソッドは、`配列から最後の要素を取り除き、その要素を返します`。このメソッドは配列の長さを変化させます

![スクリーンショット 2022-02-01 10.57.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673130/3718880f-6463-374c-c012-f7d4e133a89a.png)


こちらもpushと同じく、まずは**①構文**を確認します。

```javascript:pop.js
arrName.pop();
```

では、次に引数を確認しましょう。
と、いきたいところですが、`popメソッドには引数がありません`。

なので**②返値**を見ていきましょう。
返値は、配列の最後の要素、配列が空だった場合は、undefinedになります。
つまり、`返値はpopメソッドで取り除いた要素`ということです。（要素のない配列でpopメソッドを使った場合はundefindが返されます）

```javascript:pop.js
const alphabets = ['a', 'b'];

const poped1 = alphabets.pop(); // alphabets = ['a']
const poped2 = alphabets.pop(); // alphabets = []
const poped3 = alphabets.pop(); // alphabets = []

console.log(poped1); // "b"
console.log(poped2); // "a"
console.log(poped3); // undefind
```

なるほどなるほど、これでpopメソッドも使い方がわかりましたね。

こちらもpush同様、返値を利用したプログラムを書くこともできます。

```javascript:advanced.js
const animals = ['dog', 'cat', 'fish', 'dragon'];

const lastAnimal = animals.pop();

console.log(`最新の動物は${lastAnimal}です。文字数は${lastAnimal.length}です。`); 
//最新の動物はdragonです。文字数は6です。
```

## Arrayが出来ること
ここまででリファレンスの読み方は大体わかってきたかと思います。

ところで各ページに書いてあることは理解できたかもしれませんが、そもそも配列というデータ型はどんなメソッドやプロパティを持っているのか網羅的に知りたいと思いませんか？

そんな時に確認するのが**③Related Topicsのプロパティとメソッド**です

![スクリーンショット 2022-01-29 10.12.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673130/0a6dea54-2ebb-5894-b4a0-6ae607b9f51b.png)


### プロパティとメソッド

先にも書いた通り、ArrayにはArrayのプロパティやメソッド、StringにはStringの、NumberにはNumberの、**各々のデータ型が持つプロパティやメソッド**は**あらかじめ組み込まれています**。

そして、Arrayに組み込まれている内容は、**③プロパティとメソッド**に`全て記載されています`。
ここから自分の**見たい内容っぽい名前**のメソッドやプロパティのページを見れば、pushやpop同様のページに辿り着けます。

一方で**Array以外のデータ型のページはどう行けばいいの？**という疑問もあると思います。
そう言った時はこちらの目次ページから該当のデータ型を探しましょう。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

例えばpushメソッドの返値であるNumber型のページはこちらになります。
![スクリーンショット 2022-02-01 11.50.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673130/9f994437-a9af-0254-9863-dcde59cb9474.png)

この先のページにも同様にRelated Topicsがあるのでこちらからプロパティやメソッドを確認していけます。
![スクリーンショット 2022-02-01 11.51.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673130/6572ae5e-a57e-39e5-cb8e-56aae1878c14.png)



# まとめ
`返値のデータ型のプロパティとメソッド`を確認し続けることで、**自分が今どうしてこのコードを書いているか**が明確にわかるようになると思います。

リファレンスとデータ型、そしてメソッドとプロパティを意識するだけでもプログラミングの世界は一気に広がります。
よりしっかりとした理解を求める方はぜひ、`クラス`や`プロトタイプ`、`オブジェクト`といったキーワードを勉強してみてください。

それでは、皆さんも自分の力で様々なリファレンスに挑戦してみましょう！