Add Japanese: html-questions.md
This commit is contained in:
Yusuke Hayashi
parent
7fed9d2060
commit
5bc2e99c51
|
|
@ -0,0 +1,183 @@
|
|||
# HTML に関する問題
|
||||
|
||||
[Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/html-questions.md) に対する解答集です。提案や訂正のプルリクエストは歓迎します。
|
||||
|
||||
* [`DOCTYPE` は何のためにあるものですか?](#what-does-a-doctype-do)
|
||||
* [どのようにすれば複数の言語のコンテンツを含むページを提供できますか？](#how-do-you-serve-a-page-with-content-in-multiple-languages)
|
||||
* [多言語サイトを設計・開発する際には、どんなことに注意を払わなければならないですか？](#what-kind-of-things-must-you-be-wary-of-when-designing-or-developing-for-multilingual-sites)
|
||||
* [`data-` 属性は何のために使われるのですか？](#what-are-data--attributes-good-for)
|
||||
* [HTML5 をオープンウェブプラットフォームとして考え他ときに、HTML5 とはどんな要素から成るものですか？](#consider-html5-as-an-open-web-platform-what-are-the-building-blocks-of-html5)
|
||||
* [`cookie`、` sessionStorage`、`localStorage` の違いを教えてください。](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage)
|
||||
* [`<script>`、 `<script async>`、 `<script defer>` の違いを教えてください。](#describe-the-difference-between-script-script-async-and-script-defer)
|
||||
* [なぜ一般的に、CSSの `<link>` を `<head></head>` の間に、JS `<script>` を `</body>` の直前に置くことが良いと言われているのでしょうか？あなたは例外を知っていますか？](#why-is-it-generally-a-good-idea-to-position-css-links-between-headhead-and-js-scripts-just-before-body-do-you-know-any-exceptions)
|
||||
* [プログレッシブレンダリングとは何ですか？](#what-is-progressive-rendering)
|
||||
* [img タグに `srcset` 属性を使用する理由は？ この属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください。](#why-you-would-use-a-srcset-attribute-in-an-image-tag-explain-the-process-the-browser-uses-when-evaluating-the-content-of-this-attribute)
|
||||
* [HTMLテンプレート言語をいくつか使用した経験はありますか？](#have-you-used-different-html-templating-languages-before)
|
||||
|
||||
### `DOCTYPE` は何のためにあるものですか?
|
||||
|
||||
`DOCTYPE` は "document type" の略です。 これは、標準モードと[後方互換(quirks)モード](https://quirks.spec.whatwg.org/#history)を区別するためにHTMLで使用される宣言です。これがあると、標準モードでWebページをレンダリングするようにブラウザに指示します。
|
||||
|
||||
教訓 - ページの先頭には `<！DOCTYPE html>` を追加しましょう。
|
||||
|
||||
###### 参考
|
||||
|
||||
* https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
|
||||
* https://www.w3.org/QA/Tips/Doctype
|
||||
* https://quirks.spec.whatwg.org/#history
|
||||
|
||||
[[↑] 先頭に戻る](#html-questions)
|
||||
|
||||
### どのようにすれば複数の言語のコンテンツを含むページを提供できますか？
|
||||
|
||||
この質問は少し曖昧なので、最も一般的なケース、つまり複数の言語で利用可能なコンテンツを提供する方法を尋ねていると仮定します。1つのページ内のコンテンツは1つの言語でのみ表示されるべきです。
|
||||
|
||||
HTTPリクエストがサーバに対して行われるとき、リクエストしているユーザエージェントは通常 `Accept-Language`ヘッダのような言語設定に関する情報を送信します。 サーバーはこの情報を使用して適切な言語のバージョンで文書を返すことができます。 返されたHTML文書は `<html lang="ja">...</html>` のような `<html>` タグで `lang` 属性も宣言する必要があります。
|
||||
|
||||
バックエンドでは、HTMLマークアップにはYML形式またはJSON形式で格納された各言語の`i18n`プレースホルダとコンテンツが含めます。 サーバーは通常、バックエンドフレームワークの助けを借りて各言語のコンテンツを含むHTMLページを動的に生成します。
|
||||
|
||||
###### 参考
|
||||
|
||||
* https://www.w3.org/International/getting-started/language
|
||||
|
||||
[[↑] 先頭に戻る](#html-questions)
|
||||
|
||||
### 多言語サイトを設計・開発する際には、どんなことに注意を払わなければならないですか？
|
||||
|
||||
* HTMLに `lang` 属性を使います。
|
||||
* ユーザーを母国語に誘導する - ユーザーが困難なく、国/言語を簡単に変更できるようにする。
|
||||
* 画像によるテキストを使用することはスケーラブルな方法ではありません - 画像にテキストを配置することは、システムに無い見栄えの良いフォントをどのコンピュータにでも表示させるための一般的な方法です。 しかし、画像によるテキストを翻訳するには、テキストごとに各言語用の別々の画像が必要になります。 このような画像の変換は、ほんの少しならいいものの、増えてくるとすぐに管理できなくなってしまいます。
|
||||
* 制限的な言葉/文章の長さ - 別の言語で書かれていると、いくらかの内容が長くなることがあります。デザインのレイアウトやオーバーフローの問題に注意してください。テキストの量がどこにあるかを設計するのは避けるのが最善です。文字数は、見出し、ラベル、ボタンなどのものがあります。それらは、本文やコメントなど自由に流れるテキストの問題ではありません。
|
||||
* 色がどのように認識されているかに注意してください。色は言語や文化によって違って見えます。デザインは適切に色を使用する必要があります。
|
||||
* 日付と通貨の書式設定 - カレンダーの日付が異なる方法で表示されることがあります。例えば。米国の "May 31, 2012" とヨーロッパの "31 May 2012" です。
|
||||
* 翻訳された文字列を連結しないでください - `"The date today is " + date` のことです。異なる言語で単語の順序が壊れます。代わりに各言語のパラメータ置換を伴うテンプレート文字列を使用します。たとえば、次の2つの文章をそれぞれ英語と中国語で見てください： `I will travel on {% date %}` と `{% date %} 我会出发` です。変数の位置は、言語の文法規則によって異なることに注意してください。
|
||||
* 言語の読み方 - 英語では、左から右、上から下へ、伝統的な日本語では、テキストが上下左右に読み取られます。
|
||||
|
||||
###### 参考
|
||||
|
||||
* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
|
||||
|
||||
[[↑] 先頭に戻る](#html-questions)
|
||||
|
||||
### `data-`属性は何のために使われるのですか？
|
||||
|
||||
JavaScript フレームワークが普及する前に、フロントエンドの開発者は、非標準属性、DOM の余分なプロパティなどの他のハッキングなしで、DOM 内に余分なデータを格納する `data-` 属性を使用しました。 適切な属性や要素が存在しないページやアプリケーション専用のカスタムデータを格納するためのものです。
|
||||
|
||||
最近、`data-` 属性を使うことは勧められません。 理由の1つは、ユーザーがブラウザの inspect 要素を使用してデータ属性を簡単に変更できることです。 データモデルは JavaScript 自体の中に保存されており、ライブラリやフレームワークを介したデータバインディングを介して DOM で更新された状態に保たれます。
|
||||
|
||||
###### 参考
|
||||
|
||||
* http://html5doctor.com/html5-custom-data-attributes/
|
||||
* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
|
||||
|
||||
[[↑] 先頭に戻る](#html-questions)
|
||||
|
||||
### HTML5 をオープンウェブプラットフォームとして考え他ときに、HTML5 とはどんな要素から成るものですか？
|
||||
|
||||
* セマンティクス - あなたのコンテンツがより正確に記述できるようにします。
|
||||
* 接続性 - 新しく革新的な方法でサーバーと通信することができます。
|
||||
* オフラインとストレージ - ウェブページにクライアント側のデータをローカルに格納し、オフラインでより効率的に操作できるようにします。
|
||||
* マルチメディア - オープンウェブでビデオとオーディオを第一級オブジェクトにする。
|
||||
* 2D/3D グラフィックスとエフェクト - より多様なプレゼンテーションオプションを可能にします。
|
||||
* パフォーマンスと統合 - より高速な最適化とコンピュータハードウェアの使い方を提供します。
|
||||
* デバイスアクセス - さまざまな入出力デバイスの使用を許可します。
|
||||
* スタイリング - 著者はより洗練されたテーマを書くことができます。
|
||||
|
||||
###### 参考
|
||||
|
||||
* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
|
||||
|
||||
[[↑] 先頭に戻る](#html-questions)
|
||||
|
||||
### `cookie`、` sessionStorage`、`localStorage` の違いを教えてください。
|
||||
|
||||
これらの技術は、クライアント側の key-value ストレージメカニズムです。彼らは文字列として値を格納することだけができます。
|
||||
|
||||
| | `cookie` | `localStorage` | `sessionStorage` |
|
||||
| -------------------------------------- | -------------------------------------------------------- | -------------- | ---------------- |
|
||||
| イニシエータ | クライアントかサーバ。サーバは `Set-Cookie`ヘッダ使用可 | クライアント | クライアント |
|
||||
| 有効期限 | 手動で設定 | 永続 | タブを閉じるまで |
|
||||
| ブラウザセッション間で保持するか | 有効期限が設定されているかどうかによって異なります | はい | いいえ |
|
||||
| ドメインが関連付けられているか | はい | いいえ | いいえ |
|
||||
| すべてのHTTPリクエストでサーバーに送信 | クッキーは自動的に `Cookie`ヘッダ経由で送信されます | いいえ | いいえ |
|
||||
| ドメインごとの容量 | 4kb | 5MB | 5MB |
|
||||
| アクセシビリティ | ウィンドウ全て | ウィンドウ全て | 同じタブ |
|
||||
|
||||
###### 参考
|
||||
|
||||
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
|
||||
* http://tutorial.techaltum.com/local-and-session-storage.html
|
||||
|
||||
[[↑] 先頭に戻る](#html-questions)
|
||||
|
||||
### `<script>`、 `<script async>`、 `<script defer>`の違いを教えてください。
|
||||
|
||||
* `<script>` - HTML解析がブロックされ、スクリプトがフェッチされてすぐに実行され、スクリプトの実行後にHTML解析が再開されます。
|
||||
* `<script async>` - スクリプトはHTML解析と並行して取得され、利用可能になるとすぐに（HTML解析が完了する前に）実行されます。スクリプトがページ上の他のスクリプト（アナリティックスなど）と独立している場合は、 `async` を使用します。
|
||||
* `<script defer>` - スクリプトはHTML解析と並行して取得され、ページの解析が完了すると実行されます。複数のスクリプトがある場合、各遅延スクリプトはドキュメント内で遭遇した順序で実行されます。スクリプトが完全に解析されたDOMに依存している場合、 `defer` 属性はHTMLが実行前に完全に解析されることを保証するのに役立ちます。`<body>` の最後に通常の `<script>`を置くことと大した違いはありません。遅延されたスクリプトは `document.write` を含んではいけません。
|
||||
|
||||
注意： `src` 属性を持たないスクリプトでは `async` と `defer` 属性は無視されます。
|
||||
|
||||
###### 参考
|
||||
|
||||
* http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
|
||||
* https://stackoverflow.com/questions/10808109/script-tag-async-defer
|
||||
* https://bitsofco.de/async-vs-defer/
|
||||
|
||||
[[↑] 先頭に戻る](#html-questions)
|
||||
|
||||
### なぜ一般的に、CSSの `<link>`を `<head></head>`の間に、JS `<script>` を `</body>` の直前に置くことが良いと言われているのでしょうか？あなたは例外を知っていますか？
|
||||
|
||||
**`<link>`を `<head>`に置く**
|
||||
|
||||
`<link>`を頭に置くことは仕様の一部です。それに加えて、上部に配置するとページが徐々にレンダリングされ、ユーザーエクスペリエンスが向上します。ドキュメントの下部にスタイルシートを置くことの問題は、Internet Explorerを含む多くのブラウザでは、プログレッシブレンダリングが禁止されていることです。一部のブラウザでは、スタイルが変更された場合にページの要素を再描画しないようにレンダリングをブロックしています。ユーザーが空白の白いページを見ている。これは、スタイルのないコンテンツのフラッシュを防ぎます。
|
||||
|
||||
**`<script>`を `</body>`の直前に置く**
|
||||
|
||||
`<script>`は、ダウンロードされて実行されている間にHTML解析をブロックします。スクリプトを最下部にダウンロードすると、HTMLを解析して最初にユーザーに表示することができます。
|
||||
|
||||
下の `<script>`の位置付けの例外は、あなたのスクリプトに `document.write()` が含まれているときですが、最近は `document.write()` を使うのは良い習慣ではありません。また、 `<script>`を一番下に置くことは、ドキュメント全体が解析されるまでブラウザがスクリプトのダウンロードを開始できないことを意味します。 1つの回避策は、`<head>` に `<script>` を入れ、 `defer` 属性を使うことです。
|
||||
|
||||
###### 参考
|
||||
|
||||
* https://developer.yahoo.com/performance/rules.html#css_top
|
||||
|
||||
[[↑] 先頭に戻る](#html-questions)
|
||||
|
||||
### プログレッシブレンダリングとは何ですか？
|
||||
|
||||
プログレッシブレンダリングは、ウェブページのパフォーマンスを向上させるために使用される技術（特に、認識された読み込み時間を改善する）に与えられた名前であり、できるだけ早く表示するためにコンテンツをレンダリングする。
|
||||
|
||||
以前はブロードバンドインターネットの普及以前に普及していましたが、モバイルデータ接続の普及（および信頼性低下）が進んでいる現在、現代的な開発にはまだ役立ちます。
|
||||
|
||||
このような技術の例：
|
||||
|
||||
* 画像の遅延読み込み - ページ上の画像が一度に読み込まれることはありません。ユーザーが画像を表示するページの部分にスクロールすると、JavaScriptが使用されて画像がロードされます。
|
||||
* 目に見えるコンテンツの優先順位付け（または折り畳みの上のレンダリング） - できるだけ早く表示するためにユーザーのブラウザでレンダリングされるページの量に必要な最小のCSS/コンテンツ/スクリプトのみを含める。スクリプトを呼び出すか、`DOMContentLoaded`/`load` イベントが他のリソースやコンテンツを読み込むのを待ちます。
|
||||
* 非同期HTMLフラグメント - HTMLの一部をブラウザにフラッシュし、ページがバックエンド上に構築されます。この技術の詳細は[こちら](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)にあります。
|
||||
|
||||
[[↑] 先頭に戻る](#html-questions)
|
||||
|
||||
### img タグに `srcset` 属性を使用する理由は？ この属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください。
|
||||
|
||||
TODO
|
||||
|
||||
###### 参考
|
||||
|
||||
* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
|
||||
* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
|
||||
|
||||
[[↑] 先頭に戻る](#html-questions)
|
||||
|
||||
### HTMLテンプレート言語をいくつか使用した経験はありますか？
|
||||
|
||||
はい、Pug (旧 Jade)、ERB、Slim、Handlebars、Jinja、Liquid を使ったことがあります。 私の意見では、それらはおおよそ同じようなものであり、表示されるデータを操作するためのエスケープするコンテンツや役立つフィルタと同様の機能を提供します。 ほとんどのテンプレートエンジンでは、表示前にカスタム処理が必要なイベントに独自のフィルタを挿入することもできます。
|
||||
|
||||
[[↑] 先頭に戻る](#html-questions)
|
||||
|
||||
### 他の方の解答集
|
||||
|
||||
* https://neal.codes/blog/front-end-interview-questions-html/
|
||||
* http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
|
||||
|
||||
---
|
||||
Loading…
Reference in New Issue