[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

stormcat24
August 23, 2014
Programming
24
9.4k

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

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

stormcat24

August 23, 2014
Tweet

More Decks by stormcat24

See All by stormcat24
素早く賢く失敗するDeveloper Productivityの実現を目指して
stormcat24
4
4.7k
KubernetesのマニフェストをそれなりにCIしたい
stormcat24
4
1.3k
令和時代のSaaS開発
stormcat24
1
250
History in 5 years of CircleCI and CyberAgent
stormcat24
3
820
Kubernetes Handson Osaka
stormcat24
5
550
Kubernetes Handson
stormcat24
5
4.2k
DockerとKubernetesでアプリケーション開発にコンテナをフル活用！
stormcat24
0
300
Base Image Journey 2018
stormcat24
29
130k
kotlin-fest
stormcat24
13
17k

Other Decks in Programming

See All in Programming
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
200
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
980
선언형 UI에서의 상태관리
l2hyunwoo
0
240
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
260
MCP with Cloudflare Workers
yusukebe
2
240
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
710
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点

eiganken
1
370
Go の GC の不得意な 部分を克服したい
taiyow
3
930
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
590
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
350
fs2-io を試してたらバグを見つけて直した話
chencmd
0
270
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
140

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
The World Runs on Bad Software
bkeepers
PRO
66
11k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Automating Front-end Workflow
addyosmani
1366
200k
Typedesign – Prime Four
hannesfritz
40
2.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Why Our Code Smells
bkeepers
PRO
335
57k
Practical Orchestrator
shlominoach
186
10k
Writing Fast Ruby
sferik
628
61k
How to Ace a Technical Interview
jacobian
276
23k
How STYLIGHT went responsive
nonsquared
96
5.3k

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. ツールを書きました

  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 -