フロントエンドデベロッパー面接時の質問事項

フロントエンドデベロッパー面接時の質問事項

@バージョン 2.0.0

本レポジトリはフロントエンドデベロッパー志願者のポテンシャルを見極めるのに有効な面接時の質問事項を列挙します。全ての下記質問事項を一人の志願者に聞くことは推奨されません（それは数時間もかかってしまうでしょう）。あなたが必要としているスキルを見極めるためには、下記の質問リストからいくつかの項目を選択するのがよいでしょう。

Rebecca MurpheyのBaseline For Front-End Developersもとても参考になるので面接前によく読むことをおすすめします。

注意: これらの質問の多くはオープンエンド型の質問であり、志願者から興味深い考えを引き出すことができるでしょう。この回答は単純でストレートな回答よりもより志願者の能力を見極めるのに役立ちます。

オリジナルのコントリビューター

質問の多くはPaul Irish (@paul_irish)と下記のコントリビューターによって作成されたoksoclapスレッドをもとに作成されています。

一般的な質問事項

  • 昨日・今週に何を学びましたか？
  • 何があなたをコーディングに惹きつけていますか？
  • 最近直面した技術的な困難はどんなものですか？また、それをどのように解決しましたか？
  • ウェブアプリやウェブサイトを構築する際にユーザーインターフェース、パフォーマンス、SEO、メンテナンス性などについてどのように考えますか？
  • 好きな開発環境について教えてください。（OS、エディタ、ブラウザ、ツール等）
  • webページを作るときのあなたのワークフローを教えてください。
  • どのバージョン管理ツールに慣れていますか？（Git, SVNなど）
  • 5つの異なるスタイルシートをウェブサイトに統合する最適な方法はどんなものですか？
  • プログレッシブエンハンスメントとグレースフルデグラデーションの違いを説明してください。
  • ウェブサイトのアセット・リソースの最適化をどのように行いますか？
    • 下記のようないくつかのソリューションが期待されます。
      • ファイル結合
      • ファイルの縮小
      • CDNホスティング
      • キャッシュ利用
      • など
  • 複数のドメインからアセットを提供したほうがよい理由は何ですか？
  • 一度にブラウザが与えられたドメインからダウンロードできるリソースの数はいくつですか？
    • 例外は何ですか？
  • ページロードを減らす３つの方法を挙げてください。
  • プロジェクトに加入したときに、もし彼らがタブを使い、あなたがスペースを使っていたとしたらどうしますか？
    • EditorConfig (http://editorconfig.org) といったプラグインを利用するように提案する
    • 慣習に従う (一貫性を保つ)
    • issue :retab! command
  • シンプルなスライドショーのページを書いてください。
    • JSを使わなかったらボーナスポイント。
  • コードのパフォーマンスをテストするのにどんなツールを使いますか？
    • プロファイラー、JSPerf、Dromaeo
  • もし今年１つの技術をマスターできるとしたら、何をマスターしますか？
  • 標準化と標準化団体の重要性を説明してください。
  • FOUCとは何ですか？ どのようにFOUCを防ぐことができますか？
  • ARIAとスクリーンリーダーとはなにか、またそれらがウェブサイトをどのようにアクセシブルにするか説明してください。
  • CSSアニメーションとJavaScriptアニメーションのそれぞれの利点と欠点を幾つか説明してください。
  • CORSとは何の省略ですか？また、それはどんな問題を表しますか？

HTMLに関する質問事項

  • doctypeは何をしているか説明してください。
  • スタンダードモードとクアークスモードの違いは何ですか？
  • XHTMLページを提供するときの制限は何ですか？
    • application/xhtml+xmlとしてページを提供することに何か問題はありますか？
  • 多言語でコンテンツをどのように提供しますか？
    • 多言語化サイトのデザイン・開発時にどのようなことに注意すべきですか？
  • data-属性は何にとって良いですか？
  • HTML5をオープンなWEBプラットフォームとしてみなしましょう。HTML5の基本的な構成要素は何ですか？
  • クッキー、セッションストレージ、ローカルストレージの違いを述べてください。

JSに関する質問事項

  • イベントデリゲーションを説明してください。
  • JavaScriptにおいてthisがどのように機能するか説明してください。
  • プロトタイプ継承がどのように機能するか説明してください。
  • JavaScriptをテストするのにどのように対処しますか？
  • AMDとCommonJS、何が違いますか？
  • ハッシュテーブルとは何ですか？
  • undefinedとundeclared変数は何ですか？
  • クロージャとは何ですか？　どのように、そしてなぜそれを使うのですか？
    • クロージャを作成するときに使うあなたの好きなパターンは何ですか？ （即時実行関数表現にのみ適用）
  • 匿名関数が有効な典型的なユースケースは何ですか？
  • 「JavaScriptモジュールパターン」とそれを使う場面を説明してください。
    • 名前空間について述べたらボーナスポイント。
    • もしモジュールが名前空間無しだとしたらどうなりますか？
  • コードをどのように整理しますか？（モジュールパターン、古典的な継承を使う？）
  • ホストオブジェクトとネイティブオブジェクトの違いは何ですか？
  • 下記コードの違いは何？function Person(){}, var person = Person(), var person = new Person()
  • .callと.applyの違いは何ですか？
  • Function.prototype.bindを説明してください。
  • いつコードを最適化しますか？
  • JavaScriptにおいてどのように継承が機能しているか説明してください。
  • document.write()はいつ使いますか？
    • 生成される広告の多くはいまだに嫌われている方法であるdocument.write()を活用しています。
  • feature detection, feature inference, UA stringの使用の違いは何ですか？
  • AJAXをできるだけ詳しく述べてください。
  • JSONPがどのように機能するか述べてください。(またそれがどのようにAJAXとは異なっているのか)
  • JavaScriptテンプレートは使ったことはありますか？
    • 使ったことがあるのなら、何のライブラリを使いましたか？（Mustache.js, Handlebarsなど）
  • 「巻き上げ」を説明してください。
  • イベントバブリングを説明してください。
  • 「属性」と「プロパティ」の違いは何ですか？
  • どうしてビルトインJavaScriptを拡張することは良くないのですか？
  • ドキュメントロードイベントとドキュメントレディイベントの違いを述べてください。
  • ==と===の違いは何ですか？
  • ブラウザのウィンドウURLからクエリ文字列をどのように取得するかを説明してください。
  • JSに関するsame-origin policyを説明してください。
  • JavaScriptにおける継承パターンを述べてください。
  • 下記を動くように書き変えてください。
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • JavaScriptにおけるメモ化（計算の繰り返しの回避）の方針について述べてください。
  • 三項演算子と呼ばれる理由は何ですか？ 「三項」という言葉が示していることは何ですか？
  • 関数のarityとは何ですか?
  • "use strict";とは何ですか? これを使うことのメリット、デメリットは何ですか？

JSコードの例

~~3.14

質問: 上ステートメントで得られる値は何ですか？
回答: 3

"i'm a lasagna hog".split("").reverse().join("");

質問: 上ステートメントで得られる値は何ですか？
回答: “goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

質問: window.fooの値は何ですか？
回答: “bar”
window.fooがfalseと判断される場合のみ。trueの場合はその値を保持し続ける。

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

質問: 上2つのアラートの結果はどうなりますか？
回答: “Hello World” & ReferenceError: bar is not defined

var foo = [];
foo.push(1);
foo.push(2);

質問: foo.lengthの値はどうなりますか?
回答: 2

var foo = {};
foo.bar = 'hello';

質問: foo.lengthの値はどうなりますか?
回答: undefined

jQueryに関する質問事項

  • 「chaining（チェイン）」を説明してください。
  • 「deferreds」を説明してください。
  • jQueryに関する最適化としてどんなことができますか？
  • .end()は何ですか?
  • イベントハンドラに名前空間を与えるにはどのようにすればいいですか。またなぜ名前空間を与えますか。
  • jQueryメソッドに渡すことができる4つの異なる値を挙げてください。
    • セレクター (string)、HTML (string)、コールバック (function)、HTMLエレメント、オブジェクト、配列、エレメントの配列、jQueryオブジェクト等
  • エフェクト(あるいはfx)キューとは何ですか?
  • .get()、 []、.eq()の違いは何ですか？
  • .bind()、.live()、.delegate()の違いは何ですか？
  • $、$.fnの違いは何ですか？ 単に$.fnと書いた場合はどうですか？
  • 下記のセレクターを最適化してください:
$(".foo div#bar:eq(0)")
  • delegate()とlive()の違いは何ですか？

CSSに関する質問事項

  • ‘reset’ CSSファイルとは何ですか？　またその有用性は何ですか？
  • フロートとそれらがどのように機能するかを説明してください。
  • フロートクリアの様々なテクニックは何ですか？その内のどれが適切でそれはどんな状況ですか？
  • CSSスプライトを説明してください。またページやサイトでそれをどのように実装しますか？
  • 1番好きな画像置き換えテクニックは何ですか？またいつどのテクニックを使いますか？
  • .cssファイルに含み得るCSSハックは何ですか？また.cssファイル以外ではどうしますか？
  • 機能が制限されたブラウザに対してどのようにページを提供しますか？
    • どんなテクニック、プロセスを使いますか？
  • コンテンツを視覚的に見えなくするのにどんな方法がありますか？（またスクリーンリーダーユーザーのみに見えるようにする方法は何ですか？）
  • グリッドシステムを使ったことはありますか？　使い続けたいと思いましたか？
  • メディアクエリ、あるいはモバイルに特化したレイアウト、CSSを組んだことはありますか？
  • SVGのスタイリングの知識は何かしら持っていますか？
  • 印刷用ページの最適化はどのように行いますか？
  • CSS記述における「gotchas（見落としがちなミス）」は何ですか？
  • CSSプリプロセッサのメリット、デメリットは何ですか？（SASS、Compass、Stylus、LESS）
    • 使ったことのあるCSSプリプロセッサについてそれの好きなところ、嫌いなところを説明してください。
  • 非標準のフォントを使用したwebデザインカンプをどのように実装しますか？
    • ウェブフォント（Googleウェブフォント、Typekit 等)
  • ブラウザがどのようにあるエレメントがどのCSSセレクタにマッチするかを決定しているかを説明してください。

その他の質問事項

  • あなたがコーディングした中で一番素晴らしいものは何ですか？　何が一番誇れますか？
  • あなたが使っている開発者ツールの一番好きなところは何ですか？
  • 何か暖めてるアイディアは持っていますか？　それはどんなものですか？
  • インターネットエクスプローラーの最も好きな機能は何ですか？
Edit this page