Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
止まっちゃいけないフロントエンド開発
Search
stormcat24
August 23, 2014
Programming
24
9.3k
止まっちゃいけないフロントエンド開発
DevLOVE甲子園2014 東日本大会 技トラック 5回表
stormcat24
August 23, 2014
Tweet
Share
More Decks by stormcat24
See All by stormcat24
素早く賢く失敗するDeveloper Productivityの実現を目指して
stormcat24
2
2.8k
KubernetesのマニフェストをそれなりにCIしたい
stormcat24
4
1.1k
令和時代のSaaS開発
stormcat24
1
220
History in 5 years of CircleCI and CyberAgent
stormcat24
3
770
Kubernetes Handson Osaka
stormcat24
5
520
Kubernetes Handson
stormcat24
5
4.1k
DockerとKubernetesでアプリケーション開発にコンテナをフル活用!
stormcat24
0
280
Base Image Journey 2018
stormcat24
29
120k
kotlin-fest
stormcat24
13
17k
Other Decks in Programming
See All in Programming
Milestoner
bkuhlmann
1
420
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
210
Domain-Driven Transformation
hschwentner
2
1.5k
Tailwind CSSを本気でカスタマイズする方法
fsubal
15
5.6k
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
560
使ってみよう Azure AI Document Intelligence
kosmosebi
2
380
Git Rebase
bkuhlmann
11
1.6k
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.3k
PHPはいつから死んでいるかの調査
chiroruxx
2
430
Let's learn code review
riofujimon
2
620
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
580
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
13
2.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Being A Developer After 40
akosma
67
580k
Teambox: Starting and Learning
jrom
128
8.4k
Atom: Resistance is Futile
akmur
260
25k
Code Review Best Practice
trishagee
56
15k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Building Applications with DynamoDB
mza
88
5.6k
Practical Orchestrator
shlominoach
183
9.7k
Transcript
止まっちゃいけない フロントエンド開発 Akinori Yamada / @stormcat24 DevLOVEߕࢠԂ2014 ౦ຊେձ
‣ @stormcat24 ‣ CyberAgent, Inc. ‣ Technical Engineer ‣ Server-side
‣ Front-end? ‣ DevOpts
アメーバ事業本部所属
だった
Ҿ༻ɿ4PDJBM(BNF*OGP
技術本部所属
本日のアジェンダ
‣ AmebaεϚϗ։ൃͷόοΫάϥϯυ ‣ ๊͍͑ͯͨ ‣ ϑϩϯτΤϯυͷॏཁੑͱຊདྷͷׂ ‣ ։ൃޮ্ͷͨΊʹॻ͍ͨπʔϧࢪࡦ
2012年 Amebaスマホスタート
スマートフォン開発へのシフト ‣ 30ԯԁϓϩϞʔγϣϯʢ201211݄ʣ ‣ 2Ͱ100ͷ৽نࣄۀ ‣ ৫վฤɺେ෯૿һͰҰؾʹγϑτ ‣ ϒϥβϓϥοτϑΥʔϜઓུ ‣
ήʔϜɾίϛϡχςΟ
技術的バックグラウンド ‣ ͱͱJavaܦݧऀ͕ଟ͍ձࣾ ‣ ݴޠͷׂ߹ ‣ ήʔϜ΄΅Java ‣ ίϛϡχςΟRubyPHP͋ͬͨ ‣
࠷ۙNode.js͔ͳΓ಄ɺJavaൺˣ
Ameba定番アーキテクチャ ‣ Java ‣ Spring ‣ MySQL ‣ Memcached ‣
Freemarker
フロントエンドは・・・ ‣ αʔόαΠυςϯϓϨʔτ͕ओྲྀʢFTL) ‣ ͨ·ʹBackbone.jsϓϩδΣΫτ͕ͪ´ ‣ ϑϩϯτΤϯυ͕βϧͳϓϩδΣΫτ͕ଟ͔ͬͨ ‣ ʢҰԠʣۀͱ͍͏͜ͱʹͳͬͯΔ
抱えていた問題点
‣ αʔόαΠυ͕ແ͍ͱɺϑϩϯτΤϯυͷ΄ͱΜͲ Λಈ͔͢͜ͱ͕Ͱ͖ͳ͍ ‣ Τϥʔ͕͋Δͱ࡞ۀ͕ࢭ·Δ ‣ DBͷσʔλʹґଘ͢Δ࡞ۀ ‣ ৬छͰ͚ͯۀͬͯݴͬͯΔ͚ͩ 強いサーバサイド依存
ىಈʹʙ ͬͯͶ͆͆͆ /VMM1PJOUFS&YDFQUJPO 0VU0G.FNPSZ&SSPS མͪΔʁϚελσʔλ͓͔͍͠Ͷ͆ ͋͋ɺͦΕ ൿͷಈ͔͠ํ͕ʢ͈́ ͏୲ऀؼΓ·ͨ͠ αʔηϯXXX
強まるサーバサイド支配 ×分業 ◯下請け 神聖サーバサイド帝国・トムキャット8世
待つことの辛さ マンガでも読んで 気長に待つか・・・ いや、もっとやるべきことが あるはずだ 意識低い人 意識高い人
フロントエンドにとっての 専門外領域
強いられる 専門外の作業
フロントエンドエンジニアの専門領域
やること大杉ワロタw
高まりつづける専門性 ‣ ઈ͑ͣΠϯϓοτɾΞτϓοτ͕ඞཁ ‣ εϚϗ։ൃͷ߹ɺϨεϙϯεಛʹγϏΞ ‣ "OESPJEରԠ@ ཀAʯ㲃 @ ‣
ϝϯςφϒϧͳ։ൃ ‣ ςετख๏
サーバサイド待ってる暇とか無い ɾɾɾ
水のように消費されるレッドブル
目指すべき 開発スタイル
ઐ֎ྖҬ͔Βͷ٫ ‣ ϑϩϯτΤϯυΤϯδχΞ͕ɺઐྖҬʹϦιʔε ΛྗͰ͖ΔΈΛͭ͘Δ͜ͱ ‣ 7BHSBOU $IFG͡Όຊ࣭ͷղܾʹͳΒͳ͍
αʔόαΠυґଘ͔Βͷ٫ ‣ ϑϩϯτΤϯυʹͱͬͯɺαʔόαΠυ͕ΫϦςΟ ΧϧɾύεʹͳͬͯͳΒͳ͍ ‣ αʔόαΠυͷঢ়ଶʹؔΘΒͣɺ։ൃͰ͖Δ͜ͱ
ΠϯλϑΣʔεࢦ։ൃ ‣ αʔόαΠυͱϑϩϯτΤϯυΛऔΓ࣋ͭɺ7JFX ͷΠϯλϑΣʔεϕʔεͷ։ൃʹγϑτ͢Δ ‣ શͳۀΛཱ֬ͤ͞Δ
αΫαΫ։ൃɾলϦιʔε ‣ "1αʔόͷىಈͪ࣌ؒΛແ͘͢͜ͱ ‣ ࡞ۀʹ͓͚Δ҉Λແ͘͢͜ͱ ‣ গͳ͍ϚγϯϦιʔεͰ࣮ݱ
超えるべき壁 ‣ ੵΓੵٕͬͨज़తෛ࠴ ‣ ӡ༻εϐʔυΛམͱ͍͚ͯ͠ͳ͍ ‣ طଘͷγεςϜʹ෭࡞༻Λ༩͑ΔͷͰ͋ͬͯͳ Βͳ͍ ‣ ߅ྗͱͷઓ͍
ツールを書きました
None
+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
None
対応済テンプレートエンジン ‣ Freemarker ‣ Handlebars.java ‣ Jade4J ‣ Velocity ‣
Groovy Templates ‣ Thymeleaf ‣ ଓʑରԠ༧ఆ
開発に必要なもの
None
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 -