止まっちゃいけないフロントエンド開発

止まっちゃいけないフロントエンド開発 Akinori Yamada / @stormcat24 DevLOVEߕࢠԂ2014 ౦೔ຊେձ

‣ @stormcat24 ‣ CyberAgent, Inc. ‣ Technical Engineer ‣ Server-side
‣ Front-end? ‣ DevOpts

アメーバ事業本部所属

だった

Ҿ༻ɿ4PDJBM(BNF*OGP

技術本部所属

本日のアジェンダ

‣ AmebaεϚϗ։ൃͷόοΫάϥ΢ϯυ ‣ ๊͍͑ͯͨ໰୊఺ ‣ ϑϩϯτΤϯυͷॏཁੑͱຊདྷͷ໾ׂ ‣ ։ൃޮ཰޲্ͷͨΊʹॻ͍ͨπʔϧ΍ࢪࡦ

2012年 Amebaスマホスタート

スマートフォン開発へのシフト ‣ 30ԯԁϓϩϞʔγϣϯʢ2012೥11݄ʣ ‣ 2೥Ͱ100ͷ৽نࣄۀ ‣ ૊৫վฤɺେ෯૿һͰҰؾʹγϑτ ‣ ϒϥ΢βϓϥοτϑΥʔϜઓུ ‣
ήʔϜɾίϛϡχςΟ

技術的バックグラウンド ‣ ΋ͱ΋ͱJavaܦݧऀ͕ଟ͍ձࣾ ‣ ݴޠͷׂ߹ ‣ ήʔϜ͸΄΅Java ‣ ίϛϡχςΟ͸Ruby΍PHP΋͋ͬͨ ‣
࠷ۙ͸Node.js͔ͳΓ୆಄ɺJavaൺ཰ˣ

Ameba定番アーキテクチャ ‣ Java ‣ Spring ‣ MySQL ‣ Memcached ‣
Freemarker

フロントエンドは・・・ ‣ αʔόαΠυςϯϓϨʔτ͕ओྲྀʢFTL) ‣ ͨ·ʹBackbone.jsϓϩδΣΫτ͕ͪΒ΄Β ‣ ϑϩϯτΤϯυ͕βϧͳϓϩδΣΫτ͕ଟ͔ͬͨ ‣ ʢҰԠʣ෼ۀͱ͍͏͜ͱʹͳͬͯΔ

抱えていた問題点

‣ αʔόαΠυ͕ແ͍ͱɺϑϩϯτΤϯυͷ΄ͱΜͲ Λಈ͔͢͜ͱ͕Ͱ͖ͳ͍ ‣ Τϥʔ͕͋Δͱ࡞ۀ͕ࢭ·Δ ‣ DBͷσʔλʹґଘ͢Δ࡞ۀ ‣ ৬छͰ෼͚ͯ෼ۀͬͯݴͬͯΔ͚ͩ 強いサーバサイド依存

ىಈʹʙ෼ ଴ͬͯͶ͆͆͆ /VMM1PJOUFS&YDFQUJPO 0VU0G.FNPSZ&SSPS མͪΔʁϚελσʔλ͓͔͍͠Ͷ͆ ͋͋ɺͦΕ ൿ఻ͷಈ͔͠ํ͕ʢ͈́ ΋͏୲౰ऀؼΓ·ͨ͠ αʔηϯXXX

強まるサーバサイド支配 ×分業　◯下請け神聖サーバサイド帝国・トムキャット８世

待つことの辛さマンガでも読んで　気長に待つか・・・いや、もっとやるべきことがあるはずだ意識低い人意識高い人

フロントエンドにとっての専門外領域

　　強いられる　　　　　専門外の作業

フロントエンドエンジニアの専門領域

やること大杉ワロタｗ

高まりつづける専門性 ‣ ઈ͑ͣΠϯϓοτɾΞ΢τϓοτ͕ඞཁ ‣ εϚϗ։ൃͷ৔߹ɺϨεϙϯε͸ಛʹγϏΞ ‣ "OESPJEରԠ@ ཀAʯ㲃 @ ‣
ϝϯςφϒϧͳ։ൃ ‣ ςετख๏

サーバサイド待ってる暇とか無い ɾɾɾ

水のように消費されるレッドブル

目指すべき　開発スタイル

ઐ໳֎ྖҬ͔Βͷ୤٫ ‣ ϑϩϯτΤϯυΤϯδχΞ͕ɺઐ໳ྖҬʹϦιʔε Λ஫ྗͰ͖Δ࢓૊ΈΛͭ͘Δ͜ͱ ‣ 7BHSBOU $IFG͡Όຊ࣭ͷղܾʹͳΒͳ͍

αʔόαΠυґଘ͔Βͷ୤٫ ‣ ϑϩϯτΤϯυʹͱͬͯɺαʔόαΠυ͕ΫϦςΟ Χϧɾύεʹͳͬͯ͸ͳΒͳ͍ ‣ αʔόαΠυͷঢ়ଶʹؔΘΒͣɺ։ൃͰ͖Δ͜ͱ

ΠϯλϑΣʔεࢦ޲։ൃ ‣ αʔόαΠυͱϑϩϯτΤϯυΛऔΓ࣋ͭɺ7JFX ͷΠϯλϑΣʔεϕʔεͷ։ൃʹγϑτ͢Δ ‣ ׬શͳ෼ۀΛཱ֬ͤ͞Δ

αΫαΫ։ൃɾলϦιʔε ‣ "1αʔόͷىಈ଴ͪ࣌ؒΛແ͘͢͜ͱ ‣ ࡞ۀʹ͓͚Δ҉໧஌Λແ͘͢͜ͱ ‣ গͳ͍ϚγϯϦιʔεͰ࣮ݱ

超えるべき壁 ‣ ੵ΋Γੵ΋ٕͬͨज़తෛ࠴ ‣ ӡ༻εϐʔυΛམͱͯ͠͸͍͚ͳ͍ ‣ طଘͷγεςϜʹ෭࡞༻Λ༩͑Δ΋ͷͰ͋ͬͯ͸ͳ Βͳ͍ ‣ ఍߅੎ྗͱͷઓ͍

ツールを書きました

+7.ܥςϯϓϨʔτΤϯδϯͷϞοΫαʔό ςϯϓϨʔτʴσʔλʢ+40/:".-ʣˠ)5.- 4DBMB +40/Ϩεϙϯε ੩తίϯςϯπ "NFCBͷ+BWBϓϩδΣΫτͰಋೖ ϛυϧ΢ΣΞෆཁ Aeromock is αʔόαΠυϞδϡʔϧෆཁ
࠶ىಈෆཁ ਺ඵͰىಈ লϝϞϦ

https://github.com/CyberAgent/aeromock OSS Released !! Now Available!! 来週公開！！ OSS Released !!
Now Available!!

来週公開！！

テンプレートとデータを用意するだけ

<body> <ul> <li>map.propSimple = ${map.propSimple}</li> <#list map.propList as value> <li>map.propList[${value_index}]
= ${value}</li> </#list> <li>map.propMap.childSimple = ${map.propMap.childSimple}</li> <#list map.propMap.childList as value> <li>map.propMap.childList[${value_index}] = ${value}</li> </#list> </ul> </body>

map: propSimple: propSimpleValue propList: - 11111 - 22222 - 33333
propMap: childSimple: childSimpleValue childList: - child11111 - child22222 - child33333 :".-ͰσʔλΛͭ͘Δ͚ͩ ίϝϯτॻ͚ΔͷͰ:".-ਪ঑ +40/Ͱ΋Մ

そんな簡単な例ばかりじゃない

<body> <ul> <li>target.prop1 = ${target.prop1}</li> <li>target.exeucte1() = ${target.execute1()}</li> <#assign execute2Result
= target.execute2() > <li>target.exeucte2().id = ${execute2Result.id}</li> <li>target.exeucte2().name = ${execute2Result.name}</li> </ul> </body> .FUIPE$BMM

target: prop1: prop1Value __methods: - name: execute1 value: execute1Value -
name: execute2 value: id: 100 name: foobar ϝιου΋ఆٛͰ͖Δ Ҿ਺ͷ਺͸໰Θͳ͍ ωετ0,

カスタムタグ・ファンクション

<body> <@div> <img src=“${staticUrl(‘/img/sample.jpg’)}”/> </@div> </body> FH'SFFNBSLFS 5BH шʆ 'VODUJPO

if (arguments.isEmpty()) { throw new IllegalArgumentException("Argument required.”) } return "http://$HOST${arguments[0]}"
TUBUJD6SMHSPPWZ (SPPWZͰ'VODUJPOͷग़ྗΛίϯτϩʔϧ

_writer.write(‘<div class=“hoge” ‘) for (entry in _params) { _writer.write(‘${entry.key}=“‘ +
entry.value + ‘“ ’) } _writer.write(‘</div>’) EJWHSPPWZ (SPPWZͰ5BHͷग़ྗΛίϯτϩʔϧ

ガールフレンド（仮） on Aeromock

対応済テンプレートエンジン ‣ Freemarker ‣ Handlebars.java ‣ Jade4J ‣ Velocity ‣
Groovy Templates ‣ Thymeleaf ‣ ଓʑରԠ༧ఆ

開発に必要なもの

Aeromockで開発する利点

"1αʔόىಈ଴͕ͪແ͘ͳͬͨ αʔόαΠυʹࠨӈ͞Εͳ͘ͳͬͨ σʔλߏ଄͑͞ԡ͑͞ͱ͚͹Կͱ͔ͳΔ ϫϯλΠϜܥͷදࣔ֬ೝ͕͠΍͍͢ ۾ͳ͘ςετͰ͖Δ ͍ܰ νʔϜؒͰΪεΪε͠ͳ͘ͳͬͨ τϥΠΞϯυΤϥʔָ͕ :".-Ͱ໌֬ͳ࢓༷ͷऔΓܾΊߦ͍ɺೝࣝ૬ҧ͕ݮͬͨ ઐ໳ྖҬ֎ʹ෷͏ίετ͕֨ஈʹݮͬͨ

ෳ਺ύλʔϯσʔλ ڞ௨σʔλϑΝΠϧ ΧελϜϧʔςΟϯά 7JSUVBM)PTU その他の機能たち 7BHSBOU4IBSF 7JFXͱσʔλͷςετ

Vagrant Share

7BHSBOU4IBSF ‣ 7BHSBOUͰߏஙͨ͠ήετ04ͰՔಇ͢ΔΞϓϦΛɺ Ұ࣌తʹάϩʔόϧʹެ։͢Δ࢓૊Έ ‣ "FSPNPDLͰ͸ϩʔΧϧελϯυΞϩϯ൛ͱ͸ผ ʹɺ7BHSBOU4IBSFެ։༻΋༻ҙ͍ͯ͠Δ ‣ /HJOY "FSPNPDL
#BTJDೝূߏ੒ ‣ ྨࣅαʔϏεʹOHSPL MPDBMUVOOFM

ローカルを即実機確認 ࣮૷ॳظஈ֊͔Β࣮ػ֬ೝ ग़དྷӫ͑ͷڞ༗΋ૣظʹ %FW؀ڥཁΒͣ มߋ͸ଈ൓ө

普及活動

‣ ('ʹ͏͔ͬΓಋೖͯ͠ط੒ࣄ࣮Խʹ੒ޭ ‣ ֤ϓϩδΣΫτʹσϞ࣋ͬͯӦۀ ‣ ಋೖোน؇࿨ͷͨΊɺॳظߏ੒Λ13Ͱೲ඼ ‣ ӡ༻αϙʔτ ‣ ಋೖ͸ϓϩδΣΫτ͸௒͑ͨ͘Β͍

https://github.com/CyberAgent/aeromock Please your star and Pull Request!! 来週公開！！

まとめ

‣ ܰࢹ͞Ε͕ͪͳϑϩϯτΤϯυɺͦͷՁ஋ΛࠓҰ౓ ݟ௚ͦ͏ ‣ ύϫʔόϥϯε͕࿪ͳϓϩδΣΫτ͸ɺ୭͔͕ͦͷ ୅ঈΛ෷͍ͬͯΔ ‣ ֤ʑ͕஫ྗ͢΂͖υϝΠϯΛࠓҰ౓ߟ͑Α͏ ‣ ։ൃޮ཰ͷϘτϧωοΫΛղফ͢ΔࡦΛߟ͑ɺ֤ʑ
ͷϦιʔεΛ࢖͍͖Ζ͏

止まるな、止めるなフロントエンド

に興味のあるひと GPMMPX!TUPSNDBU

ご清聴ありがとうございました - Thank you for listening -

止まっちゃいけないフロントエンド開発

止まっちゃいけないフロントエンド開発

More Decks by stormcat24

Other Decks in Programming

Featured

Transcript