フロントエンドに愛される三つ星バックエンドエンジニアへの道

1. 三つ星 Backend Engineer
2016/3/5
Yokohama North Meetup #2
Ryo Tomidokoro

2. About me
Ryo Tomidokoro (@hanhan1978)
エンジニアパソコン好きのオジサン

3. フロントエンド始めました。
バックエンドエンジニアですが・・・
色々あって

4. 年寄りに押し寄せるフロントエンド技術
http://jade-lang.com/ https://www.npmjs.com/
http://sass-lang.com/
http://stylus-lang.com/
https://babeljs.io/https://www.browsersync.io/https://en.bem.info/
http://gulpjs.com/http://bower.io/

5. • 意外とついていける。
• フロントエンドの常識を理解する必要あり
• 流れは早くない。←大事
バックエンドの人はついて行ける
？

6. • フロントエンドとは？
• フロントエンドの常識
• 現状の問題点
• 三つ星バックエンドエンジニアへ
Agenda

7. フロントエンドとは？
Javascript
CSS Webページを記述・作成
HTML
• 昔でいうところのコーダーとかマークアップ
エンジニアを大きく包含する職域

8. 2013年頃から呼ばれ始めた名称らしい

9. • HTML5やResponsible Design、SPA等でクライアントサイドのプ
ログラムが複雑化
• Ajax等の非同期通信を使ったJavascriptも普通に使われるようにな
って、複雑化がさらに増す。
• 複雑化したクライアントサイドに光を灯す存在として、近年登場
した救世主なのでは・・・。
多分・・・

10. フロントエンドの常識
• npmは必須。空気並の存在。
• 生のHTMLは、書かない。
• 生のCSSは、書かない。
• Webページはビルドして生成。
• ローカルサーバを使った効率的な開発。

11. https://www.npmjs.com/
• サーバーサイドだけではない。
• node製のモジュールでフロントエンド開発全般の効率化を
行っている。
• npm抜きでのフロントエンド開発はもはやありえないので
は・・・。

12. 生のHTMLは書かない
• タグは閉じない！
• include
• mixin
• block
http://jade-lang.com/
Jadeで一度書いたら、もうHTML書く気にならない

13. 生のCSSは書かない
http://sass-lang.com/
• タグをネスト出来る
• 変数使える
• mixin
• 継承
CSS拡張言語が提供する機能は大体同じ。
異なるのは記法。

14. Stylusの場合
• インデント記法
• コロン要らない
• 行末セミコロン要らない
SASS(SCSS)に比べて非常にマイナー
記述量は大分減っているので悪い方向性ではなさそうだが・・・

15. その他にも・・・
• ブラウザ毎に微妙に異なる書き方などは、ビルド時に生成
• mixinで他の人が作った部品を簡単に導入できる。
• SASS(SCSS)は生のCSSを突っ込めるので、イザという時
助かるらしい。

16. さらに・・・CSSの構造化
• グローバルで殴り合いしないために、CSSの構造化はいろ
んなやり方が提唱されている。
• BEM, SMACSS, OOCSS, FLOCSS
• 命名規則や、ディレクトリ分割で複雑さや保守性をキープ

17. Webページはビルドして作成
従来
最近
JS
CSS
HTML
JS
CSS
HTML
開発 成果物
Babel
SASS
Jade
開発
JS
CSS
HTML
成果物
ビルド

18. ローカルサーバを使った開発
• ブラウザにファイルパス入れて開いたりしてない。
• browserSyncは神
• もはやリロードさえしない。
https://www.browsersync.io/
DEMO
bodyの閉じタグを見つけて、リロード用のJSを埋め
込んでくれる。

19. • さすがに顧客はnpm使えない
• バックエンドもSASS、Jadeをそのまま受
け取れない。
• 組み込み後は、生HTML 生CSSをメンテ
現状の問題点
優秀であるばあるほど、ヘイトが溜まって
いく可能性。

20. 顧客はnpm使えない
• ビルド後のHTMLをzipで送ったりして確認してもらう
• 確認を取るのが面倒くさい。スマホで見れないし。
• 毎回ビルド、zipで固めて・・・
モチベーション以前の問題として
非常に効率が悪い・・・

21. うちの会社では・・・
• Dockerコンテナでビルド済みのHTMLをグローバルから確
認できるように構成
• masterにpushすると、CIで自動的にビルドして更新
好評だが、若干設置が面倒くさいので
対応策を考え中

22. バックエンドもJade、Sassを受け取れない
• せっかくの構造化された情報を生のHTMLや生のCSSにダ
ウングレードした上で組み込み
• フレームワークによっては、そのまま受け取れるものも
あるが、バックエンドエンジニアのスキルレベルに依存
Babel
SASS
Jade
生HTML
生CSS
フレームワーク
固有のテンプレート
with 生CSS
HTMLの組込で情報が劣化していく

23. 三つ星バックエンドエンジニアへ
• フロントエンド技術を、足を引っ張らない程度に把握する
• フロントエンドの流れは早くない。大体の定番構成は決まっ
てきている印象。
• フロントエンドの作業を助けるための手伝いが出来るように
。CIとかセキュリティ関連とか、テストとか・・・
• フレームワークにはSASSやJadeをそのまま組み込むべし
これには深い理由が・・・

24. フロントエンドとバックエンドの融合
• SassやJadeをフレームワークにそのまま組み込む
• バックエンドの環境構築はVagrantで自動化
バックエンドの改修作業を、フロントエンド
エンジニアが直接的に手伝える。
効率化とスキルトランスファーの両面が狙える

25. END
目指せ三つ星バックエンドエンジニア！