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

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

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. 強まるサーバサイド支配 ×分業　◯下請け 神聖サーバサイド帝国・トムキャット８世
18. 待つことの辛さ マンガでも読んで 　気長に待つか・・・ いや、もっとやるべきことが あるはずだ 意識低い人 意識高い人
19. フロントエンドにとっての 専門外領域
20. 　　強いられる 　　　　　専門外の作業
21. フロントエンドエンジニアの専門領域
22. やること大杉ワロタｗ
23. 高まりつづける専門性 ‣ ઈ͑ͣΠϯϓοτɾΞ΢τϓοτ͕ඞཁ
    ‣ εϚϗ։ൃͷ৔߹ɺϨεϙϯε͸ಛʹγϏΞ
    ‣ "OESPJEରԠ@ ཀAʯ㲃 @
    ‣ ϝϯςφϒϧͳ։ൃ
    ‣ ςετख๏
24. サーバサイド待ってる暇とか無い ɾɾɾ
25. 水のように消費されるレッドブル
26. 目指すべき 　開発スタイル
27. ઐ໳֎ྖҬ͔Βͷ୤٫ ‣ ϑϩϯτΤϯυΤϯδχΞ͕ɺઐ໳ྖҬʹϦιʔε Λ஫ྗͰ͖Δ࢓૊ΈΛͭ͘Δ͜ͱ
    ‣ 7BHSBOU
    
    $IFG͡Όຊ࣭ͷղܾʹͳΒͳ͍
28. αʔόαΠυґଘ͔Βͷ୤٫ ‣ ϑϩϯτΤϯυʹͱͬͯɺαʔόαΠυ͕ΫϦςΟ Χϧɾύεʹͳͬͯ͸ͳΒͳ͍
    ‣ αʔόαΠυͷঢ়ଶʹؔΘΒͣɺ։ൃͰ͖Δ͜ͱ
29. ΠϯλϑΣʔεࢦ޲։ൃ ‣ αʔόαΠυͱϑϩϯτΤϯυΛऔΓ࣋ͭɺ7JFX ͷΠϯλϑΣʔεϕʔεͷ։ൃʹγϑτ͢Δ
    ‣ ׬શͳ෼ۀΛཱ֬ͤ͞Δ
30. αΫαΫ։ൃɾলϦιʔε ‣ "1αʔόͷىಈ଴ͪ࣌ؒΛແ͘͢͜ͱ
    ‣ ࡞ۀʹ͓͚Δ҉໧஌Λແ͘͢͜ͱ
    ‣ গͳ͍ϚγϯϦιʔεͰ࣮ݱ
31. 超えるべき壁 ‣ ੵ΋Γੵ΋ٕͬͨज़తෛ࠴
    ‣ ӡ༻εϐʔυΛམͱͯ͠͸͍͚ͳ͍
    ‣ طଘͷγεςϜʹ෭࡞༻Λ༩͑Δ΋ͷͰ͋ͬͯ͸ͳ Βͳ͍
    ‣ ఍߅੎ྗͱͷઓ͍
32. ツールを書きました
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
49. 対応済テンプレートエンジン ‣ Freemarker ‣ Handlebars.java ‣ Jade4J ‣ Velocity ‣ Groovy Templates ‣ Thymeleaf ‣ ଓʑରԠ༧ఆ
50. 開発に必要なもの
52. Aeromockで開発する利点
53. "1αʔόىಈ଴͕ͪແ͘ͳͬͨ αʔόαΠυʹࠨӈ͞Εͳ͘ͳͬͨ σʔλߏ଄͑͞ԡ͑͞ͱ͚͹Կͱ͔ͳΔ ϫϯλΠϜܥͷදࣔ֬ೝ͕͠΍͍͢ ۾ͳ͘ςετͰ͖Δ ͍ܰ νʔϜؒͰΪεΪε͠ͳ͘ͳͬͨ τϥΠΞϯυΤϥʔָ͕ :".-Ͱ໌֬ͳ࢓༷ͷऔΓܾΊߦ͍ɺೝࣝ૬ҧ͕ݮͬͨ ઐ໳ྖҬ֎ʹ෷͏ίετ͕֨ஈʹݮͬͨ
54. ෳ਺ύλʔϯσʔλ ڞ௨σʔλϑΝΠϧ ΧελϜϧʔςΟϯά 7JSUVBM)PTU その他の機能たち 7BHSBOU
    4IBSF 7JFXͱσʔλͷςετ
55. Vagrant Share
56. 7BHSBOU
    4IBSF ‣ 7BHSBOUͰߏஙͨ͠ήετ04ͰՔಇ͢ΔΞϓϦΛɺ Ұ࣌తʹάϩʔόϧʹެ։͢Δ࢓૊Έ
    ‣ "FSPNPDLͰ͸ϩʔΧϧελϯυΞϩϯ൛ͱ͸ผ ʹɺ7BHSBOU
    4IBSFެ։༻΋༻ҙ͍ͯ͠Δ
    ‣ /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 -