Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
【爆速】2日で就職のためにJAMstackなハイパフォブログを作った話!!
Search
Shagamii
January 28, 2019
Programming
170
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
【爆速】2日で就職のためにJAMstackなハイパフォブログを作った話!!
Shagamii
January 28, 2019
Transcript
34 slides
ʲരʳ ̎Ͱब৬ͷͨΊʹ +".TUBDLͳϋΠύϑΥϒϩάΛ ࡞ͬͨʂʂ✌
ΞδΣϯμ ࣗݾհ ͜Μͳϒϩά ٕͬͨज़ελοΫʹ͍ͭͯ +".TUBDLͱͳΜͧ ೋؒͰ࡞Δͧʂ
ࣗݾհ
ࣗݾհ ࡔ্ྤҰ 5XJUUFS!3ZVJDIJ4BLBHBNJ ౦ژཧՊେֶֶ෦ใֶՊ̏ ݄ ࡀ ࡾॏग़ ϑϩϯτΤϯυେ͖ΤϯδχΞ
ࣗݾհ αΠόʔͷΠϯλʔϯͰͬͨ͜ͱ &OHJOFFS+PCʢ̍ϲ݄ͪΐ͍ʣ "CFNF57ϑϩϯτΤϯυνʔϜ ݹ͘ͳ͍ͬͯͨը໘ͷશ໘վम 3FBDUKT SYKT
͜Μͳϒϩά✍
͜Μͳϒϩά IUUQTTIBHBNJJUFDI
͜Μͳϒϩά ͳΜͰ࡞͔ͬͨʜ ब׆ʂ Կ͔ݟͤΕΔͷཉ͍͠ ٕज़తؔ৺ ύϑΥʔϚϯεͷؔ৺
͜Μͳϒϩά ٕͬͨज़ +".TUBDL HBUTCZ DPOUFOUGVM OFUMJGZ
+".TUBDLͱͳΜͧ
+".TUBDLͱͳΜͧ Modern web development architecture based on client-side JavaScript, reusable
APIs, and prebuilt Markup. IUUQTKBNTUBDLPSH
+".TUBDLͱͳΜͧ Ҿ༻ݩɿIUUQTKBNTUBDLPSH
+".TUBDLͱͳΜͧ Any dynamic programming during the request/response cycle is handled
by JavaScript, running entirely on the client. This could be any frontend framework, library, or even vanilla JavaScript. +BWB4DSJQU ಈతʹϦονͳಈ͖Λ͢ΔͨΊͷKBWBTDSJQU
+".TUBDLͱͳΜͧ All server-side processes or database actions are abstracted into
reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services. "QJT αʔόʔαΠυ࠶ར༻Մೳͳ"1*ͷΈ
+".TUBDLͱͳΜͧ Templated markup should be prebuilt at deploy time, usually
using a site generator for content sites, or a build tool for web apps. .BSLVQ ੩తαΠτͳͲʹࣄલʹίϯςϯπϏϧυ
+".TUBDLͱͳΜͧ αʔόʔʹϦΫΤετΛඈͯ͠ɺIUNMΛੜ͢ΔΈ Ͱͳ͘ɺ ίϯςϯπɾݟͨࣄલʹϏϧυ͓͖ͯ͠ɺ αʔόʔαΠυඞཁͳใΛऔͬͯ͘Δ"QJ܈Λ༻ҙ͠ɺ ͦΕΒΛಈతʹಈ͔ͨ͢ΊʹKBWBTDSJQUΛ༻͍Δɻ ͭ·Δͱ͜Ζʜʢͷղऍʣ
+".TUBDLͱͳΜͧ Կ͕͍͍ͷ͔ Ϗϧυͨ͠ͷΛDEO্ʹIPTUJOH͓͚ͯ͠ΔͷͰ͍ ϦΫΤετΛड͚ΔͨͼʹαʔόʔαΠυͰෳࡶͳॲཧΛ͢Δ͜ͱ͕ ͳ͍ͨΊɺ҆ՁͰεέʔϥϒϧɻ جຊతʹɺαʔόʔαΠυΛҙࣝ͢Δඞཁ͕ͳ͍ͷͰɺϑϩϯτΤϯυ ͷ։ൃʹूதͰ͖Δ
ٕͬͨज़ελοΫʹ͍ͭͯ⚒
ٕͬͨज़ελοΫʹ͍ͭͯ HBUTCZKT 3FBDUͷ੩తαΠτδΣωϨʔλʔ $POUFOUGVMͳͲͷ$.4ͷ࿈ܞͳͲ༷ʑͳϓϥάΠϯ 18"ରԠ SFBDUIFMNFU 5ZQFTDSJQU (SBQIRMʹΑΔσʔλऔಘ ࣍ͷϖʔδͷσʔλΛ1SFGFUDI &UDʜ
ٕͬͨज़ελοΫʹ͍ͭͯ ੩తͳ3FBDUͬͯͳΜͶΜ Ϗϧυ࣌ ੩తͳIUNM ੩తͳKTPO FUDʜ ΞΫηε࣌ ࠷ॳ੩తͳIUNM ͦΕҎ߱KTPOΛGFUDI͢Δ41"
ٕͬͨज़ελοΫʹ͍ͭͯ 18" 1SPHSFTTJWF8FC"QQTͷུ (PPHMF͕ओʹࡦఆ͢ΔɺXFCϖʔδʹ͓͍ͯωΠςΟϒͷΑ͏ͳ69ମݧ Λ࣮ݱ͢Δٕज़ )PNFը໘ΞΠίϯͷՃ ΩϟογϡʹΑΔΦϑϥΠϯͰͷಈ࡞ 1VTI௨ ࠓճͳ͠ &UDʜ
IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFC BQQTDIFDLMJTU
ٕͬͨज़ελοΫʹ͍ͭͯ 18"
ٕͬͨज़ελοΫʹ͍ͭͯ $POUFOUGVM )FBEMFTT$.4 ߘͷϞσϧΛఆٛ͢Δ͚ͩͰهࣄ͕ॻ͚Δ هࣄಉ࢜ͷ࿈ܞ༻ҙ HBUTCZʹDPOUFOUGVM͔ΒσʔλΛऔͬͯ͘ΔϓϥάΠϯ /FUMJGZͷฤू࣌ͷϑοΫ
ٕͬͨज़ελοΫʹ͍ͭͯ /FUMJGZ ੩తαΠτΛϗεςΟϯά ಠࣗυϝΠϯͷઃఆ HJUIVCͱ࿈ܞͯ͠Ϗϧυ IUUQରԠ &UDʜ
ٕͬͨज़ελοΫʹ͍ͭͯ ࠓճͷ߹ KBWBTDSJQU "QJT NBSLVQ 3FBDUKT (BUTCZ $POUFOUGVM /FUMJGZ $POUFOUGVM
/FUMJGZ (BUTCZ
ٕͬͨज़ελοΫʹ͍ͭͯ ύϑΥʔϚϯεܭଌʢ-JHIUIPVTFʣ (PPHMF͕ఏڙ͢ΔΣϒαΠτΛղੳͯ͠ɺ࣭ʹؔ͢Δ ࢦඪ্ͷͨΊͷରࡦΛࣔͯ͘͠ΕΔ044
ೋؒͰ࡞Δͧʂ
ೋؒͰ࡞Δͧʂ $POUFOUGVMͰ"1*Λ࡞Δʢʣ ΞΧϯτొʢ̑ʣ .PEFMΛ࡞Δʢʣ
ೋؒͰ࡞Δͧʂ (BUTCZͰ3FBDUΛΰϦΰϦॻ͘ʢ̍ʣ CPJMFSQMBUFΛੜʢ̑ʣ DPOUFOUGVMपΓͷϓϥάΠϯΛೖΕΔʢʣ σʔλशಘͷHSBQIRMΛॻ͘ʢʣ
ೋؒͰ࡞Δͧʂ هࣄϖʔδͳͲಈతʹੜ͍ͨ͠ϖʔδͷઃఆΛHBUTCZOPEFKT ʹॻ͘ʢʣ ͋ͱඞཁʹԠͯ͡ϓϥάΠϯΛೖΕͭͭɺ3FBDUΛΰϦΰϦॻ͘ɻ
ೋؒͰ࡞Δͧʂ /FUMJGZʹσϓϩΠ͢Δʢʣ ΞΧϯτొʢ̑ʣ Ϗϧυ͢ΔϨϙδτϦͷొɺڥมɺϏϧυίϚϯυͷઃఆʢʣ ΧελϜυϝΠϯͷઃఆʢʣ
·ͱΊ☀
·ͱΊ ΈΜͳ͓Ոؼͬͯ࡞ͬͯͶʂ ਫ༵ʹσϓϩΠྃͯ͠Δͣ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
More Decks by Shagamii
See All by Shagamii
開発から運用まで Muddy に向き合う ABEMA における LP CMS 開発 ~ Muddy Web #7
ryuichisakagmai
1
340
学生エンジニア、 ドキドキ初OSSコミットへの挑戦🎉
ryuichisakagmai
0
710
Other Decks in Programming
See All in Programming
Crash Auto Pipelines
veronikapj
1
410
エージェントを使い続けるためのメタワーク / Meta-work for keeping using the agent
rkaga
6
2.3k
社内AIエージェント「Askワンバン」における コストチューニングの取り組み
t0yohei
0
170
プロジェクトコードをキレイキレイしよう!暗黙的な参照を読み解く静的解析
ostk0069
0
210
AI時代のシニアエンジニアとは
yosuke_furukawa
PRO
15
11k
TS 7.0 で baseUrl が使えなくなった今、パスエイリアスをどうするか
bicstone
2
630
AI時代のTerminal環境を UNIX哲学で設計・運用する
yasunori0418
1
350
우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다
l2hyunwoo
0
260
React Native経験者が Flutterを30⽇間触って驚いたこと
3saito
0
180
学びを記事・スライド・Xへ高速展開する― AI-assisted Learning Loopで回すコンテンツ生成術
ochtum
0
210
Seven New Principles of Software Engineering
yegor256
0
480
AIで開発が速くなった先で、開発チームは何を目指すか
shihochan
1
2k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
33
5.7k
Git: the NoSQL Database
bkeepers
PRO
433
67k
Being A Developer After 40
akosma
PRO
92
590k
The Language of Interfaces
destraynor
162
27k
The Cost Of JavaScript in 2023
addyosmani
56
10k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.2k
GraphQLとの向き合い方2022年版
quramy
50
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
53
4k
So, you think you're a good person
axbom
PRO
2
2.3k
Six Lessons from altMBA
skipperchong
29
4.6k
The SEO Collaboration Effect
kristinabergwall1
1
620
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
400