序章

バニラJavaScriptというフレーズは、フレームワークやライブラリを使用せずにJavaScriptを作成することを含むためによく使用されます。 最新の問題の多くはフレームワークとライブラリで解決できますが、JavaScriptでネイティブに利用できるものと、それらに依存できる方法と時期を理解することは、より強力な開発者になるのに役立ちます。

さまざまな長さのテキストの文字列を受け取るシナリオを考えてみましょう。 あなたの目標は、文字列に含まれる英語の母音( “a”、 “e”、 “i”、 “o”、および “u”)(大文字と小文字)の出現回数を数えることです。

JavaScriptには3つの母音が含まれています。 DigitalOceanには6つの母音が含まれています。 Rhythmsには0個の母音が含まれています。

この記事では、反復ループを使用したソリューションと、正規表現を使用した2番目のソリューションを作成します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

  • Web開発者コンソールを備えた最新のWebブラウザー、またはREPL実装を備えたサンドボックス環境。
  • ループ文字列、およびアレイに精通していると便利です。
  • 正規表現にある程度精通していると有益な場合がありますが、必須ではありません。

この例では、for…ofincludes()を使用していますが、これはレガシーブラウザではサポートされていません。

反復ループの使用

反復アプローチでは、渡された文字列の各文字をループしてから、いずれかの文字がいずれかの母音と一致するかどうかを確認します。 文字が母音の既知の可能な値と一致する場合は、カウンター変数をインクリメントします。 ループが完了すると、この変数を参照でき、母音の数が表示されます。

このタスクの要件と手順をどのように分類するかを考えてみてください。

ここで、WebブラウザーのWeb開発者コンソールまたはREPLの別の実装を使用して、この問題の解決策を作成しましょう。

まず、あなたが知っていることを定義しましょう:

const vowels = ["a", "e", "i", "o", "u"]

このコードは、5つの英語の母音の配列を含む定数vowelsを宣言します。

次に、text値が渡される関数を作成しましょう。

const vowels = ["a", "e", "i", "o", "u"]

function countVowelsIterative(text) {

}

この関数内で、counter変数を0に初期化します。

const vowels = ["a", "e", "i", "o", "u"]

function countVowelsIterative(text) {
  let counter = 0

  console.log(`The text contains ${counter} vowel(s)`)

  return counter
}

このコードは、コンソールにメッセージを記録し、returncounter変数の値を記録します。

次に、文字列をループするために、for…ofループを使用できます。

const vowels = ["a", "e", "i", "o", "u"]

function countVowelsIterative(text) {
  let counter = 0

  for (let letter of text.toLowerCase()) {

  }

  console.log(`The text contains ${counter} vowel(s)`)

  return counter
}

for…ofループは、反復可能オブジェクト(文字列、配列、マップ、セットなど)を反復処理します。

このコードは、textのすべての文字も小文字に変換します。 大文字と小文字を区別する必要がある他のシナリオもありますが、この特定のシナリオでは、toLowerCase()を使用して、大文字の母音も定義する必要をなくすことができます。

次に、ifステートメントを使用して、lettervowelsのいずれかに一致するかどうかを確認できます。

const vowels = ["a", "e", "i", "o", "u"]

function countVowelsIterative(text) {
  let counter = 0

  for (let letter of text.toLowerCase()) {
    if (vowels.includes(letter)) {

    }
  }

  console.log(`The text contains ${counter} vowel(s)`)

  return counter
}

このコードは、vowelsの配列でincludes()メソッドを使用して、配列に選択されたletterが含まれているかどうかを判断し、trueまたはfalse、必要に応じて。

最後に、条件がtrueの場合、counter変数をインクリメントできます。

const vowels = ["a", "e", "i", "o", "u"]

function countVowelsIterative(text) {
  let counter = 0

  for (let letter of text.toLowerCase()) {
    if (vowels.includes(letter)) {
      counter++
    }
  }

  console.log(`The text contains ${counter} vowel(s)`)

  return counter
}

ユーザーが送信する可能性のあるtextの可能な値を検討し、関数がそれぞれを適切に処理するようにします。

空の文字列:

countVowelsIterative('')

0の値を返す必要があります。

Output
The text contains 0 vowel(s)

母音のない文字列:

countVowelsIterative('Rhythms')

0の値を返す必要があります。

Output
The text contains 0 vowel(s)

そして、1つ以上の母音を持つ文字列:

countVowelsIterative('DigitalOcean')

文字列内の母音の出現回数に等しい数値を返す必要があります。

Output
The text contains 6 vowel(s)

あなたは、テキストの文字列内の英語の母音の出現数を数えるための反復ループソリューションの開発に成功しました。

正規表現の使用

正規表現(regex)は、文字列内のパターンまたは文字の組み合わせを見つけるのに役立ちます。

この特定のシナリオでは、正規表現は、テキスト文字列内の英語の母音の出現回数をカウントするのに適しています。

正規表現は多くのプログラミング言語で利用可能であり、検索、照合、およびフィルタリングを必要とする多くの問題を解決するために使用されます。 正規表現に慣れることで、開発者のスキルにさらに強力なツールが追加されます。

このタスクの要件と手順をどのように分類するかを考えてみてください。

ここで、WebブラウザーのWeb開発者コンソールまたはREPLの別の実装を使用して、この問題の解決策を作成しましょう。

text値が渡される関数を作成しましょう。

function countVowelsRegex(text) {

}

母音を含む配列の代わりに、パターン[aeiou]で正規表現を使用できます。

/[aeiou]/gi

単純なパターンの場合、正規表現は通常、スラッシュのペア(/)内で定義されます。 角かっこ([および])は、「文字クラス」を指定するために使用されます。 正規表現は、この文字クラス内で一致するすべての文字を検索します。

スラッシュの後には、giの文字が使用されます。 条件が満たされると、正規表現は停止します。 グローバル検索にgを使用すると、引き続き追加の検索が実行されます。 大文字と小文字を区別しない検索にiを使用すると、大文字の母音を定義する必要もなくなります。

次に、正規表現をtextに適用します。

function countVowelsRegex(text) {
  let matchingInstances = text.match(/[aeiou]/gi);
}

このコードは、 match()メソッドを使用します。

一致する場合は、正規表現に一致するすべてのインスタンスが返されます。 一致するものがない場合は、nullの値が返されます。

matchingInstances値が存在するかどうかを確認し、両方のケースを処理します。

function countVowelsRegex(text) {
  let matchingInstances = text.match(/[aeiou]/gi);

  if (matchingInstances) {
    console.log(`The text contains ${matchingInstances.length} vowel(s)`)

    return matchingInstances.length
  } else {
    return 0
  }
}

matchingInstancesが真の値(つまり、一致する配列が見つかった)と評価された場合、配列のlengthと同じ母音の数を示すフォーマットされたメッセージをログに記録します。 次に、番号を返します。

matchingInstancesが偽の値と評価された場合、一致が見つからなかったことを意味するため、0を返します。

ユーザーが送信する可能性のあるtextの可能な値を検討し、関数がそれぞれを適切に処理するようにします。

1つ以上の母音を持つ文字列:

countVowelsRegex('DigitalOcean')

文字列内の母音の出現回数に等しい数値を返す必要があります。

Output
The text contains 6 vowel(s)

テキストの文字列内の英語の母音の出現回数をカウントするための正規表現ソリューションの開発に成功しました。

結論

この記事では、JavaScriptのテキスト文字列内の母音の数をカウントする2つのソリューションを正常に実装しました。 解決策を考案するこのプロセスでは、問題を小さなステップに分割し、JavaScriptで利用可能なメソッドを活用しました。

反復ループアプローチでは、文字列、配列、for…oftoLowerCase()ifincludes()、およびインクリメントを使用しました。

正規表現アプローチでは、文字列、配列、match()if…else、およびlength()を使用しました。

プロジェクトのソリューションを選択するには、読みやすさやパフォーマンスの最適化などの要素を考慮する必要があります。

文字列と配列で利用できる他のメソッドを調べて、学習を続けてください。