Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
天下一 Dev Server 武道会 / World Dev Server Tournament
Search
Pちゃん
November 22, 2018
Programming
2
960
天下一 Dev Server 武道会 / World Dev Server Tournament
Pちゃん
November 22, 2018
Tweet
Share
More Decks by Pちゃん
See All by Pちゃん
API になろう / Let's become an API
p1ch_jp
0
3.4k
この先生きのこるためのPostCSS実践入門
p1ch_jp
1
1.5k
エンジニアのためのデザインの話
p1ch_jp
0
930
Other Decks in Programming
See All in Programming
Claude Codeの「Compacting Conversation」を体感50%減! CLAUDE.md + 8 Skills で挑むコンテキスト管理術
kmurahama
0
280
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
yuya4
6
3.7k
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
cer
PRO
0
350
Go コードベースの構成と AI コンテキスト定義
andpad
0
130
Integrating WordPress and Symfony
alexandresalome
0
160
Findy AI+の開発、運用におけるMCP活用事例
starfish719
0
1.1k
AIエンジニアリングのご紹介 / Introduction to AI Engineering
rkaga
8
2.9k
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
atzzcokek
0
230
愛される翻訳の秘訣
kishikawakatsumi
3
330
なあ兄弟、 余白の意味を考えてから UI実装してくれ!
ktcryomm
11
11k
Github Copilotのチャット履歴ビューワーを作りました~WPF、dotnet10もあるよ~ #clrh111
katsuyuzu
0
110
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
nowaki28
0
420
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.6k
GitHub's CSS Performance
jonrohan
1032
470k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Building Applications with DynamoDB
mza
96
6.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Code Review Best Practice
trishagee
74
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
100
Statistics for Hackers
jakevdp
799
230k
Typedesign – Prime Four
hannesfritz
42
2.9k
Fireside Chat
paigeccino
41
3.7k
A designer walks into a library…
pauljervisheath
210
24k
Transcript
גࣜձࣾσΟʔɾΤψɾΤʔ ౻ݪ৻ଠBLB1$IBO ఱԼҰdev serverಓձ Frontend de KANPAI! #5
͜Μʹͪ
PͪΌΜͰ͢ @p1ch_jp
ීஈɺ6*σβΠφʔΛ͍ͬͯ·͢ɻ MyAnimeListͱ͔ɺϋοΧυʔϧͱ͔
ࣗݾհ·͍͍͋
ࠓ͓ੈʹͳͬͨͷͰ͢Ͷʂ
ࠓͱ͘ʹ͓ੈʹͳͬͨͷ w 4LFUDI w 6*ͭ͘ΔͷίϨ͕ϝΠϯ w "CTUSBDU w ͏ʮ࠷৽൛DPQZ@OFXʯΈ͍ͨͳ࣌ऴΘΓ w
/PXTI w ແྉͰ্ཱ͕ͪͬͯɺ84௨Δͷوॏͩ w /VYUKT w ࣗ੩తαΠτΛHFOFSBUFίϚϯυͰͭ͘ΔΈ͍ͨ ͳ༻ํ๏͕ଟ͔ͬͨ
͜ͷதͰϑϩΧϯͰ ΕΔͱͨ͠ΒNuxt͔ͳ( ˘ω˘)
ͱࢥͬͨͷͰ͕͢
Nuxt͕ศརͳ͜ͱͱ͔ Έͳ͞Μඦঝͩͱࢥ͏͠
5ؒͷLTͰઆ໌ͨ͠ͱ͜ΖͰ ʮͦΕͦ͏ʯͱͳͬͯ͠·͍ͦ͏ͳͷͰ
ࠓճ
OVYUHFOFSBUFͨ͋͠ͱʹग़ͯ͘Δ EJTUΛԿ͔͠ΒͷϩʔΧϧαʔόʔͰ ֬ೝ͢Δͱࢥ͏ͷͰ͕͢
ͦΕΛԿͰ֬ೝ͢Δͷ͕ྑ͍ͷ͔ͱ͍͏ χονͳΛ͍ͨ͠ͱࢥ͍·͢ɻ
ͱ͍͏Θ͚ͰվΊ·ͯ͠
ఱԼҰDev Serverಓձ
ࢀՃࢿ֨ w ϩʔΧϧͰΣϒαʔόʔ͕ͨͭ͜ͱ w Command Line InterfaceΛ͍ͬͯΔ͜ͱ
બखೖ
No1. python -m SimpleHTTPServer ϫϯϥΠφʔαʔόʔքͷॏ
No2. light-server (from npm)
No3. budo (from npm)
No4. serve (from npm)
ධՁํ๏ w ֮͑͢͞ w ୯७ʹίϚϯυΛԿจࣈͰݺΔ͔ w ৮Γ͢͞ w Γ͍ͨ͜ͱΛαοͱͰ͖Δ͔ w
ͦͷଞ w ػೳཏੑ࣮ͳͲ ࠓճҎԼͷ࣠ͰධՁ͍ͨ͠ͱࢥ͍·͢ɻ ֤Ͱɺ߹ܭຬͰ͢ɻ
1ճઓ֮͑͢͞
1ճઓ୯७ʹͦͷίϚϯυΛ ԿจࣈͰݺͼग़ͤΔ͔Ͱ͢
5จࣈҎԼͳΒ3 15จࣈҎԼͳΒ2 20จࣈҎԼͳΒ1 ͦΕҎ্ͳΒ0
1ճઓ֮͑͢͞ w QZUIPON4JNQMF)5514FSWFS w 26จࣈ1 w MJHIUTFSWFS w 11จࣈ2 w
CVEP w 4จࣈ3 w TFSWF w 5จࣈ3
2ճઓ৮Γ͢͞
2ճઓ৮Γ͢͞Ͱɺ Γ͍ͨ͜ͱΛαοͱͰ͖Δ͔Ͱ͢
ࠓճ
./distΛlocalhost:3000Ͱ ϗεςΟϯά͢Δͱ͍͏
͋Γ͕ͪͳγνϡΤʔγϣϯͰ ࢼͯ͠Έ͍ͨͱࢥ͍·͢
No1.python -m SimpleHTTPServer w 42จࣈ͔͔Δ w ͦͦEJTUΛϕʔεʹϗεςΟϯάΈ͍ͨͳ͜ͱ͕Ͱ͖ ͳ͍ͷͰDE͢Δඞཁ͕͋Δ w ͔ͳΓ࣮༻తͰͳ͍ͷͰ0
$ cd dist && python -m SimpleHTTPServer 3000
No2.light-server w 28จࣈͰ࣮ߦͰ͖Δ w ΦϓγϣϯײతͰΘ͔Γ͍͢ w 3 $ light-server -s
dist -p 3000
No3.budo w 20จࣈͰ࣮ߦͰ͖Δ w ΦϓγϣϯײతͰΘ͔Γ͍͢ ຊਓʹ༏͍͠ w 3 $
budo -d dist -p 3000
No4.Terve w 60จࣈͰ࣮ߦͰ͖Δ w EJTUΛϕʔεʹϗεςΟϯάΈ͍ͨͳ͜ͱ͕ઃఆϑΝΠϧܦ ༝Ͱ͔͠σΩͳ͍ w 2ճ͔Βserve -l 3000ͷ13จࣈͰ࣮ߦͰ͖Δ
w ͷͰ1͋͛ͪΌ͏ $ echo {\ public\ : \ dist\ } >> serve.json && serve -l 3000
3ճઓͦͷଞ
ͦͷଞͰΞϐʔϧͰ͖Δ͜ͱΛ όγόγ্͛ͯಠஅͱภݟͰՃ͍͖ͯ͠·͢ɻ
No1.python -m SimpleHTTPServer w ੈͷதͰҰ൪ΘΕ͍ͯΔϩʔΧϧαʔόʔͰ͢ʂʂ w ͦ͏ͩͶ w 1Ճ
No2.light-server w http2ʹରԠͰ͖Δ͜ͱΛചΓʹ͍ͯ͠Δʢ͍͢͝Ͷʣ w ػೳཏੑͳ͔ͳ͔͍͢͝ w IUUQTHJUIVCDPNUYDIFOMJHIUTFSWFS w 2Ճ
No3.budo w GitHub Star 1400͑Ͱ͢ʂʂʢͦ͏ͩͶʣ w ػೳཏੑ͕͍͢͝Ͱ͢ʂʂʢ͔ͨ͠ʹ͍͢͝ʣ w IUUQTHJUIVCDPNNBUUEFTMCVEP w
2Ճ
No4.Terve w GitHub Star 3400͑Ͱ͢ʂʂʢ͍͢͝Ͷʣ w 1Ճ
݁Ռൃද
ճઓ ճઓ ճઓ ߹ܭ QZUIPO MJHIUTFSWFS
CVEP TFSWF
ͱ͍͏Θ͚Ͱ
dev server
budo
·ͱΊ w ࠓճͷ༏উɺ৮Γ͢͞ɾػೳཏੑͷ໘͔Βbudoʹ ܾఆ w http2Λ༻͍ͨ͠ͱ͖light-serverΛ͏ͱྑͦ͞͏ w ͬͱଞʹྑͦ͞͏ͳͷ͋ΔͰʂΈ͍ͨͳͷ͋Ε࣍ճҎ߱ ͷϑϩΧϯͰୈೋճdev serverಓձ͍ͬͯͩ͘͞
ऴΘΓ