令和から始める
Frontend
Frontend de KANPAI! #7 @masaakikunsan
自己紹介
masaakikunsan (石岡 将明)
株式会社ROXX (旧SCOUTER)
back check PM / Frontend Engineer
自称フロント界隈1の加藤恵のオタク
最近は副業でTS書いてる
新卒と同い年
宣伝
尊さが暴走している
漫画を買ってくれ...
映画までにアニメを見よう
本日のゴール
フロントエンドを始めたい、伸ばしていきたい人の背中を押す
フロントエンドエンジニアとしてのキャリアに悩んでる人の手助けになるような内容になってると嬉しい
masaakikunsanのこれまで
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をおすすめします
さいごに
さいごに
フロントエンドの需要が増加し続けている。
今は技術的に停滞している時期で、メイン技術は枯れている今だからフロントエンドを始めやすい！
単価的な面でも今は稼ぎ時だと思います。
さいごに
フロントエンドの需要が増加し続けている。
今は技術的に停滞している時期で、メイン技術は枯れている今だからフロントエンドを始めやすい！
単価的な面でも今は稼ぎ時だと思います。
みんなでフロントエンド界隈を更に盛り上げていきましょう
