令和から始める

Frontend

Frontend de KANPAI! #7 @masaakikunsan

自己紹介

masaakikunsan (石岡将明)

株式会社ROXX (旧SCOUTER)

back check PM / Frontend Engineer

自称フロント界隈1の加藤恵のオタク

最近は副業でTS書いてる

新卒と同い年

宣伝

尊さが暴走している
漫画を買ってくれ...

映画までにアニメを見よう

本日のゴール

フロントエンドを始めたい、伸ばしていきたい人の背中を押す

フロントエンドエンジニアとしてのキャリアに悩んでる人の手助けになるような内容になってると嬉しい

masaakikunsanのこれまで

2016年:
プログラミングを始める。10月には正社員で会社に入りPHPとJSをやる。同月からROXX社で副業開始。

2017年:
5月ぐらいにROXX社でフロントエンドのリーダーに就任。
10月にROXX社を退社しフリーランスになる。
フリーランス時代は、VueやReactでのSPA開発をメインで月5社ぐらいでコードを書いていた。ハンズオンの講師・メンターやフロントでの技術顧問やPO・PMなどもやった。

2018年:
9月にROXX社に出戻り新規事業の開発責任者に就任。

Agenda

1. これまでのフロントエンドの振り返り

2. ここ数年のフロントエンド

3. これからのフロントエンド

4. さいごに

これまでのフロントエンド振り返り

ここでは、主にJSの話になります。
またここから出てくる年数は目安なので正確さはないです。

2000年 ~

Ajaxの登場により、フロントエンドが加速

jQueryの登場により、簡単にDOM操作やAjax通信ができるようになった

2000年 ~

Ajaxの登場により、フロントエンドが加速

jQueryの登場により、簡単にDOM操作やAjax通信ができるようになった

ここからフロントへの評価が見直され始める

201x年前半

Flashの死によりフロントエンドが複雑化していく

Node.js の登場

MVCアーキテクチャのフレームワークが複数登場

モジュールバンドラやAltJSの登場

ReactやVueやAngularが登場

201x年前半

Flashの死によりフロントエンドが複雑化していく

Node.js の登場

MVCアーキテクチャのフレームワークが複数登場

モジュールバンドラやAltJSの登場

ReactやVueやAngularが登場

ここからフロントエンドの仕事がコーダーから今の形になり始める
SPAでの開発が徐々に増える

フロントエンド戦国時代が始まりを迎えた

201x年後半

Fluxの登場により状態管理がしやすくなる

PWAやSSR 等...

201x年後半

Fluxの登場により状態管理がしやすくなる

PWAやSSR 等...

2000年代にフロントの評価が見直され
201x年前半では Node.js や VDOM が登場などでかなり移り変わりが激しい時代になった

ここ数年のフロントエンド

デザインを元にマークアップする役割からロジックや設計など色々と求められるようになった

SPA開発がかなり主流になった

React・Vue・Angularの御三家フレームワークが当たり前になり始めた

BabelやらWebpackやらいじる能力や、ECMAScriptの動向を追ったりしないといけなくなった

だけど、実はフロントエンドの変化が早かったのは前の話

ここ2, 3年は割とそうでもない(個人的な感想)

これからのフロントエンド

本題に入ります！

これからのフロントエンド

フロントエンドエンジニアは主に二通りに分類されると思います
フロントエンドエンジニアは広義すぎてダメ...

1. ビジュアルフロントエンドエンジニア

2. アプリケーションフロントエンドエンジニア

ビジュアルフロントエンドについて

前提:
デザインの再現力が求められる

必要なスキル:
・文書構造を意識したHTML(タグの意味をしっかりと考え正しく書く)、CSSによる再現をすばやくできる

・UI/UXの勉強をしデザイナーと協業しより良いものを作っていく能力

などが求められます
デザインは自分でできるようになっても良いと思う

アプリケーションフロントエンドについて

前提:
所謂モダンフロントエンドに求められるスキルは全て必要

必要なスキル:
・ECMAScriptの動向を追いつつ高いJS力

・サーバーサイドの知識

などが求められます
これからはTSが当たり前の時代が来ると思うので今からキャッチアップした方が良さそう

ビジュアルフロントエンドの方に寄せたい人へ

・既存サイトでいいのでトレースをひたすらし、HTML/CSSの基礎能力を上げ実装スピードを上げる

・デザイン能力も欲しければSketchとかでトレースしてそれを実装するのが良い
・MDNとか結構ハードル低いので読んでおく

・UI/UXの勉強をする

・アクセシビリティ周りの勉強をする

・今後どんどん注目されると思うので市場価値はかなり上がりそう

・御三家フレームワークのどれかをやっていく

・ビジュアルよりでやっていくならVueがやっていきをしやすいと思う

アプリケーションフロントエンドに寄せたい人へ

・JS力を強くしていこう

・これから勉強していくなら本から入っても良さそう
・徹底マスター JavaScriptの教科書がJS始めるならおすすめします

・Fluxで状態管理を学ぶ

・TSをやっていく

・今後デファクトスタンダードになると思うので今からやっていこう
・NodeでTSをやっていくのもいいかも
・TSだと実践TypeScript をおすすめします

・御三家フレームワークのどれかをやっていく

・TSのことを考えるとAngularかReactをおすすめします

さいごに

フロントエンドの需要が増加し続けている。
今は技術的に停滞している時期で、メイン技術は枯れている今だからフロントエンドを始めやすい！

単価的な面でも今は稼ぎ時だと思います。

さいごに

フロントエンドの需要が増加し続けている。
今は技術的に停滞している時期で、メイン技術は枯れている今だからフロントエンドを始めやすい！

単価的な面でも今は稼ぎ時だと思います。

みんなでフロントエンド界隈を更に盛り上げていきましょう