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
uggds
November 20, 2017
Programming
7
2.5k
サーバーサイド出身のフロントエンドエンジニアが変える現場
2017 FALL #jjug_ccc でのLT資料です。
uggds
November 20, 2017
Tweet
Share
More Decks by uggds
See All by uggds
2024_Profile_for_フロントエンドのモデル駆動設計.pdf
uggds
0
110
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
uggds
36
17k
DEVLOVE カイゼン ジャーニー カンファレンス 20180818.pdf
uggds
6
3.1k
Other Decks in Programming
See All in Programming
Understanding Kotlin Multiplatform
l2hyunwoo
0
230
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
1.3k
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
120
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
20250708_JAWS_opscdk
takuyay0ne
2
160
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
390
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.8k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
880
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
530
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
210
GPUを計算資源として使おう!
primenumber
1
290
Featured
See All Featured
A better future with KSS
kneath
238
17k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Into the Great Unknown - MozCon
thekraken
40
1.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Producing Creativity
orderedlist
PRO
346
40k
Transcript
αʔόʔαΠυग़ͷ ϑϩϯτΤϯυΤϯδχΞ ͕ม͑Δݱ JJUG CCC 2017 FALL LT UGA
ࣗݾհ Ӊլਆ ʢ@uggdsʣ ϑϦʔͷϑϩϯτΤϯυΤϯδχΞʢUGAP LLC.ʣ ৽॓ͷSIerग़JavaΤϯδχΞ ϧτϥո्ͷʢϨουΩϯάʣ
ݩSIͰαʔόʔαΠυग़ͷ ϑϩϯτΤϯυΤϯδχΞ͕ WEBܥͷݱͰͲ͏׆༂ ͍ͯ͠Δ͔ͱ͍͏͓͠
※͋͘·ͰݸਓͷҙݟͰ͢ ͪͳΈʹ SI LOVE Ͱ͢
ϑϩϯτΤϯυΤϯδχΞ ͷΠϝʔδͲ͏Ͱ͔͢ʁ
5IFFWPMVUJPOPG)PNP'SPOUFOEBJMT4PVSDFCMPHHNPJP ։ൃڥपΓͷٸͳਐԽʹਵ
ϑϨʔϜϫʔΫͷબఆ 4XJUDIGSPNSFBDUUPWVFKT4PVSDFWVFKTEFWFMPQFSTDPN
jQuery WVFKTTBGFMZKRVFSZQMVHJO4PVSDFWVFKTEFWFMPQFSTDPN
BFFʹࢥ͍ΛΔ ʢBest Friend Foreverʣ
WEBܥͷΠϝʔδ
DESIGN PLAN DEVEL OP TEST DESIGN PLAN DEVEL OP TEST
DESIGN PLAN DEVEL OP TEST ϦϦʔεͷαΠΫϧ͕ૣ͍
৽͍ٕ͠ज़ͷಋೖ͕׆ൃ
͔ͧ͞͠ઑͬͨڥ ͳΜͩΖ͏ͳ
࣮ࡍɺࢀըͨ͠ݱ
Server Side Front End WEB Director SIer ϑϦʔϥϯε ϓϩύʔ ͘ଓ͍͍ͯΔWEBαʔϏε
Server Side Front End WEB Director ͘ଓ͍͍ͯΔWEBαʔϏε HTML, CSS, JS
αʔόʔαΠυSVN
None
ϑϩϯτΤϯυࢿࡐ όʔδϣϯཧͯ͠ͳ͍
None
ϑϩϯτΤϯυࢿࡐͷ ड͚͠zipͰ
None
ϑϩϯτΤϯυࢿࡐͷ ϦϦʔεखಈ
ϑΝΠϧΛҰݸҰݸखͰ…
None
ͬͯΔ߹͡Όͳ͍ WVFKTTBGFMZKRVFSZQMVHJO4PVSDFWVFKTEFWFMPQFSTDPN
Server Side Front End WEB Director ͦͬͪ ͦͬͪͰ վળ͍͚ͨ͠Ͳ ख͔ͣ
ͱΓ͋͑ͣ ϦϦʔεΛʂ ϊϋ͕ͳ͍ ݪҼ
Server Side Front End WEB Director ˇ ͦ͜ʹݩSIerͷࢲ
ϑϩϯτΤϯυࢿࡐͷ ϦϦʔεJenkinsͬͯ ࣗಈԽʂ ϑϩϯτΤϯυࢿࡐΛ Gitʹͯ͠ɺड͚͠ νΣοΫΞτͯ͠ ͖ͯΒ͏Α͏ʹʂ
SIͷݱͰ͍ͬͯͨ͜ͱ͕ ϑϩϯτΤϯυͷཱͰ ʹཱͭʂ
͞Βʹ όοΫΤϯυ͕Javaͷ߹ ։ൃܦݧ͕Ζʹ׆͖Δ ※Ή͠ΖɺόοΫΤϯυܦݧ͕ͳ͍ͱͭΒ͍ • ςϯϓϨʔτमਖ਼ • APIͷI/FͷఏҊ • όοΫΤϯυଆͷ
ॲཧΛͬͯσόοά Server Side Front End
FRONT END WEB DIRECTOR DESIGN BACK END SEO ϑϩϯτΤϯυଞʹ σβΠφʔɺWEBσΟϨΫλʔɺSEOͱ
ϋϒʹͳΔ͜ͱ͕ଟ͍ͷͰ༷ʑͳ ݱͷ՝͕Έ͑ͯ͘Δ ͲΜͲΜվળͯ͠ ݱͷ৴པUPʂ
ඇΤϯδχΞͷਓ͔Βͷ ײँ͕ͳ͘خ͍͠ʂ
ϑϩϯτΤϯυͲ͏Ͱ͔͢ʁ
͓·͚ɿվળྫ
jsphtmlͱͯ͠ΈΕͳ͍ͷͰ WEBσΟϨΫλͱσβΠφʔຊ൪Ͱը໘ભҠ͢Δ͔͠ͳ͍ jsp ʜ ܰ͘σβΠϯ֬ೝ͍͚ͨͩ͠ͳͷʹɺ ͍͍ͪͪϑΥʔϜΛೖྗͭΒ͍ʂ WEBσΟϨΫλ σβΠφʔ
jsp ͱ͍͏͜ͱͰɺKotlinͱVue.jsͰϞοΫαΠτ࡞ ʜ ϞοΫαΠτ ʜ jsoupͰ htmlԽ
jsp ʜ ϞοΫαΠτ ΈΕͯ ࡞ۀޮΞοϓ ϑϩϯτΤϯυͳΒͰͷΞΠσΞͰݱΛվળ jsoupͰ htmlԽ