ホーム / Test /

フロントエンド技術を学ぼう 1-7.フロントエンドの面接

2020年7月23日木曜日

CSS Front-end Developer Handbook HTML JavaScript Test

t f B! P L

Front-end Developer Handbookを教科書にフロントエンド周りの技術を習得する連載。

フロントエンドの面接についての説明です。


フロントエンドの面接

フロントエンドデベロッパーに就く為の面接で、 以下の点について纏めています。

  • 質問されうる内容
  • 聞くべき質問
  • 面接への準備

あなたが質問されうる内容:

全般

  • ワークフロー
  • UI
  • セキュリティ
  • パフォーマンス
  • SEO
  • メンテナンス性
  • バージョン管理システム
  • アクセシビリティ(ARIA)
  • FOUC(Flash of Unstyled Content)
  • CSSアニメーションとJavaScriptアニメーション

HTML

  • doctype
  • 標準モードとQuirksモード
  • HTMLとXHTML
  • application/xhtml+xml
  • 複数言語対応
  • data属性
  • ブロック要素
  • cookieとsessionStorageとlocalStorage
  • scriptタグとscript asyncタグとscript deferタグ
  • CSSのリンクの挿入位置
  • プログレッシブレンダリング
  • HTMLテンプレート言語

CSS

  • classとid
  • resetとnomalize
  • float
  • z-indexとスタックコンテキスト
  • ブロック整形文脈(block format context)
  • CSSクリーニング
  • CSSスプライト
  • 画像置換
  • ブラウザ固有のスタイル
  • 機能制限ブラウザ
  • スクリーンリーダー以外の視覚障害対策
  • グリッドシステム
  • メディアクエリとモバイルレイアウト
  • SVG
  • 印刷
  • CSSプリプロセッサ
  • 非標準フォントの使用
  • ブラウザのCSSセレクタマッチング
  • 疑似要素
  • ボックスモデル
  • { box-sizing: border-box; }
  • displayプロパティ
  • inlineとinline-block
  • relative、fixed、absolute、statically
  • スタイルの優先順位
  • CSSフレームワーク
  • FlexboxとGridの仕様
  • レスポンシブデザインとアダプティブデザイン
  • Retinaグラフィック
  • translate()とabsolute

JavaScript

  • オブジェクト指向プログラミング
  • 関数型プログラミング
  • クラス継承
  • プロトタイプ継承
  • オブジェクト構成の重要性
  • two-wayデータバインディングとone-wayデータフロー
  • モノリシックとマイクロサービス
  • 非同期プログラミング
  • イベント委任
  • this
  • CommonJSとAMD
  • IIFE
  • null、undefined、undeclared
  • クロージャ
  • 匿名関数
  • モジュールパターン、クラス継承
  • ホストオブジェクトとネイティブオブジェクト
  • .callと.apply
  • Function.prototype.bind
  • document.write()
  • Feature Detection、Inference detection、UA Detection
  • AJAX
  • JSONP
  • JavaScriptテンプレート
  • ホスティング(巻き上げ)
  • バブリング
  • attributeとproperty
  • 組み込みオブジェクト
  • loadとreadyの読込
  • ==と===
  • 3次元表現
  • use strict
  • グローバルスコープ
  • Promise
  • altJS

テスト

  • 使用するツール
  • ユニットテストと統合テスト
  • Lint

パフォーマンス

  • 使用するツール
  • スクロール
  • レイアウトとペイントとコンポジット

ネットワーク

  • マルチドメインとSEO
  • Webサイトが読み込まれるプロセス
  • ロングポーリング、ウェブソケット、サーバー送信イベント
  • 要求ヘッダーと応答ヘッダー
  • HTTPアクション

参照元


小テスト


あなたが聞くべき質問:

全般

  • 募集経緯
  • 望まれる役割
  • 望まれる期間
  • 使用プログラミング言語
  • 給与参考値

チーム

  • チーム構成
  • チームの座席、環境
  • 会議頻度
  • ペアプログラミング有無
  • 画面共有/コラボレーションツールの使用有無
  • チームリーダーの方針
  • かんばん、スクラム等のプロジェクト管理の実施有無
  • 仕事割当方法
  • 仕事量の見積もり方
  • 定期的に別のプロジェクトに取り組めるか
  • 社内の他のグループとの関係
  • 社内の他のグループとの対話頻度
  • 社内の他のグループとの依存関係
  • チームの実働時間

開発プロセス

  • 使用しているソースコントロール
  • 使用しているリポジトリ管理アプリケーション
  • どの様な開発ワークフローか
  • チャットシステムの仕様有無
  • 製品版に含める機能の選定は誰が行っているか
  • 工数管理方法
  • コードレビューのプロセスが含まれているか
  • SOLIDとDRYの原則が推奨されているか
  • どの様なコーディングルールか
  • 開発環境
  • リリーススケジュール
  • クライアントとのコミュニケーション方法
  • 新しいプロジェクトの開始時に提供してもらえる仕様やモックアップ
  • QA/テスト手法
  • UI設計者はだれか
  • CMM(能力成熟度モデル)やSOC(Service Organization Control)等のコンプライアンス要件有無
  • SLA(Service Level Agreement)有無

監視/時間外対応

  • アプリケーションレベルのログの有無
  • Nagios、Icinga、Zabbixなど監視ソフトの有無
  • パフォーマンスメトリックス記録有無
  • PagerDuty、Eメール、SMS、モニターなどエラー通知方法
  • 24/365体制のチームか
  • イベント監視チームの存在有無
  • エスカレーション先の有無
  • 開発者も夜間エスカレーション対応が必要か
  • 営業時間外の作業は残業カウントされるか
  • 時間外にも対応依頼の電話はよく掛かる現場か

リモート

  • 勤務時間帯
  • SkypeやGoogleハングアウトなどのビデオチャットソフト使用有無
  • VPN仕様有無
  • オフィスに出勤する頻度
  • 交通費
  • スーパーフレックス

オープンソース

  • オープンソースライブラリ使用有無
  • オープンソースコードをリリースしているか
  • オープンソースライブラリに貢献しているか
  • 個人のオープンソースプロジェクトに対する会社の方針

コードベース

  • 何年物のコードベースか
  • 自動テストスイートがあるか
  • 技術的負債を定期的に修正しているか
  • スパゲッティコードの量
  • ドキュメント化されているか
  • 使用しているのはCSSか、LESSやSASSか
  • サポートブラウザ＆OS
  • ビルドの自動化有無
  • 定期的な統合プロセス実施有無
  • MV*系のコード構造の仕様有無
  • 使用しているフレームワーク
  • どこにホストしているか(自社orクラウド)

多様性

  • 男女比
  • 人種比
  • LGBTQ比
  • 開発者以外のスタッフ割合

文化

  • 繁忙期有無
  • 面接官の入社時期
  • 面接官の尊敬する社員
  • 報酬制度
  • どの様なタイプの人間が多いか
  • 自宅で仕事をしてもよいか
  • 平均残業時間
  • 休暇日数
  • オープンオフィス、個人オフィス、間仕切り
  • ドレスコード
  • 開発部門と営業部門の関係性、力関係
  • 軽食は飲料の提供有無

会社

  • 会社は利益をあげているか
  • 参加するチームが成し遂げた最大の功績
  • 評価基準と記載される働き
  • 意識している競合相手について
  • 開発以外のグループはどのように動いているか(セールス/オペレーション/テクノロジー/マーケティング/ファイナンス)
  • この会社の成功に重要な事
  • この会社に対する最大の苦情とは
  • 業績レビューの方法
  • 従業員に共有される情報の内容(収益、コスト、稼働指標)
  • 育児休暇有無
  • トレーニングプログラムを支払ってくれるか
  • 自分で作成したコードの所有権について

PHP

  • フレームワーク使用有無
  • HTMLテンプレートやSmartyやTwigなどのサードパーティのテンプレートエンジンの使用有無
  • composer使用有無
  • ZCE取得を勧めるか
  • 使用PHPバージョン

JavaScript

  • 使用しているフロントエンドソフトウェア(Query/Underscore/Lodash/Angular/Ember/Reactなど)
  • WebpackやBrowserifyなどの使用有無
  • EJS、Jade、Handlebarsなどのテンプレートエンジン使用有無
  • CoffeescriptやTypescriptなどのコンパイル言語の使用有無
  • NodeJSの使用有無

運用

  • 構成管理ツールの使用有無
  • 構成のバージョン管理がされているか
  • アクセス権付与のプロセス
  • ユーザーグループとアクセスレベル
  • 開発者へのadmin/root権限付与
  • ステージング環境有無
  • 開発環境以外のシステムへの接続有無
  • ITIL等の変更管理プロセス有無
  • システム管理、アプリケーション開発、アプリケーションのデプロイメント、アプリケーションの動作をどのように整理するか
  • 情報共有wikiの有無
  • サーバOS
  • ツールの使用規則
  • ハードウェアメンテナンスを自分で行うか
  • 負荷分散の仕組み
  • アプリケーションスケーリングの設計
  • フォールトトレランステスト手法
  • 公式のリポジトリがバクフィックスを提供できない場合のプロセス
  • IPアドレスとDNSレコードの管理
  • IPv6対応
  • ネットワーク分離しているか
  • FWルールの管理プロセス

参照元


面接への準備:

よくある誤解

「ボックスモデルとは何か？」、「JavaScriptでの==と===の違いとは？」そのようなトリビアタイプの質問は面接官はあまり問いません。
JavaScript、CSS、HTMLを使用してコードを書く、以下の様な実践的なインタビューがあります。

  • UIを実装
  • ウィジェットを構築
  • ライブラリを用いて一般的な関数を記述

また、技術、フレームワーク、ライブラリは変化していくものなので、フロントエンド開発の基礎力が培われているかを問われます。
ライブラリやフレームワークに依存しないようにしましょう。


参照元


QooQ