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
4
4.4k
KubernetesのマニフェストをそれなりにCIしたい
stormcat24
4
1.2k
令和時代のSaaS開発
stormcat24
1
240
History in 5 years of CircleCI and CyberAgent
stormcat24
3
800
Kubernetes Handson Osaka
stormcat24
5
540
Kubernetes Handson
stormcat24
5
4.2k
DockerとKubernetesでアプリケーション開発にコンテナをフル活用!
stormcat24
0
290
Base Image Journey 2018
stormcat24
29
130k
kotlin-fest
stormcat24
13
17k
Other Decks in Programming
See All in Programming
メルカリ ハロ アプリの技術スタック
atsumo
2
350
XP2024 っていう国際会議に行ってきたよの記 / XP2024 Conference Report
bonotake
4
200
フロントエンドの現在地とこれから
koba04
10
4.4k
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
390
色んなオートローダーを覗き見る #phpcon_okinawa
o0h
PRO
5
370
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
360
◯◯エンジニアになった理由
gessy0129
PRO
0
630
pytest プラグインを開発して DRY に自動テストを書こう
inuatsu
2
250
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
340
Re:PandasAI:生成AIがデータ分析業務にもたらすパラダイムシフト【増補改訂版】
negi111111
1
870
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
6
1.4k
Applied NLP in the Age of Generative AI
inesmontani
PRO
3
1.2k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
403
65k
Code Reviewing Like a Champion
maltzj
519
39k
Being A Developer After 40
akosma
84
590k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Embracing the Ebb and Flow
colly
83
4.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
Bash Introduction
62gerente
608
210k
4 Signs Your Business is Dying
shpigford
180
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Become a Pro
speakerdeck
PRO
24
4.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
38
2.1k
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 -