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
94
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
490
Javascript in the past and now
kusamao
1
170
The Essence of UI Design
kusamao
1
1.9k
Make good (better) form
kusamao
0
250
Keep a distance from jQuery
kusamao
0
130
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
500
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
49
32k
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
520
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Team operations that are not burdened by SRE
kazatohiei
1
290
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
120
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
650
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
340
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
技術同人誌をMCP Serverにしてみた
74th
1
450
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
It's Worth the Effort
3n
185
28k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Producing Creativity
orderedlist
PRO
346
40k
Become a Pro
speakerdeck
PRO
28
5.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
What's in a price? How to price your products and services
michaelherold
246
12k
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ͰͬͯΔͥʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠