Everything of Front-end in seeds company

SEEDS COMPANY のフロントエンド事情のお話です。

2018/02/22 に以下で発表した内容です。

【 ヒカ☆ラボ 】キッキャッ！APIだらけの新サービス開発裏舞台！（全部見せます）
https://atnd.org/events/94367

Transcript

1. ϑϩϯτΤϯυͷ࿩ 4&&%4
   $0.1"/:
   ෱ాɹ߁෉
2. ΞδΣϯμ w 9ϓϩδΣΫτνʔϜͷϑϩϯτࣄ৘
   w 6*αʔόʔߏ੒
   w ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
   w ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠
3. 9ϓϩδΣΫτνʔϜ ͷϑϩϯτࣄ৘
4. 9ϓϩδΣΫτνʔϜͷϑϩϯτࣄ৘ ϑϩϯτΤϯδχΞ
   ೋਓʢࢲ
   ʴ
   ΋͏Ұਓʣ 4&&%4
   $0.1"/: 9ϓϩδΣΫτνʔϜ
   
   ৽αʔϏε։ൃνʔϜ ΫϦΤΠςΟϒνʔϜ
   
   σβΠφʔνʔϜ 
   ΤϯδχΞ
   ৽αʔϏεͷσβΠϯ୲౰ 9ϓϩδΣΫτνʔϜͷϑϩϯτࣄ৘
5. 6*αʔόʔߏ੒
6. 6*αʔόʔ UIαʔόͷ໾ׂ • ηογϣϯ؅ཧ • ϩάΠϯঢ়گʹԠͯ͡ɺରԠ͢Δ࠷௿ݶͷpageͱjsΛϒϥ΢βʹฦ͢ • ΫϥΠΞϯτ͔Βड͚औͬͨAPIΛϚΠΫϩαʔϏεʹૹͬͯɺ ɹɹϚΠΫϩαʔϏε͔Βड͚औͬͨ஋Λϒϥ΢βʹฦ͢ UIαʔόͷ࢖༻ٕज़ • Express - Node.js • pm2 • redis ίί 6*αʔόʔߏ੒
7. ϑϩϯτΤϯυ ίί 6*αʔόʔߏ੒
8. ϑϩϯτΤϯυͷ
   ϑϨʔϜϫʔΫɾΞʔΩςΫνϟ
   બఆ
9. ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
10. ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ϝϦοτ
    ɾར༻ऀ͕ଟ͍
    
    ࠓޙϑϩϯτΤϯδχΞΛ
    
    
    
    
    ࠾༻ͨ࣌͠ͷֶशίετ͕খ͍͞
    σϝϦοτ
    ɾଞͷ'8ͱൺ΂Δͱ੍໿͕ݫ͍͠ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
11. ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ଞ
    ɹͪΌΜͱௐ΂Δ͕࣌ؒͳ͔ͬͨ
    ϝϦοτ
    ɹɾ3FBDU΄Ͳ੍໿͕ݫ͘͠ͳͦ͞͏
    ɹɾ૒ํ޲όΠϯυ͕؆୯Ͱศརͦ͏
    σϝϦοτ
    ɹɾ੍໿͕গͳ͍෼ɺίʔυ͕ଐਓԽͦ͠͏
    ɹɾ"OHVMBS
    ͸5ZQF4DSJQU͕σϑΝΫτ
    ɹɹʢ͜Ε͸޷Έ͔ʣ
    ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
12. ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ͕ศར ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
13. ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ɾར༻ऀଟ͍͠υΩϡϝϯτ΋ଟ͍
    ɾͰ͖ͳ͍͜ͱ΋ͳͦ͞͏
    ɾ3FBDU
    
    3FEVY
    PS
    'MVY
    ͰΑͦ͞͏
    ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
14. ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ 3FBDU
    ͸
    7JFXͷϥΠϒϥϦ ϑϨʔϜϫʔΫ
    ͜Ε͚ͩͰ৭ʑ΍Ζ͏ͱ͢Δͱେม -JTU1BHF
    
    
    
    
    ᵓ
    4FBSDI#PY
    
    
    
    
    ᴹ
    
    
    ᵓ
    *OQVU
    
    
    
    
    ᴹ
    
    
    ᵋ
    #VUUPO
    
    
    
    
    ᵋ
    -JTU
    
    
    
    
    
    
    
    
    ᵋ
    -JTU*UFN onClickHandler onChangeHandler onChangeHandler onClickHandler items item 3FBDU
    ࣮૷ྫ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
15. ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ 'BDFCPPL͕ఏএ͍ͯ͠Δ
    ΞʔΩςΫνϟ 'MVYͷ೿ੜ
    'MVY
    6UJMTΑΓগ͠େֻ͔Γ ϑϨʔϜϫʔΫબఆ ※ը૾ग़యɿUNIDIRECTIONAL USER INTERFACE ARCHITECTURES 'MVY
    6UJMT
16. ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ͭͷTUBUFͰ؅ཧ͢Δ -JTU1BHF
    
    
    
    
    ᵓ
    4FBSDI#PY
    
    
    
    
    ᴹ
    
    
    ᵓ
    *OQVU
    
    
    
    
    ᴹ
    
    
    ᵋ
    #VUUPO
    
    
    
    
    ᵋ
    -JTU
    
    
    
    
    
    
    
    
    ᵋ
    -JTU*UFN state 3FBDU
    
    3FEVY
    ࣮૷ྫ onChange = dispatch(changeAction()) onClick = dispatch(clickAction()) Actions Props ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
17. ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ͭͷTUBUFͰ؅ཧ͢Δ
    ։ൃ࣌ʹศར SFEVYMPHHFS
    NJEEMFXBSF ίί 3FBDU 3FEVY
    ʹܾఆʂ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
18. ίϯϙʔωϯτͷ෼ׂࢦ਑ "UPNJD
    EFTJHO
    IUUQBUPNJDEFTJHOCSBEGSPTUDPN ※ը૾ग़యɿhttp://design.dena.com/design/atomic-design-Λ෼͔ͬͨͭ΋ΓʹͳΔ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
19. ίϯϙʔωϯτͷ෼ׂࢦ਑ DPNQPOFOUT
    
    
    ᵓ
    BUPNT
    
    
    ᴹ
    
    ᵓ
    #VUUPO
    
    
    ᴹ
    
    ᵋ
    *OQVU
    
    
    ᵓ
    NPMFDVMFT
    
    
    ᴹ
    
    ᵓ
    4FBSDI#PY
    
    
    ᴹ
    
    ᵋ
    -JTU*UFN
    
    
    ᵓ
    PSHBOJTNT
    
    
    ᴹ
    
    ᵓ
    )FBEFS
    
    
    ᴹ
    
    ᵋ
    -JTU
    
    
    ᵓ
    UFNQMBUFT
    
    
    ᴹ
    
    ᵋ
    1BHF8JUI)FBEFS
    
    
    ᵋ
    QBHFT
    
    
    
    
    
    
    
    ᵋ
    -JTU1BHF )&"%&3 ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
20. ίϯϙʔωϯτͷ෼ׂࢦ਑ -&44 TUZMFT
    
    
    ᵓ
    BUPNT
    
    
    ᴹ
    
    ᵓ
    @CVUUPOMFTT
    
    
    ᴹ
    
    ᵓ
    @JOQVUMFTT
    
    
    ᴹ
    
    ᵋ
    @BMMMFTT
    
    
    ᵓ
    NPMFDVMFT
    
    
    ᴹ
    
    ᵓ
    @TFBSDICPYMFTT
    
    
    ᴹ
    
    ᵓ
    @MJTUJUFNMFTT
    
    
    ᴹ
    
    ᵋ
    @BMMMFTT
    
    
    தུ
    
    
    ᵓ
    @CBTFMFTT
    
    
    ᵓ
    @GPOUGBDFMFTT
    
    
    ᵓ
    @NJYJOMFTT
    
    
    ᵓ
    @TFUUJOHMFTT
    
    
    ᵋ
    NBJOMFTT
    import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Button as MUIButton } from 'muicss/react';
 
 function Button({ className, type = 'button', children, ...remainProps }) {
 return (
 <MUIButton
 type={type}
 className={classNames('a_button', className)}
 {...remainProps}
 >
 {children}
 </MUIButton>
 );
 }
 
 Button.propTypes = {
 type: PropTypes.string,
 className: PropTypes.string,
 children: PropTypes.node,
 };
 
 export default Button; DPNQPOFOUTBUPNT#VUUPOKTY .a_button {
 font-weight: normal;
 margin: 0;
 text-transform: none;
 .border-radius; 
 &.btn-default {
 background-color: @whiteColor;
 color: @themeLightColor;
 } /* (লུ) */ TUZMFTBUPNT@CVUUPOMFTT ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
21. Ϗϧυπʔϧɾ$44ϝλݴޠɾMJOUFS
    ͦͷଞύοέʔδ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
22. [UIサーバー・フロント実装ルート] ├── public │ ├── img │ ├── js │ │ └── login.js │ ├── lib │ └── favicon.ico ├── public_authenticated │ ├── img │ └── js │ └── app.js ├── router ├── service ├── src │ ├── actions │ ├── components │ ├── configure │ ├── constants │ ├── reducers │ ├── styles │ └── configureStore.js ├── tests ├── util ├── views ├── webpack ├── app.js ├── DockerfileBase ├── package.json ├── package-lock.json ├── webpack.config.babel.js ├── .babelrc ├── .eslintignore └── .eslintrc σΟϨΫτϦߏ੒ QVCMJD
    ɹFYQSFTTͰϗετ͢Δ੩తϦιʔε
    QVCMJD@BVUIFOUJDBUFE
    ɹϩάΠϯͨ͠ϢʔβͷΈʹϗετ͢Δ੩తϦιʔε
    ɹϏδωεϩδοΫ͕ೖ͍ͬͯΔίʔυ΍ɺը૾ͳͲ
    TSD
    ɹϑϩϯτ࣮૷ͷ
    KT
    KTY
    MFTTίʔυ
    QBDLBHFMPDLKTPO
    ɹύοέʔδͷόʔδϣϯΛݻఆ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ
23. ͏·͍͔͘ͳ͔ͬͨ࿩
    ͦͯ͠ɺͲ͏͔ͨ͠
    ʢͲ͏͢΂͖͔ͩͬͨʣ
24. ίϯϙʔωϯτͷ෼ׂ͕ΠϚΠν "UPNJD
    EFTJHO
    IUUQBUPNJDEFTJHOCSBEGSPTUDPN ɾಉ͡Α͏ͳ෦඼ͳͷʹڞ௨Խ͞Εͯͳ͍
    ɾ௿ϨΠϠͷίϯϙʔωϯτͷमਖ਼͕౎౓ೖͬͯσάϨ͕ى͖Δ
    ɾ5FNQMBUFTͰઃܭ͢΂͖΋ͷΛ1BHFTʹॻ͍ͯ͠·͍ͬͯΔͳͲ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠
25. ίϯϙʔωϯτͷ෼ׂ͕ΠϚΠν "UPNJD
    EFTJHO
    IUUQBUPNJDEFTJHOCSBEGSPTUDPN ͳͥͦ͏ͳ͔ͬͨ
    ɾೲظͷ౎߹Ͱɺϖʔδ಺༰ɾσβΠϯ͕ޒ݄ӍͰܾఆ͍ͯ͘͠
    ɹͳ͔Ͱ౎౓࣮૷͍ͯͨ͠
    ɹˠ
    ͖ͪΜͱͨ͠ίϯϙʔωϯτઃܭ͕Ͱ͖ͳ͔ͬͨ
    Ͳ͏͢΂͖͔ͩͬͨ
    ɾೲظͷ౎߹͕͋ͬͨͱ͸͍͑ɺ
    ɹίϯϙʔωϯτઃܭΛͰ͖ΔൣғͰ͖ͪΜͱߦ͏΂͖ͩͬͨ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠
26. $44ϑϨʔϜϫʔΫ͍Βͳ͔ͬͨ ɾσβΠϯࢦ͕ࣔདྷΔલ͔Βը໘Λ࡞Δඞཁ͕͋ͬͨ
    ɾͦͷͨΊɺͦΕͬΆ͍$44ϑϨʔϜϫʔΫΛ୳ͯ͠ೖΕ͍ͯͨ
    ɾσβΠϯࢦࣔΛద༻͢Δ࣌ʹɺ
    ɹ.6*ͷελΠϧఆٛΛͨ͘͞Μ্ॻ͖ͨ͠
    ɾ͋Εʁ݁Ռɺ.6*ཁΒͳ͍ʁΉ͠Ζअຐ·Ͱ͋Δɻɻ Lightweight CSS framework https://www.muicss.com ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠
27. $44ϑϨʔϜϫʔΫ͍Βͳ͔ͬͨ ͳͥͦ͏ͳ͔ͬͨ
    ɾσβΠϯ͕Ͱ͖͍ͯͳ͍ͷʹ$44ϑϨʔϜϫʔΫΛ࢖͍ͬͯͨ
    Ͳ͏͢΂͖͔ͩͬͨ
    ɾ$44ϑϨʔϜϫʔΫ͸σβΠφʔͷσβΠϯΛద༻͢Δ
    ɹΑ͏ͳ։ൃͰ͸جຊཁΒͳ͍
    ɾೖΕΔ৔߹͸Ͳ͜ʹͲ͏࢖͏͔෼͔͍ͬͯΔঢ়ଶͰɻ Lightweight CSS framework https://www.muicss.com ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠
28. ςετ͕ͪΌΜͱॻ͚͍ͯͳ͍ ɾ3FEVDFS΍BDUJPOͷςετΛॻ͍͍ͯͳ͍
    ɹʢॳΊͷࠒ͸ॻ͍ͯͨʣ
    ɾίϯϙʔωϯτͷςετΛॻ͍͍ͯͳ͍
    ɹʢॳΊͷࠒ͸FO[ZNFͰॻ͍͍ͯͨʣ
    ɾ్த͔Βॻ͍͍ͯͳ͍
    ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠
29. ςετ͕ͪΌΜͱॻ͚͍ͯͳ͍ ͳͥͦ͏ͳ͔ͬͨ
    ɾσβΠϯࢦࣔ΍ը໘ઃܭ͕มΘΔͨͼʹ
    ɹςετ΋ॻ͖௚͢ͷ͕͠ΜͲ్ͯ͘தͰ΍Ίͨ
    ɾςετͰ͖Δઃܭʹͳ͍ͬͯͳ͍
    ɹɾεϐʔυ༏ઌ ೲظ༏ઌ Ͱ3FBDU 3FEVYͷษڧෆ଍
    ɹʢֶश͠ͳ͍ͱ͍͚ͳ͍ࣄฑ͕ϑϩϯτΤϯυ͸ଟ͗͢Δ<ཁग़య>ʣ
    Ͳ͏͢΂͖͔ͩͬͨʗ͜Ε͔ΒͲ͏͢Δ͔
    ɾͪΌΜͱཧղͰ͖Δ·Ͱษڧ͔ͯ͠Βઃܭ࣮ͯ͠૷͢΂͖ͩͬͨ
    ɾઃܭΛݟ௚ͯ͠ϦϑΝΫλͯ͠ςετΛॻ͘ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠
30. σβΠφʔͱΤϯδχΞͷؒͷߔ ෼͔Γ·ͨ͠ɻৄࡉը໘ͷ͜ͷ೔෇දࣔͬͯڞ௨Ͱ͔͢ʁ ͋ͷʔɺҰཡը໘ʹ΋೔෇Λग़͢Α͏ʹ͍ͯͩ͘͠͞ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠ σβΠφʔ ΤϯδχΞ
31. σβΠφʔͱΤϯδχΞͷؒͷߔ ͍͑ɺҰཡը໘ͷํ͸ΞΠςϜ໊ͷํΛ໨ཱ͍ͨͤͨͷͰɺҧ͍·͢ ಉ͡೔෇ද͔ࣔͩΒɺίϯϙʔωϯτ୯ҐͰߟ͑Δͱ
    ͜͜͸ڞ௨ԽͰ͖Δͱࢥ͏ΜͰ͢ΑͶʜɻʢ͋ΕɺͰ΋ҧ͏͔ͳʁʣ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠ σβΠφʔ ΤϯδχΞ
32. σβΠφʔͱΤϯδχΞͷؒͷߔ ͳͥͦ͏ͳ͔ͬͨ
    ɾʰڞ௨Խʱͱ͍ͬͯ΋ͦΕͧΕͷཱ৔Ͱײ͕֮ҧ͏
    Ͳ͏͢΂͖͔ͩͬͨ
    ɾSFBDUTUPSZCPPL
    ͳͲͰίϯϙʔωϯτҰཡΛ࡞੒͠
    ɹೝࣝΛڞ༗ʢཧ૝ʣ
    ɾ͔͠͠޻਺తʹ೉͔ͬͨ͠ SFBDUTUPSZCPPL
    ͷαϯϓϧ
    IUUQSFBDUDBSCPOEFTJHOTZTUFNDPN
    ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠
33. σβΠφʔͱΤϯδχΞͷؒͷߔ Ͳ͏͔ͨ͠
    ɾ9ϓϩδΣΫτͷͨΊʹ੮ସ͑ͯ͠ɺ
    ɹσβΠφʔͱϑϩϯτΤϯδχΞͷ࠲੮Λۙͨ͘͠
    ɾର࿩ɺΩϟϓνϟ΍ಈ࡞͢Δը໘Λݟͯ΋Βͬͯ
    ɹڞ௨ೝࣝΛͱͬͯਐΊͨ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠
34. ͓͠·͍ ϑϦʔૉࡐͺͨͦ͘ʢwww.pakutaso.comʣ