はじめに

僕がプログラミング始めた時につまずいた、jsのドキュメント(mdn)の読み方をざっと解説してみます
動かないコード(構文,syntax)や特殊な記法などのコツを掴み、仲良くなってください
MDNをベースに説明していきます

なぜドキュメントを読む必要があるのか

誰かがqiitaやブログに投稿した情報は、

• 情報のリアルタイムさ
• 情報の正確さ
• apiの詳細わからず、応用できない

など、公式ドキュメントに比べて質が落ちることがあります

参考記事
公式ドキュメント読もうという気持ちになります
私たちはどうして公式ドキュメントが読めないのか？

この記事について

• 本記事の目的

  • ドキュメントと仲良くなってもらう
  • ドキュメント読めそう

• 対象

  • プログラミング初心者
  • javascript

ではさっそく

動かないけど、なにこれ??

const str = "abc";
str.slice(beginIndex[, endIndex])

String.prototype.slice()

リファレンス構文

この動かないコードを構文(syntax)と呼びます
構文という呼び方だとそのプログラミング言語が定めている構文(文法の規則)と被ってしまうので
この記事では前者をリファレンス構文に統一して説明します

参考記事
文法とデータ型
API reference syntax

リファレンス構文でよく見る形

リファレンス構文内でよく利用される名前に以下があります

• 型の省略名(変数名や引数として利用される)
  • Boolean - bool
  • String - str
  • Number - num
  • Array - arr
  • Object - obj
  • Symbol - sym
• callback - コールバック関数
• options - オプションを定義。だいたいオブジェクト
• index - 現在の要素のインデックス
  • begin index - 開始する位置のインデックス
  • end index - 終了する位置のインデックス
• thisArg - this として使用する値

リファレンス構文の例1

次に実際にドキュメントを読んでみます
String.prototype.slice()を例に説明していきます
一部抜粋

メソッド部分

str.slice(...) //string型のstrという値が持つsliceメソッド

引数部分

• beginIndex - 取り出しを開始する位置を示す0から始まるインデックス
• endIndex - 省略可能です。取り出しを終える位置の一つ前を示す0から始まるインデックス　

Note. []で囲まれている引数部分は省略可能(option)という意味です

返り値

文字列から取り出された新しい文字列です

動かしてみる

const str = "abcde"
const sliced = str.slice(2); 
console.log(sliced) //cde

リファレンス構文の例2

例としてもう一つ紹介しておきます
Array​.prototype​.map()を説明していきます
一部抜粋

メソッド部分

arr.map(...) // array型のarrという値が持つmapメソッド

引数部分

• callback - 新しい配列の要素を生成するための関数。次の3つ引数を取る

  • currentValue - 現在処理中の値。
  • indexOptional - 現在処理中の要素の配列内におけるインデックス
  • arrayOptional - map がメソッドが実行されている配列(元の配列)

• thisArgOptional - callback を実行するときに this として使用するオブジェクト

返り値

与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列

動かしてみる

const arr = [1,2,3,4,5]
const mapped = arr.map(function(currentValue){
    return currentValue * 10;
})
console.log(mapped); // [10, 20, 30, 40, 50]

MDNには書いてないがよく見る形

MDNではあまり見かけませんが、

str.slice([begin: int[, end: int]]): string

string str.slice([int begin[, int end]])

といったリファレンス構文もあります
これは返り値がstring型という意味です

ポリフィル

javascriptは2015年にes2015(es6)が発行されてから、
毎年バージョンアップされるようになりました

しかし今だに対応していないブラウザ(IEとかね)があるため
es5でその機能を使えるようにするためのコードです

だいたいはBabelなどのツールでes5に変換します

参考記事
polyfill(ポリフィル)
Array​.prototype​.map()#ポリフィル
Babel

仕様とブラウザ互換性

先ほども書きましたが、jsは毎年アップデートされるようになりました
しかしブラウザごとに対応しているものとしていないものがあるので、ここで確認できます
(自作ツールくらいならbableとか使わなくてもいいかもしれない)

import

ECMAScript 2015 (6th Edition, ECMA-262)に初期定義とあるようにes2015で定義されました
次のECMAScript Latest Draft (ECMA-262)は現在だとecmascript2019のドラフト(草案)になります

その下にある
tc39/proposal-dynamic-import Stage 3 動的インポートの初期定義とは
プロポーザル(提案)になります。
プロポーザルのstageは全部で0 ~ 4まであり、stage4になったものが次期ECMAScriptに入ります

参考記事
ECMAScriptの仕様/プロポーザルの調べ方を知る