1. 1０年以上Java屋してたおっさんが
今年からフロントエンジニアやっている話

2. よしだたけひこ
• フリーランスエンジニア歴10年ほど
• 去年までJavaエンジニアとして10年以上活動
• レベルは下の上〜中の下
• 今年からフロントエンドエンドエンジニア

3. 今日話すこと
• フロントエンドエンジニアで活動しようと思った経緯
• 半年程度の実務経験を経て感じたこととか

4. 注意事項
• フロントエンドエンジニアとしての実務経験は半
年ちょいと薄っぺらい
• そこらへんを差し引いて暖かい目で見てくれると
ありがたいです

5. 去年前半までのよしだ
• swing、struts、seasar、組込みjava、android．．
．
• 業務系システム多め

6. 去年前半までのよしだ
フロントエンド周りのレベル感
• HTML/CSS、Javascriptはちゃんと学んだことな
し
• 見よう見まねの片手間でなんとか乗り切ってきて
これた感じ
• jQueryにかなり救われた

7. きっかけ
• 去年サーバーサイドエンジニアとしてとあるプロ
ジェクトに参画
• 一般向けのWebサービスで比較的なリッチなUIと
Javascriptを使ったインタラクションが多い

8. きっかけ
• フロントエンドデザインは外部のWebデザイン系
の会社に委託
• インタラクションのJavascriptはある程度デザイン
会社が実装

9. きっかけ
• デザイン会社から上がってきたフロントエンドコ
ードをサーバーサイドエンジニアがサーバーサイ
ドで動くように組み込む
• といった開発フロー。中を覗いてみると。。

10. きっかけ
かつて経験したことないくらい
のアレな感じ

11. きっかけ
• まともなルールが殆どないため一貫性が欠如
• なんだか良くわからないが一応動いている

12. きっかけ
自衛のために真面目にJavascriptを勉強し始める

13. きっかけ
モダンなフロントエンド開発の世界観を知る
• フロントエンド開発における定型的な作業の自動
化→ タスクランナー(Grunt、Gulp)
• 依存関係管理→ Bower
• より良いCSS → CSSプリプロセッサ（sass,
LESS, Stylus）

14. きっかけ
モダンなフロントエンド開発の世界観
• よりよいJavascript → AltJS(CoffeeScript、
TypeScript)
• クライアントサイトMVC → (Backbone.js、
Angular.js）

15. きっかけ
モダンなフロントエンド開発の世界観
• 従来型のWebアプリと比べ、よりリッチなユーザ
ー体験→ SPA(Single Page Application)
• CSS設計→ OOCSS、SMACSS、BEM

16. きっかけ
• 調べている内に問題解決の方法やアイデアに感動
• やってみたいというワクワク感とWebエンジニア
として取り残されているという焦りが日々高まっ
ていった
• 仕事に区切りをつけてフロントエンドエンジニア
職で仕事を探すことに

17. 仕事を探す
モダンなフロントエンド開発に取り組んでいたり、モ
チベーションの高そうな会社の案件を探した

18. 仕事を探す
• 希望条件に合致していた会社にエントリーしよう
と思ったが、ポートフォリオの提出が前提条件
• 2週間くらいで休暇も兼ねてポートフォリオをサク
ッと作ってみようと考えた

19. ポートフォリオ作り
自分のやりたいことをアピールしたものを作ろうと考
えた
自分のやりたいことは
• モダンなフロントエンドWeb開発
なので、grunt、bower、sass、compassで、html5、
css3、Javascriptを適度に使ったレスポンシブレイアウ
トなWebページを作ることにした

20. ポートフォリオ作り
気をつけたこと
• ウィジェット（ダイアログとかの画面部品）には
jQueryプラグインなどのライブラリをなるべく使
わない
• 意図、コンセプト、使用したアーキテクチャなど
を説明する

21. ポートフォリオ作り
• 簡単なデザインラフを考えてコーディングしてみ
る
• ラフ通りにマークアップできない。。
• マークアップ力弱いことや他に色々気になること
が頻発

22. ポートフォリオ作り
2週間じゃたりない。
仕切り直そう。。。

23. 勉強したこと
• 書籍でHTML、CSSの基礎的なことを学ぶ
• ネットでベストプラクティス的な情報を漁る
•YEOMANのgenerator-webappとかで作ったscafold
で使われてるものを漁って見るのがいいと思う
• HTML5Boilerplate、normlize.css、Eric Meyer's
CSS resetとか

24. 勉強したこと
HTML
• HTML5で新たに増えたタグでより意味的にマーク
アップできることを知った
• SEO的に有利うんぬんよりHTMLの可読性の向上
に寄与していることが重要かと思った

25. 勉強したこと
CSS
• 最初はオレオレルールで書いていたが迷いが頻発
• SMACSS（和訳されてるよ）買って読んですっき
り
• 結果SMACSS + BEMの命名規約をベースにして
書き直したり

26. 勉強したこと
Grunt
• プラグインを漁る
→ フロントエンド開発で発生する面倒なことや問
題を知ることできる

27. ポートフォリオ完成
• 結果的に2ヶ月ほどダラダラ勉強しながらポートフ
ォリを作った
• 今見るとしょっぱい出来

28. ポートフォリオ完成
• Javaで仕事探してたときにはほとんどなかったけ
ど、ポートフォリオあれば見せてっていう会社結
構ある
• フロントエンドエンジニア職探そうと考えてる人
はあらかじめ作っといたほうがいいと思う

29. 改めて仕事を探す
AngularJSで新規開発案件にエントリー
面談の場でポートフォリオをプレゼン
先方もモダンなフロントエンドWeb開発に対してモチ
ベーションが高かった

30. 改めて仕事を探す
晴れて契約。
AngularJSを使ったSPA開発。サーバーサイドはAPIを
提供するのみ
マークアップの規約作りやGruntを使った自動化周り
も任せて貰えて、大変だったがいい経験に
今年の5月一杯までお世話になった

31. 次の仕事探し。苦戦。。
• それなりの自信をつけて次の仕事を探してはみた
のものの苦戦。。
• ５月前半から次のフロントエンドエンジニア案件
を探したが決まったのは６月前半
• 大体は面談までは行くがミスマッチが多かった

32. 次の仕事探し。苦戦。。
• 規模的に大きくない会社でエンハンス系の案件だ
とフロントエンドタスクだけではなく、サーバー
サイドタスクもこなして欲しいという要望。理解
はできる。
• サーバーサイド絶対やりたくないってわけじゃな
いのでフロントエンドが６、サーバーサイド４ぐ
らいの割合ならというスタンス

33. 次の仕事探し。苦戦。。
しかし、、Webサービス系企業はPHP、Rubyが多い
Java屋な俺にはミスマッチ
選択肢広げるためにPHP勉強しだす

34. 次の仕事探し。苦戦。。
• 次が駄目ならまた1ヶ月くらい休暇とってPHPやろ
うと思ってたが、、
• 最後にしようと思ってエントリーした純粋なフロ
ントエンド案件取れた
•PHPの勉強やめた。（一旦）
• 現在に至る

35. 思ったこと
ですが、うまくまとまっていませんのでさらっと。。

36. 思ったこと
• フロントエンド（Javascript、HTML/CSS）は壊れ
やすい
• だからこそ規約やテストやレビューが重要
• フロントエンドが中〜大規模になる場合ノープラ
ンは危険

37. 思ったこと
クロスブラウザ対策大変
• IE対応、Androidの標準ブラウザ対応とか
• OSSとか使う場合はレガシーブラウザで動くかどうか事前確認大事
• JSのAPI、HTML5の要素、CSSプロパティはCan I use..で確認
設計が大切
• 機能や画面を構成するものをどう分類するか
• HTML、CSS、Javascript、三位一体で考えたほうがよい
• ガイドラインの作成

38. 思ったこと
• Javascript
• 敷居は低いが難しい言語だということを実感
• 敷居が低いというのがたちが悪い
• Javascriptを書ける人はたくさんいるが、書ける人
の中での理解レベルのギャップが激しい言語だと
思った

39. 思ったこと
• Javascript
• 非同期処理がネストしがち。コールバック関数た
らい回ししがち。
• → jQuery Deferredとかq.jsとかでスマートに書け
る。重要。

40. 思ったこと
• Javascript
• とりあえず入れるでいいんじゃ？というOSSライ
ブラリ
• underscorejs(lodash.js)、momentjs
• ある程度のコーディング規約はJSHintに任せられ
る

41. 思ったこと
• クライアントサイドMVC
• Backbone.js入れても品質上がらない
• あれはレールを用意してくれるだけで組み立てて走らせるのは
自分
• 素のBackboneで設計するのはそれ相応の設計能力が必要
• Marionetteとか使うと良いと思う（使ったことないです）
• ただし、レール引いても乗らない奴もいるのでレビュー重要

42. 思ったこと
•HTML/CSS
• 最初にCSS設計方法の方針を固めるべき
•OOCSS、SMACSS、BEMなど参考に
• サイズの単位、色指定の方法、ベーススタイルどう
するかなど規約化する
• とにかく最初の決めが重要

43. 思ったこと
HTML/CSS
•SASS便利
• ただし、出力結果イメージできないで使うとCSS肥大化を招くので注意
する
• ネストはほどほどに
• BEM的な命名規則採用しているならネスト使わずフラットに書くべきだ
と思う
• mixin、include、extend、placeholder selctorを理解して使う。

44. 思ったこと
• 開発の助けとなるツール
• デバッグはChrome CanaryのDevToolsが便利。こ
れをうまく使いこなせるかで生産性に結構差がで
ると思うレベル
• デバッグプロキシも便利。macだとcharles、
widowsだとfiddler

45. 思ったこと
• ブラウザの気持ちを考えるのは難しい
• なにが正解かはコンテキストによって異なってくる
• サービスの特性、画面の特性、サーバーサイドへの
負荷、セキュリティへの考慮などなど
• そこらへん踏まえてバランスいい判断できるひとが
優秀なフロントエンドエンジニアなのかなと

46. 今後
Webサービス開発でこういう流れがある
1. 最初にSPAでスマホ用Webアプリ作る
2. 次にコンテンツはWebアプリを流用したガワネイ
ティヴ（ハイブリッドアプリ）作る
3. サービスが軌道に乗ってきた
4. ガワネイティヴをフルネイティヴ化する

47. 今後
つまりHTML/CSS、Javascriptを使ったフロントエン
ドはフルネイティヴのつなぎ的な位置付け

48. 今後
• Android、iOSネイティヴもフロントエンド
• やってみたい。知らないことを学ぶのは楽しい
• ただ、今年はHTML/CSS、Javascriptに集中する

49. 最後に
混沌としている世界ほど面白いと感じれる
人はフロントエンドエンジニアに向いてい
ると思うので是非。
飽きないです。

50. 最後に
ご清聴ありがとうございました
。