フロントエンドインタビューの準備:15の質問

本日翻訳を公開している記事の著者は、インタビューで尋ねられた15の質問と、フロントエンド開発者のポジションの候補者に自分で尋ねた質問をリストしています。







1. DOMとは何ですか?



DOM(Document Object Model)は、HTMLドキュメントへのプログラミングインターフェイスです。このインターフェイスを使用すると、スクリプトからドキュメントに影響を与え、外観、スタイル、コンテンツを変更できます。DOMでは、ドキュメントはノードのツリーとして表されます。



2. <span>要素と<div>要素の違いは何ですか?



  • <span> インライン要素です。
  • <div> ブロック要素です。


要素<div>は、ドキュメントのセクションのスタイルを設定するために使用する必要があります。また、要素<span>は、画像やその他の同様のページ要素の少量のテキストのコンテナとして機能します。



インライン要素にブロック要素を配置することはできないことに注意してください。これは、特に、インライン要素内のブロック要素の誤った配置を示す例です(これは要素内に<div>I'm illegal</div>配置されたフラグメントです<span>)。



<div>Hi<span>I'm the start of the span element <div>I'm illegal</div> I'm the end of the span</span> Bye I'm the end of the div</div>


3.メタタグとは何ですか?



メタタグは、ページ<head>のコンテンツを説明するページタグにあるタグです。メタタグはページに表示されません。それらはそのコードにのみ見られます。



彼らの主な仕事は、検索エンジンにページのコンテンツを簡単に説明することです。次に例を示します。



<head>
  <meta charset="UTF-8">
  <meta name="description" content="Description search engines use">
  <meta name="keywords" content="Keywords, of, your, page">
  <meta name="author" content="Me">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


4. CSSの識別子セレクターとクラスセレクターの違いは何ですか?



識別子(id)は一意です。アイテムは1つの識別子のみを持つことができます。特定のIDを持つ要素を1つだけページに表示できます。



クラス名(class)は一意ではありません。同じクラスを複数の要素に割り当てることができます。要素には複数のクラスを割り当てることができます。



特定のスタイルをページのいくつかの要素に適用する必要がある場合、このタスクはクラスを使用して解決する必要があります。



5. CSSでメディアクエリを使用するにはどうすればよいですか?



メディアクエリは、@mediaCSSスタイルをさまざまなタイプのコンテンツに適用できるルールを使用します。メディアクエリを使用して、ページが表示される環境の特性に基づいてページ要素をカスタマイズすることもできます。



/*      <div>  "red"   ,      600px   */
@media only screen and (max-width: 600px) {
  div {
    background-color: red;
  }
}


6. CSSの疑似クラスとは何ですか?



CSSでは、疑似クラスは、特別な状態にある要素のスタイルを記述するために使用されます。疑似クラスをCSSセレクターと組み合わせて使用​​すると、状態に基づいて要素の外観をカスタマイズできます。



次に例を示します。



/* 
     <a>,      ,     green. 
*/
a:hover {
  color: green;
}
/*     <a>      purple.*/
a:visited {
  color: purple;
}


疑似クラスに名前を付けることができるかどうか尋ねられた場合ここにそれらの大きなリストがあるページがあります。



7.次のタイプの要素の配置の違いは何ですか:相対、固定、絶対、静的?



  • 相対位置とは、要素がデフォルトの位置からずれている場合です。
  • 固定位置とは、ブラウザウィンドウの端に基づいて要素の位置を調整する場合です。
  • 絶対配置とは、最も近くに配置された親要素に対する要素の配置であり、開発者が指定した場所に正確に配置されます。
  • 静的配置は、ドキュメントに記載されている順序でアイテムを表示するデフォルトの配置モードです。


8. PUTリクエストとPOSTリクエストの違いは何ですか?



PUT要求により、ターゲットリソースが要求で送信されたデータに置き換えられます。既存のリソースのコンテンツを更新したり、新しいリソースを作成したりするために使用できます。



POSTリクエストは、リクエストで渡されたデータのリソース固有の処理をもたらします。これらは、さまざまなアクションを実行するために使用できます。含む-新しいリソースの作成、サーバーへのファイルのアップロード、フォームの送信。



PUTリクエストとPOSTリクエストのもう1つの違いは、PUTリクエストは同一であるが、POSTリクエストはそうではないことです。つまり、同じデータが送信され、同じURLで実行される要求が複数回実行される場合、これはこの要求を1回実行することと同じです。POST要求を複数回実行することは、1回実行することと同じではありません。つまり、たとえば、そのようないくつかの要求は、サーバー上にいくつかのオブジェクトの作成につながる可能性があります。



9. Long Pollingテクノロジー、WebSocketプロトコル、およびサーバーで生成されたイベントの違いは何ですか?



  • Long Polling . , , , . .
  • WebSocket .
  • , , HTTP-, .


10. -, ?



ローカルストレージは、その名前が示すように、ブラウザーがデータをローカルに保存するために使用できる場所です。最大10MBのデータを保存できます。セッションストレージは、セッションに関連付けられ、セッションの完了後に削除される一種のローカルストレージです。セッションストレージには、最大5MBのデータを保存できます。



Cookieは、4KBを超えない少量のデータを格納するために使用されます。ブラウザはそれらを使用でき、サーバーはブラウザからそれらを要求できます。



11. CORSとは何ですか?



CORS(Cross-Origin Resource Sharing)は、ページが特定のドメインの外部にあるリソースにアクセスできるようにするブラウザーベースのメカニズムです。これにより、ページの機能が拡張され、同じオリジンポリシーに柔軟性が追加されます。



12.約束とは何ですか?



Promiseは、JavaScriptが非同期操作を実行するときに使用するオブジェクトです。これらは、非同期操作の操作を容易にし、コールバックやイベントよりも便利なエラー処理メカニズムを提供します。



13.約束はどのような状態になりますか?



約束は、次の3つの状態のいずれかになります。



  1. Fulfilled-Promiseに関連付けられた操作が正常に完了しました。
  2. 拒否-Promiseに関連付けられた操作がエラーで完了しました。
  3. 保留中-Promiseは保留状態です。つまり、正常に完了した、またはエラーが発生したとは言えません。


14. JavaScriptの変数と関数の巻き上げとは何ですか?



変数と関数を持ち上げると、宣言がスコープ(グローバルスコープまたは関数スコープ)の先頭に移動します。



15. JavaScriptではどの値が間違っていますか?



JavaScriptでは、false値は、ブール型に変換されると値になる値falseです。これらは次の値です。



  • '' 
  • ヌル
  • 未定義
  • NaN
  • false
  • -0
  • 0n //タイプBigIntの値は、ブール型に変換されると、タイプNumberの値と同じように動作します


結果



私があなたと共有した質問は、インタビューの間に尋ねられました。私は他の開発者とのインタビューで彼らに尋ねました。このような質問は、実際的な割り当てによって補完され、フロントエンドプログラマーのポジションの候補者の知識をテストするための良い方法です。



フロントエンドインタビューの準備として、この記事で説明されているよりも多くのJavaScriptの質問があると思いますTypeScriptに関する質問の解析も非常に役立ちます。



履歴書にフロントエンドフレームワークに精通していると述べている場合、これは、このフレームワークの知識について質問されるという事実に備える必要があることを意味します。



フロントエンドのインタビューでどのような質問がありましたか?










All Articles