Slide 1
Slide 1 text
フロントエンドエンジニア
って 何者？
Sendai Frontend Meetup #1
2019/08/07
@hajimete_no_it & @luckbizzo
Slide 2
Slide 2 text
自己紹介
名前：さとうしょうた
出身：宮城県
------
はじめてのIT勉強会 主催
Attack & Defense 主催
Slide 3
Slide 3 text
本日、コードは
出てきません
Slide 4
Slide 4 text
★ 私の 本日の目標 ★
Slide 5
Slide 5 text
みなさんが...
『フロントエンドエンジニアって、○○○○だよね』と、
知ったかぶりができるようになること。
Slide 6
Slide 6 text
★ さて、前段です ★
Slide 7
Slide 7 text
みなさん、Webサービスの開発 を
イメージできるでしょうか？
ざっくりな流れを説明できる方！
Slide 8
Slide 8 text
基本的なWebサービス開発の流れ
Slide 9
Slide 9 text
開発の要素と流れ（参考）
企画
要件
定義
外部
設計
＆
内部
設計
実装
検証
完成
開発進行（期間）
最初の
タネ
Slide 10
Slide 10 text
開発工程別の役割（参考）
企画
要件
定義
外部
設計
＆
内部
設計
実装
検証
完成
開発進行（期間）
最初の
タネ
企画
開発（リリースまでの準備）
フロントエンド／バックエンド／インフラ／セキュリティエンジニア
UI・UXデザイナー／イラストレーター／デザイナー
運用
Slide 11
Slide 11 text
企画
開発（リリースまでの準備）
運用
開発工程別の役割（参考）
企画
要件
定義
外部
設計
＆
内部
設計
実装
検証
完成
開発進行（期間）
最初の
タネ
フロントエンド／バックエンド／インフラ／セキュリティエンジニア
UI・UXデザイナー／イラストレーター／デザイナー
最近のフロントエンドエンジニア
Slide 12
Slide 12 text
★ さてさて、本題です ★
Slide 13
Slide 13 text
フロントエンドエンジニアは何者か。
Slide 14
Slide 14 text
ユーザーの目に見える部分を
制作・開発する人たちの総称
マークアップエンジニア
UI/UXデザイナー
ネイティブエンジニア
実装？
デザイン？
設計？
イラストレーター
イラスト？
Adobe XD?
Monaca?
HTML5?
Vue.js? React?
PWA?
表示？レンダリング?
Next.js?
Slide 15
Slide 15 text
なんでこんなに定義が曖昧なのか
歴史を辿ってみました
Slide 16
Slide 16 text
JavaScript 誕生
[1995- ]
JavaScript 低迷期
[2000- ]
JavaScript 転換期
[2005- ]
JavaScript 混迷期
[2011- ]
ネイティブアプリ 隆盛期
[2013- ]
ブラウザファースト 過渡期
[2018- ]
フロントエンド
エンジニアの誕生
0. HTML
1. CSS
2. JavaScript
3. Flash
4. 仮想DOM
5. PWA
6. WebAssembly
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
フロントエンドエンジニアは何者か。
改めて
Slide 19
Slide 19 text
技術の進歩に合わせてユーザーのために
できることを次々と変えている人たち
Slide 20
Slide 20 text
ということで、
Slide 21
Slide 21 text
トークはここまで！
Slide 22
Slide 22 text
さいごに
Slide 23
Slide 23 text
★ 宣伝 ★
Slide 24
Slide 24 text
はじめてのIT勉強会
✓ あらゆる「はじめて」を応援する気軽な勉強会
✓ 毎月第4水曜日の19:00から定期開催される勉強会
✓ より専門的な勉強会や、技術に詳しい人の情報を得る練習ができる勉強会
これから頑張る人のための勉強会！
Slide 25
Slide 25 text
ご静聴、ありがとうございました