MDNのドキュメントにコントリビュートしてみたのでやり方書くよ

MDN、ご存知ですか。jsとかcssとかでググってみるとだいたいひっかかると思います。

developer.mozilla.org

んで、これをちょっと読んでたんですがサンプルコードがわけわかんなかったんですよね。
僕が作った例のがイケてるんじゃね？と思ったのでコントリビュートしてみました。
やってみると結構かんたんだったので日本語でやったよってブログを書いたら、みんなもMDN書いてくれないかなー、ついでにブログのアクセス数増えないかなーみたいなお気持ちでこの記事を書いてます。

元ドキュメントのなにがわからんかったのか

arrow function は独自の arguments を持たないっていうところ¹の説明のサンプルが3つあってこんな感じでした。

var arguments = 42;
var arr = () => arguments;

arr(); // 42

レキシカルスコープ上の arguments 変数を見てる例。これはまあわかる

function foo() {
  var f = (i) => arguments[0] + i; // foo's implicit arguments binding
  return f(2);
}

foo(1); // 3

アロー関数で定義された関数 f の中では arguments は参照できず、
関数 foo の arguments がレキシカルに見えてて、
関数 f の arguments はとれてないぞという例。
なんだけど関数 f に仮引数名がついてるせいで
arguments で取りたいんだろうなという気持ちが推測しにくい……。

ここで「rest parameters を代わりに使えるよ」という説明²がはいる

function foo() { 
  var f = (...args) => args[0]; 
  return f(2); 
}

foo(); // 2

この例がキツくて、 arguments の代わりに使えるって言ってるのにさっきのfooと全然違うことしてる。

というわけで一連の流れがよくないんですよね。
たとえばこんな感じの例だとどうだろうかーと書いてみたのが以下。

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n
  return f(10);
}

foo(1); // 2

/* ここに説明がはいる */

function foo(n) { 
  var f = (...args) => args[0] + n; 
  return f(10); 
}

foo(1); // 11

id:alluser に確認してみたら、こっちのがいいんじゃないのとのこと。
というわけでこの差分を突っ込むぜー

MDNの記事の編集方法

じゃあどうやってなおすかという話なんですが割りとあっさりできました。

とりあえずはアカウント作らないとなので作成。
ページ右上にGitHubでログインできそうななにかがあるのでクリック

そうするとよくある2FAの画面がでてくるので、よく読んでOK。
僕がみたときはGitHubに登録してあるメールアドレス³へのアクセスをしてもいいかと聞かれました。
その後の登録フォームはちゃちゃっと埋めましょう。どのメールアドレス使うとか。
これでアカウント登録が完了です。

んで、次はここをやるぞーってページで編集ボタンをおします。
これも右上のほうにあります。

そうするとエディタ画面にとぶので、もうあとは直すだけです。
見たまま編集的な感じなので使い方でそんなに戸惑うことはないんじゃないかなー、ということで省略。

最後投稿する前にページ下部の「リビジョンのコメント」はわすれずに。
コミットログと同じなので丁寧に書いておきましょう⁴。

そうするとこんな感じ(リンク)に何を変更したよーみたいな履歴が残ります。

はい、かんたーん。

というわけで気になるところがあったらバンバン変更してみましょう。

参考

あとからみたら日本語でコントリビュートのやり方書いてあった

developer.mozilla.org

---

1. ここ Arrow functions - JavaScript | MDN だけどもう書き換えちゃった↩

2. In most cases, using rest parameters is a good alternative to using an arguments object.↩

3. public にしてないアドレスも含まれます。たぶん form に使うメールアドレスの候補として入れるのにしか使ってないと思うんだけど確証はないです。↩

4. これのちょっと上に「レビューを受ける」みたいなチェックボックスがあるんだけどこれチェックしても直後に反映されてビビった↩