本章ではフロントエンドエンジニアとして聞かれる質問内容について書いていきます。フロントエンドエンジニアで最も力を入れるべきはJavaScriptに関連する技術ドメイン知識です。
ByteDance, Bloomberg, Agodaなどのフロントエンドエンジニアの面接を受けてきましたが、必ずこの質問が聞かれます。また、ReactのUIコーディングを行う上でもuseMemoは何のために使う？Suspenseを使う場面はいつ？などの技術質問をされるので、個々に対する質問の回答も用意しなければなりません。その他ではHTML/CSSやパフォーマンスに関連する質問も合わせて聞かれる場合があるので準備しましょう。JavaScript特有の問題かもしれませんが、このJSコードの出力結果は何？というトリッキーな質問も聞かれる場合があります。頻出問題は抑えておきましょう。
注意点としては回答例はあくまで面接用に簡略化したものなので、より深い知識を得るためには詳しい解説をしている関連リンクから詳細を辿って理解する事をオススメします
問題カテゴリ（合計89問）
- HTML
- CSS
- JavaScript
- React
- Browser Networking
- Web Performance Optimization
- Web Security
- JS Coding
HTML
🚦 Important
HTMLのDOCTYPE宣言とは何ですか？
🇯🇵
DOCTYPEはDocument Typeの略で、HTMLファイルの先頭に記述します。DOCTYPEはタグではなく、HTMLファイルのバージョンをブラウザに伝えるものです。現在ではHTML5のみ使用されていますが、以下のようにシンプルに宣言します。
<!DOCTYPE html>
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>
多言語のWebサイトを作成する上でHTMLにおいて気をつけるべき事は何ですか？
🇯🇵
- lang属性を使用し、ブラウザにページの言語を教える
- lang属性にはISO 639-1 Language CodesもしくはISO 3166-1 Country Codesも付け加えたものを指定する
- dir属性を使用しright-to-leftの言語（アラビア語等）に対応する
例
<html lang="ja"> ... </html>
<html lang="ja-JP"> ... </html>
<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>
<html lang="ja-JP"> ... </html>
<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.
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のアクセシビリティに関して気をつけるべき事は何ですか？
