SlideShare a Scribd company logo
三つ星 Backend Engineer
2016/3/5
Yokohama North Meetup #2
Ryo Tomidokoro
About me
Ryo Tomidokoro (@hanhan1978)
エンジニアパソコン好きのオジサン
フロントエンド始めました。
バックエンドエンジニアですが・・・
色々あって
年寄りに押し寄せるフロントエンド技術
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/
• 意外とついていける。
• フロントエンドの常識を理解する必要あり
• 流れは早くない。←大事
バックエンドの人はついて行ける
?
• フロントエンドとは?
• フロントエンドの常識
• 現状の問題点
• 三つ星バックエンドエンジニアへ
Agenda
フロントエンドとは?
Javascript
CSS Webページを記述・作成
HTML
• 昔でいうところのコーダーとかマークアップ
エンジニアを大きく包含する職域
2013年頃から呼ばれ始めた名称らしい
• HTML5やResponsible Design、SPA等でクライアントサイドのプ
ログラムが複雑化
• Ajax等の非同期通信を使ったJavascriptも普通に使われるようにな
って、複雑化がさらに増す。
• 複雑化したクライアントサイドに光を灯す存在として、近年登場
した救世主なのでは・・・。
多分・・・
フロントエンドの常識
• npmは必須。空気並の存在。
• 生のHTMLは、書かない。
• 生のCSSは、書かない。
• Webページはビルドして生成。
• ローカルサーバを使った効率的な開発。
https://www.npmjs.com/
• サーバーサイドだけではない。
• node製のモジュールでフロントエンド開発全般の効率化を
行っている。
• npm抜きでのフロントエンド開発はもはやありえないので
は・・・。
生のHTMLは書かない
• タグは閉じない!
• include
• mixin
• block
http://jade-lang.com/
Jadeで一度書いたら、もうHTML書く気にならない
生のCSSは書かない
http://sass-lang.com/
• タグをネスト出来る
• 変数使える
• mixin
• 継承
CSS拡張言語が提供する機能は大体同じ。
異なるのは記法。
Stylusの場合
• インデント記法
• コロン要らない
• 行末セミコロン要らない
SASS(SCSS)に比べて非常にマイナー
記述量は大分減っているので悪い方向性ではなさそうだが・・・
その他にも・・・
• ブラウザ毎に微妙に異なる書き方などは、ビルド時に生成
• mixinで他の人が作った部品を簡単に導入できる。
• SASS(SCSS)は生のCSSを突っ込めるので、イザという時
助かるらしい。
さらに・・・CSSの構造化
• グローバルで殴り合いしないために、CSSの構造化はいろ
んなやり方が提唱されている。
• BEM, SMACSS, OOCSS, FLOCSS
• 命名規則や、ディレクトリ分割で複雑さや保守性をキープ
Webページはビルドして作成
従来
最近
JS
CSS
HTML
JS
CSS
HTML
開発 成果物
Babel
SASS
Jade
開発
JS
CSS
HTML
成果物
ビルド
ローカルサーバを使った開発
• ブラウザにファイルパス入れて開いたりしてない。
• browserSyncは神
• もはやリロードさえしない。
https://www.browsersync.io/
DEMO
bodyの閉じタグを見つけて、リロード用のJSを埋め
込んでくれる。
• さすがに顧客はnpm使えない
• バックエンドもSASS、Jadeをそのまま受
け取れない。
• 組み込み後は、生HTML 生CSSをメンテ
現状の問題点
優秀であるばあるほど、ヘイトが溜まって
いく可能性。
顧客はnpm使えない
• ビルド後のHTMLをzipで送ったりして確認してもらう
• 確認を取るのが面倒くさい。スマホで見れないし。
• 毎回ビルド、zipで固めて・・・
モチベーション以前の問題として
非常に効率が悪い・・・
うちの会社では・・・
• Dockerコンテナでビルド済みのHTMLをグローバルから確
認できるように構成
• masterにpushすると、CIで自動的にビルドして更新
好評だが、若干設置が面倒くさいので
対応策を考え中
バックエンドもJade、Sassを受け取れない
• せっかくの構造化された情報を生のHTMLや生のCSSにダ
ウングレードした上で組み込み
• フレームワークによっては、そのまま受け取れるものも
あるが、バックエンドエンジニアのスキルレベルに依存
Babel
SASS
Jade
生HTML
生CSS
フレームワーク
固有のテンプレート
with 生CSS
HTMLの組込で情報が劣化していく
三つ星バックエンドエンジニアへ
• フロントエンド技術を、足を引っ張らない程度に把握する
• フロントエンドの流れは早くない。大体の定番構成は決まっ
てきている印象。
• フロントエンドの作業を助けるための手伝いが出来るように
。CIとかセキュリティ関連とか、テストとか・・・
• フレームワークにはSASSやJadeをそのまま組み込むべし
これには深い理由が・・・
フロントエンドとバックエンドの融合
• SassやJadeをフレームワークにそのまま組み込む
• バックエンドの環境構築はVagrantで自動化
バックエンドの改修作業を、フロントエンド
エンジニアが直接的に手伝える。
効率化とスキルトランスファーの両面が狙える
END
目指せ三つ星バックエンドエンジニア!

More Related Content

Viewers also liked

Presentation осень
Presentation осеньPresentation осень
Presentation осень
ElyaHergnyan
 
Presentation осень
Presentation осеньPresentation осень
Presentation осень
ElyaHergnyan
 
Evaluation Question 3
Evaluation Question 3Evaluation Question 3
Evaluation Question 3
StephenASMedia
 
Energias renovables
Energias renovablesEnergias renovables
Energias renovables
elenaymarta2
 
What to Look For in a Plastic Surgeon by William F. DeLuca, MD
What to Look For in a Plastic Surgeon by William F. DeLuca, MDWhat to Look For in a Plastic Surgeon by William F. DeLuca, MD
What to Look For in a Plastic Surgeon by William F. DeLuca, MD
DeLuca Plastic Surgery
 
паровозик из ромашково
паровозик из ромашковопаровозик из ромашково
паровозик из ромашково
ElyaHergnyan
 
орел и кошка
орел и кошкаорел и кошка
орел и кошка
ElyaHergnyan
 
BITRISEを使っています
BITRISEを使っていますBITRISEを使っています
BITRISEを使っています
Kazuaki KURIU
 

Viewers also liked (8)

Presentation осень
Presentation осеньPresentation осень
Presentation осень
 
Presentation осень
Presentation осеньPresentation осень
Presentation осень
 
Evaluation Question 3
Evaluation Question 3Evaluation Question 3
Evaluation Question 3
 
Energias renovables
Energias renovablesEnergias renovables
Energias renovables
 
What to Look For in a Plastic Surgeon by William F. DeLuca, MD
What to Look For in a Plastic Surgeon by William F. DeLuca, MDWhat to Look For in a Plastic Surgeon by William F. DeLuca, MD
What to Look For in a Plastic Surgeon by William F. DeLuca, MD
 
паровозик из ромашково
паровозик из ромашковопаровозик из ромашково
паровозик из ромашково
 
орел и кошка
орел и кошкаорел и кошка
орел и кошка
 
BITRISEを使っています
BITRISEを使っていますBITRISEを使っています
BITRISEを使っています
 

Similar to 2016 03 05_yokohama_north

エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったことエンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
 
Aizu.LT::Tokyo #2
Aizu.LT::Tokyo #2Aizu.LT::Tokyo #2
Aizu.LT::Tokyo #2
Taku Unno
 
MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会
MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会
MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会
株式会社MonotaRO Tech Team
 
Ui live資料
Ui live資料Ui live資料
Ui live資料
Ryota Iida
 
LPWA 勉強会 #1 | これだけ知っていればLoRaWAN & SORACOM Air for LoRaWAN
LPWA 勉強会 #1 | これだけ知っていればLoRaWAN & SORACOM Air for LoRaWANLPWA 勉強会 #1 | これだけ知っていればLoRaWAN & SORACOM Air for LoRaWAN
LPWA 勉強会 #1 | これだけ知っていればLoRaWAN & SORACOM Air for LoRaWAN
SORACOM,INC
 
agatsuma.survive#5
agatsuma.survive#5agatsuma.survive#5
agatsuma.survive#5
Yoshiaki Sugimoto
 
並カン (CM カット版)
並カン (CM カット版)並カン (CM カット版)
並カン (CM カット版)
Motohiro Takayama
 
フロントエンドフレームワークの選び方 - 20170320
フロントエンドフレームワークの選び方 - 20170320フロントエンドフレームワークの選び方 - 20170320
フロントエンドフレームワークの選び方 - 20170320
Shinichi Takahashi
 
ソフトウェアエンジニアの目指す道
ソフトウェアエンジニアの目指す道ソフトウェアエンジニアの目指す道
ソフトウェアエンジニアの目指す道
Yoshihito Kuranuki
 
Developers.IO 2017 | SORACOMの「便利さが伝わりにくいサービス」ランキング!!
Developers.IO 2017 | SORACOMの「便利さが伝わりにくいサービス」ランキング!!Developers.IO 2017 | SORACOMの「便利さが伝わりにくいサービス」ランキング!!
Developers.IO 2017 | SORACOMの「便利さが伝わりにくいサービス」ランキング!!
SORACOM,INC
 
チケット管理システム大決戦第二弾
チケット管理システム大決戦第二弾チケット管理システム大決戦第二弾
チケット管理システム大決戦第二弾
Ryutaro YOSHIBA
 
あぐりログでSORACOMをどう使っているか
あぐりログでSORACOMをどう使っているかあぐりログでSORACOMをどう使っているか
あぐりログでSORACOMをどう使っているか
MitsuyoshiOki
 
Siggraph2012報告会前半
Siggraph2012報告会前半Siggraph2012報告会前半
Siggraph2012報告会前半
fumoto kazuhiro
 
エンジニアからCTOへ 2015-06-11 IVS CTO Night & Day
エンジニアからCTOへ 2015-06-11 IVS CTO Night & DayエンジニアからCTOへ 2015-06-11 IVS CTO Night & Day
エンジニアからCTOへ 2015-06-11 IVS CTO Night & Day
株式会社MonotaRO Tech Team
 
Walking front end
Walking front endWalking front end
Walking front end
Hirata Tomoko
 
2012_07_06_gxeb_05
2012_07_06_gxeb_052012_07_06_gxeb_05
2012_07_06_gxeb_05
ryo katsuma
 
WCAN Autumn 2013 Titaniumのおはなし
WCAN Autumn 2013 TitaniumのおはなしWCAN Autumn 2013 Titaniumのおはなし
WCAN Autumn 2013 Titaniumのおはなし
Mori Shingo
 
Rails5クイックスタート
Rails5クイックスタートRails5クイックスタート
Rails5クイックスタート
Hirata Tomoko
 
ラジコンがネットと出会ったら
ラジコンがネットと出会ったらラジコンがネットと出会ったら
ラジコンがネットと出会ったら
Takuya Andou
 
MonotaRO TechTalk #1 ごあいさつ
MonotaRO TechTalk #1 ごあいさつMonotaRO TechTalk #1 ごあいさつ
MonotaRO TechTalk #1 ごあいさつ
株式会社MonotaRO Tech Team
 

Similar to 2016 03 05_yokohama_north (20)

エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったことエンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
 
Aizu.LT::Tokyo #2
Aizu.LT::Tokyo #2Aizu.LT::Tokyo #2
Aizu.LT::Tokyo #2
 
MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会
MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会
MonotaROが向かうクラウド活用の今後 2016-04-21 関西スタートアップAWS勉強会
 
Ui live資料
Ui live資料Ui live資料
Ui live資料
 
LPWA 勉強会 #1 | これだけ知っていればLoRaWAN & SORACOM Air for LoRaWAN
LPWA 勉強会 #1 | これだけ知っていればLoRaWAN & SORACOM Air for LoRaWANLPWA 勉強会 #1 | これだけ知っていればLoRaWAN & SORACOM Air for LoRaWAN
LPWA 勉強会 #1 | これだけ知っていればLoRaWAN & SORACOM Air for LoRaWAN
 
agatsuma.survive#5
agatsuma.survive#5agatsuma.survive#5
agatsuma.survive#5
 
並カン (CM カット版)
並カン (CM カット版)並カン (CM カット版)
並カン (CM カット版)
 
フロントエンドフレームワークの選び方 - 20170320
フロントエンドフレームワークの選び方 - 20170320フロントエンドフレームワークの選び方 - 20170320
フロントエンドフレームワークの選び方 - 20170320
 
ソフトウェアエンジニアの目指す道
ソフトウェアエンジニアの目指す道ソフトウェアエンジニアの目指す道
ソフトウェアエンジニアの目指す道
 
Developers.IO 2017 | SORACOMの「便利さが伝わりにくいサービス」ランキング!!
Developers.IO 2017 | SORACOMの「便利さが伝わりにくいサービス」ランキング!!Developers.IO 2017 | SORACOMの「便利さが伝わりにくいサービス」ランキング!!
Developers.IO 2017 | SORACOMの「便利さが伝わりにくいサービス」ランキング!!
 
チケット管理システム大決戦第二弾
チケット管理システム大決戦第二弾チケット管理システム大決戦第二弾
チケット管理システム大決戦第二弾
 
あぐりログでSORACOMをどう使っているか
あぐりログでSORACOMをどう使っているかあぐりログでSORACOMをどう使っているか
あぐりログでSORACOMをどう使っているか
 
Siggraph2012報告会前半
Siggraph2012報告会前半Siggraph2012報告会前半
Siggraph2012報告会前半
 
エンジニアからCTOへ 2015-06-11 IVS CTO Night & Day
エンジニアからCTOへ 2015-06-11 IVS CTO Night & DayエンジニアからCTOへ 2015-06-11 IVS CTO Night & Day
エンジニアからCTOへ 2015-06-11 IVS CTO Night & Day
 
Walking front end
Walking front endWalking front end
Walking front end
 
2012_07_06_gxeb_05
2012_07_06_gxeb_052012_07_06_gxeb_05
2012_07_06_gxeb_05
 
WCAN Autumn 2013 Titaniumのおはなし
WCAN Autumn 2013 TitaniumのおはなしWCAN Autumn 2013 Titaniumのおはなし
WCAN Autumn 2013 Titaniumのおはなし
 
Rails5クイックスタート
Rails5クイックスタートRails5クイックスタート
Rails5クイックスタート
 
ラジコンがネットと出会ったら
ラジコンがネットと出会ったらラジコンがネットと出会ったら
ラジコンがネットと出会ったら
 
MonotaRO TechTalk #1 ごあいさつ
MonotaRO TechTalk #1 ごあいさつMonotaRO TechTalk #1 ごあいさつ
MonotaRO TechTalk #1 ごあいさつ
 

2016 03 05_yokohama_north