JSインタビューの質問に対応する（2022）

電話による面接ラウンドの後、資格とスキルに関する一般的な質問を含む持ち込み面接に直面する必要があります。 自由形式の質問の一般的な準備とは別に、技術的な質問に答える方法も知っておく必要があります。

自信とカリスマ性を持って質問に答えたとしても、技術的な質問に答えるときは正確でなければなりません。 面接に出る前に準備するための技術的な質問をいくつかまとめました。

これらを、ReactJSのインタビュー中に予想できる質問の種類の例として考えてください。

Q.1）RealDOMとVirtualDOMの違いを説明してください。

回答：仮想DOMはより高速に更新されますが、HTMLを直接更新することはできません。 要素が更新された場合、JSXを更新できます。 メモリを無駄にしたくない場合に最適なオプションであり、操作も簡単です。

一方、Real DOMの更新は低速ですが、HTMLを直接更新できます。 ただし、要素の更新から作成されたDOMは操作に費用がかかるため、費用効果は高くありません。 それに加えて、RealDOMには多くのストレージスペースも必要です。

Q.2）「React」をどのように表現しますか？

回答：ReachはFacebookによって開発されており、再利用可能なUIコンポーネントの形成に役立つコンポーネントベースのアプローチに従います。 これは、複雑なモバイルUIとインタラクティブなWebを作成するために使用されるフロントエンドのJavaScripライブラリです。 Reactは2015年にオープンソースになり、今日では広範なコミュニティサポートがあります。

Q.3）Reactを使用する主な利点を教えてください。

回答：Reactはアプリケーションのパフォーマンスの効率を高め、さらにクライアント側とサーバー側の両方で使用できます。 Reactで記述されたコードはJSXにより読み取り可能であり、UIテストの記述は手間がかかりません。 ReactをAngularやMeteorなどの他のフレームワークと簡単に統合できます。

Q.4）Reactの3つの主な機能は何ですか？

回答：Reactは実際のDOMではなく仮想DOMを使用します。 サーバーサイドレンダリングを使用しながら、データバインディングまたは一方向フローに従います。

Q.5）Reactに制限はあると思いますか？

回答：はい、初心者レベルのプログラマーが理解するのは難しいと思います。また、JSXとインラインテンプレートのためにコーディングが非常に難しくなる可能性があります。 また、広範なフレームワークであるため、Reactに慣れるには時間がかかります。

Q.6）仮想DOMとその動作について説明してください。

回答：仮想DOMは実際のDOMのコピーであり、軽量のJavaScriptオブジェクトです。 これは、すべての属性、コンテンツ、および要素をそれらのプロパティを持つオブジェクトとしてリストするノードツリーです。 Reactのレンダリング関数は、そのコンポーネントからノードツリーを作成します。 ユーザーまたはシステムが複数のアクションを実行すると、データモデルの変更に応答するようにツリーを更新し続けます。

仮想DOMの動作は、次の3つのステップに従います。

1. まず、データにわずかな変更があった場合でも、UI全体が仮想DOM表現でレンダリングされます。
2. これにより、計算される新しいDOMと以前のDOMの表現に違いが生じます。
3. 実際のDOMは、計算の終了後に変更されたものでのみ更新されます。

Q.7）JSXについて知っていることを教えてください。

回答： JSXは、ReactがHTMLのようなテンプレート構文とともに使用して、JavaScriptの表現力を活用するファイルです。 これはJavaScriptSMLの省略形であり、HTMLファイルを簡単に把握できるようにします。 JSXは、アプリケーションの効率とパフォーマンスを向上させるために使用されます。

Q.8）ReactとAngularの違いを説明してください。

回答： ReactとAngularにはいくつかの大きな違いがあります。たとえば、前者はMVCのビューのみを取得し、後者は完全なMVCのビューを取得するアーキテクチャなどです。 レンダリングに関しては、Angularにはクライアント側のレンダリングがあり、Reactにはサーバー側のレンダリングがあります。 Reactは仮想DOMと一方向のデータバインディングを使用し、Angularは双方向のデータバインディングを備えた実際のDOMを使用します。 Angularでのデバッグはランタイムデバッグですが、Reactにはコンパイル時デバッグがあります。 最後に、GoogleはAngularを作成しましたが、Reactを構築したクレジットはFacebookにあります。

Q.9）小道具とはどういう意味ですか？

回答：小道具は読み取り専用のコンポーネントであり、不変または純粋に保つ必要があります。これは「Reactのプロパティ」の省略形です。 アプリケーションでは、それらは親から子コンポーネントに送信されます。これは、データの単方向フローを維持するのに役立ちます。 小道具は、動的に生成されるデータのレンダリングにも役立ちます。

Q.10）Reactの状態とは何ですか？また、それらをどのように使用しますか？

回答：状態はReactコンポーネントの魂であり、データソースであるため、単純化する必要があります。 状態は、コンポーネントの動作とレンダリングを決定するオブジェクトであると言えます。 インタラクティブで動的なコンポーネントを作成する際に変更可能で効率的であるため、状態を変更できます。

Q.11）州と小道具の主な違いは何ですか？

回答：小道具の親コンポーネントは値を変更できますが、状態では発生しません。 ただし、状態のコンポーネント内に変更がありますが、これは小道具には当てはまりません。 親コンポーネントと同様に、子コンポーネントにも変更はありませんが、小道具で確認できます。

Q.12）州と小道具の類似点は何ですか？

回答：州と小道具の間には主に3つの類似点があります。

1. どちらも親コンポーネントから初期値を受け取ります。
2. どちらの場合も、コンポーネント内でデフォルト値を設定できます。
3. 子コンポーネントでは、初期値を簡単に設定できます。

Q.13）ステートフルコンポーネントとは何ですか？

回答：コンポーネントのメモリ内の状態の変化は、ステートフルコンポーネントによって保存されます。また、状態を変更し、状態に存在するすべての変更を認識する権限もあります。 ステートレスコンポーネントは、必要な状態変更について通知した後、小道具を送信します。

Q.14）ステートレスコンポーネントとはどういう意味ですか？

回答：コンポーネントの内部状態はステートレスコンポーネントによって計算され、状態を変更する権限はありません。 彼らは現在、過去、そして未来の状態変化についての知識を欠いています。 最後に、ステートフルコンポーネントは、コールバック関数として扱う小道具を送信します。

Q.15）合成イベントについて説明してください。

回答：ブラウザのネイティブイベントのクロスブラウザラッパーとして動作するオブジェクトは、合成イベントと呼ばれます。 彼らの主な機能は、複数のブラウザの動作を組み合わせて1つのAPIを作成することです。 これにより、さまざまなブラウザ間でイベントの一貫したプロパティが保証されます。

Q.16）refとは何ですか、いつ使用する必要がありますか？

回答： RefはReactの参照を意味し、特定のReactコンポーネントまたは要素の参照を格納する属性です。 コンポーネントのレンダリング構成関数は、これらの参照を返します。 これらは、重要なコンポーネントにメソッドを追加し、DOM測定値を取得するのに役立ちます。 参照を使用して、フォーカスを管理したり、メディアの再生やテキストを選択したりすることもできます。 さらに、サードパーティのDOMライブラリとの統合や、命令型アニメーションのトリガーにも役立ちます。

Q.17）制御されるコンポーネントとは何ですか？

回答：制御コンポーネントはその状態を維持できず、親コンポーネントがデータを制御します。 また、小道具を使用して現在の値を取得し、コールバックを使用して変更について通知します。

Q.18）制御されていないコンポーネントについて何を知っていますか？

回答：制御されていないコンポーネントはその状態を維持します。 ここでは、制御対象コンポーネントとは異なり、DOMがデータを制御します。 また、refを使用して現在の値を導き出します。

Q.19）Reduxの利点を述べてください。

回答： Reduxには次の利点があります–

• 編成：Reduxはコードの編成にこだわっているため、チームワークが容易になり、一貫性が高まります。
• テストが簡単：コードは独立していてテスト可能です。これは、分離された、小さくて純粋な関数を備えているためです。
• コミュニティ：Reduxには、複数のアプリケーションを構築しながらライブラリを改善し続ける、大規模で才能のあるコミュニティのバックアップがあります。
• 開発者ツール：開発者は、状態の変化からアクションまで、アプリケーション内のすべてを簡単に追跡できます。
• サーバー側のレンダリング：reduxでは、ストアをクライアント側に送信するだけで済み、アプリケーションのパフォーマンスが向上するため、ユーザーエクスペリエンスが向上します。
• 保守性：コードは厳密な構造と予測可能な結果を​​備えているため、保守が容易です。
• 結果の予測可能性：ストアソースが1つしかないため、現在の状態のアクションをアプリケーションの一部と同期することについて混乱はありません。

結論

あなたが粘り強く献身的であれば、ReactJsの学習は複雑ではありません。 プログラミング言語を裏返しに理解すれば、面接を簡単にクラックできます。 今すぐ言語を調べている場合、または知識を深めたい場合は、リバプールジョンムーア大学のコンピュータサイエンスの理学修士をご覧ください。 この19か月のコースには、React、Java、JavaScript、Spring、Hyperledger、Ethereumなどの人気のあるツールがいくつか含まれています。

このコースを完了すると、Reactについて深く理解できるようになります。 それだけでなく、ソフトウェア開発者/エンジニア、フルスタック開発者、ブロックチェーン開発者、クラウドエキスパート/アーキテクト、サイバーセキュリティエンジニア、データエンジニア、DevOpsエンジニアなどの高給の役割を担う資格があります。