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
モダンWebシステム開発
Search
Naoya Ito
April 21, 2015
Technology
132
20k
モダンWebシステム開発
Qcon Tokyo2015 での発表スライド
Naoya Ito
April 21, 2015
Tweet
Share
More Decks by Naoya Ito
See All by Naoya Ito
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
19
6.1k
Functional TypeScript
naoya
15
6.3k
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
72
35k
シェルの履歴とイクンリメンタル検索を使う
naoya
16
5.8k
20230227-engineer-type-talk.pdf
naoya
90
76k
関数型プログラミングと型システムのメンタルモデル
naoya
62
110k
TypeScript による GraphQL バックエンド開発
naoya
29
35k
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
naoya
67
24k
「問題から目を背けず取り組む」 一休の開発チームが6年間で学んだこと
naoya
144
60k
Other Decks in Technology
See All in Technology
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
110
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
140
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
450
浸透しなさいRFC 5322&7208
hinono
0
120
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
130
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
6
630
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
270
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
280
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
560
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
2
310
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
12
1.9k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A better future with KSS
kneath
239
17k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
RailsConf 2023
tenderlove
30
1.2k
Code Review Best Practice
trishagee
70
19k
Transcript
Ϟμϯ8FCγεςϜ։ൃ /BPZB*UP ,BJ[FO1MBUGPSN *OD 2$PO50,:0
,BJ[FO1MBUGPSN͔Βདྷ·ͨ͠
ຊۀᲔ৫ϚωδϝϯτͰ͢ ϚΠφϏͰϚωδϝϯ τஊٛ࿈ࡌத
ຊͷͷྲྀΕ • ࡢࠓݸਓతʹؾʹͳͬͨΞʔΩςΫνϟɾ ύϥμΠϜ • ͦΕΒ֓؍ΛݟͭͭʮϞμϯ8FCγες ϜʯͷΛߟ ڞ௨ͨ͠Կ͔͕ݟ͍ͩͤ Δ͔ɺ൱͔
Ϟμϯʮεέʔϥϒϧʯͷཁ • ΫϥυωΠςΟϒ – յΕ͘͢ɺ'BJMVSF͘͢͠ɺԣʹεέʔ ϧ
Πϯϑϥ • *OGSBTUSVDUVSFBT$PEF – $IFG "OTJCMF • *NNVUBCMF*OGSBTUSVDUVSF • ίϯςφܕΫϥυ
– %PDLFS • એݴతͳγεςϜཧπʔϧ – 5FSSBGPSN 3PBEXPSLFS
ΞϓϦέʔγϣϯ • .JDSPTFSWJDFT • 3FBDU • 'VODUJPOBM3FBDUJWF1SPHSBNNJOH
݁ͱͯ͠Կ͕ݴ͍͍͔ͨ • ࡢࠓͷΞʔΩςΫνϟύϥμΠϜͷഎޙʹ͋ ΔςʔϚʮঢ়ଶʯʮґଘؔʯͱͲ͏ઓ͏ ͔ ͕ɺଟ͍ • ྑ͍ύϥμΠϜɺΞʔΩςΫνϟͦ͜ʹճ Λ͍࣋ͬͯΔ
Ϟμϯͱ͍͏͔ɺܭࢉػ ͷྺ࢙͕ͣͬͱͦ͏͍͏ ͷ͔
*OGSBTUSVDUVSFBT$PEF
*OGSBTUSVDUVSFBT$PEF • ϓϩϏδϣχϯάϑϨʔϜϫʔΫ – $IFG – 1VQQFU – "OTJCMF
αʔόʔͷʮঢ়ଶʯ ґଘؔ • ͋Δೲ͞Εͨ3BJMTαʔόʔ – 9݄9ʹ%/4ΩϟογϡΛઃఆͨ͠ – :݄:ʹϓϩηεΛνϡʔχϯάͨ͠ –
;݄;ʹSVCZͷόʔδϣϯΛ্͛ͨ – ŋŋŋ ͍Ζ͍Ζ܁Γฦ͠ • ͜ͷαʔόʔʹৼΓʹΞϓϦΛσϓϩΠ – Ռͨͯ͠σϓϩΠਖ਼͘͠ऴΘΔͷ͔
$IFG αʔόʔͷ͋Δ͖ঢ়ଶ Λએݴతʹهड़͢Δ
ঢ়ଶ͕ίʔυʹͳΕ͋Δ͖ঢ়ଶ ͷऩଋࣗಈԽͰ͖Δ
ঢ়ଶΛهड़͢Δ • ϓϩϏδϣχϯά'8ΛͲ͏ݟΔ͔ – ηοτΞοϓͷࣗಈԽ ŋŋŋ͜Εݶఆత – ຊ࣭ŋŋŋঢ়ଶͷ એݴతͳ هड़ ͦΕ·Ͱهड़͞Ε͍ͯͳ ͍͕ͨΊʹϓϩάϥϜ͔
ΒऔΓѻ͏͜ͱ͕Ͱ͖ͳ ͔ͬͨͷ
Ͳ͔ͬͰݟͨͧ • #VOEMFS – εΫϦϓτݴޠʹ͓͚ΔϥΠϒϥϦͷґଘؔ ͋Δ͋Δ
#VOEMFSҎલ • HFNJOTUBMMGPPCBS – άϩʔόϧͳྖҬʹΠϯετʔϧ – ΞϓϦέʔγϣϯͷಈ࡞ʹඞཁͳHFN͕Կ ͔໌ࣔతʹ͔Βͳ͍ – HFN͕૿͑Δ㱺ϑΝΠϧγεςϜΛίϐʔ ͢ΔҎ֎ͷํ๏ͰڥΛ࠶ݱ͢Δͷ͕ࠔʹ
#VOEMFS
#VOEMFSޙ • ঢ়ଶͷ એݴతͳ هड़ – ඞཁͳHFNΛ(FNpMFʹએݴ – ಉ͡ߏΛ࠶ݱՄೳʹ • ϕετϓϥΫςΟε – /PEFͷOQN
1FSMͷDQBOpMF
ͱ͍ɺ*OGSBTUSVDUVSFBT$PEF • ͜Ε·Ͱҙࣝ͞Εͯ͜ͳ͔ͬͨʮঢ়ଶʯʮґଘؔʯ Λهड़͢Δ • ႈੑ ͖ͱ͏ੑ – ͋Δૢ࡞Λճߦͬͯෳճߦͬͯ݁Ռ͕ಉ͡Ͱ͋Δ͜
ͱ 8JLJQFEJB – ಉ͡ߏͷϊʔυΛ͍ͭͰ࠶ੜ࢈Ͱ͖Δ ݁ՌɺյΕ͘͢ɺԣʹ εέʔϧ͢Δڥʹద߹
αʔόʔཧNFFUT(JU • αʔόʔͷঢ়ଶ͕ͯ͢ίʔυͰهड़Ͱ͖ ͨͳΒɺ(JUͰཧ͢Εྑ͍
ΠϯϑϥNFFUT(JUIVC ΠϯϑϥQVMMSFRVFTUɺίʔυϨϏϡʔ
ΠϯϑϥΛςετŋŋŋ4FSWFSTQFD
NBTUFSʹมߋ QVMMSFRVFTU͕ NFSHF͞ΕΔ $JSDMF$*͕ͦΕ Λݕͯ͠ɺίʔυ Λ(JU)VC͔Βऔಘ &$ʹରͯ͠ $JSDMF$*͔Β$IFG
ద༻ มߋ͕ө͞Ε Δ Πϯϑϥ$*ΛىʹσϦόϦʔ
3PBEXPSLFS hosted_zone "winebarrel.jp." do rrset "winebarrel.jp.", "A" do
ttl 300 resource_records( "127.0.0.1", "127.0.0.2" ) end rrset "winebarrel.jp.", "MX" do ttl 300 resource_records( "10 mx.winebarrel.jp", "10 mx2.winebarrel.jp" ) end end $ roadwork -‐-‐apply %/4ϨίʔυΛએݴతʹ هड़
5FSSBGPSN resource "aws_instance" "dev001_foobar_net" { ami
= "ami-‐xxxxxxxx" instance_type = "t2.micro" key_name = "xxxxxxxxxxxxxxxx" security_groups = ["sg-‐xxxxxxxx"] subnet_id = "subnet-‐xxxxxxxx" tags { Name = "dev001.foobar.net" Role = "common" Service = "operator" Env = "dev" } } $ terraform apply Πϯϑϥ Πϯελϯε ωοτϫʔΫ ߏΛએݴ తʹهड़
NBTUFSʹมߋ QVMMSFRVFTU͕ NFSHF͞ΕΔ $JSDMF$*͕ͦΕ Λݕͯ͠ɺίʔυ Λ(JU)VC͔Βऔಘ "84ʹରͯ͠ $JSDMF$*͔Β
SPBEXPSLFS UFSSBGPSNΛద༻ มߋ͕ө͞Ε Δ (JU)VCͰཧ͠$*Ͱద༻
એݴతͳγεςϜཧπʔϧ • 5FSSBGPSN3PBEXPSLFSŋŋŋϓϩϏδϣ χϯά'8ͱൃಉ͡ – ঢ়ଶΛએݴతʹهड़ – ݁ՌɺϓϩάϥϚϒϧ͔ͭಉҰͷϫʔΫϑϩʔʹ
ঢ়ଶΛ͏·͘ѻ͏ • ঢ়ଶΛ͏·͘ѻ͏ͱ༷ʑͳԸܙ – ࠶ݱՄೳੑ ϙʔλϏϦςΟ – ςελϏϦςΟ – Ϋϥυͷద߹ – ΑΓϓϩάϥϚϒϧʹ ͬ͘͟Γݴ͏ͱ
ʮεέʔϥϒϧʯ
*NNVUBCMF *OGSBTUSVDUVSF
ঢ়ଶΛཧ͠ͳ͍ • ϓϩϏδϣχϯά'8ঢ়ଶΛదʹهड़͢Δ ͜ͱΛࢦͨ͠ – ·ͣ·͢ޭͨ͠ • ͦͦঢ়ଶΛཧ͠ͳ͍ͱ͍͏ߟ͑ํͳ͍ ͷ͔
– 㱺*NNVUBCMF
*NNVUBCMF*OGSBTUSVDUVSF • %JTQPTBCMF$PNQPOFOUT • ෆมͳɺঢ়ଶΛ࣋ͨͳ͍ɺഇغՄೳͳ
*NNVUBCMFͱ͍͏ߟ͑ํ • ϓϩάϥϛϯάͰѻΘΕΔ֓೦ – ʮ*NNVUBCMFͳσʔλߏʯ – جຊతʹ ྑ͍࡞๏ ؔܕϓϩάϥϛϯά ʹ͓͚Δࢀরಁ໌ʹ ܨ͕Δߟ͑ํ
#MVF(SFFO%FQMPZNFOU
)FSPLV )FSPLVHJUQVTI͢Δຖɺ৽͍͠ڥ ίϯςφ Λ࡞Γɺݹ͍ڥΛغͯΔ
5SBWJT$* 5SBWJT$*ςετΛ࣮ߦ͢ΔͨͼɺίϯςφΛ࡞ΓऴΘͬͨΒغͯΔ
*NNVUBCMFΛ੍ʹ • มߋŋŋŋغͯͯ৽͍͠ͷΛ༻ҙ͢Δ – ݁ՌతʹɺΑΓغͯ͘͢ɺΑΓ࠶ݱ͢͠ ͍γεςϜʹ յΕ͘͢ɺԣʹεέʔ ϧ͢ΔڥʹΑΓద߹
*NNVUBCMFʙΛࢧ͑Δٕज़ ίϯςφ
%PDLFS
None
https://speakerdeck.com/jbeda/containers-at-scale
*NNVUBCMF ʮΞϓϦέʔγϣϯίʔ υʯ͕Քಇ͢Δॴ
ύλʔϯ • ϞμϯΠϯϑϥʹ͓͚Δঢ়ଶͷѻ͍ – ঢ়ଶΛهड़͠ཧՄೳʹ͢Δ – ෆมΛલఏʹɺঢ়ଶΛཧ͠ͳ͍ • มߋŋŋŋݹ͍ഁغɺ৽͍͠ͷΛ༻ҙ ಘΒΕΔͷ εέʔϥϏϦςΟ
.JDSPTFSWJDFT
.JDSPTFSWJDFT • Ұ࿈ͷখ͞ͳαʔϏεͰͭͷΞϓϦέʔγϣ ϯΛ։ൃ͢Δख๏ – ಠཱͨ͠খ͞ͳίϯϙʔωϯτ͕)551"1*Ͱ௨৴ – 㲈40"ɺͨͩ͠6/*9ͷσβΠϯʹ͍ۙ
source: Scaling with Microservices and Ver6cal Decomposi6on h:p://dev.o:o.de/2014/07/29/scaling-‐with-‐microservices-‐and-‐ver6cal-‐decomposi6on/
ͳͥ.JDSPTFSWJDFT • ϞϊϦγοΫͰͬͯ͘ΔͱͭΒ͍ – UZQP͢ͷʹશମϏϧυσϓϩΠ – ͋ͦ͜มߋͨ͠Β༧֎ͷͱ͜Ζ͕յΕͨ – "1*͚ͩεέʔϧ͍ͤͨ͞ͷʹશ෦ల։
• ಠཱͨ͠։ൃɾσϓϩΠαΠΫϧΛ֫ಘ͍ͨ͠ – ૄ݁߹ – ৫ͷಠཱੑΛߴΊΔ See Also: "Microservices"を読んだ h:p://deeeet.com/wri6ng/2014/09/10/microservices/
.JDSPTFSWJDFTͷΞϓϩʔν • ӨڹൣғΛہॴԽ͢Δ – 㲈ঢ়ଶΛؔ͋Δ෦͚ͩʹӅṭ͢Δ ͜Εܧଓతʹอक͍ͯ͠ ͘γεςϜʹ͓͚Δʮঢ় ଶʯͷऔΓѻ͍ͷઓུͱ ݴ͑Δ
.JDSPTFSWJFTͱ*NNVUBCMF *OGSBTUSVDUVSF • .JDSPTFSWJFTԽʹΑͬͯͻͱͭͷγεςϜ୯Ұͷ ׂͷίϯϙʔωϯτʹ • %PDLFSͳͲͷίϯςφΤϯδϯ୯Ұͷׂͷίϯ ϙʔωϯτ͕ڠௐಈ࡞͢ΔઃܭΛલఏ – º'BUͳ%PDLFSΠϝʔδ
– ˓ҰͭͷׂΛ୲͏%PDLFSΠϝʔδ .JDSPTFSWJDFTʹΑΓঢ়ଶ ͷӨڹൣғΛہॴԽ͠ɺͦ ͷΠϯϑϥෆมͳͷͱ ͠ɺಠཱੑΛߴΊΔ
ಘΒΕΔͷ • ίϯϙʔωϯτͷಠཱੑ – ։ൃαΠΫϧ – σϓϩΠαΠΫϧ – ͦΕ͚ͩͰεέʔϦϯά Γ ʮεέʔϥϒϧʯ
3FBDU
3FBDU
3FBDUKT • 'BDFCPPL • ࠒʹൃද • +BWB4DSJQUͷ7JFXϥΠϒϥϦ • ࠒ͔Βʹ
K2VFSZ ໋ྩతͳ%0.ૢ ࡞ίʔυ܈
%0.ૢ࡞ • %0.ૢ࡞ͷ͠͞ – %0.͕ঢ়ଶΛ͍࣋ͬͯΔ – άϩʔόϧ – ඇಉظ • ໋ྩతͳίʔυ ͍ͭɺͲ͔͜Βॻ͖ ͑ΒΕΔ͔Θ͔Β
ͳ͍ঢ়ଶΛؒҧ͍ͳ ͘ཧ͠ͳ͚Εͳ Βͳ͍
3FBDU σʔλϞσϧͷ ঢ়ଶʹมߋΛ௨ એݴతʹఆٛ͞ Εͨ%0.ߏ͕ Α͠ͳʹ࠶ඳը
એݴత • ໋ྩత – $16ʹର͢Δ໋ྩͷखଓ͖Λॻ͘ – ίϚϯυΛ༩͑Δ • એݴత
– ࣮ݱ͍ͨ͜͠ͱͦͷͷΛهड़͢Δ – ͋Δ͖ঢ়ଶΛఆٛɺؔੑͷهड़FUD see also: 宣言的プログラミングの「宣言的」って? h:p://d.hatena.ne.jp/sh-‐2/20091006/1254847253 ᐆດ͔ͭ૬ର తͳݴ༿Ͱ͋Δ ͷͷ
3FBDU໋ྩతˠએݴత • ໋ྩతͰ͋ͬͨ7JFXͷΈཱͯ %0.ૢ࡞ Λɺ એݴతͳύϥμΠϜʹ • ʮσʔλϞσϧʹมߋ͕͋ͬͨΒ%0.Λؙ͝ ͱߋ৽ʯ –
αʔόʔαΠυ – ඇޮͳ෦7JSUVBM%0.͕ղܾ ϑϩϯτΤϯυ6*։ൃΛɺ αʔόʔαΠυͱಉ͡ ߽తϓϩάϥϛϯάελ Πϧʹ͢
7JSUVBM%0. • 3FBDUͷόοΫΤϯυʹ͋Δ %0.ߏΛநԽͨ͠σʔλ ߏ • σʔλϞσϧͷঢ়ଶมԽʹ߹Θ ͤͯ7JSUVBM%0.ͷલޙͷ EJ⒎Λࢉग़ •
ੜ%0.࠶ඳըΛࠩͷ͋ͬͨ Օॴ͚ͩߦ͏ source: React’s diff algorithm h:p://calendar.perfplanet.com/2013/diff/
3FBDU͕ୡͨ͜͠ͱ • 6*։ൃʹ͓͚Δঢ়ଶཧ͔Βͷղ์ • ൃ໌ – 7JSUVBM%0. – εςʔτϨείϯϙʔωϯτΛ࣮ݱ͢Δσʔ λϑϩʔ
'MVY
'MVY • 3FBDU7JFX͚ͩ • 'MVYϞσϧ 4UPSF ΛؚΊͨΞϓϦέʔ γϣϯશମͷΞʔΩςΫνϟ – ॲཧͷهड़ॴΛఆΊΔ
– σʔλϑϩʔΛఆΊΔ • ΠϕϯτͷґଘؔͷෳࡶੑΛղফ – ΠϕϯτσʔλϑϩʔͷํΛҰํ௨ߦʹ͢Δ
3FBDU/BUJWF • 3FBDUͱಉ͡࡞๏ͰJ04"OESPJE • -FBSO0ODF 8SJUF"OZXIFSF
None
'31 'VODUJPOBM3FBDUJWF 1SPHSBNNJOH
ϦΞΫςΟϒϓϩάϥϛϯά • ͱͱҎԼͷΑ͏ͳ֓೦ – σʔλͷྲྀΕΛ௨ͯ͡มߋΛൖ – σʔλͷྲྀΕʹԠ – 㱺ΠϕϯτۦಈɺΦϒβʔόʔɺ"DUPSɺ'VUVSF •
ٛͷɺڱٛͷŋŋŋ͕͋Δ – ֦େղऍ͠Α͏ͱ͢ΔͱͲ͜·Ͱ͍͚Δ ཁҙ – ݸਓతʹ'31ͷจ຺Ҏ֎Ͱ͋·Γݴٴ͠ͳ͍Α ͏ʹ͍ͯ͠Δ
ʮ3FBDUJWFͬΆ͍ʯͱ • σʔλϑϩʔΛએݴతʹѻ͏ – σʔλͷؔੑΛએݴతʹද͍ͯ͠Δ͔ source: Reac6ve Programming in JavaScript
h:p://ahomu.github.io/s/150221-‐frontrend_conference/#39
'VODUJPOBM3FBDUJWF 1SPHSBNNJOH • ؔܕ ϦΞΫςΟϒ • )BTLFMMˠ$ -*/2ˠ3Y • ͦͷޙ
– 3Y+BWB – 3FBDUJWF$PDPB – 3Y+4 #BDPOKT –
ྫ ͱԡ͢ͱ Λԡ͢ͱ
໋ྩతʹॻ͘ • ΧϯλมΛ༻ҙ • ॳظΛඳը • Ϙλϯ͕ԡ͞ΕͨΒΧϯλΛ ͯ͠࠶ඳ ը •
Ϙλϯ͕ԡ͞ΕͨΒΧϯλΛͯ͠࠶ඳը
None
σʔλϑϩʔʹண͢Δ + + + + ·ͣɺ ϘλϯͷΫϦοΫΠϕϯτΛ࣌ܥྻʹԊͬͯྲྀΕͯ͘ΔϦετ ετϦʔϜޙड़ ͱߟ͑Δɻ ΠϕϯτετϦʔϜΛྲྀΕΔͱΈͳͤΔ
+ + + + ϚΠφεϘλϯಉ༷ʹߟ͑Δ -‐ -‐
+ + + + ϘλϯΠϕϯτɺ ͢Δ͜ͱɻ Ώ͑ʹͱ͍͏ʹม 5SBOTGPSN ͯ͠ΈΔ 1
1 1 1
ϘλϯΠϕϯτɺ͢Δ͜ͱɻ Ώ͑ʹͱ͍͏ʹม 5SBOTGPSN ͯ͠ΈΔ -‐ -‐ -‐1 -‐1
1 1 1 1 -‐1 -‐1 1 1 1 1
-‐1 -‐1 ;ͨͭͷΠϕϯτඇಉظʹࠞͬͯ͟ಧ͘ͷͰ͋Δ Ώ͑ʹೋͭͷετϦʔϜΛϚʔδ͢Δ
1 1 1 1 -‐1 -‐1 1 1 2 0
1 2 Ϛʔδ͞ΕͨετϦʔϜΛɺҰͭલͷͱͷࢉज़݁Ռʹม
1 1 2 0 1 2 ͕มԽ͢Δຖʹը໘Λ࠶ඳը ෭࡞༻
'31XJUI#BDPOKT
+ + + + Bacon.fromEvent(plusButton, 'click')
+ + + + -‐ -‐ Bacon.fromEvent(minusButton, 'click')
+ + + + 1 1 1 1 plusClickStream.map(1)
-‐ -‐ -‐1 -‐1 minusClickStream.map(-‐1)
1 1 1 1 -‐1 -‐1 1 1 1 1
-‐1 -‐1 plusStream.merge(minusStream)
1 1 1 1 -‐1 -‐1 1 1 2 0
1 2 bothStream.scan(0, (x + y) => x + y)
1 1 2 0 1 2 counterBus.onValue( /* ը໘ඳը */)
ͳΜ͔ͩΘ͔ͬͨΑ͏ͳ Θ͔Βͳ͍Α͏ͳŋŋŋ
ࠓճͷจ຺Ͱݴ͑ ண͖͢ʮετϦʔϜʯ
source: Reac6ve Programming in JavaScript h:p://ahomu.github.io/s/150221-‐frontrend_conference/#39
ඇಉظσʔλετϦʔϜ • શͯͷσʔλϑϩʔΛετϦʔϜͱͯ͠ѻ͏ – ୯Ұͷɺෳͷɺ1SPNJTF • ετϦʔϜΛϦετͱΈͳ͢ • Ϧετૢ࡞㱺ؔܕͷΠσΟΦϜͰૢ࡞Ͱ͖Δ •
ؔܕ – એݴత – ୈڃߴ֊ؔ – ࢀরಁ໌͔ͭ෭࡞༻Λආ͚Δ ہॴԽ͢Δ
ࢥߟͷྲྀΕ • ʮ࣌ؒͱڞʹมԽ͢Δͷσʔλܕ͕ཉ͍͠ʯ • 㱺ετϦʔϜΛಋೖ • 㱺Πϕϯτඇಉظॲཧ·ͰετϦʔϜʹ – ʮ͋Εɺશ෦ετϦʔϜͰѻ͑Δ͡Όͳ͍ ʯ
• 㱺શͯΛ౷Ұ͞ΕͨετϦʔϜͱ͍͏ΠϯλϑΣʔεͰ • 㱺ϦετΏ͑ʹؔܕͷΠσΟΦϜɺύϥμΠϜ – ʮϦετૢ࡞Ͱ͢ΔͳΒؔܕ͕Ԡ༻Ͱ͖Δ͡Όͳ͍ʯ • 㱺෭࡞༻Λආ͚ͨએݴతͳهड़ • 㱺ࢀরಁ໌ঢ়ଶཧ͔Βͷղ์
"OESPJEJ04Ͱ3FBDUJWF • 3Y+BWB3FBDUJWF$PDPBͷྲྀߦ • ͨͩ͠ɺ'31Λਖ਼໘͔Βಋೖ͢ΔͷͰͳ͘ศརͳϥ ΠϒϥϦͱͯ͠ݶఆతʹಋೖ͢Δͱ͜Ζ͔Β࢝ΊΔྫΛ Α͘Έ͔͚Δ – ศརͳίϨΫγϣϯૢ࡞ϥΠϒϥϦͱͯ͠ –
.77.ͷσʔλόΠϯσΟϯά࣮ͱͯ͠
·ͱΊ
τϨʔυΦϑ ྫ • *OGSBTUSVDUVSFBT$PEFֶशίετ • *NNVUBCMF*OGSBTUSVDUVSFڥߏஙίετ • .JDSPTFSWJDFTϞϊϦγοΫΑΓܥશମͷෳࡶੑ૿ ͢
• 3FBDUKTίʔυྔ૿͑Δ • '31ֶशίετ
εέʔϥϒϧŋŋŋঢ়ଶΛͲ͏ѻ͏͔ • എܠ – ࣌ͷཁ • ΫϥυωΠςΟϒ • ඇಉظͳΞϓϦέʔγϣϯ •
࣌ؒͱڞʹԿ͔ͱෳࡶԽ͍͢͠8FCγεςϜ • ࢧతͳϑΝΫλʔঢ়ଶͷѻ͍ – Ӆṭ – એݴతʹهड़ – *NNVUBCMF େنτϥϑΟοΫ ͔ͩΒɺͱ͍͏ͩ ͚Ͱͳ͘ͳ͖ͬͯͯ Δ
·ͱΊ • ۙݸਓతʹணͨ͠τϨϯυΛΈͨ – *OGSBTUSVDUVSFBT$PEF – *NNVUBCMF*OGSBTUSVDUVSF – .JDSPTFSWJDFT –
3FBDU – 3FBDUJWF1SPHSBNNJOH • ෳࡶੑͷରࡦͱͯ͠ͷঢ়ଶཧख๏ʹύλʔ ϯ͕ݟ͍ͩͤΔ
13࠾༻ͯ͠·͢ ʮ,BJ[FO࠾༻ʯͰݕࡧɻڵ ຯ͋Δ͚ͩͰՄɻͦͷ ߹8BOEUFEMZͰ