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

![laravel-and-vue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/911716dd-4d6d-1092-e5b3-d8e45817966b.png)
(出典:[Free Resources | Delesign](https://delesign.com/))
### マークアップエンジニアとの違い
マークアップエンジニアはHTMLやCSSの仕様に詳しく、適切な構造化、SEO、リッチなコンテンツの製作など、コーダーよりもよりコーディングスキルが高い傾向がある。ただし、JavaScriptに関しては基本レベルに留まっている人も多い傾向にある

### 基本はこの3つ
![kindpng_4529239.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/2d38d28b-98f3-d94e-41a0-a5db38313b82.png)

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

https://qiita.com/studio15/items/12b607fe919d02e49ddc

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

#### 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(コンテンツマネジメントシステム)構築
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/fe174db7-446d-158a-58ba-d71eb3857535.png" width="200" height="auto" >          <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/8d2978df-62f9-9bc3-dae7-f63890f0b8a1.png" width="200" height="auto" >          <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/4332d05f-76c6-5f02-8b4f-7161b8b97abd.png" width="200" height="auto" >

誰でも好きなように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 組織の目標を達成するための重要な業績評価の指標

### サーバーサイド言語
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/aef4e4b0-4ba5-d52d-e97a-1a89a26b2455.jpeg" width="200" height="auto" >
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/10b89a3c-796f-735c-1b6d-75bc8d3c803f.png" width="200" height="auto" >

#### PHP
- PHPフレームワーク
    - Laravel
    - CakePHP
#### Ruby
- Rubyフレームワーク
    - Ruby on Rails

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

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

#### 参照サイト
- [フロントエンドエンジニアに必要なスキル6つ！長く生き残っていくためには？](https://www.webstaff.jp/guide/jobcategory/coder/%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%8b%e3%82%a2%e3%81%ae%e3%82%b9%e3%82%ad%e3%83%ab/)
- [フロントエンドエンジニアなら習得しておきたい3つのフレームワーク・ライブラリ](https://www.webstaff.jp/guide/trend/%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%8b%e3%82%a2%e5%90%91%e3%81%91%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af/)
- [Next.jsとはReactベースのフレームワーク！Nuxt.jsとの違いや特徴は？【入門編】](https://www.webstaff.jp/guide/trend/nextjs/)
- [CVR(コンバージョン率)とは？計算方法から改善施策まで詳しく解説！](https://digitalidentity.co.jp/blog/ad/cvr-up-method.html)
- [KPI（重要業績評価指標）](https://www.nri.com/jp/knowledge/glossary/lst/alphabet/kpi)