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
Making mock-up in web application
Search
Kusamao Abe
August 07, 2018
Programming
0
70
Making mock-up in web application
Kusamao Abe
August 07, 2018
Tweet
Share
More Decks by Kusamao Abe
See All by Kusamao Abe
Vue builds
kusamao
1
390
Javascript in the past and now
kusamao
1
150
The Essence of UI Design
kusamao
1
1.9k
Make good (better) form
kusamao
0
200
Keep a distance from jQuery
kusamao
0
99
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Programming
See All in Programming
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
780
Code Reviews
bkuhlmann
4
890
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
Fast JSX: Don't clone props object #28768
yossydev
1
130
Goのmultiple errorsについて (2024年4月版)
syumai
4
920
Polars入門
daikikatsuragawa
1
100
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
2
820
Ruby Function Composition
bkuhlmann
1
330
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
新宿ダンジョンを可視化してみた
satoshi7190
2
260
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Navigating Team Friction
lara
178
13k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Building Your Own Lightsaber
phodgson
99
5.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Designing for humans not robots
tammielis
248
25k
Atom: Resistance is Futile
akmur
259
25k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Thoughts on Productivity
jonyablonski
58
3.8k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Transcript
ϞοΫΞοϓɺ Ͳ͏ӡ༻͢Δʁ 2018/08/04 JAM plus #02 at tambourine commune
҆෦ຑੜ Kusamao Abe גࣜձࣾλϯόϦϯ ʢtambourine.incʣ ɾςΫχΧϧσΟϨΫλʔ ɾWebΤϯδχΞ
JAM plusͷ͓͞Β͍ w JAMελοΫˠJavaScript API MarkUpΒ͍͠ w MEANελοΫͱ͔LAMPͱ͔ͦ͏͍͏ͭ ϑϩϯτΤϯυΛࢦ͢Β͍͠ w
plusͬͯԿˠ͜ͷϏϧͷ໊લ͕ϓϥεϏϧ w ϩΰͱ͔΄͍͠ؾ͕͢Δ
Web੍࡞ʹ͓͚ΔϚʔΫΞοϓ ϫΠϠʔϑϨʔϜ σβΠϯΧϯϓ࡞ ϚʔΫΞοϓ WebαΠτ੍࡞ WebΞϓϦέʔγϣϯ੍࡞ σβΠϯΧϯϓ࡞ ϚʔΫΞοϓ γεςϜઃܭ ϓϩάϥϛϯά
ςετ ཁ݅ఆٛ ϫΠϠʔϑϨʔϜ
ϞοΫΞοϓΛ࡞Δ w ϞοΫΞοϓʢmock-upʣɿ࣮ͱಉ͡େ͖͞ʹ࡞ͬͨܕɻݪੇܕɻ w ਫ਼៛ͳܕΛ࡞Δ͜ͱͰɺ࣮ࡍʹ࣮ͯ͠Έͯग़ͯ͘ΔΛ௵ͨ͠Γɺ ࣮ݱՄೳੑΛνΣοΫͨ͠Γ w ITۀքͰଞͷ࡞ۀϓϩηεʹґଘͤͣʹ੍࡞ΛਐΊ͓͍ͯͯɺޙ͔Βଞ ͷϓϩηεͱΈ߹ΘͤΔ͜ͱ
ଞͷۀքͰ w ۙͳͱ͜ΖͰ͍͑ܞଳిɾεϚʔτϑΥϯͷళ಄ϞοΫΞοϓ w ݐஙۀքͰɺઃܭਤͲ͓Γʹ࡞ΕΔ͔ΛνΣοΫͨ͠Γ w ߤۭػͳͲͰ
5IF(PMEFO)BOETPG7BO$MFFG"SQFMTc:BU[FS IUUQTXXXZBU[FSDPNHPMEFOIBOETWBODMFFGBSQFMT l5IFNPDLVQTUVEJP "GUFSUIFESBXJOHSPPN UIFKFXFMEFTJHONBLFTJUTXBZUPUIFNPLF VQXPSLTIPQ XIFSFFYQFSJFODFENPDLVQNBLFSTDSFBUFBNPDLVQPG UIFKFXFMVTJOHQFXUFSBOETUSBTTDSZTUBMT SIJOFTUPOFT 5IJTJTBO
JNQPSUBOUQIBTFJOUIFEFTJHOQSPDFTT CFDBVTFUIFEFTJHOFSDBOTFF IJTIFSESBXJOHDPNFUPMJGFXJUIPVUXBTUJOHQSFDJPVTNBUFSJBMT BOE UIFKFXFMMFSTDBOUFTUUIFXFJHIU NPWFNFOUBOETIBQFPGBKFXFM CFGPSFUIFZTUBSUXPSLJOHPOUIFSFBMQJFDF7BO$MFFG"SQFMTJT QFSIBQTUIFPOMZKFXFMMFSZIPVTFJOUIFXPSMEUIBUQSPWJEFTJUTUFBN XJUIUIFMVYVSZPGBNPDLVQNBLJOHTUVEJP UIVTFOIBODJOHUIF DPNNVOJDBUJPOCFUXFFOEFTJHOFSTBOEKFXFMMFSTBOEBMMPXJOHSPPNGPS UFTUJOHBOEDSFBUJWFFYQFSJNFOUBUJPOz
WebΞϓϦέʔγϣϯͱϞοΫ w σβΠϯΧϯϓ͚ͩͰೖग़ྗͷΠϯλϥΫγϣϯ੍࡞ύλʔϯͷཏ ͕Ή͔͍ͣ͠ w ϓϩτλΠϐϯάπʔϧͷ಄ͰɺͲ͏ಈ͖͔͘ͱ͍͏ͷ͕࡞Γ͢ ͘ͳ͖ͬͯͨ w ϚʔΫΞοϓ࣌Ͱͦͷύλʔϯɺ͍ΔΑͶʁ w
όοΫΤϯυଆͷϩδοΫ͕Ͱ͖ͯͳͯ͘ਐΊ͓͖͍ͯͨΑͶ
ྫ Aʮ͜Εهࣄͳ͍ͱ͖ͷύλʔϯͲ͏͢Ε ͍͍Ͱ͔͢ʁʯ Bʮ͋ͬɺͲ͏͠Α͔ͬʙʯ
࣮Ҋ݅ͱϞοΫΞοϓ 01
ECαΠτ w ཧը໘আ͍ͯύλʔϯ΄Ͳͷը໘͕ඞཁ w PC൛ͷΈͷ੍࡞ͰOK • αʔόαΠυΞϓϦέʔγϣϯ
w ϚʔΫΞοϓͱViewͷΈࠐΈɾ࣮୲ऀ͕ผ w σβΠφʔ͕ுΓ͍͍ͯΔҊ݅Ͱͳ͔ͬͨʢνͰΑ͋͘Δʣ w ը໘ઃܭˠσβΠϯˠϚʔΫΞοϓ w جຊઃܭˠৄࡉઃܭˠ࣮ɹͷ͕ͭฒߦՔಇ w σβΠφʔɿɹϑϩϯτΤϯυɿɹόοΫΤϯυɿ͍ͬͺ͍
ˠσβΠφʔ͕ΧϯϓΛߋ৽͚ͭͮ͠ΔΘ͚Ͱͳ͍ ˠʢ݁ՌతʹʣσβΠφʔ͕ϓϩδΣΫτ్தͰୀ৬
ํ w ࣮͠ऴ͑Δ·ͰϞοΫΞοϓΛʮਖ਼ʯͱͯ͠νΣοΫ w ͍ͭͰ୭Ͱ֬ೝͰ͖ΔΑ͏ʹɺϞοΫΞοϓͷΠϯελϯεΛཱͯΔ w ˠϞοΫΞοϓΛΞϓϦέʔγϣϯͱผͷϦϙδτϦʹ w ݁Ռతʹผʹ͖ͩͬͨ͢ͷ͔͕͋Δʢࣗͷͳ͔Ͱʣ
ߏ w ຊମLaravel • pug w SCSS autoprefixer • gulp
QVH w extend͠·ͬͨ͘ΒϏϧυ͕࣌ؒͲΜͲ͜૿͑Δ w ։ൃ࣌expressmiddlewareͰϦΫΤετ͕དྷͨͷΛ HTMLʹͯ͠ฦͯ͠ɺඞཁͳͱ͖͚ͩϏϧυ͢ΔΑ͏ʹมߋ w svgΛinlineͰຒΊࠐΉͷʹinclude͍·ͬͨ͘Βݟ௨͠ྑ͘ͳͬͨ͠ ϦΫΤετݮͬͨΜ͕ͩHTML͕ϋνϟϝνϟͳݟ௨͠ʹ w
ͳΜ͔ͩΜͩهड़͕গͳ͍ͷͱςϯϓϨʔτϔϧύ͕ଟ͍ͷָ
$44 w {{pageName}}--{{blockName}}__{{modifierName}} ͰCSSηϨΫλΛ౷Ұͯ͠ɺϖʔδ͝ͱʹݻ༗ͷηϨΫλʹ w mixinΛͬͯ෦తʹಉ͡ελΠϧΛཧ ʢ͜ͷ͋ͨΓͷઃܭ·͍͔͍ͨͭͨ͠Ͱ͢Ͷʣ w ΊΜͲ͏ͳͷͰશ෦ϑΝΠϧʹͨ͠ɺkB͘Β͍͋Δʜ w
ECSSͱ͔FLOCSSͱ͔ʹணΛಘͯຐվͨ͠
ผϦϙδτϦʹͯ͠Ͳ͏ͩͬͨʁ w CSSΛ࠷৽masterͷঢ়ଶͰຖϏϧυͯ͠ΞϓϦέʔγϣϯʹ͍࣋ͬͯ͘ ͷ͕compressedͳͷͰ͕ࠩ͋ͬͯΔ͔Θ͔Βͳ͍ w खݩͰϏϧυͨ͠ͱ͖ʹ͏͔ͬΓmaster͕࠷৽͡Όͳ͍ͱσάϨ͢Δ w ͭ·ΓσάϨͨ͠ͱ͍͏͜ͱͰ͢ w ֤͕ࣗΞϓϦέʔγϣϯͷڥߏஙΛ͠ͳͯ͘मਖ਼ରԠ͓ͯ͠٬͞Μɾ
σΟϨΫλʔʹ֬ೝͯ͠Β͑Δͷָͩͬͨ
ਖ਼ϦϙδτϦͭʹ͍ͨ͠
w Ξηοτʹશ෦ೖΕ͓͍ͯͯɺDocumentRootΛΓସ͑ͯσϓϩΠͰ͖ ͨΒϦϙδτϦͭͰΠϯελϯεผʹͰ͖ΔͷͰʁ w HerokuͰProcfileΛͲ͏ʹ͔͢ΕͰ͖ͦ͏ʂ
࣮Ҋ݅ͱϞοΫΞοϓ 02
ϚΠϖʔδܥWebΞϓϦ w ݩϚΠϖʔδͷͳ͍WordPressαΠτ w Ծొˠຊొˠొใͷมߋ͕Ͱ͖ΔܥͷWebΞϓϦʹϦχϡʔΞϧ w ϚΠϖʔδ֎ʹίϯςϯπ͕͋Δ w ϦχϡʔΞϧલ͔ΒϞοΫΞοϓϦϙδτϦ͕ผͰଘࡏ w
ը໘ऑʢશ෦1$41ผͳͷͰ࣮࣭ʣˠϦχϡʔΞϧͰഒ͘Β͍ w ్ͬͪ͜தͰσβΠφʔୀ৬ˠผͷύʔτφʔ͞ΜʹҾ͖ܧ͗
ํ w ϦϙδτϦΛ౷Ұͯ͠ΈΑ͏ w ಉ͡ιʔεϕʔεͷGitϦϙδτϦ͔ΒɺϞοΫڥɾεςʔδϯάΛͦ ΕͧΕHerokuͰσϓϩΠ͍ͨ͠ʢReview Appsʣ w Review AppsɿPull
Request͝ͱʹΠϯελϯε্ཱ͕͕ͪΔ w ຊ൪AWS EC2
ߏ w ຊମLaravel • ejs w SCSS autoprefixer • gulp
FKT w extend͕ͳ͍ͱ͜ΜͳʹͭΒ͍ͷ͔ʂ w <%= %>ɺJISྻͩͱΊͬͪΌଧͪͮΒ͍ؾ͕͢Δ w ػೳ໘Ͱ͍͏ͱੵۃతʹ࠾༻͢Δཧ༝͋Μ·Γͳͦ͞͏ ʢҊ݅։࢝ॳʹ͓ئ͍ͨ͠ϚʔΫΞοϓͷํ͕pugͬͯͳ͔ͬͨʣ
ϦϙδτϦΛ·ͱΊΔ w ejsςϯϓϨʔτΛSFTPVSDFTBTTFUTUFNQMBUFTʹ w SCSSΛSFTPVSDFTBTTFUTTUZMFTIFFUTʹ w ຊ൪༻ϏϧυQVCMJDDTTʹ w ϞοΫΞοϓ༻ʹผͷDocRootͱͯ͠NPDLΛ࡞ w
ը૾ͱ͔શ෦QVCMJD͔ΒNPDLʹίϐʔ͢ΔλεΫΛHVMQͰ࡞ w DocRootڥมͰΓସ͑Δ ʢࢀߟɿIUUQTRJJUBDPNVTLJUFNTFDGFʣ
Heroku Pipeline w develop / staging / productionͷͲ͜ʹAppΠϯελϯεΛஔͯ͠Ͳ͜ʹίʔ υΛద༻͢Δ͔Λ੍ޚͰ͖Δ w
Review AppsΛͬͯɺ Pull Request͕͋ͬͨΒdevelopʹରԠ͢ΔAppΠϯελϯεΛࣗಈͰཱͯ masterʹpush͞ΕͨΒstagingͷAppʹࣗಈσϓϩΠ productionʹखಈͰϘλϯԡͯ͠promoteͤ͞ΔΈ͍ͨͳ͍ํ w ผͷMeetupͰ͠ΌͬͨͷͰࢀߟ·Ͱʹ IUUQTTQFBLFSEFDLDPNLVTBNBPVTJOHIFSPLVPOFOUSVTUFEEFWFMPQNFOU
Review Apps w Review AppsͰʮϞοΫͷPull Requestʯͱʮ௨ৗͷPull RequestʯΛݟ ͚ͯڥมΛΓସ͑ΒΕͳ͍ w ͭ·ΓɺͻͱͭͷPipeline͔ΒͷReview
AppsϞοΫ༻͔௨ৗͷ։ൃ ༻Ͳ͔ͬͪʹ͔͠ద༻Ͱ͖ͳ͍ w ࠓߋ͚ͩͲɺPipelineΛ͚Ε͜Μͳ͜ͱඞཁͳ͔ͬͨ ʢ͜Εॻ͍ͯΔͱ͖·Ͱؾ͕͔ͳ͔ͬͨʣ
։ൃதʙӡ༻ w ։ൃॳظ w ࠷ॳϞοΫ͕Review AppsͰ࡞͞ΕΔΑ͏ʹ͍ͯͨ͠ w ·ͩΞϓϦଆ΄ͱΜͲ৮ͬͯͳ͍ঢ়ଶ w ։ൃޙظ
w ΞϓϦଆΛReview AppsͰදࣔ͞ΕΔΑ͏ʹมߋ w ͋ͱ͔Βݟͨͷௐ͕͋ͬͯͪΐ͍ͪΐ͍Ϛʔδ͔ͯ͠ΒνΣοΫͯͨ͠ w Ϗϧυͨ͠CSSΛ࣋ͬͯ͜ͳ͍͍ͯ͘ͷ͔ͳΓָʢCSS͕ͦͦϑΝΠϧଟ͍ʣ
ϦϦʔεޙ w ϚΠϖʔδ͕ϩʔΧϧͰ֬ೝͰ͖ͳ͍ਓ͕͍ͨ w ϞοΫΛಉ͡ςϯϓϨʔτߏʹ͓͍ͯͯ͠ɺ࣮ࡍͷಈ࡞Λ֬ೝͰ͖ ͳ͍ͷͭΒ͍ w ϞοΫΛ࠷৽ʹอ͓ͬͯ͜͏ͱ͢ΔͱPull Request͕ ͱ͔ʹ
ͳͬͯϨϏϡϫʔ͕ԕ͍Λ͢Δ
Θ͔͖ͬͯͨͧ
ΈΜͳͰ҆શʹ։ൃ͢Δ ͦͦσβΠϯΧϯϓɾϓϩτλΠϓΛߋ৽͠ͳ͍ͱӡ༻͕ͭΒ͍ ͠σβΠϯΧϯϓΛߋ৽͠ͳ͍ͷͩͱͨ͠ΒɺϩʔΧϧϦϞʔτͰ ୭Ͱ֬ೝͰ͖ΔΑ͏ʹ͓͍ͯͯ͠ɺ؆୯ʹࢼͤΔΑ͏ʹ͓ͯ͘͠ ϑΝΠϧΛίϐʔͯ͠ผͷϦϙδτϦʹ͍࣋ͬͯ͘ͷ͏ΊΑ͏ ϞοΫΞοϓͱ࠷ऴతͳςϯϓϨʔτͷॻ͖ํ͕ҧ͏ͷεΠονϯά
ίετ͔͔Δ͠ϛε૿͑Δ
ελΠϧΨΠυͱϞοΫΞοϓ w ελΠϧΨΠυ͋ΔͳΒଟલఏ͕͍Ζ͍Ζҧ͏ w ͦͦΨΠυ͕มΘΔͷେৎͳͷ͔ͱ͍͏ͷͱ͔͘ɺมߋͷ өͱ͔ߟ͑ΔͱΠϯελϯεཱ͕ͬͯͯಉ͡ιʔεϕʔε͡Όͳ͍ͱݫ͠ ͦ͏ w ελΠϧΨΠυ͋ΕϞοΫΞοϓ͕͍Βͳ͍ͷ͔Ͳ͏͔ɺ͍Βͳ͍ؾ ͢Δʢͬͨ͜ͱͳ͍͔Βڭ͑ͯ͘Εʂʂʂʂʣ
͜Ε͔Βͷํ w ϞοΫΞοϓΛͲ͜·Ͱอ͓͔࣋ͯ͘͠ΛઌʹΑ͘ߟ͑Δ w ͳ͋ͳ͋Ͱӡ༻͠ͳ͍ w ελʔτͨ͠Βଟ͍Βͳ͍ͣ w ͠ӡ༻͢ΔͳΒɺϦϙδτϦͭʹ͍ͨ͠ʢҊ݅ʹΑΔ͕ʣ w
Ͱ͖ΕΞϓϦͰ͏ςϯϓϨʔτΤϯδϯͰ࡞ͬͨ΄͏͕͍͍
ͨͱ͑LaravelͳΒ w ࠷ॳ͔ΒbladeͰॻ͘ w ίʔσΟϯά୲ͷͻͱʹLaravelΛଟগ͕ΜͬͯΒ͏ඞཁ͕͋Δ w Ͱͦͷޙͷमਖ਼ͱ͔͍͢͠ͷͰ w Γ୭ͷڥͰಈ͘։ൃڥis preciousʜ
ͨͱ͑LaravelͳΒ w ڥมͰproductionҎ֎ ͷͱ͖ʹಈ͘ϞοΫ༻ͷϧʔ τΛ࡞͓ͬͯ͘ w ˠDocRootΓସ͑ͳ͘ ͍͍ͯʂ w ˠgulpͱ͔Θͣʹ
laravel-mix͚ͩͰ͍͍ʁ
ͱ͜ΖͰͲ͏͍͏ ۀͯ͠·͔͢
w σβΠφʔϚʔΫΞοϓ͢Δʁ͠ͳ͍ʁ w ϑϩϯτΤϯυΤϯδχΞViewͷΈࠐΈ͢Δʁ͠ͳ͍ʁ w όοΫΤϯυΤϯδχΞCSS৮Δʁ৮Βͳ͍ʁʢ৮Γͨ͘ͳ͍ʁʣ w ͦͦϑϩϯτΤϯυͱ͔όοΫΤϯυͱ͔͠ΌΒͤ͑͘ʁ ΦϨ͕શ෦ͬͯΔͥʁ
41"ͩͬͨΒʁ w ݸਓతʹ࠷ॳ͔ΒΨϦΨϦॻ͍ͨ΄͏ָ͕ w ͱ͍͑ɺ͢Ͱʹͬͨ͜ͱ͕͋Δ͔Βͳͷ͔ w σβΠφʔ͞Μ͕ίʔυॻ͘ͳΒ࡞Δ͔͠Εͳ͍ʜʜʁ
ͬ͘͟Γ·ͱΊΔͱ w ΞϓϦέʔγϣϯͷςϯϓϨʔτΛ࡞Δͱ͖ʹϞοΫΞοϓͭ͘ΔલఏͰ w ϞοΫΞοϓΛ͍ͭ·Ͱอ࣋͢Δͷ͔֬ೝ w σβΠϯΧϯϓϓϩτλΠϓߋ৽͞ΕΔͷ͔֬ೝ w ୭ͰݟΒΕΔঢ়ଶʹ͓͖͔ͯ֬͘͠ೝ w
ΞϓϦέʔγϣϯͷςϯϓϨʔτΤϯδϯΛ͏΄͏ָ͕ w ίʔυϕʔεΛ͚ͯϑΝΠϧΛίϐʔ͢ΔͷࣄނΓ͍͢ͷͰΊΑ͏
ϞοΫΞοϓΛ࡞Δత w ϞοΫαʔόͷΑ͏ʹɺͰ͖ͯͳ͍ͱ͜ΖΛସ͢Δ w ઌʹਫ਼៛ͳͷΛ࡞ͬͯΫϦΤΠςΟϒͷίϛϡχέʔγϣϯΛ׆ൃԽ͞ ͤΔ w ͘͠ɺσβΠϯҰཡͷସ w ۀ͢ΔͨΊʹͰ͖Δͱ͜Ζ·ͰͬͯΒ͏
ελΠϧΨΠυͷͱ͔ ฉ͖͍ͨͷͰͥͻ#03ͰͬͯΔͥʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠