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
s2s
Search
akameco
December 14, 2017
Technology
2
830
s2s
12/14 Nihonbashi.js #3 100star以下限定!細かすぎて伝わらない自作ライブラリ選手権。
akameco
December 14, 2017
Tweet
Share
More Decks by akameco
See All by akameco
KILL ALL HUMANS (動画なし版)
akameco
3
1.3k
Other Decks in Technology
See All in Technology
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
440
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
ハイテク休憩
sat
PRO
2
140
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
190
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
150
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
480
プロダクト開発を加速させるためのQA文化の築き方 / How to build QA culture to accelerate product development
mii3king
1
260
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
160
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
1
180
Featured
See All Featured
KATA
mclloyd
29
14k
A better future with KSS
kneath
238
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
How GitHub (no longer) Works
holman
311
140k
Faster Mobile Websites
deanohume
305
30k
Why Our Code Smells
bkeepers
PRO
335
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
GraphQLとの向き合い方2022年版
quramy
44
13k
Transcript
s2s Source to Source
GitHubͰs2sͱ ݕࡧ͢Δͱग़͖ͯ·͢ https://github.com/ akameco/s2s
͡Ίʹ
Atomͱ teletypeΛ͍·͢ɻ ڥ͕͋Δਓ ४උΛ͍ͯͩ͘͠͞
ߏ • ࣗݾհ • σϞ 3 • എܠ • Έ
• ͦͷଞ • ϑΟʔυόοΫ 1
ࣗݾհ • ͔͋Ί( @akameco ) • ઌ݄༑ਓୡͱϨόχϥΛ৯ ʹߦͬͨΒશһΠϧεੑң ԌͰ2िؒμϯ͠·ͨ͠ •
ਐḿΛग़͢ʹԿΑΓ݈߁ ͕ඞཁͩͱΘ͔Γ·ͨ͠
ޱ಄Ͱઆ໌͢ΔΑΓ ݟͯΒ͏ํ͕ ͍ͱࢥ͍·͢ͷͰɺ ·ͣσϞ(3ఔ)Λ͠·͢
AtomͷteletypeΛ࣮ͬͯ ࡍʹίʔσΟϯά͠·͢ Atomڥ͕ͳ͍ํը໘ͷํͰ ·ͨɺಈ࡞͕ͬ͞Γͨ͠Β࿈ܞΛΓ·͢
https://youtu.be/ hPR0SCaz-Wg
എܠ • reduxϘΠϥʔϓϨʔτ͕ଟ͍ɻ • ͔͠͠อकతͳ؍ͰϚΫϩతͳղܾΛͨ͠ ͘ͳ͍(Ϗϧυ࣌babelplugin) • ͘ॻͨ͘Ί͚ͩʹ͍ͭෆཁʹͳΔ͔Θ͔Β ͳ͍ϥΠϒϥϦΛಋೖͨ͘͠ͳ͍
ͰɺͲ͏͢Δ͔ʁ • ࠓ͋Δ࣮ͷ··ɺߴʹॻ͘ • ਓؒͰݶք͕͋ΔɺϓϩάϥϜʹΑͬͯϓϩάϥϜ Λॻ͘ • ͜ΕΛίʔσΟϯάλΠϜίϯύΠϧͱ໋໊ͨ͠ • ͜ͷ͋ͨΓ͜ͷεϥΠυ͕͍ͷͰΦεεϝͰ͢
”͜Ε͔Βͷϝλϓ ϩάϥϛϯάJavaScriptͷਖ਼ٛΛޠΖ͏” by erukiti ͞Μ https:// speakerdeck.com/erukiti/meta-programming-javascript-is-justice
ۙͳΠϝʔδͩͱs2sfateͰ͍͏ͱ͜Ζͷ Өຐज़Ͱ͢
ར • ΤσΟλͷϓϥάΠϯͰͳ͍ͨΊڥͷϩοΫΠ ϯ͕ͳ͍ • λΠϙ͕ݮΔ • มߋʹڧ͍ • s2sʹै͏ݶΓ୭͕ॻ͍ͯಉ͡ग़ྗʹͳΔ
• ίʔσΟϯάͷߴԽͰ͔͠ͳ͍ͨΊs2sࣗମΛ͍ͭ ͰࣺͯΒΕΔ
Έ
v0.1~
typescriptʹରԠͯ͠΄͍͠
ϋϯυϥʔ ϑοΫ(ܗ) v0.14~ݱࡏ
ϋϯυϥʔΛಋೖ
ϋϯυϥʔΛಋೖ • ίʔυΛड͚औͬͯίʔυΛฦ͢ͱ͍͏݅Λຬ ͨؔ͢Ͱ͋ΕԿͰ͍͍ • σϑΥϧτͰɺjsͩͬͨΒBabel͕࣮ߦ͞Εɺts ͩͬͨΒBabel7+TypeScriptPlugin͕࣮ߦ͞ΕΔ • ͜ΕʹΑͬͯɺ࣮ࡍͲΜͳϑΝΠϧͰ͋ΕίʔσΟ ϯά࣌ʹॲཧ͕Մೳʹͳͬͨ(md,css,html,...)
Hookʹ͍ͭͯ • ͳͥ͜ͷඞཁ͕͋Δ͔ͱ͍͏ͱBabelͷग़ྗσ ϑΥϧτͰμϒϧίʔςʔγϣϯͩͬͨΓɺηϛί ϩϯ͕͍ͯͨΓ͢Δ͔Β • ओʹίʔυΛग़ྗͨ͠ޙͷܗΛߦ͏ • σϑΥϧτͰprettierɻϓϩδΣΫτͷrcʹै͏ •
ઌtslintʹରԠ by kamijin-fanta ͞Μ
ϓϩδΣΫτʹͲ͏ಋೖ͢Δ͔ʁ • ࣗͷϓϩδΣΫτʹಠࣗͷϓϥάΠϯΛಋೖ͍ͨ͠߹ɺ৽ͨʹ ϓϥάΠϯΛެ։͢Δඞཁͳ͘ɺs2s.config.js͔Β૬ରతʹ requireͰ͖Δ • ྫ͑ erukiti͞Μͷ https://github.com/erukiti/spike-react-redux- using-s2s
ͰscriptsσΟϨΫτϦҎԼʹϓϥάΠϯΛஔͯ͠ར ༻͍ͯ͠Δ
ͪΐ͏Ͳ͍͍νϡʔτϦΞϧʁ • cndlhvn ͞Μͷhttps://github.com/cndlhvn/s2s-redux-actions- sample ͕Φεεϝ (redux-saga + redux-actions) •
ਖ਼ެࣜͷ100ഒ͙Β͍ஸೡͳreadme͕༻ҙͯ͋͠Γެࣜͷα ϯϓϧΑΓΦεεϝ • ͦͯ͠ؾ͍ͮͨͱ͖ʹࣗΑΓcndlhvn͞Μͷํ͕s2s-plugin Λެ։ͯͨ͠ • ৽͘͠ManagerPluginͱݺΕΔ֓೦Λಋೖ͍ͯͯ͠໘ന͍
·ͱΊ
࣭ͱ͍ ϑΟʔυόοΫλΠϜ
ࠓճͷΦν teletypeΛͬͯσϞ͢Δ͜ͱͰɺAtom ʹϩοΫΠϯ͢Δ͜ͱͰڥʹϩοΫΠ ϯ͞ΕΔ͜ͱͲ͏͍͏͜ͱ͔Λ࣮ԋ͠ ͯΈ·ͨ͠ s2sʹϩοΫΠϯ͋Γ·ͤΜΑʁ Ͳ͏͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ