翻訳者から： マリア・ペルナ（Maria Antonietta Perna）による記事を公開しました。これは 、面接で求職者と開発者に最もよく提供されるJavaScriptの典型的なタスクについて説明しています 。 この記事は、主に初心者プログラマーに役立ちます。 以下に問題解決の例を示します。それらがあまり良くないように思われ、より良いオプションがあります-コメントで代替案を提案してください。
テクノロジー企業へのインタビューは長い間言い訳でした。 これに驚かないでください-面接が成功すれば、良い仕事を得る機会が得られます。 しかし、これは複雑な問題を解決する必要があることが多いため、それほど単純ではありません。
そして、多くの場合、これらのタスクのほとんどは、申請者が実行する作業に関連していませんが、解決する必要があります。 Googleや他のソースに確認せずに、ボード上で実行する必要がある場合があります。 はい、状況は徐々に変化しており、一部の企業はそのようなインタビューを拒否していますが、多くの雇用者はまだこの伝統を固守しています。 この記事は、応募者のタスクとしてよく使用される典型的なJavaScriptタスクの分析に専念します。
「Habr」の読者には、「Habr」プロモーションコードを使用してSkillboxコースに登録すると10,000ルーブルの割引があります。
Skillboxの推奨事項：実践コース「Mobile Developer PRO」 。
主なことは、面接の準備です
はい。タスクの分解を始める前に、インタビューの準備に関する一般的なヒントを見てみましょう。
主なことは、事前に準備することです。 アルゴリズムとデータ構造をどれだけ覚えているかを確認し、あまり馴染みのない分野の知識を引き出します。 面接の準備に役立つ多くのオンラインプラットフォームがあります。 GeeksforGeeks 、 Pramp 、 Interviewing.ioおよびCodeSignalをお勧めします。
決定を大声で発音することは学ぶ価値があります。 ボードに書くだけでなく（またはコンピューターにコードを静かに入力するのではなく）、あなたが何をしているかを応募者に伝えることをお勧めします。 したがって、コードを間違えても決定が一般的に正しい場合は、成功の可能性を高めることができます。
問題を解決してから解決する必要があります。 場合によっては、表面的にタスクを理解してから間違った方向に進むことができます。 インタビュアーにいくつかの明確な質問をする価値があるかもしれません。
PCではなく、手動でコードを書く練習をする必要があります。 面接時に、応募者にマーカーやボードが与えられ、ヒントや自動フォーマットがない場合があります。 ソリューションを検索するときは、コードを紙に書くか、ボードに直接書いてください。 すべてを念頭に置いておくと、重要なことを忘れることができます。
JavaScriptテンプレートタスク
おそらく、これらのタスクのいくつかは既におなじみのものです。 似たような問題を解決するために面接を行ったか、JavaScriptを学習しながらそれらを練習しました。 さて、今度はプロセスを詳細に説明して、もう一度それらを解決するときです。
パリンドローム
回文とは、単語、文、または一連の文字であり、通常の方向または逆方向にまったく同じように読むことができます。 たとえば、「Anna」は回文ですが、「table」と「John」はそうではありません。
ステージング
文字列を指定します。 文字列が回文である場合はtrueを返し、そうでない場合はfalseを返す関数を作成する必要があります。 この場合、スペースと句読点を考慮する必要があります。
回文（ 'racecar'）=== true
回文（ 'table'）=== false
タスクを分解します
ここでの主なアイデアは、線を反対方向に反転させることです。 「逆」行が元の行と完全に同一である場合、回文があり、関数はtrueを返す必要があります。 そうでない場合、false。
解決策
パリンドロームを解決するコードは次のとおりです。
const palindrome = str => { // turn the string to lowercase str = str.toLowerCase() // reverse input string and return the result of the // comparisong return str === str.split('').reverse().join('') }
最初のステップは、入力文字列の文字を小文字に変換することです。 これは、プログラムが大文字と小文字などではなく、文字そのものを正確に比較することを保証します。
2番目のステップは、行を逆にすることです。 これは簡単です。.split（）メソッド（文字列ライブラリ）を使用して配列に変換する必要があります。 次に、.reverse（）（配列ライブラリ）を使用して配列を反転します。 最後の手順は、.join（）（配列ライブラリ）を使用して逆配列を文字列に変換することです。
ここで必要なのは、「逆」行を元の行と比較して、結果をtrueまたはfalseに戻すことだけです。
フィズバズ
インタビューで最も人気のあるタスクの1つ。
ステージング
1〜nの数値をコンソールに表示する関数を記述する必要があります。nは、関数がパラメーターとして受け取る整数で、次の条件があります。
- 3の倍数ではなく、fizz出力。
- 5の倍数ではなくバズ出力。
- 3と5の両方の倍数である数値ではなく、fizzbuzz出力。
例
フィズバズ（5）
結果
// 1
// 2
//フィズ
// 4
//バズ
タスクを分解します
ここでの主なことは、JavaScriptを使用して複数の数字を検索する方法です。 モジュール演算子または剰余-％を使用して実装できます。これにより、2つの数値を除算するときに剰余を表示できます。 余りが0の場合、これは最初の数値が2番目の数値の倍数であることを意味します。
12％5 // 2-> 12は5の倍数ではありません
12％3 // 0-> 12は3の倍数
したがって、12を5で除算すると、残り2で2になります。12で3を除算すると、残り0で4になります。最初の場合、12は5の倍数ではありません。
解決策
最善の解決策は、次のコードです。
const fizzBuzz = num => { for(let i = 1; i <= num; i++) { // check if the number is a multiple of 3 and 5 if(i % 3 === 0 && i % 5 === 0) { console.log('fizzbuzz') } // check if the number is a multiple of 3 else if(i % 3 === 0) { console.log('fizz') } // check if the number is a multiple of 5 else if(i % 5 === 0) { console.log('buzz') } else { console.log(i) } } }
この関数は、条件ステートメントを使用して必要なチェックを実行し、ユーザーが必要とする結果を生成します。 タスクは、if ... elseステートメントの順序に注意を払う必要があります。二重条件（&&）で始まり、複数の数値が見つからなかった場合は終了します。 その結果、すべてのオプションをカバーしています。
アナグラム
これは、同じ量の別の単語のすべての文字を含むが、順序が異なる単語の名前です。
ステージング
2行がアナグラムであるかどうかをチェックする関数を作成する必要があり、文字の大文字と小文字は区別されません。 文字のみが考慮されます。 スペースや句読点は考慮されません。
アナグラム（ 'finder'、 'Friend'）-> true
アナグラム（ 'hello'、 'bye'）-> false
タスクを分解します
ここでは、2つの入力行の各文字と各行の番号を確認する必要があることを考慮することが重要です。
ファインダー-> f：1フレンド-> f：1
i：1 r：1
n：1 i：1
d：1 e：1
e：1 n：1
r：1 d：1
アナグラムデータを保存するには、JavaScriptオブジェクトリテラルなどの構造を選択する必要があります。 この場合のキーは文字記号で、値は現在の行での繰り返しの数です。
他の条件があります：
- 比較する際に、大文字と小文字を区別しないようにする必要があります。 両方の文字列を小文字または大文字に変換するだけです。
- 比較からすべての非文字を除外します。 正規表現を使用することをお勧めします 。
解決策
// helper function that builds the // object to store the data const buildCharObject = str => { const charObj = {} for(let char of str.replace(/[^\w]/g).toLowerCase()) { // if the object has already a key value pair // equal to the value being looped over, // increase the value by 1, otherwise add // the letter being looped over as key and 1 as its value charObj[char] = charObj[char] + 1 || 1 } return charObj } // main function const anagram = (strA, strB) => { // build the object that holds strA data const aCharObject = buildCharObject(strA) // build the object that holds strB data const bCharObject = buildCharObject(strB) // compare number of keys in the two objects // (anagrams must have the same number of letters) if(Object.keys(aCharObject).length !== Object.keys(bCharObject).length) { return false } // if both objects have the same number of keys // we can be sure that at least both strings // have the same number of characters // now we can compare the two objects to see if both // have the same letters in the same amount for(let char in aCharObject) { if(aCharObject[char] !== bCharObject[char]) { return false } } // if both the above checks succeed, // you have an anagram: return true return true }
上記のスニペットでObject.keys（）を使用していることに注意してください。 このメソッドは、オブジェクトに表示されるのと同じ順序で名前またはキーを含む配列を返します。 この場合、配列は次のようになります。
['f'、 'i'、 'n'、 'd'、 'e'、 'r']
したがって、ボリュームサイクルを実行せずにオブジェクトのプロパティを取得します。 タスクでは、このメソッドを.lengthプロパティとともに使用して、両方の行に同じ文字数があるかどうかを確認できます。これはアナグラムの重要な機能です。
母音検索
インタビューでよく出くわすかなり単純なタスク。
ステージング
引数として文字列を取り、文字列に含まれる母音の数を返す関数を作成する必要があります。
母音は「a」、「e」、「i」、「o」、「u」です。
例：
findVowels（ 'hello'）//-> 2
findVowels（ 'why'）//-> 0
解決策
最も簡単なオプションは次のとおりです。
const findVowels = str => { let count = 0 const vowels = ['a', 'e', 'i', 'o', 'u'] for(let char of str.toLowerCase()) { if(vowels.includes(char)) { count++ } } return count }
.includes（）メソッドの使用に注意することが重要です。 文字列と配列の両方で使用できます。 配列に特定の値が含まれているかどうかを判断するために使用する必要があります。 このメソッドは、配列に指定された値が含まれる場合はtrueを返し、含まれない場合はfalseを返します。
問題に対するより簡潔な解決策があります。
const findVowels = str => { const matched = str.match(/[aeiou]/gi) return matched ? matches.length : 0 }
これには.match（）メソッドが含まれ、効率的な検索を実装できます。 メソッドの引数としての正規表現が指定された文字列内で見つかった場合、一致する文字の配列が戻り値になります。 一致するものがない場合、.match（）はnullを返します。
フィボナッチ
さまざまなレベルのインタビューで見つけることができる古典的なタスク。 フィボナッチ数列は一連の数字であり、各後続は前の2つの合計であることを思い出してください。 したがって、最初の10個の数字は次のとおりです。0、1、1、2、3、5、8、13、21、34。
ステージング
特定のシーケンスでn番目のレコードを返す関数を記述する必要があります。nは、関数に引数として渡される数値です。
フィボナッチ（3）//-> 2
このタスクでは、引数で指定された回数だけループし、適切な位置で値を返します。 この問題の記述方法では、サイクルを使用する必要があります。 代わりに再帰を使用する場合、インタビュアーはそれを気に入って、追加のポイントを与えることができます。
解決策
const fibonacci = num => { // store the Fibonacci sequence you're going // to generate inside an array and // initialize the array with the first two // numbers of the sequence const result = [0, 1] for(let i = 2; i <= num; i++) { // push the sum of the two numbers // preceding the position of i in the result array // at the end of the result array const prevNum1 = result[i - 1] const prevNum2 = result[i - 2] result.push(prevNum1 + prevNum2) } // return the last value in the result array return result[num] }
結果の配列では、シーケンス内の各レコードが前の2つの数値の合計で構成されるため、最初の2つの数値が行に含まれています。 最初の段階では、次の番号を取得するために使用できる2つの番号はありません。そのため、サイクルは自動モードで番号を生成できません。 しかし、知っているように、最初の2つの数値は常に0と1です。したがって、結果の配列を手動で初期化できます。
再帰に関しては、ここではすべてが同時に単純で複雑になっています。
const fibonacci = num => { // if num is either 0 or 1 return num if(num < 2) { return num } // recursion here return fibonacci(num - 1) + fibonacci(num - 2) }
fibonacci（）を呼び出し続け、より小さな数を引数として渡します。 渡された引数が0または1になったら停止します。
おわりに
ほとんどの場合、フロントエンド開発者またはJavaScript開発者の仕事についてインタビューを受けた場合、これらのタスクのいずれかに既に遭遇しています（特にこれがジュニアレベルの場合）。 しかし、彼らがあなたに出会わなかったなら、彼らは将来、少なくとも一般的な開発のために重宝するでしょう。
Skillboxの推奨事項：
- 応用Python Data Analystオンラインコース。
- オンラインコース「Profession frontend-developer」 。
- 実用的な年次コース「PHP開発者0からPRO」 。