Skip to content

Instantly share code, notes, and snippets.

@mizchi

mizchi/「フロントエンドデベロッパー面接時の質問事項」への解答.md

Last active February 15, 2024 21:29
Show Gist options
  • Save mizchi/b8bd2b758a421bd5028f to your computer and use it in GitHub Desktop.
Save mizchi/b8bd2b758a421bd5028f to your computer and use it in GitHub Desktop.
Download ZIP
「フロントエンドデベロッパー面接時の質問事項」への解答
Raw
「フロントエンドデベロッパー面接時の質問事項」への解答.md

回答してみた。

https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/blob/master/Translations/Japanese/README.md

自分の立場

  • JavaScript特化
  • CSSへの興味は描画パフォーマンスに関わることに限定

10分ぐらいで答えた。間違ってるのがあるのもわかってるけどリアルさ重視というナの手抜きです。

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

@バージョン 2.0.0

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

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

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

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

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

一般的な質問事項

  • 昨日・今週に何を学びましたか？
    • A. ClojureScriptとOm
  • 何があなたをコーディングに惹きつけていますか？
    • A. 自動化 好奇心
  • 好きな開発環境について教えてください。（OS、エディタ、ブラウザ、ツール等）
    • A. MacOS Sublime Vim tmux
  • webページを作るときのあなたのワークフローを教えてください。
    • A. 自前のスケルトン集か、新しい技術スタックでのスケルトンを使って、そこから拡張
  • プログレッシブエンハンスメントとグレースフルデグラデーションの違いを説明してください。
    • フィーチャーディテクションの説明もできるとボーナスポイント。
    • A. 知らん
  • 「セマンティックHTML」の意味を説明してください。
    • A. マークアップの都合の情報が含まれない、それ自身で意味性の高いHTML
  • ウェブサイトのアセット・リソースを最適化をどのように行いますか？
    • 下記のようないくつかのソリューションが期待されます。
      • ファイル結合
      • ファイルの縮小
      • CDNホスティング
      • キャッシュ利用
      • など
    • A. JavaScript連結
  • 複数のドメインからアセットを提供したほうがよい理由は何ですか？
    • 一度にブラウザが与えられたドメインからダウンロードできるリソースの数はいくつですか？
    • A. あんまり詳しくない。ブラウザの並列ロード限界は設定次第だが16とかだった気がする
  • ページロードを減らす３つの方法の名称を挙げてください。
    • A. PushState, HashChange, コンテナ内描画
  • プロジェクトに加入したときに、もし彼らがタブを使い、あなたがスペースを使っていたとしたらどうしますか？
    • EditorConfig (http://editorconfig.org) といったプラグインを利用するように提案する
    • 慣習に従う (一貫性を保つ)
    • issue :retab! command
    • A. プロジェクトに合わせるけどぶっちゃけタブ使ってるのセンス無いと思う
  • シンプルなスライドショーのページを書いてください。
    • JSを使わなかったらボーナスポイント。
    • A. 略。JSは使う。ボーナスポイントの意味がわからない。
  • コードのパフォーマンスをテストするのにどんなツールを使いますか？
    • プロファイラー、JSPerf、Dromaeo
    • A. DevTools
  • もし今年１つの技術をマスターできるとしたら、何をマスターしますか？
    • A. Adobe Flash Toolkit for HTML5
  • 標準化と標準化団体の重要性を説明してください。
    • A. 各ブラウザごとに勝手に実装されたらかなわん
  • FOUCとは何ですか？ どのようにFOUCを防ぐことができますか？
    • A. 知らない

HTMLに関する質問事項

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

JSに関する質問事項

  • イベントデリゲーションを説明してください。
    • A. イベント発火ごとの振る舞いを高階関数で指定する
  • JavaScriptにおいてthisがどのように機能するか説明してください。
    • A. 関数スコープごとに名前空間を作る
  • プロトタイプ継承がどのように機能するか説明してください。
    • A. 短く表現できないので略
  • JavaScriptをテストするのにどのように対処しますか？
    • A. 一部バックドアを作ることはある
  • AMDとCommonJS、何が違いますか？
    • A. 全然別もんだろ
  • ハッシュテーブルとは何ですか？
    • A. 与えられたキーに対してハッシュ関数でバリューの位置が決定される辞書
  • undefinedとundeclared変数は何ですか？
    • A. undeclared知らないけど触ったら例外でるやつですか
  • クロージャとは何ですか？　どのように、そしてなぜそれを使うのですか？
    • クロージャを作成するときに使うあなたの好きなパターンは何ですか？ （即時実行関数表現にのみ適用）
    • A. JavaScriptではグローバルスコープ化関数スコープ。好きなパターンもクソもない。
  • 匿名関数が有効な典型的なユースケースは何ですか？
    • A. グローバルな名前空間を汚されるのを拒否する。非同期関数での変数参照を保護する
  • 「JavaScriptモジュールパターン」とそれを使う場面を説明してください。
    • 名前空間について述べたらボーナスポイント。
    • もしモジュールが名前空間無しだとしたらどうなりますか？
    • A. グローバル参照渡し or 最近だと browserify
  • コードをどのように整理しますか？（モジュールパターン、古典的な継承を使う？）
    • A. browserify
  • ホストオブジェクトとネイティブオブジェクトの違いは何ですか？
    • A. 知らないけどスタックトレース辿ると[native]のことかな
  • 下記コードの違いは何？
function Person(){}
var person = Person()
var person = new Person()

A. thisスコープが返るかどうか

  • .callと.applyの違いは何ですか？
    • A. applyは第二引数が配列が引数。callは第二引数以降の引数が引数
  • Function.prototype.bindを説明してください。
    • A. 関数呼び出し時のthisを変更する
  • いつコードを最適化できますか？
    • A. 抽象的でよくわからないけど遅かったら最適化する
  • JavaScriptにおいてどのように継承が機能しているか説明してください。
    • A. 長いので略
  • document.write()はいつ使いますか？
    • 生成される広告の多くはいまだに嫌われている方法であるdocument.write()を活用しています。
    • A. 使いたくありません
  • フィーチャーディテクション、 フィーチャーインファレンス、UA文字列の使用の違いは何ですか？
    • A. 知らん
  • AJAXをできるだけ詳しく述べてください。
    • A. 外部サーバーにリクエスト投げて非同期でjsonを貰う。XはXMLだったけどもう使ってる人はいない。
  • JSONPがどのように機能するか述べてください。(またそれがどのようにAJAXとは異なっているのか)
    • A. クロスドメイン制約を超えてリクエストできる。
  • JavaScriptテンプレートは使ったことはありますか？
    • 使ったことがあるのなら、何のライブラリを使いましたか？（Mustache.js, Handlebarsなど）
    • A. 大量に使って列挙無理
  • 「巻き上げ」を説明してください。
    • A. function foo(){} で宣言したものは同じスコープならこれより上でも参照できる。
  • イベントバブリングを説明してください。
    • A. 発火したイベントを自分でバブリング阻止しなければ子に伝わっていく
  • 「属性」と「プロパティ」の違いは何ですか？
    • A. 日本語だとなんのことかわからん
  • どうしてビルトインJavaScriptを拡張することは良くないのですか？
    • A. 複数のライブラリが異なる挙動を期待していることがある
  • どうしてビルトインJavaScriptを拡張することは良いのですか？
    • A. ポリフィル書くのにはよい
  • ドキュメントロードイベントとドキュメントレディイベントの違いを述べてください。
    • A. 詳しくない
  • ==と===の違いは何ですか？
    • A. == はゆるふわなので使いません
  • ブラウザのウィンドウURLからクエリ文字列をどのように取得するかを説明してください。
    • A. location.hash だっけ
  • JSに関するセイムオリジンポリシーを説明してください。
    • A. 同じホスト app.hoge.com
  • JavaScriptにおける継承パターンを述べてください。
    • A. 略
  • 下記を動くように書き変えてください。
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]

A. 何を意図してるのか不明。書き加えるじゃなくて書き換える？duplicate関数作るんじゃないですか。

  • JavaScriptにおけるメモ化（計算の繰り返しの回避）の方針について述べてください。
    • A. シチュエーションによる
  • 三項演算子と呼ばれる理由は何ですか？ 「三項」という言葉が示していることは何ですか？
    • A. AST上の理由
  • 関数のarityとは何ですか?
    • A. 引数とは違うんだっけ
  • "use strict";とは何ですか? これを使うことのメリット、デメリットは何ですか？
    • A. Object.freezeとかが厳密になる。デメリットはそのままじゃ動かないことがある。

JSコードの例

A. 解答がのってるので略

~~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（チェイン）」を説明してください。
    • A. 同じインスタンスを返却することで a.hoge().fuga() と叩ける
  • 「deferreds」を説明してください。
    • A. 値が返ることを約束したオブジェクト
  • jQueryに関する最適化としてどんなことができますか？
    • A. 自前ビルドしたりzepto使ったり? コードレベルでは基本的に参照を保存して使いまわしてクエリを投げない。
  • .end()は何ですか?
  • イベントハンドラに名前空間を与えるにはどのようにすればいいですか。またなぜ名前空間を与えますか。
    • A. $(selector).on 'a.hoge' だっけ。複数あって親イベント名が共通だったら子にもいった気がする
  • jQueryメソッドに渡すことができる4つの異なる値を挙げてください。
    • セレクター (string)、HTML (string)、コールバック (function)、HTMLエレメント、オブジェクト、配列、エレメントの配列、jQueryオブジェクト等
    • A. 答え書いてるので略
  • エフェクト(あるいはfx)キューとは何ですか?
    • A. jQueryAnimationが発火する順番が入ってるキューかな
  • .get()、 []、.eq()の違いは何ですか？
    • 知らない。
  • .bind()、.live()、.delegate()の違いは何ですか？
    • A. イベントをリッスンしてるのがそれ自身か親か
  • $、$.fnの違いは何ですか？ 単に$.fnと書いた場合はどうですか？
    • A. jQueryインスタンスのメソッドか、jQueryのスタティックメソッド化
  • 下記のセレクターを最適化してください:
$(".foo div#bar:eq(0)")

A.

$(".foo #bar")[0]
  • 'delegate()'と'live()'の違いは何ですか？
    • A. 上と同じなので略

CSSに関する質問事項

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

その他の質問事項

  • あなたがコーディングした中で一番素晴らしいものは何ですか？　何が一番誇れますか？
    • A. 回転行列とDOMヒープで組んだクオータビュー
  • あなたが使っている開発者ツールの一番好きなところは何ですか？
    • A. Debugger
  • 何か暖めてるアイディアは持っていますか？　それはどんなものですか？
    • A. 秘密
  • インタネットエクスプローラーの最も好きな機能は何ですか？
    • A. ほっとけばシェアが微減していくところ
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment