学習コンテンツテック企業求人ブログ面接対策サポート

InterviewCat

01 InterviewCat02 第一章 イントロダクション03 英語レジュメの書き方04 第二章 面接に辿り着くまで05 第三章 各面接スタイルの対策06 第四章 面接での英語について07 第五章 Data Structures & Algorithms (DSA)08 第六章 バックエンド技術質問09 第七章 フロントエンド技術質問10 第八章 システムデザイン11 第九章 行動面接の質問12 Appendix: 外資エンジニアの世界13 Discordサポート(購入者特典)
© 2026 InterviewCat. All rights reserved.
プライバシーポリシー利用規約特定商取引法に基づく表記運営お問い合わせフォーム
  1. 学習コンテンツ
  2. InterviewCat
  3. 第七章 フロントエンド技術質問

第七章 フロントエンド技術質問

本章ではフロントエンドエンジニアとして聞かれる質問内容について書いていきます。フロントエンドエンジニアで最も力を入れるべきはJavaScriptに関連する技術ドメイン知識です。
ByteDance, Bloomberg, Agodaなどのフロントエンドエンジニアの面接を受けてきましたが、必ずこの質問が聞かれます。また、ReactのUIコーディングを行う上でもuseMemoは何のために使う?Suspenseを使う場面はいつ?などの技術質問をされるので、個々に対する質問の回答も用意しなければなりません。その他ではHTML/CSSやパフォーマンスに関連する質問も合わせて聞かれる場合があるので準備しましょう。JavaScript特有の問題かもしれませんが、このJSコードの出力結果は何?というトリッキーな質問も聞かれる場合があります。頻出問題は抑えておきましょう。
注意点としては回答例はあくまで面接用に簡略化したものなので、より深い知識を得るためには詳しい解説をしている関連リンクから詳細を辿って理解する事をオススメします
問題カテゴリ(合計89問)
  1. HTML
  1. CSS
  1. JavaScript
  1. React
  1. Browser Networking
  1. Web Performance Optimization
  1. Web Security
  1. JS Coding

HTML

🚦 Important
HTMLのDOCTYPE宣言とは何ですか?
🇯🇵
DOCTYPEはDocument Typeの略で、HTMLファイルの先頭に記述します。DOCTYPEはタグではなく、HTMLファイルのバージョンをブラウザに伝えるものです。現在ではHTML5のみ使用されていますが、以下のようにシンプルに宣言します。
<!DOCTYPE html>
HTML5のDoctype宣言
What is DOCTYPE declaration in HTML?
🇺🇸
DOCTYPE stands for Document Type and is written at the beginning of the HTML file. DOCTYPE is not a tag and tells the browser the version of the HTML file. Currently in HTML5, it is simply declared as follows
<!DOCTYPE html>
HTML5
 
🔗 <!DOCTYPE> - ドキュメントタイプ - とほほのWWW入門 (tohoho-web.com)
🔗 HTML Standard (whatwg.org)

多言語のWebサイトを作成する上でHTMLにおいて気をつけるべき事は何ですか?
🇯🇵
  • lang属性を使用し、ブラウザにページの言語を教える
  • lang属性にはISO 639-1 Language CodesもしくはISO 3166-1 Country Codesも付け加えたものを指定する
  • dir属性を使用しright-to-leftの言語(アラビア語等)に対応する

例

<html lang="ja"> ... </html>
Language Codeの例
<html lang="ja-JP"> ... </html>
Language Code + Country Codeの例
<html lang="ar" dir="rtl"> ... </html>
アラビア語のサイトの対応
What should we be careful about in HTML when designing a multilingual website?
🇺🇸
  • Use the lang attribute to tell the browser the language of the page
  • Specify the lang attribute with ISO 639-1 Language Codes or ISO 3166-1 Country Codes.
  • Use the dir attribute to support right-to-left languages (e.g. Arabic).

Example

<html lang="ja"> ... </html>
Language Codeの例
<html lang="ja-JP"> ... </html>
Language Code + Country Codeの例
<html lang="ar" dir="rtl"> ... </html>
アラビア語のサイトの対応
 

🚦 Important
HTMLセマンティック要素とは何か、なぜこれを使いたいのですか?
🇯🇵
HTMLのセマンティック要素は、その意味をブラウザと開発者の双方に明確に伝える重要な役割を果たしています。 例えば、<article> や <aside> 等はHTML5で新しく登場したセマンティック要素です。 <article> は独立した、自己完結型のコンテンツに対して利用します。対して <div> や <span> は非セマンティック要素と呼ばれ、そのコンテンツには何も意味をなしません。
セマンティックなHTMLを書くことでSEO、アクセシビリティ(読み上げソフト)、開発者等にコンテンツの意味を伝える事を可能にします
What are HTML semantic elements, and why would we like to use them?
🇺🇸
The semantic elements in HTML play an important role in clearly conveying their meaning to both the browser and developers. For example, <article> and <aside> are new semantic elements introduced in HTML5. <article> is used for independent, self-contained content, while <div> and <span> are called non-semantic elements and have no meaning for their content.
Writing semantic HTML makes it possible to convey the meaning of content to SEO, accessibility (screen reader software), developers, and others.
 
🔗 Semantic HTML (web.dev)
🔗 Semantics (セマンティクス) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN (mozilla.org)

WebページのリンクをTwiiterのようなSNSに共有した時に画像とTitleとDescriptionが表示されなかった。どのように修正しますか?
🇯🇵
TwitterのようなSNSではOpen Graph Protocolをプロパティを読んでページの情報を表示します。もしSNSに表示されていないのならHTMLのメタタグに og:title 等の情報が書かれているかを確認しなければいけません。

OGPサンプル

<head> <meta property="og:title" content="GoToInterview.io" /> <meta property="og:image" content="https://www.gotointerview.io/images/logo.png" /> <meta property="og:url" content="https://www.gotointerview.io" /> <meta property="og:site_name" content="GoToInterview.io" /> </head>
When you shared a web page link to SNS like Twitter, the image, title, and description did not appear. How will you fix this?
🇺🇸
In SNS like Twitter, the Open Graph Protocol reads properties to display information about the page. If it's not displayed on the SNS, you need to check whether information such as og:title is written in the HTML meta tag.
OGP Sample
<head> <meta property="og:title" content="GoToInterview.io" /> <meta property="og:image" content="https://www.gotointerview.io/images/logo.png" /> <meta property="og:url" content="https://www.gotointerview.io" /> <meta property="og:site_name" content="GoToInterview.io" /> </head>
 

🚦 Important
Webのアクセシビリティに関して気をつけるべき事は何ですか?

全て読むには購入が必要です

このコンテンツを全て読むには購入が必要です

購入すると、このコンテンツの全ページにアクセスできるようになります。

非表示コンテンツ📝 85,693文字

InterviewCat

InterviewCatはテック企業の面接スタイルとその対策方法、面接にたどり着くまでのレジュメの書き方、分野ごとの面接技術質問集などが掲載されています。

価格¥10,000
第六章 バックエンド技術質問第八章 システムデザイン

目次

HTML