Technical Interview Cheatsheet for a frontend engineer (General programming questions)

流行りの技術用語はたくさんありますが、恥ずかしくて聞けない😛...そこで、このゲームに参加するための必携単語リストをご紹介します。

面接官はこれらの言葉を具体的に説明するよう求めないかもしれませんが、会話の中でこれらの語彙を使用すれば、面接官に好印象を与えることができます🤓！

単語を思い出すのに役立つといいですね！もし気に入ったら、拍手とコメントをお願いします！👏

1. オブジェクト指向プログラミングと関数型プログラミングとは？

オブジェクト指向プログラミング：

オブジェクトというプログラミングの概念で、機能とデータを併せ持ち、かつ変更可能なオブジェクトを記述すること。

OOPの4つの柱：

抽象化

エンキャプシュレーション( カプセル化)

インヘリタンス(継承)

ポリモーフィズム

例 Java、JavaScript、Python、C++、Visual Basic .NET、Ruby、Scala、PHP

関数型プログラミング：

FPは、状態やミュータブルなデータの変化を避けようとするものである。出力と入力は常に同じであるべきです。FPは、出力が引数に依存するため、コードに副作用が生じない。

例 Lisp、Clojure、Wolfram、Erlang、Haskell、F#、R

2. 命令型プログラミングと宣言型プログラミングの違いは何ですか？

命令型プログラミング（ハウツー／ステップバイステップ）

起こしてほしいことを、段階的にコンパイラに説明するコード

宣言型プログラミング(何を/結論だけ)

欲しいものを端的に記述しているが、必ずしもその入手方法を記述していないコード

3. HTTPとHTTPSの違いは何ですか？

HTTP(hypertext transfer protocol)はデータの暗号化がなく、HTTPS(http-Secure)は暗号化されています。

どちらも、要求されたウェブデータを画面上に表示することができます。

しかし、httpは「ステートレス・システム」であり、オンデマンドで接続できるため、傍受され、変更される可能性があります。

そして、httpsはTLS（Transport Layer Security）により、ウェブサーバーとブラウザの間に暗号化された接続が確立されます。

また、TLSは接続先のサーバーを認証し、その送信データを改ざんから保護します。

4. SSLとは何ですか？

どちらも、ウェブサーバーとブラウザの間に暗号化された接続を確立する技術である。SSL(Secure Socket Layer)はTLSの旧バージョンですが、今でもその概念全体をSSLと呼ぶ人もいます。

認証局（CA）は、CSR（Certificate Signing Request）のデータを使って、SSL証明書を作成します。

証明書に含まれる公開鍵。SSLでは、SSLセッション中に送信されるデータを暗号化するために、公開鍵暗号、すなわち非対称暗号を使用します。公開鍵は暗号化に使用され、対応する秘密鍵は復号化に使用されます。

認証局（CA）は、SSL証明書を発行することができます。

6. ページの負荷を減らす方法（最適化）を3つ以上教えてください。

HTTPリクエストを最小化する（ネットワークタブでリクエスト数を確認できる）

ファイル（css、HTML、js）の最小化・結合

コード分割（webpack + react）：コードを分割して動的に読み込めるようにする。

LightHouse Scoreを確認し、最適化が必要なものを確認する。

8. VPSとは何ですか？

VPS（Virtual Private Servers）とは、RAMやCPUなどのリソースをお客様のアカウント専用とすることができるウェブサイトホスティング環境です。専用サーバーを仮想化し、そのサーバーのユーザー間でリソースを分割することで実現されます。

9. 共有ホスティングとVPSホスティングの違いは何ですか？

共有ホスティングのユーザーは、すべての彼らのウェブサイトが上にあるサーバー上のリソースを共有しています。共有ホスティングでは、RAMやCPUの保証はありません。VPSパッケージでは、ユーザーはコマンドを実行し、ホスティング環境に設定を変更するための完全なルートアクセスを与えられているのとは対照的に、共有ホスティングはまた、サーバーへの完全なルートアクセスを提供するものではありません。

https://miro.medium.com/v2/resize:fit:720/format:webp/0*AckwINKk2-guLqqT.jpg

10. プログレッシブWebアプリとは

プログレッシブWebアプリケーションは、クロスプラットフォームのWebアプリケーションにネイティブアプリのようなユーザー体験をもたらすために、従来のプログレッシブエンハンスメント戦略とともに、新しいWebブラウザAPIと機能を使用するWebアプリケーションです。

ウェブアプリケーションは、システムに「インストール」することができます。インターネットに接続されていないオフライン環境でも動作し、アプリとの最後のやり取りの際にキャッシュされたデータを活用します。

11. データリクエストはどのように処理していますか？

fetch、axios、useSWR(new)のいずれかを使用します。

12. CORSとは何ですか？

Cross-Origin Resource Sharing (CORS) は、サーバーが他のオリジン（ドメイン、スキーム、ポート）からリソースへのアクセスを制限または許可するための仕組みです。HTTPヘッダーにコードを追加することで、セキュリティのためにこれらの制限を制御することができます。

17. テストはどのように扱っていますか？

UIテストはStorybook、ユニットテストはJestとEnzymeです。

Jest + Enzyme => シャローレンダリング + スナップショットテストにより、間違ったUIレンダリングや間違ったデータの受け渡しを発見することができます。

20. 機能テストと非機能テストとは？

機能テスト：ビジネス要件に照らしてアプリケーションをテストする。設計チームやビジネスアナリストが提供したユースケースを使用して、ソフトウェアの各部分が期待通りに動作することを保証するために設計されたすべてのテストタイプが含まれる。これらのテスト方法は、通常、順番に実施され、以下のものがあります：

ユニットテスト

統合テスト

システムテスト

アクセプタンステスト

非機能テスト：ソフトウェアの運用面に焦点を当てたすべてのテストタイプを取り入れた手法。以下のようなものがある：

パフォーマンステスト

セキュリティテスト

ユーザビリティテスト

互換性テスト

20. フロントエンドのテストに適したアプローチとは？

Kent C. Doddsが紹介したtesting trophyは、フロントエンドのテストに人気が出てきています：

静的解析は、構文エラー、バッドプラクティス、APIの不正な使用を捕捉します： - Prettierのようなコードフォーマッター、- ESLintのようなリンター、- TypeScriptやFlowのようなタイプチェッカー。

ユニットテストは、トリッキーなアルゴリズムが正しく動作することを検証します。ツール： Jest。

統合テストは、アプリの全機能が期待通りに動作することを確信させるものです。ツールは Jest と Enzyme または react-testing-library です。

エンドツーエンドテストは、アプリがフロントエンド、バックエンド、データベースなど全体として動作することを確認する。ツールはこちら： Cypress。

21. SSRとCSRって何？

22. タイプセーフの意味とタイプセーフなプログラムは？

23. アトミックデザインとは何ですか？

24. クラウドサービスとは何か？

25. TDD(テスト駆動開発)とは？

アプリケーションコードと一緒にユニットテストも書くというソフトウェア開発のアプローチ。

26. CSSを統合するさまざまな方法を列挙する

styled-components、cssモジュール、sass、UIライブラリ（bootstrap、material UI、tailwind css、etc...）。

27. CRUDとは何かを説明する。

作成、読み込み、更新、削除