背景
昨今は、プログラミングスクールの流行で、プログラマー見習いが量産されています。
スクール卒業生曰く、スクールではある決まった流れに沿ってのみプログラミングを体験していくため、Ruby on RailsでECコマースは作れるけど、反復処理（forやwhileなど）や制御フロー（ifやSwitchなど）といった基本的な処理を知らないという方が多いらしいです。（諸説あり）
そういった方から、**「主さんはどうしてそんなに色々なことを知っているんですか？」**なんて聞かれたりもします。
でも正直、私がすごいエンジニアというわけではなく、普通にリファレンスで質問の答えを探しているだけなんですよね。
だからこそ、アドバイスのつもりで言ってしまいがちなのが、
「リファレンス読めばわかるよ」
自分も初心者の頃よく思っていました。「そもそもリファレンスが読めないんだけど...」
という事で、今回は初心者キラーの**リファレンス読めばわかるよ**から皆様を救うべくとりあえずなんとなくリファレンスが読めることを目標に、誰もが一度は目にしたであろうMDN Web DocsからJavaScriptのリファレンスを読んでいこうと思います
補足：
今回は初心者の方向けの記事になります。
細かい表現などおかしな点ありますが、ある程度は目を瞑っていただけたら幸い。。
とはいえ、初心者への表現としてそぐわない点ありましたら教えていただけたら嬉しいです。
まずは基礎知識（知ってる人は読み飛ばし可）
データ型を知ろう
人は、「0.24」と書かれていれば数値、「あいうえお」と書かれていれば文字だとわかります。
数値は計算ができるけど、文字は計算できない。こんなことも当たり前です。
さて、ここで問題です。**「二十四 + 六」の答えはなんでしょうか？、、、、そうです、答えは「三十」**です。
日本人なら特別疑問もないと思います。でも、漢字が読めない人の視点に立つとどうでしょうか？
二十四も六も数値ではなく文字と認識されそうですよね？
つまり、上記の計算が成り立つのは、漢数字も数値の一種というあらかじめ決められたルールが存在しているからです。
言葉というのはあらかじめ決められたルールに則って使われます。
それはプログラミング言語でも同じです。
コンピュータが理解できるように決められた言葉のルール = データ型を教えてあげる必要があります。
よく使われるデータ型
コンピュータの世界ではデータ型は、よくこのような言葉で表されます。
| 日本語 | データ型 |
|---|---|
| 文字 | String |
| 整数 | Number, Integerなど |
| 小数 | Float |
| 真偽値 | Boolean |
| 配列 | Array |
| オブジェクト | Object |
JavaやVBAなど**プログラマが型を指定する必要がある言語（静的型付言語）**ではデータ型は普通の概念ですが、JavaScriptやRubyなど、**基本的にプログラマが型を指定しない言語（動的型付言語）**を使っている場合には馴染みが薄いかもしれませんね。
とはいえ、動的言語もデータ型という概念が存在しないわけではなく、コンピュータ側が自動でデータ型を予測しているのです。
補足：
JavaScript等でも、誤ったデータ型によるエラーがあります。
デバッグなどで、Type ofなどを利用してデータ型を確認するようにしましょう。今後開発を進めていく際に、自分が今扱っている変数はどんなデータ型なのか意識しながら開発を進めるとエラーの少ないコードが書けると思います。
プロパティとメソッド
各データ型はそれぞれに決まった性質を持っています。
こう聞くと難しそうですが、例えば数値は計算ができる、 言葉には文字数があるなど思い浮かべるといくつか固有の性質があることに気づくと思います。
このような性質の中でも、値として表されるものをプロパティ、何かしらの処理をメソッドと呼びます。
プログラミング言語におけるデータ型はそれぞれ固有のプロパティやメソッドを持っています。
例えば、String（文字）型はlength（文字数）というプロパティやslice（切り取り）というメソッドなど、あらかじめ決められた性質を持っています。
このことをひとまずは意識しておいてください
const tubuyaki = '本日のお昼ごはんもコンビニ弁当です。'; //String型
console.log( tubuyaki.length ); // 18
console.log( tubuyaki.slice(9, 15) ); // 'コンビニ弁当'
補足：
メソッドやプロパティの話をする際にはオブジェクトやクラスの話が必要かとは思いますが、今回は割愛しています。
これらを勉強すると今回の内容はより理解できると思いますので、ぜひ勉強してみてください。
大枠を掴もう
ライブラリなどの関数を使ったりする場合、その関数自体がどう作られているか知らなくても普通に使えると思います。
関数やメソッドを使う際は、インプット（引数）に対してアウトプット（返値）が何になるかのみが重要で、スクリプトの中身はブラックボックスとして扱われていると思います。
リファレンスに書かれている関数やメソッドにも同じことが言えます。
リファレンスを読む際に注目すべきはどのようなデータ型の引数に対して、どのようなデータ型の返値が帰ってくるか、そして返ってきたデータ型はどんなプロパティやメソッドを持っているかなのです。
実践：リファレンスを読んでみよう
さて、ここまでの内容が理解できたあなたには、既にリファレンスを理解する基礎があります。
この先の実践では、まず引数のデータ型と返値のデータ型に注目してみていきます。
Array.prototype.push()
配列のメソッドとして使われるpush関数を見ていきましょう。
const array = [0, 1, 2, 3];
array.push(4);
return array; // [0, 1, 2, 3, 4]
リファレンスの解説に書かれている内容を引用するとpushメソッドは配列の末尾に要素を追加するメソッドです。
①構文
まず最初に確認するのは構文です。
構文とはメソッドを使う際の使い方=ルールです。
斜体のarrはpushを適用する配列を指しています。
pushは配列のメソッドなので、配列以外のデータ型では使えないことに注意しましょう。
[element1[,...[, elementN]]]の部分は分かりにくいので単純化すると下記のようになります。
arr.push(引数);
つまり、[element1[,...[, elementN]]] = 引数(Input)です。
この場合、引数[element1[,...[, elementN]]は複数個のelementを引数として持てることを表しています。
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)を指定することができます。
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 プロパティです。
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型のプロパティやメソッドを利用することもできます。
const animals = ['dog', 'cat', 'fish'];
const newAnimalNumber = animals.push('bird');
console.log(`新しい動物はNo. ${newAnimalNumber}です。`); //新しい動物はNo. 4です。
Array.prototype.pop()
せっかくなのでもう一つメソッドを見ていきましょう。
今回も同じく配列のメソッドとして使われるpop関数を見ていきます。
const plants = ['cauliflower', 'cabbage', 'kale', 'tomato'];
const poped = plants.pop();
console.log(plants); // ["cauliflower", "cabbage", "kale"]
console.log(poped); // "tomato"
popメソッドは、配列から最後の要素を取り除き、その要素を返します。このメソッドは配列の長さを変化させます
こちらもpushと同じく、まずは①構文を確認します。
arrName.pop();
では、次に引数を確認しましょう。
と、いきたいところですが、popメソッドには引数がありません。
なので②返値を見ていきましょう。
返値は、配列の最後の要素、配列が空だった場合は、undefinedになります。
つまり、返値はpopメソッドで取り除いた要素ということです。（要素のない配列でpopメソッドを使った場合はundefindが返されます）
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同様、返値を利用したプログラムを書くこともできます。
const animals = ['dog', 'cat', 'fish', 'dragon'];
const lastAnimal = animals.pop();
console.log(`最新の動物は${lastAnimal}です。文字数は${lastAnimal.length}です。`);
//最新の動物はdragonです。文字数は6です。
Arrayが出来ること
ここまででリファレンスの読み方は大体わかってきたかと思います。
ところで各ページに書いてあることは理解できたかもしれませんが、そもそも配列というデータ型はどんなメソッドやプロパティを持っているのか網羅的に知りたいと思いませんか？
そんな時に確認するのが③Related Topicsのプロパティとメソッドです
プロパティとメソッド
先にも書いた通り、ArrayにはArrayのプロパティやメソッド、StringにはStringの、NumberにはNumberの、各々のデータ型が持つプロパティやメソッドはあらかじめ組み込まれています。
そして、Arrayに組み込まれている内容は、③プロパティとメソッドに全て記載されています。
ここから自分の見たい内容っぽい名前のメソッドやプロパティのページを見れば、pushやpop同様のページに辿り着けます。
一方で**Array以外のデータ型のページはどう行けばいいの？**という疑問もあると思います。
そう言った時はこちらの目次ページから該当のデータ型を探しましょう。
例えばpushメソッドの返値であるNumber型のページはこちらになります。
この先のページにも同様にRelated Topicsがあるのでこちらからプロパティやメソッドを確認していけます。
まとめ
返値のデータ型のプロパティとメソッドを確認し続けることで、自分が今どうしてこのコードを書いているかが明確にわかるようになると思います。
リファレンスとデータ型、そしてメソッドとプロパティを意識するだけでもプログラミングの世界は一気に広がります。
よりしっかりとした理解を求める方はぜひ、クラスやプロトタイプ、オブジェクトといったキーワードを勉強してみてください。
それでは、皆さんも自分の力で様々なリファレンスに挑戦してみましょう！