JavaScript~タイピングゲーム ver.2~ 先生の回答

ようやくパソコン(MacBook Pro16 インチ)が届きました。☺️
嬉しい♪けど…高い!!

今日は、パソコンがきてから初めてのブログ更新です!!

質問の仕方が悪く、毎回先生を困らせてます。質問の仕方は就職してからも大事だということを理解したので、頑張ります。

では、本題に入ります。
先生に質問した内容として、
1、for文の中見が機能しないこと
2、console.log()はネスト構造で機能しなかったけどなぜ?

質問して、理解したこと、新しく調べたり知識を得た内容として、
1、for文の中身でループ条件でインデックスを使わないコードはあまり見たことがないこと
また、私のコードのfor文のループの中身が自分の意図した動作になっていなかったこと

2、基本的には、ネスト構造だからと言って、console.log()が機能しないことはないということ

以上が簡単にまとめた内容です。

これを詳しく見ていきます。
自分が考えたコードとしては、

自分が書いたコードはこれなのですが…

まず、コードの大まかな流れを確認すると
1、ゲームスタートボタンを押せば、問題が収納されているquestionArryが読み込まれる
2、次に、関数calc()で問題の文字列を一文字ずつに分解する(split関数を使って)
3、文字が入力されると、配列letterArryにタインピングした文字が挿入される
4、for文をここで用いて、挿入された文字と、問題の分解された文字が、等しくなければ、letterArryに格納されている文字を削除する(pop関数を使って)
さらに、i = i – 1で次の単語へいかないように調整する。

これが上記に表示されているコードの大まかな流れです。

ここで、上記のコードの18行目(for文のところ)から見ていただきたいのですが…

for (let i = 1; letterArry.length === questionLetterArry.length; i++) {省略}

まず、for文のループ条件が、インデックスを用いておらずに、letterArryとquestionLetterArryの長さが等しいときに、for文を抜け出すようになっています。
ここで、つまずいてしまったので、先生に聞いたところ…

forの条件が
letterArry.length === questionLetterArry.length;なので、i(インデックス)は関係なくなっているからです。そのforは問題の長さとユーザーが
入力した文字の長さが等しい時、つまり最後だけ回る条件になっているように見えます

と言うことでした。
自分の意図としては、for文を全て完了したとき(自分の考えだと、letterArryとquestionLetterArryが長さが等しくなったとき)にfor文を抜けると言う考えだったので?が残っているので疑問が解消次第記事にします!!

で、for文についての先生の回答が、

["r", "e", "d"].findIndex((e) => e === "e")
findIndexを使うと
今打たれた文字が  “e" だとしたら
これで場所が取れます(この場合1)
含まれていない場合 -1が返るので
わからないですけど使えるメソッドかもしれません

さらに、先生のコードが

注目が16行目のif文からで、
findIndexと言う今まで知らなかった関数が出てきたので、調べました。

findIndexは、配列の中から、特定の要素のインデックスを返します。

?なので

さらに調べました😭

const a = 'blue'
const ary = ['red', 'green', 'blue', 'yellow', 'white']

// aと同じ要素があれば、そのインデックス(何番目か)を返します。
const index = ary.findIndex(item => item === a)
// index = 2

const result = ary[index]
// result = 'blue'

ちょっと、自分でコードの例を考えるのが大変だったので、コピペしました。すいません。
リンクはこれです。

次に、

const index = questionLetterArry.findIndex(elem => elem === e.key);
if (index !== -1 && questionLetterArry[0] === getkey) {

なのですが、まずは、
indIndex(elem => elem === e.key)でこんな使い方できるのかと感激しました。
意味は、入力したキー(e.key)とquestionLetterArryの文字が一緒であればその文字の値を返すと言う意味です。
これを変数indexに代入して、
if文で、index !== -1 (この意味は、入力された文字と問題の文字が一致した場合、つまり、検索結果が見つかったとき、-1を返します。)← “!== -1″より、否定のfalseつまり、正しいときとなる
さらに、問題の最初の文字が、入力された文字と等しいときは、問題の配列questionLetterArryの最初に格納されている(index番号[0])を削除する。

ちなみに、次のif文(20行目から)で
if (questionLetterArry.length === 0) {
reStartGame();
}
問題の配列questionLetterArryの長さ(配列の個数)0になったとき関数reStartGameが読み込まれる。

本当に先生すごいなぁ。自分も早く追いつけ追い越せ!!笑

以上です。

もりけん塾
もりけん先生ブログ

コメント