2013/7/3 社内勉強会で発表した資料です。

1. これからフロントエンジニアを
目指すあなたへ
2013/07/03 社内フロント技術勉強会 #01
小川 充
https://github.com/mitsuruog
https://twitter.com/mitsuruog

2. 自己紹介
小川 充（おがわみつる）
1976年8月26日生まれ（36歳）
株式会社クレスコ勤務 フロントエンジニア
enja（えんや）
フロントエンドのOSSドキュメントの翻訳。
Backbone.js,Underscore.js,Jasmin,Sass,Stylusなど
https://github.com/enja-oss
HTML5j えんぷら部
Google準公式コミュニティ
HTML5の中でもエンタープライズに特化した情報発信、勉強会の運営
http://www.html5biz.org/
所属コミュニティ

3. 略歴
2000年～2003年（3年半）
某コンビニチェーンのECサイト構築
（javascript、Java、VB6）
2003年～2006年（4年）
調理師、家具職人
2006年10月
IT業界に復帰
2007年7月
株式会社クレスコ入社
（典型的な職業システムエンジニア時代）
2012年3月
一念発起、フロントエンジニアを目指す

4. 目次
１．フロントエンジニアとは何か？
２．フロントエンジニアの勉強法

5. １．フロントエンジニアとは
何か？
http://shop.oreilly.com/product/9781593274870.do

6. フロントエンジニアとは
Web開発において、主にクライアントサイドの実装を行う
エンジニア。
昨今、Web開発がますます高度・複雑になったこともあり、
専門のスキルを持つエンジニアとして差別化されるようになってきた。

7. フロントエンジニアのスキルセット
フロントエンジニアの基本スキルはJavascript。
しかし。。。
・UIのリッチ化
・レスポンシブデザインの登場
・スマートデバイスの普及
などの時代背景もあり、CSSのスキルも必須となってきた。

8. フロントエンジニアの本当の役割
Webそのものが進化していく過程で、
Web開発も規模・複雑になってきた。
フロントエンジニアの本当の役割は
Web開発において膨らみ続ける
非機能要件のコントロールにある。
（作って動けば終わりではない。）
現代のWeb開発においては
フロントエンドの品質≒システムの品質

9. フロントエンド特有の複雑な非機能要件
● パフォーマンスチューニング
○ CPUパワーが非力なスマートデバイスへの対応
○ UIのリッチ化による、激しいDOM操作
● クロスブラウザ対応
○ レガシーブラウザの存在
○ 新技術のブラウザ互換性問題（ブラウザ間の実装の違い）
● 新通信技術への対応
○ websocket、HTTP2.0、SPDY（新しい相互通信アーキテクチャ）
● 最先端の構築、管理手法の導入
○ クライアントMVC、Grunt、CSSプリプロセッサ

10. フロントエンジニアの定義
フロントエンジニア＝Web全般を扱うエンジニア

11. http://uptodate.frontendrescue.org/
HOW TO KEEP UP TO DATE ONFRONT-END
TECHNOLOGIES
～フロントエンドの技術を最新に保つ方法～
２．フロントエンジニアの
勉強方法
2013年6月くらいに海外で話題になったものです。
私もフロントエンジニア目指したころからやっている
こと多かったので、紹介します。

12. これからご紹介する方法は
少し大変ですが、効果は保障します。^^

13. もちろん国内にも凄い人
たくさんいます。
世界のトップエンジニアを
Followしょう
GoogleのAddyの
Followは
必須！

14. 海外の解説は
国内のものと比較して格段に良いで
す。（Blogなども含む）
とにかくGithub最高です。
国内だとQiitaいいですよー。
最高の解説
（コードサンプル）を
見つける

15. モチベーション維持のためにも、
仲間は大切。
新しいことは、ベストプラクティスが無
い場合が多いので、悩みはみんなで
相談。
勉強会などに参加
する

16. 最終到達点はここ。
トップエンジニアはみんな
これを持っている。
自分の型を見つける

17. ハードル高いッス...orz

18. 個人的おすすめ勉強法
初めは深入りせず、
浅く広く知識を習得すること。
フロントエンジニアが取り扱う技術領域は多種多様である。
まずは、Webという全体像を捕らえることが大事。
（それぞれの要素はどこかで繋がっている！）
スキルアップには、多くの点を面として広げていく戦略が良い。（経験談）
さらなるステップアップには英語は必須！

19. まとめ
● フロントエンジニアとはWeb全般を扱うエンジニア
● フロントエンジニアの仕事は、ただ作るだけではない。
● 初めのうちは、広く浅く学習するのが良い
● やっぱり最後は英語力

20. ご清聴ありがとうございました。