企業が「会いたい」と思う魅力的な職務経歴書とは？PR

Findyセミナーで職務経歴書の役割や書き方、自身の魅力の棚卸し方法などを限定公開

無料セミナーの詳細を見る

@yara_min

遠鉄システムサービス株式会社

JavaScript学習で苦戦した演習問題まとめ

初心者

最終更新日 2024年04月30日投稿日 2024年04月30日

はじめに

JavaScriptの学習中に取り組んだ演習問題で
苦戦した内容をまとめたいと思います。

dog.getAtoy()を2回呼び出し、1が2回加算されたはずのtoyCountが0のままでした。
これは、1が加算されたthis.toyCountの代入先がthisを付け忘れたtoyCountだったことが原因でした。
thisを付ける場所を間違えているのかと何度も書き直しましたが、代入先のtoyCountにもthisが必要だったことには全く気付いていませんでした。

修正を繰り返して辿り着いた正しい答えは、以下の通りです。

//正解
const dog = {
    name: 'Pochi',
    toyCount: 0,
    getAtoy() {
        this.toyCount = this.toyCount + 1;
        return 'TOY';
    }
}

dog.name // "Pochi"
dog.toyCount // 0
dog.getAtoy() // "TOY"
dog.getAtoy() // "TOY"
dog.toyCount // 2

ほとんど違いはありませんが、getAtoyのtoyCountにthisが付けられています。
この場合のthisはdogを指しているので、thisを付けることで関数dogのtoyCountに1ずつ加算され、dog.toyCountが2になりました。

2.filterメソッドを使った問題

filterは提供されたテスト関数を満たす要素からなる新しい配列を生成します。

問題
validAnimalNamesという関数を作ってください。
この関数はStringの配列を引数として受け取って、Stringの長さが5文字未満の値だけが入っている新しい配列を返してください。

//実行例
validAnimalNames(['dog', 'cat', 'rabbit', 'horse', 'kangaroo', 'bear']);
// => ["dog", "cat", "bear"]
// 'rabbit', 'horse', 'kangaroo'は5文字以上なので返ってきた配列には含まれない

filterやsome,everyの演習問題も難易度が高いものではなかったのですが、
関数とメソッドの理解がごちゃ混ぜな状態でアロー関数について学び、filterやsome,everyの内容へ進んでしまったため、書き方がめちゃくちゃになってしまいました。
不正解を見て、どこが理解できていなかったかを振り返りたいと思います。

//不正解
validAnimalNames.filter(validAnimalNames => {
    return validAnimalName.length < 5;
});

関数を作ることと、filterメソッドを使うことを同時に行おうとしたために、書き方がおかしくなってしまったと思います。
そのため、まず関数を作りその中にfilterメソッドを書くという順番で基本的な書き方を覚えられるよう意識しました。

//正解
function validAnimalNames(Array) {
    const filteredArray = Array.filter(name => name.length < 5 ) 
    return filteredArray
}

// => ["dog", "cat", "bear"]

3.everyメソッドを使った問題

everyは排列内のすべての要素が指定されたテスト関数を満たすかどうかをtrueかfalseで返します。

問題
evenNumsという関数を定義してください。この関数は配列を一つ引数として受け取って、その配列の中身がすべて偶数であればtrueを返してください。そうでない場合はfalseを返してください。everyメソッドを使用してください。

//実行例
evenNums([2,6,12,18]) //true（すべて偶数）
evenNums([3,4,16,22]) //false（奇数が含まれている）

everyメソッドの問題もfilterメソッドの問題と同じように、evenNums関数の定義とeveryメソッドの使用を同時に行おうとしたことで正しく書くことができていませんでした。

//不正解
allEvens.every(allEven => {
    return allEven % 2 === 0;
})

filterメソッドと同様に、evenNums関数を作りその中にeveryメソッドで条件を書くという順番を意識したことで、正しい型を理解して書くことができました。

//正解
function evenNums(Array) {
    const resultEvent = Array.every(num => num % 2 === 0)
        return resultEvent
}

evenNums([2,6,12,18]) //true
evenNums([3,4,16,22]) //false

4.自分がよくやるミス

自分が演習問題で苦戦する時の原因は「書き方を理解していない」ことの他に、「誤字に気付いていない」ことも多いです。
書き方は正しいのに1字の誤字に気付かず何度も書き直して時間を掛けてしまう場面が、これまでにも多々ありました。
そのため、演習問題だけでなく実際にコードを書く場面でエラーが出た際には、まず誤字を疑うことを意識したいと思います。