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

よしだ たけひこ

•フリーランスエンジニア歴 10 年ほど

•去年まで Java エンジニアとして 10 年以上活動

•レベルは下の上〜中の下

•今年からフロントエンドエンドエンジニア

今日話すこと

•フロントエンドエンジニアで活動しようと思った経緯

•半年程度の実務経験を経て感じたこととか

注意事項

•フロントエンドエンジニアとしての実務経験は半年ちょいと薄っぺらい

•そこらへんを差し引いて暖かい目で見てくれるとありがたいです

去年前半までのよしだ

•swing 、 struts 、 seasar 、組込みjava 、 android ．．．

•業務系システム多め

去年前半までのよしだフロントエンド周りのレベル感

• HTML/CSS 、 Javascript はちゃんと学んだことなし

• 見よう見まねの片手間でなんとか乗り切ってきてこれた感じ

• jQuery にかなり救われた

きっかけ

•去年サーバーサイドエンジニアとしてとあるプロジェクトに参画

•一般向けの Web サービスで比較的なリッチな UIと Javascript を使ったインタラクションが多い

きっかけ

•フロントエンドデザインは外部の Web デザイン系の会社に委託

•インタラクションの Javascript はある程度デザイン会社が実装

きっかけ

•デザイン会社から上がってきたフロントエンドコードをサーバーサイドエンジニアがサーバーサイドで動くように組み込む

•といった開発フロー。中を覗いてみると。。

きっかけ

かつて経験したことないくらいのアレな感じ

きっかけ

•まともなルールが殆どないため一貫性が欠如

•なんだか良くわからないが一応動いている

きっかけ

自衛のために真面目に Javascript を勉強し始める

きっかけモダンなフロントエンド開発の世界観を知る

• フロントエンド開発における定型的な作業の自動化 → タスクランナー (Grunt 、 Gulp)

• 依存関係管理 → Bower

• より良い CSS → CSS プリプロセッサ（ sass, LESS, Stylus ）

きっかけ

モダンなフロントエンド開発の世界観

• よりよい Javascript → AltJS(CoffeeScript 、 TypeScript)

• クライアントサイト MVC → (Backbone.js 、 Angular.js ）

きっかけ

モダンなフロントエンド開発の世界観

• 従来型の Web アプリと比べ、よりリッチなユーザー体験 → SPA(Single Page Application)

• CSS 設計 → OOCSS 、 SMACSS 、 BEM

きっかけ•調べている内に問題解決の方法やアイデアに感動

•やってみたいというワクワク感と Web エンジニアとして取り残されているという焦りが日々高まっていった

•仕事に区切りをつけてフロントエンドエンジニア職で仕事を探すことに

仕事を探す

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

仕事を探す

•希望条件に合致していた会社にエントリーしようと思ったが、ポートフォリオの提出が前提条件

•2 週間くらいで休暇も兼ねてポートフォリオをサクッと作ってみようと考えた

ポートフォリオ作り自分のやりたいことをアピールしたものを作ろうと考えた

自分のやりたいことは

• モダンなフロントエンド Web 開発

なので、 grunt 、 bower 、 sass 、 compassで、 html5 、 css3 、 Javascript を適度に使ったレスポンシブレイアウトな Web ページを作ることにした

ポートフォリオ作り気をつけたこと

• ウィジェット（ダイアログとかの画面部品）には jQuery プラグインなどのライブラリをなるべく使わない

• 意図、コンセプト、使用したアーキテクチャなどを説明する

ポートフォリオ作り

•簡単なデザインラフを考えてコーディングしてみる

•ラフ通りにマークアップできない。。

•マークアップ力弱いことや他に色々気になることが頻発

ポートフォリオ作り

2 週間じゃたりない。

仕切り直そう。。。

勉強したこと•書籍で HTML 、 CSS の基礎的なことを学ぶ

•ネットでベストプラクティス的な情報を漁る

•YEOMAN の generator-webapp とかで作ったscafold で使われてるものを漁って見るのがいいと思う

•HTML5Boilerplate 、 normlize.css 、 Eric Meyer's CSS reset とか

勉強したこと

HTML

• HTML5 で新たに増えたタグでより意味的にマークアップできることを知った

• SEO 的に有利うんぬんより HTML の可読性の向上に寄与していることが重要かと思った

勉強したことCSS

• 最初はオレオレルールで書いていたが迷いが頻発

• SMACSS （和訳されてるよ）買って読んですっきり

• 結果 SMACSS + BEM の命名規約をベースにして書き直したり

勉強したこと

Grunt

• プラグインを漁る

→ フロントエンド開発で発生する面倒なことや問題を知ることできる

ポートフォリオ完成

•結果的に 2ヶ月ほどダラダラ勉強しながらポートフォリを作った

•今見るとしょっぱい出来

ポートフォリオ完成

• Java で仕事探してたときにはほとんどなかったけど、ポートフォリオあれば見せてっていう会社結構ある

•フロントエンドエンジニア職探そうと考えてる人はあらかじめ作っといたほうがいいと思う

改めて仕事を探す

AngularJS で新規開発案件にエントリー

面談の場でポートフォリオをプレゼン

先方もモダンなフロントエンド Web 開発に対してモチベーションが高かった

改めて仕事を探す晴れて契約。

AngularJS を使った SPA 開発。サーバーサイドは APIを提供するのみ

マークアップの規約作りや Grunt を使った自動化周りも任せて貰えて、大変だったがいい経験に

今年の 5月一杯までお世話になった

次の仕事探し。苦戦。。

•それなりの自信をつけて次の仕事を探してはみたのものの苦戦。。

•５月前半から次のフロントエンドエンジニア案件を探したが決まったのは６月前半

•大体は面談までは行くがミスマッチが多かった

次の仕事探し。苦戦。。

•規模的に大きくない会社でエンハンス系の案件だとフロントエンドタスクだけではなく、サーバーサイドタスクもこなして欲しいという要望。理解はできる。

•サーバーサイド絶対やりたくないってわけじゃないのでフロントエンドが６、サーバーサイド４ぐらいの割合ならというスタンス

次の仕事探し。苦戦。。

しかし、、 Web サービス系企業は PHP 、 Ruby が多い

Java 屋な俺にはミスマッチ

選択肢広げるために PHP 勉強しだす

次の仕事探し。苦戦。。•次が駄目ならまた 1ヶ月くらい休暇とって PHP や

ろうと思ってたが、、

•最後にしようと思ってエントリーした純粋なフロントエンド案件取れた

•PHP の勉強やめた。（一旦）

•現在に至る

思ったこと

ですが、うまくまとまっていませんのでさらっと。。

思ったこと

•フロントエンド（ Javascript 、 HTML/CSS ）は壊れやすい

•だからこそ規約やテストやレビューが重要

•フロントエンドが中〜大規模になる場合ノープランは危険

思ったことクロスブラウザ対策大変

• IE対応、 Android の標準ブラウザ対応とか

• OSS とか使う場合はレガシーブラウザで動くかどうか事前確認大事

• JS の API 、 HTML5 の要素、 CSS プロパティは Can I use.. で確認

設計が大切

• 機能や画面を構成するものをどう分類するか

• HTML 、 CSS 、 Javascript 、三位一体で考えたほうがよい

• ガイドラインの作成

思ったこと• Javascript

•敷居は低いが難しい言語だということを実感

•敷居が低いというのがたちが悪い

• Javascript を書ける人はたくさんいるが、書ける人の中での理解レベルのギャップが激しい言語だと思った

思ったこと

• Javascript

•非同期処理がネストしがち。コールバック関数たらい回ししがち。

• → jQuery Deferred とか q.js とかでスマートに書ける。重要。

思ったこと• Javascript

•とりあえず入れるでいいんじゃ？という OSS ライブラリ

• underscorejs(lodash.js) 、 momentjs

•ある程度のコーディング規約は JSHint に任せられる

思ったこと•クライアントサイド MVC

•Backbone.js入れても品質上がらない

•あれはレールを用意してくれるだけで組み立てて走らせるのは自分

•素の Backbone で設計するのはそれ相応の設計能力が必要

•Marionette とか使うと良いと思う（使ったことないです）

•ただし、レール引いても乗らない奴もいるのでレビュー重要

思ったこと•HTML/CSS

•最初に CSS 設計方法の方針を固めるべき

•OOCSS 、 SMACSS 、 BEM など参考に

•サイズの単位、色指定の方法、ベーススタイルどうするかなど規約化する

•とにかく最初の決めが重要

思ったことHTML/CSS

•SASS便利

•ただし、出力結果イメージできないで使うと CSS肥大化を招くので注意する

•ネストはほどほどに

• BEM 的な命名規則採用しているならネスト使わずフラットに書くべきだと思う

•mixin 、 include 、 extend 、 placeholder selctor を理解して使う。

思ったこと•開発の助けとなるツール

•デバッグは Chrome Canary の DevTools が便利。これをうまく使いこなせるかで生産性に結構差がでると思うレベル

•デバッグプロキシも便利。 mac だとcharles 、 widows だと fiddler

思ったこと• ブラウザの気持ちを考えるのは難しい

• なにが正解かはコンテキストによって異なってくる

• サービスの特性、画面の特性、サーバーサイドへの負荷、セキュリティへの考慮などなど

• そこらへん踏まえてバランスいい判断できるひとが優秀なフロントエンドエンジニアなのかなと

今後Web サービス開発でこういう流れがある

1. 最初に SPA でスマホ用 Web アプリ作る

2. 次にコンテンツは Web アプリを流用したガワネイティヴ（ハイブリッドアプリ）作る

3. サービスが軌道に乗ってきた

4. ガワネイティヴをフルネイティヴ化する

今後

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

今後

•Android 、 iOSネイティヴもフロントエンド

•やってみたい。知らないことを学ぶのは楽しい

•ただ、今年は HTML/CSS 、 Javascript に集中する

最後に

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

飽きないです。

最後に

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