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
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
100
Development of an App for Intuitive AI Learning - Blockly Summit 2025
teba_eleven
0
100
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
1
200
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
150
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
7
1.7k
Passkeys for Java Developers
ynojima
2
760
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
450
バリデーションライブラリ徹底比較
nayuta999999
1
560
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.3k
インターフェース設計のコツとツボ
togishima
2
670
「兵法」から見る質とスピード
ickx
0
240
Featured
See All Featured
Building an army of robots
kneath
306
45k
Site-Speed That Sticks
csswizardry
9
610
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Speed Design
sergeychernyshev
30
980
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Docker and Python
trallard
44
3.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Faster Mobile Websites
deanohume
307
31k
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Խ