フロントエンド面接質問

フロントエンド開発の知識と行動面接問題。

1. ソートアルゴリズムの時間、空間複雑性は？Algorithm
2. Prototypal Inheritanceとは？JavaScript
3. JavaScriptにおいての`this`を説明してください JavaScript
4. Closure とは？JavaScript
5.`var` vs `let` vs `const`JavaScript
6. ５歳児にPromiseはどんなものかを説明してください JavaScript
7. Map vs Object vs Set vs Array JavaScript
8. `==` と `===`の違いは？JavaScript
9. CSS `position` property を説明してください。CSS
10. `block` と `inline`の違いは?CSS
11. HTTP の働き ? HTTP/2とは?Network
12. HTTPS はどう動く?Network
13. Event Delegationとは？DOM
14. AMD、CommonJS と ES modulesとの違いは？JavaScript
15. `Array.prototype.forEach()` vs `Array.prototype.map()`JavaScript
16. `instanceOf` はどう動く? `typeOf`との違いは？JavaScript
17. JavaScriptの `new` operator は何をやっている？JavaScript
18. `macrotask` と `microtask`とは？JavaScript
19. Connection:Keep-Alive`とは?Network
20. ブラウザーのアドレスバーにURLに打ってから何が起こる？Browser
21. DNSとは? Network
22. HTTP Cacheとは? どな働き?Network
23. Webviewと Native Clientはどう通信する?Webview
24. TCP の3-Way Handshake を説明してください Network
25. 3:15に時針と分針の間の角度は？Fun
26. CDNとは? Network
27. Box Modelを説明してください CSS
28. web画面のcrashはどう検知できる？Browser
29. Express と Koaの違いは？JavaScript Library
30. Vue instanceのlifecycleを説明してください。Vue
31. Node.jsのメリットとデメリットは？Node.js
32. `async` と `await`を説明してください JavaScript
33. Cookie vs localStorage vs sessionStorage Browser
34. CSRFとは? どう防ぐ?Security
35. HTTP response status codeをいくつか紹介してください。Network
36. XSSとは?防ぐには?Security
37. 送ったまたもらったプレゼントの中に一番いいなので？Behavioral
38. Reactにおいてのパフォーマンス改善はどう行う？React
39. Pseudo Class と Pseudo Elementとは?CSS
39. React Fiberを説明できますか？React
41. Vue.jsの`keep-alive` は何のため？Vue.js
42. Repaint と Reflowの違いは?Browser
43. Web Workers と Service Workers とは? WebAPI
44. JavascriptのGarbage collectionはどう動く？JavaScript
45. memory leak とは? どう防ぐの?JavaScript
46. Browser とNode.jsにおいてのEvent Loopを説明してください。JavaScript
47. Virtual DOMとは?JavaScript
48. HOC(Higher Order Component)とは?JavaScript React
49. Reduxのメリットとデメリットは?Redux
50. React Hooksとは? メリットとデメリットは？React
51. SSRとは?メリットとデメリットは？JavaScript
52. webpackの loader と pluginとは？Webpack
53. WeakSet と WeakMapとは？JavaScript
54. Micro Frontendsとは？何を解決するのか？Architecture
55. performance metricsをいくつか説明してください。Performance
56. あなたのweb appで発生するエラーはどうトラッキングする？Architecture
57. HTTP request methodをいくつか説明してください Network
58. HTTP requestはどんな構造？Network
59. Array-Like Objectsとは？JavaScript
60. どんなときにnon-strict modeが必要になる？JavaScript
61. NPM packageどうpublishする？JavaScript
62. Promiseとは? どうすれば順番に複数のPromiseをresolveさせることができる？JavaScript
63. Factory Patternとは?JavaScript
64. ES6 Class と ES5 での実装の違いは?JavaScript
65. Decorator Patternとは？JavaScript
66. web appのパフォーマンスボトルネックはどう見つける？Performance
67. setTimeout と setIntervalの違いは?JavaScript
68. webにおいてよく使われるimage formatの違いを説明してください。General
69. Proxy Patternとは?JavaScript
70. Observer Patternとは?JavaScript
71. 画像の lazy loadはどう実装する？Architecture
72. あなたのプロジェクトにおいてunit test & e2e testはどうやる？Architecture
73. あなたのプロジェクトにおいて、SEOはどうやるの？General
74. CSSでの @import はどう動く？CSS
75. Process と Thread、それぞれは何？General
76. for...in と Object.keysの違いは?JavaScript
77. `for ... of` と `forEach`の違いは？JavaScript
78. コンフォートゾーンから抜け出したことある？Behavioral
79. WebpackのHMR(Hot Module Replacement) の働きは?Webpack
80. Long Polling vs Sever-Sent Event vs WebSocket Network
81. client-side routing はどう動く?WebAPI
82. reset.css と Normalize.cssの違いは？CSS
83. CSSで固定縦横比の要素をどう作る？CSS
84. CSSで三角形をどう作る？CSS
85. あなたが作った一番いいものたちは?Behavioral
86. 一番誇りに思うことは？Behavioral
87. 失敗談あるのか。Behavioral
88. 同僚の協力によっていい成果を出したことはあるのか？Behavioral
89. コンフリクトを対応した経験あるのか？Behavioral
90. あなたはどうやってフィードバックするの？どうフィードバックを受け入れるの？Behavioral
91. 人生でもらった一番いいアドバイスは？Behavioral
93. なぜ私たちを選ぶ？Behavioral
93. なぜフロントエンドを選んだ? Behavioral
94. 今進行しているプロジェクトを振り返ってみてください。Behavioral
95. プレッシャーを乗り越えたことはあるのか Behavioral
96. 目標を設定して、さらに達成した経験あるのか。Behavioral
97. 目標を設定して達成できなかった経験はあるのか。Behavioral
98. 自分の役割を超えた仕事をしたことあるのか？Behavioral
99. チャレンジに対してどうアプローチする？Behavioral
100. 自分とチームメンバーに動機づけたことはあるのか。Behavioral
101. あなたのチームには今一番悩んでいることは？Behavioral
102. あなたが出した判断が間違った、どうフィードバックを受け入れる？Behavioral
103. 他のチームのメンバーの影響で進捗が芳しくないときはどうする？Behavioral
104. どのチームに入りたい？Behavioral
105. 上司と違う意見を持ったことありますか？Behavioral
106. 現職の役割を話してください。Behavioral
107. あなたがやった一番挑戦的なことは？Behavioral
108. あんたに一番いい仕事環境は？Behavioral
109. あなたにとっての一番重要な決断を話してもらえますか？　Behavioral
110. あなたの強みと弱みを話してください。Behavioral
111. 最新のweb技術の中一番気になるのは？Behavioral
112. 違うサイズのスクリーンにどう対応する？Architecture
113. retina hairline(0.5px line in CSS)はどう実装する?CSS
114. CSS pixel と device pixelはそれぞれ何？CSS
115. Single Sign-Onとは? 実装方法は?Architecture
116. Singleton Patternとは?JavaScript
117. JWT(JSON Web Token)とは?JavaScript
118. Skeleton Screenとは？どう実装する？Architecture
119. script tagの属性`async` と `defer` の違いは？Browser
120. 過去の仕事から学んだことは?Behavioral
121. 縦に中央寄せするには？CSS Amazon
122. CSSの相対長の単位(Relative length units)を説明しいてください。CSS
123. Open Redirect 問題とは？どう解決する？Security
124. Front Endではpaginationはどう実装する？Architecture
125. EventTarget.addEventListener() の第三引数を説明してください WebAPI
126. 普段はどうデバッグしてる？General Amazon
127. CSS keywords: initial/inherit/unset/revert を説明してください CSS
128. position:stickyを説明してください CSS
129. CSSで正方形を作る方法は？CSS
130. modules と普通のscriptタグの違いは？JavaScript
131. cache-control:no-cache と cache-control:no-storeの違いは?HTTP
132. Symmetric Encryption と Asymmetric Encryptionの違いは?Security
133. MVCやMVVMとFluxの違いは？Architecture
134. Array.prototype.sort()はstableなのか？JavaScript
135. Cookieではどんなアトリビュートを持つのか？HTTP
136. Web Appでレスポンシブにするにはどうすればいい？CSS
137. `flex:1` の意味は?CSS
138. Block Formatting Context とは？CSS
139. 大きいフロントエンドのプロジェクトをリードするとしたら、どんなプリンシパルを設ける？General
140. CSSでの`clear`を説明してください。CSS
141. Object.freeze() は何のため？JavaScript
142. webpackは詳しいですか? どう動いているのか説明してください。DevTool
143. 技術上でresponsivenessはなぜ動く？CSS
144. Vue と Reactの違いは？あなたならどう選ぶ？Framework
145. loginはどう実装するか。Auth
146. 'use strict'は何のため？JavaScript
147. Same-Origin policyとは？Cross-Origin resourceを共有するにはどうする？HTTP
148. base64 とは？network
149. Unicode と UTF-8 について説明してください General
150. HTTP messageの構造を説明してください HTTP
151. tap eventでの300ms遅延とは？どう解決する？Mobile
152. Generatorとは？JavaScript
153. なぜ0.1 + 0.2 !== 0.3 ? 少数計算の正確性についてどう対処すればいいのか？JavaScript
154. offlineをサポートするにはどうすれば良いですか？JavaScript
155. 画像がたくさん表示されるWebページのパフォーマンスはどう向上させるのか。performance
156. `transform:translateZ(0)`は何のため?CSS
157. 羊は食べられるか Fun
158. 現在学んでいるものは何？今後学びたいものはあるか？Behavior
159. `git merge` と `git rebase`の違いは？General
160. HTML web pageを画像にする方法は？General
161. iteratorと generatorを説明してください JavaScript
162. function declarationと function expressionの違いは？JavaScript
163. How do you troubleshoot when user reports a blank screen on you web page?General
164. `null` と `undefined` の違いは？どう使い分けますか？JavaScript
165. What is the different between '^1.2.3' and '~1.2.3' in package.json NPM
166. Tell us the differences about <b> <strong> <i> <em>HTML
167. please briefly introduce yourself General
168. What is the difference between `display:none` and `visibility:hidden`CSS
169. What is the response body of HTTP status code 304?Network
170. Do you have any questions to ask about our company, team or anything?Behavioral
171. Tell us your approach if you're asked to build a Design System for your team and company? SystemDesign
172. What is the difference between TCP and UDP?Network
173. Explain the cookie attribute: "SameSite".Network