みっちぇのWebデザイン研究所

はてなブログのカスタマイズを中心に、ウェブデザインについて研究するブログ

JavaScriptの勉強-変数テスト編【MDN Web Docsのスキルテスト使用】

今回はJavaScriptの練習でお世話になっているMDN Web Docsのサイトでテストができるので、使い方を記事にまとめてみました。
英語のページですが翻訳すると微妙に日本語の順序がおかしくて理解しづらい…と感じたので、同じようにJavaScriptの勉強をしていて、MDN Web Docsを使用している方の参考になれば嬉しいです。

【MDN】スキルをテストする:変数 developer.mozilla.org

使い方

まず変数についてのテストが一つ目にでてくるのでそちらを例に。

ReferenceError〜〜とでているフォームには、自分が入力したコードの結果が出ます。 その下の入力可能なテキストエリアには、コードを入力します。 //Don't edit the code 〜〜 と書いている以下は触りません。

f:id:micche-labo:20210924150326p:plain
入力画面の説明

指示された通り入力

サイトのテストでは、

このタスクでは、次のことを行います。
1. と呼ばれる変数を宣言しますmyName。
2. myName別の行に適切な値で初期化します(実際の名前などを使用できます)。
3. と呼ばれる変数を宣言myAgeし、同じ行で値を使用して初期化します。
以下のライブコードを更新して、完成した例を再作成してみてください。
Test your skills: variables - Learn web development | MDN

と指示されています。(翻訳したそのまんま引用)

つまりは

  1. myNameという変数を作ってね
  2. myNameの変数になんか文字を格納してね
  3. myAgeという変数をつくって、同じ行で数を格納してね

以下のライブコードに入力して完成させてね

ってことだと思う。多分。

あってたときの結果スクショ

入力したコードがあっていれば、Error〜となっていた箇所が画像のような表示にかわります。

f:id:micche-labo:20210924150940p:plain
結果のスクショ

私が入力した値(答え)

let myName;
myName = 'Micche';
myAge = 28;

MDNのテストページの良さ

何か足りてなかったり間違ったりしても、このフォームにエラーが吐き出されてヒントになるのでわかりやすいです。
学習者にはとても嬉しい…!!

まとめ

MDNのJavaScriptの変数テストは全3問
学習者にはぴったりのボリューム感と学習のしやすさなので、私のような独学の方にはぴったりです。

少し学習したらこのようなテストをweb上で受けられ、自分の理解を深めることができるのでとてもいいなと思いました。

引き続き、勉強に励んで参ります…!