Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

DevLOVE甲子園2014 東日本大会 技トラック 5回表

0aac627116c6e2a87b9ae179500801df?s=128

stormcat24

August 23, 2014
Tweet

Transcript

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

  2. ‣ @stormcat24 ‣ CyberAgent, Inc. ‣ Technical Engineer ‣ Server-side

    ‣ Front-end? ‣ DevOpts
  3. アメーバ事業本部所属

  4. だった

  5. Ҿ༻ɿ4PDJBM(BNF*OGP

  6. 技術本部所属

  7. 本日のアジェンダ

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

  9. 2012年 Amebaスマホスタート

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

    ήʔϜɾίϛϡχςΟ
  11. 技術的バックグラウンド ‣ ΋ͱ΋ͱJavaܦݧऀ͕ଟ͍ձࣾ ‣ ݴޠͷׂ߹ ‣ ήʔϜ͸΄΅Java ‣ ίϛϡχςΟ͸Ruby΍PHP΋͋ͬͨ ‣

    ࠷ۙ͸Node.js͔ͳΓ୆಄ɺJavaൺ཰ˣ
  12. Ameba定番アーキテクチャ ‣ Java ‣ Spring ‣ MySQL ‣ Memcached ‣

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

  14. 抱えていた問題点

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

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

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

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

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

  20.   強いられる      専門外の作業

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

  22. やること大杉ワロタw

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

    ϝϯςφϒϧͳ։ൃ ‣ ςετख๏
  24. サーバサイド待ってる暇とか無い ɾɾɾ

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

  26. 目指すべき  開発スタイル

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

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

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

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

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

  32. ツールを書きました

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

    ࠶ىಈෆཁ ਺ඵͰىಈ লϝϞϦ
  35. https://github.com/CyberAgent/aeromock OSS Released !! Now Available!! 来週公開!! OSS Released !!

    Now Available!!
  36. 来週公開!!

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

  38. <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>
  39. map: propSimple: propSimpleValue propList: - 11111 - 22222 - 33333

    propMap: childSimple: childSimpleValue childList: - child11111 - child22222 - child33333 :".-ͰσʔλΛͭ͘Δ͚ͩ ίϝϯτॻ͚ΔͷͰ:".-ਪ঑ +40/Ͱ΋Մ
  40. そんな簡単な例ばかりじゃない

  41. <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
  42. target: prop1: prop1Value __methods: - name: execute1 value: execute1Value -

    name: execute2 value: id: 100 name: foobar ϝιου΋ఆٛͰ͖Δ Ҿ਺ͷ਺͸໰Θͳ͍ ωετ0,
  43. カスタムタグ・ファンクション

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

  45. if (arguments.isEmpty()) { throw new IllegalArgumentException("Argument required.”) } return "http://$HOST${arguments[0]}"

    TUBUJD6SMHSPPWZ (SPPWZͰ'VODUJPOͷग़ྗΛίϯτϩʔϧ
  46. _writer.write(‘<div class=“hoge” ‘) for (entry in _params) { _writer.write(‘${entry.key}=“‘ +

    entry.value + ‘“ ’) } _writer.write(‘</div>’) EJWHSPPWZ (SPPWZͰ5BHͷग़ྗΛίϯτϩʔϧ
  47. ガールフレンド(仮) on Aeromock

  48. None
  49. 対応済テンプレートエンジン ‣ Freemarker ‣ Handlebars.java ‣ Jade4J ‣ Velocity ‣

    Groovy Templates ‣ Thymeleaf ‣ ଓʑରԠ༧ఆ
  50. 開発に必要なもの

  51. None
  52. Aeromockで開発する利点

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

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

  55. Vagrant Share

  56. 7BHSBOU4IBSF ‣ 7BHSBOUͰߏஙͨ͠ήετ04ͰՔಇ͢ΔΞϓϦΛɺ Ұ࣌తʹάϩʔόϧʹެ։͢Δ࢓૊Έ ‣ "FSPNPDLͰ͸ϩʔΧϧελϯυΞϩϯ൛ͱ͸ผ ʹɺ7BHSBOU4IBSFެ։༻΋༻ҙ͍ͯ͠Δ ‣ /HJOY "FSPNPDL

    #BTJDೝূߏ੒ ‣ ྨࣅαʔϏεʹOHSPL MPDBMUVOOFM
  57. ローカルを即実機確認 ࣮૷ॳظஈ֊͔Β࣮ػ֬ೝ ग़དྷӫ͑ͷڞ༗΋ૣظʹ %FW؀ڥཁΒͣ มߋ͸ଈ൓ө

  58. 普及活動

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

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

  61. まとめ

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

    ͷϦιʔεΛ࢖͍͖Ζ͏
  63. 止まるな、止めるな フロントエンド

  64. に興味のあるひと GPMMPX!TUPSNDBU

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