Open
32

フロントエンドに関わる人のスキルとして触れておきたい・知っておきたいこと

Web
フロントエンド
Question
ピン留めされたアイテム

今後のエンジニア採用において、自分の中で考えていることなどを順次羅列していく
投稿を許可してるので、こういうのもあるよっていうコメントも募集してます

いろいろな方に見てもらえるようになったので補足

  • 以下羅列することは「必ず」やっておかなければならないことではない
  • 専門性を広げるためにどういった領域を基点とすればいいかを知るため
  • 自分自身がもつスキルの現在地点の再確認・見直しをするため

HTML

  • HTML Standard を参照できる
    • 入れ子関係
    • どういった用途で使われるのか
  • <head>内のみで使用できるタグをおおよそ把握している
  • セマンティクスに基づいた実装の利点を説明できる
  • Nu Html Checker を使うことができる
    • 構文エラーについてを把握できる
  • 各ブラウザで使用できるかできないかを把握している

CSS

  • SASS、SCSS、Stylusのいずれかを利用できる
    • 変数を使用した効率化について理解がある、準じたコードを書ける
  • CSS設計についてが何のためにあるか理解している
    • 各設計のメリットについて説明できる
  • 詳細度について理解している
    • IDを含む場合の優先度順
    • !importantが付与される場合の優先度順
  • media queryの扱い方について理解している
  • stylelintなどの静的解析ツールを使用できる
  • Grid, Flexboxを使用したレイアウト調整ができる
    • inline-blockやfloatを使用した横並び以外の手段が使える
  • CSS変数について知っている
  • CSSフレームワークについて紹介できる

レイアウトをもとに頭の中で使用するプロパティを想像できるようになると上級者？

レイアウト調整でいうと、positionプロパティの各値（relative、static、absolute、fixed）の違いと使いどころが分かっている方良いですね。

CSS設計については現場によると思いますが、個人的にはBEMについて理解があると色んなところでやりやすそうだなと思います。

z-indexの重ね合わせコンテキストに関する挙動も押さえておきたいです（positionプロパティの使いどころに内包されてる内容かもしれませんが）

JavaScript

  • 現行の仕様に追従したJavaScriptを意識して書くことができる
    • varではなくletやconstを使用する
  • AltJSについて知っている、利用できる
  • eslintといった静的解析を用いることができる
  • consoleで実行内容を出力できる
  • DOMが何かを理解している
    • JSを用いて操作できる
  • オブジェクト、配列を作成できる
    • 中身の操作ができる（コピー、追加、削除など）
    • 順番を入れ替えることができる
    • イミュータブルな実装の考慮ができる
  • イベントを登録できる、削除できる
  • MDNのJavaScriptドキュメントを参照できる
  • TC39でプロポーザルが出されている機能を参照することができる

TypeScript

  • 静的型付けを理解している
    • 何故JavaScriptではなくTypeScriptを選択するのか説明できる
  • 扱える型について理解している
    • anyについて厳重に扱える
  • 型定義できる
    • 場合において定義ファイルを作成できる
  • 型ガードの理解がある
  • 新しいJSの機能を利用できることを理解している
    • Optional chainingを使用できる
    • Nullish coalescingを理解できる・使用できる

テストツール

  • なぜテストをしなければいけないか説明できる
    • TDD、BDDとは何かを説明できる
  • どういうテストがあるのか理解している
    • それぞれのテストにおいてどういうツールを用いるかを理解している
  • ブラウザ自動化ツールを知っている
  • Snapshot テストと Visual Regression テストの違いを説明できる

Polyfill

  • なぜ必要なものなのか説明できる
  • 開発においてbabel、core-jsのセットアップができる

宣言的UI

  • 従来のJSによるDOM操作とは異なるものを理解して説明できる
  • 採用しているライブラリ、フレームワークを知っている
  • 状態管理を考慮することができる
    • ステートを保持する場所（ローカル、グローバル）の理解している
    • ステートを受け渡す方法を知っている
    • 更新方法を知っている
    • バインディングは単方向か双方向であるか理解している

バンドルツール

  • Browserify, Webpack, gulp, rollup, parcelというツールが何をするものか理解している
    • それぞれの用途、メリットについて説明できる
  • どういったものがバンドルされているか分析することができる
  • 圧縮してファイルサイズを小さくすることができる
  • 開発中とプロダクションモードの切り替えができる
  • Code Splittingが何をしているものか理解している

Web パフォーマンス

  • PRPLパターン、RAILモデルについてそれぞれ説明できる
  • 計測ツールについて何があるか説明できる
  • Chrome を用いたパフォーマンス向上に関して
    • Lighthouse や PageSpeed Insight を用いて計測できる
    • Chrome Developer Toolsのどのタブで確認するか理解している
    • Resource Hintsを用いて実行・高速化できる
  • Synthec Monitoring でパフォーマンス計測することによる利点がわかる
  • パフォーマンスバジェットについて説明できる
  • RUM について説明できる
  • CDNを活用できる
  • レンダリングブロックについて説明できる
    • 描写される順番について理解している

セキュリティ

  • 安全なウェブサイトの作り方を参照できる
  • 同一、クロスオリジンのそれぞれの違いが説明ができる
  • XSSとは何かを説明できる
    • 対策方法についてコードベースで説明できる
  • ブラウザ側での脆弱性対策について理解している
    • CSPとは何かを説明できる
    • SameSIte Cookieについて説明できる
  • npmモジュールの脆弱性をチェックをする方法を知っている

Webを支える技術 -HTTP、URI、HTML、そしてREST 書影
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus) を読む

Webを支える技術はけっこう古い情報が現在でも使われているかのような書き方でたくさん載っているので、手放しで薦めるのは難しいと思います。かといって全体感を知ってもらうのに最適な書籍が何かといわれるとこれ以外にないかもしれませんが…。

手放しで薦めるのは難しい

わかる。その辺もあったのでJxckさんの動画引用してみた（Ajax以降の話は含まれてないので）

デザインツール

  • プロダクトのデザインツールで何が使われているか理解している
  • 画像の書き出し方について理解している
    • 2倍や3倍の解像度書き出し方が分かる
    • アイコンの場合、SVGにて抽出できる方法を知っている
  • CSSを抽出できるものの場合、どこから確認すればいいか理解している
  • スポイトツールで色の抽出ができる
    • グラデーションで色の始点と終点を抽出できる
  • 要素間の空きや余白がどれくらいあるか確認することができる
  • ベクター画像とビットマップ画像の違いを説明できる
  • 画像を適切に圧縮できる
  • 各画像圧縮方式についてざっと説明できる

画像

  • jpg, png, gifの拡張子それぞれの特徴について説明できる
  • webpを用いることのメリットについて説明できる

レスポンシブデザイン

  • レスポンシブデザインにする必要について説明できる
  • 中間幅についての挙動を考慮した提案ができる
  • どのブレイクポイントがあるとよいか理解して説明できる

OSS

  • セマンティック バージョニングにおいて各数字が何であるか理解している
    • major, minor, patch, rc
  • ライセンスの有無を理解している
    • ライセンスに則った使用をしている
  • 使用しているバージョンがEOL（End of Life）かどうかを確認できる
    • EOLになる場合のアップデート対応や方針などを説明できる
  • 場合によってはIssueやPull Requestなどで提言できる
  • 運用している場合、どのようにメンテナンスしているか説明できる
  • よくあるライセンスの種類について知っている
  • ライセンスごとのコンテンツの利用制限について知っている

SPA（Single Page Application）

WIP

  • アプリケーションの構成について説明できる
ログインするとコメントできます