フロントエンジニア必須スキルをまとめてみた

(出典:Free Resources | Delesign)

マークアップエンジニアとの違い

マークアップエンジニアはHTMLやCSSの仕様に詳しく、適切な構造化、SEO、リッチなコンテンツの製作など、コーダーよりもよりコーディングスキルが高い傾向がある。ただし、JavaScriptに関しては基本レベルに留まっている人も多い傾向にある

基本はこの3つ

※JavaScriptの公式ロゴはないとのことです。

以下の文章に出てくるライブラリやフレームワークはあくまで抜粋(一例)です。

HTML(HTML5)

SEOを意識したマークアップスキル

CSS(CSS3)

膨大なCSSを整理してコーディングするスキル

• CSSフレームワーク
  • Bootstrap
    • Laravel 7.xまで採用
  • Tailwind CSS
    • Laravel 8.xから採用
  • Bulma
  • Foundation
    • Amazonやdisney、hpで使用
  • UIkit
    • グループ分けに重要なclass名すべてにuk-がついているので複雑になりがちなHTMLが見やすい
  • Base
  • Skeleton

JavaScript

アニメーション制作におけるCSSとJavaScriptの切り分けるスキル

• 静的型付け言語
  • TypeScript
    • JavaScriptを基にMicroSoftが開発
• JavaScriptライブラリ
  • React
    • Facebookが開発
    • クライアントサイドレンダリング(CSR：Client Side Rendering)に対応
  • jQuery
    • JavaScriptを簡易に記述できる
    • 近年は機能の追加により動作が遅くなっている
• JavaScriptフレームワーク
  • Vue.js
    • AngularJSの良いとこ取り＆軽量化
  • Next.js(Reactベース)
    • レンダリングの個別設定が可能
    • シングルページアプリケーション(SPA)
    • サーバーサイドレンダリング(SSR)
    • 静的サイトジェネレーター(SSG)
  • Nuxt.js(Vue.jsベース)
  • AngularJS
    • Googleが開発
• その他
  • Vue.js、Next.js、Nuxt.jsのようなフレームワークやライブラリ
  • アニメーション制作におけるCSSとJavaScriptの切り分け

プラスα

CMS(コンテンツマネジメントシステム)構築

誰でも好きなようにWebコンテンツを作ることができるシステム

• WordPress
• MovableType
• microCMS
  など

UI/UX設計

CVR※1(コンバージョン率)や利用回数、滞在時間などのKPI*2達成を考慮

UI（ユーザーインターフェース）

• Webサイトのデザインやフォント、パソコン自体の外観など、ユーザーの視覚に触れるすべての情報
  • キャラクターユーザーインターフェース（CUI）
  • グラフィカルユーザーインターフェース（GUI）
• UIはUXを高めるための重要な要素

UX（ユーザーエクスペリエンス）

• ユーザーが製品やサービスを通して得られる体験や経験

UXを向上させるためには

1. ゴールを明確にする
   ユーザーにどのような行動をして欲しいのかを設定(ゴールを決める)

   ※ゴールが不明確であれば、最終的にできあがるサイトもあいまいなものになってしまいかねない

2. ユーザーの気持ちになりきる(ユーザーのペルソナを設定)
   ターゲットへのイメージが明確になる

   現在置かれている状況や悩み、関心、要求を想像してユーザーになりきることで自然とデザインや機能などが絞られる

3. ユーザーの使いやすさについて考える
   常に斬新なデザインで勝負するのではなく、ユーザーがストレスなく使用できるにはどうしたら良いかも併せて考える

※1 Webサイトや特定のページに訪れたユーザーの内、どの程度CV(最終的な成果)に至ったかを表す数値
CVR＝CV数（コンバージョン数）÷セッション数（サイト訪問者数）×100
※2 組織の目標を達成するための重要な業績評価の指標

サーバーサイド言語

PHP

• PHPフレームワーク
  • Laravel
  • CakePHP

Ruby

• Rubyフレームワーク
  • Ruby on Rails

さらにプラスα

チームマネジメント

滞りなくプロジェクトを成功させるため

• どこにだれを配置して、どのような手順ですすめていくかを明確にする
• 全体のスケジュール管理
• それぞれの工程におけるタスク管理
  チームのメンバーそれぞれがポテンシャルを発揮できるように、
• モチベーションをコントロール(コミュニケーションスキル)
• リーダーとメンバーのみならず、ときにはメンバー同士での交流を自然的に促すことができる
  その他
• プレゼン力
• マーケティング力
• デザイナーも兼務したコピーライティング力

なりたい自分を想像したうえで、必要なスキルを取捨選択していくことが結果的にキャリアアップにつながる

参照サイト

• フロントエンドエンジニアに必要なスキル6つ！長く生き残っていくためには？
• フロントエンドエンジニアなら習得しておきたい3つのフレームワーク・ライブラリ
• Next.jsとはReactベースのフレームワーク！Nuxt.jsとの違いや特徴は？【入門編】
• CVR(コンバージョン率)とは？計算方法から改善施策まで詳しく解説！
• KPI（重要業績評価指標）