Everything of Front-end in seeds company

by SEEDS COMPANY (PERSOL PROCESS & TECHNOLOGY CO., LTD.)

Slide 1

Slide 1 text

ϑϩϯτΤϯυͷ࿩ 4&&%4$0.1"/: ෱ాɹ߁෉

Slide 2

Slide 2 text

ΞδΣϯμ w 9ϓϩδΣΫτνʔϜͷϑϩϯτࣄ৘ w 6*αʔόʔߏ੒ w ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ w ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠

Slide 3

Slide 3 text

9ϓϩδΣΫτνʔϜ ͷϑϩϯτࣄ৘

Slide 4

Slide 4 text

9ϓϩδΣΫτνʔϜͷϑϩϯτࣄ৘ ϑϩϯτΤϯδχΞೋਓʢࢲʴ΋͏Ұਓʣ 4&&%4$0.1"/: 9ϓϩδΣΫτνʔϜ৽αʔϏε։ൃνʔϜ ΫϦΤΠςΟϒνʔϜσβΠφʔνʔϜ ΤϯδχΞ ৽αʔϏεͷσβΠϯ୲౰ 9ϓϩδΣΫτνʔϜͷϑϩϯτࣄ৘

Slide 5

Slide 5 text

6*αʔόʔߏ੒

Slide 6

Slide 6 text

6*αʔόʔ UIαʔόͷ໾ׂ • ηογϣϯ؅ཧ • ϩάΠϯঢ়گʹԠͯ͡ɺରԠ͢Δ࠷௿ݶͷpageͱjsΛϒϥ΢βʹฦ͢ • ΫϥΠΞϯτ͔Βड͚औͬͨAPIΛϚΠΫϩαʔϏεʹૹͬͯɺ ɹɹϚΠΫϩαʔϏε͔Βड͚औͬͨ஋Λϒϥ΢βʹฦ͢ UIαʔόͷ࢖༻ٕज़ • Express - Node.js • pm2 • redis ίί 6*αʔόʔߏ੒

Slide 7

Slide 7 text

ϑϩϯτΤϯυ ίί 6*αʔόʔߏ੒

Slide 8

Slide 8 text

ϑϩϯτΤϯυͷ ϑϨʔϜϫʔΫɾΞʔΩςΫνϟ બఆ

Slide 9

Slide 9 text

ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 10

Slide 10 text

ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ϝϦοτ ɾར༻ऀ͕ଟ͍ ࠓޙϑϩϯτΤϯδχΞΛ ࠾༻ͨ࣌͠ͷֶशίετ͕খ͍͞ σϝϦοτ ɾଞͷ'8ͱൺ΂Δͱ੍໿͕ݫ͍͠ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 11

Slide 11 text

ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ଞ ɹͪΌΜͱௐ΂Δ͕࣌ؒͳ͔ͬͨ ϝϦοτ ɹɾ3FBDU΄Ͳ੍໿͕ݫ͘͠ͳͦ͞͏ ɹɾ૒ํ޲όΠϯυ͕؆୯Ͱศརͦ͏ σϝϦοτ ɹɾ੍໿͕গͳ͍෼ɺίʔυ͕ଐਓԽͦ͠͏ ɹɾ"OHVMBS͸5ZQF4DSJQU͕σϑΝΫτ ɹɹʢ͜Ε͸޷Έ͔ʣ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 12

Slide 12 text

ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ͕ศར ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 13

Slide 13 text

ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ɾར༻ऀଟ͍͠υΩϡϝϯτ΋ଟ͍ ɾͰ͖ͳ͍͜ͱ΋ͳͦ͞͏ ɾ3FBDU 3FEVYPS'MVY ͰΑͦ͞͏ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 14

Slide 14 text

ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ 3FBDU͸7JFXͷϥΠϒϥϦ ϑϨʔϜϫʔΫ ͜Ε͚ͩͰ৭ʑ΍Ζ͏ͱ͢Δͱେม -JTU1BHF ᵓ4FBSDI#PY ᴹᵓ*OQVU ᴹᵋ#VUUPO ᵋ-JTU ᵋ-JTU*UFN onClickHandler onChangeHandler onChangeHandler onClickHandler items item 3FBDU࣮૷ྫ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 15

Slide 15 text

ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ 'BDFCPPL͕ఏএ͍ͯ͠Δ ΞʔΩςΫνϟ 'MVYͷ೿ੜ 'MVY6UJMTΑΓগ͠େֻ͔Γ ϑϨʔϜϫʔΫબఆ ※ը૾ग़యɿUNIDIRECTIONAL USER INTERFACE ARCHITECTURES 'MVY6UJMT

Slide 16

Slide 16 text

ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ͭͷTUBUFͰ؅ཧ͢Δ -JTU1BHF ᵓ4FBSDI#PY ᴹᵓ*OQVU ᴹᵋ#VUUPO ᵋ-JTU ᵋ-JTU*UFN state 3FBDU3FEVY࣮૷ྫ onChange = dispatch(changeAction()) onClick = dispatch(clickAction()) Actions Props ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 17

Slide 17 text

ϑϨʔϜϫʔΫ ϥΠϒϥϦ ͷબఆ ͭͷTUBUFͰ؅ཧ͢Δ ։ൃ࣌ʹศར SFEVYMPHHFS NJEEMFXBSF ίί 3FBDU3FEVYʹܾఆʂ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 18

Slide 18 text

ίϯϙʔωϯτͷ෼ׂࢦ਑ "UPNJDEFTJHO IUUQBUPNJDEFTJHOCSBEGSPTUDPN ※ը૾ग़యɿhttp://design.dena.com/design/atomic-design-Λ෼͔ͬͨͭ΋ΓʹͳΔ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 19

Slide 19 text

ίϯϙʔωϯτͷ෼ׂࢦ਑ DPNQPOFOUT ᵓBUPNT ᴹᵓ#VUUPO ᴹᵋ*OQVU ᵓNPMFDVMFT ᴹᵓ4FBSDI#PY ᴹᵋ-JTU*UFN ᵓPSHBOJTNT ᴹᵓ)FBEFS ᴹᵋ-JTU ᵓUFNQMBUFT ᴹᵋ1BHF8JUI)FBEFS ᵋQBHFT ᵋ-JTU1BHF )&"%&3 ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 20

Slide 20 text

ίϯϙʔωϯτͷ෼ׂࢦ਑ -&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 (    {children}    );  }    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 ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 21

Slide 21 text

Ϗϧυπʔϧɾ$44ϝλݴޠɾMJOUFS ͦͷଞύοέʔδ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 22

Slide 22 text

[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 ɹύοέʔδͷόʔδϣϯΛݻఆ ϑϩϯτΤϯυͷϑϨʔϜϫʔΫɾΞʔΩςΫνϟબఆ

Slide 23

Slide 23 text

͏·͍͔͘ͳ͔ͬͨ࿩ ͦͯ͠ɺͲ͏͔ͨ͠ ʢͲ͏͢΂͖͔ͩͬͨʣ

Slide 24

Slide 24 text

ίϯϙʔωϯτͷ෼ׂ͕ΠϚΠν "UPNJDEFTJHO IUUQBUPNJDEFTJHOCSBEGSPTUDPN ɾಉ͡Α͏ͳ෦඼ͳͷʹڞ௨Խ͞Εͯͳ͍ ɾ௿ϨΠϠͷίϯϙʔωϯτͷमਖ਼͕౎౓ೖͬͯσάϨ͕ى͖Δ ɾ5FNQMBUFTͰઃܭ͢΂͖΋ͷΛ1BHFTʹॻ͍ͯ͠·͍ͬͯΔͳͲ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠

Slide 25

Slide 25 text

ίϯϙʔωϯτͷ෼ׂ͕ΠϚΠν "UPNJDEFTJHO IUUQBUPNJDEFTJHOCSBEGSPTUDPN ͳͥͦ͏ͳ͔ͬͨ ɾೲظͷ౎߹Ͱɺϖʔδ಺༰ɾσβΠϯ͕ޒ݄ӍͰܾఆ͍ͯ͘͠ ɹͳ͔Ͱ౎౓࣮૷͍ͯͨ͠ ɹˠ͖ͪΜͱͨ͠ίϯϙʔωϯτઃܭ͕Ͱ͖ͳ͔ͬͨ Ͳ͏͢΂͖͔ͩͬͨ ɾೲظͷ౎߹͕͋ͬͨͱ͸͍͑ɺ ɹίϯϙʔωϯτઃܭΛͰ͖ΔൣғͰ͖ͪΜͱߦ͏΂͖ͩͬͨ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠

Slide 26

Slide 26 text

$44ϑϨʔϜϫʔΫ͍Βͳ͔ͬͨ ɾσβΠϯࢦ͕ࣔདྷΔલ͔Βը໘Λ࡞Δඞཁ͕͋ͬͨ ɾͦͷͨΊɺͦΕͬΆ͍$44ϑϨʔϜϫʔΫΛ୳ͯ͠ೖΕ͍ͯͨ ɾσβΠϯࢦࣔΛద༻͢Δ࣌ʹɺ ɹ.6*ͷελΠϧఆٛΛͨ͘͞Μ্ॻ͖ͨ͠ ɾ͋Εʁ݁Ռɺ.6*ཁΒͳ͍ʁΉ͠Ζअຐ·Ͱ͋Δɻɻ Lightweight CSS framework https://www.muicss.com ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠

Slide 27

Slide 27 text

$44ϑϨʔϜϫʔΫ͍Βͳ͔ͬͨ ͳͥͦ͏ͳ͔ͬͨ ɾσβΠϯ͕Ͱ͖͍ͯͳ͍ͷʹ$44ϑϨʔϜϫʔΫΛ࢖͍ͬͯͨ Ͳ͏͢΂͖͔ͩͬͨ ɾ$44ϑϨʔϜϫʔΫ͸σβΠφʔͷσβΠϯΛద༻͢Δ ɹΑ͏ͳ։ൃͰ͸جຊཁΒͳ͍ ɾೖΕΔ৔߹͸Ͳ͜ʹͲ͏࢖͏͔෼͔͍ͬͯΔঢ়ଶͰɻ Lightweight CSS framework https://www.muicss.com ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠

Slide 28

Slide 28 text

ςετ͕ͪΌΜͱॻ͚͍ͯͳ͍ ɾ3FEVDFS΍BDUJPOͷςετΛॻ͍͍ͯͳ͍ ɹʢॳΊͷࠒ͸ॻ͍ͯͨʣ ɾίϯϙʔωϯτͷςετΛॻ͍͍ͯͳ͍ ɹʢॳΊͷࠒ͸FO[ZNFͰॻ͍͍ͯͨʣ ɾ్த͔Βॻ͍͍ͯͳ͍ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠

Slide 29

Slide 29 text

ςετ͕ͪΌΜͱॻ͚͍ͯͳ͍ ͳͥͦ͏ͳ͔ͬͨ ɾσβΠϯࢦࣔ΍ը໘ઃܭ͕มΘΔͨͼʹ ɹςετ΋ॻ͖௚͢ͷ͕͠ΜͲ్ͯ͘தͰ΍Ίͨ ɾςετͰ͖Δઃܭʹͳ͍ͬͯͳ͍ ɹɾεϐʔυ༏ઌ ೲظ༏ઌ Ͱ3FBDU3FEVYͷษڧෆ଍ ɹʢֶश͠ͳ͍ͱ͍͚ͳ͍ࣄฑ͕ϑϩϯτΤϯυ͸ଟ͗͢Δ<ཁग़య>ʣ Ͳ͏͢΂͖͔ͩͬͨʗ͜Ε͔ΒͲ͏͢Δ͔ ɾͪΌΜͱཧղͰ͖Δ·Ͱษڧ͔ͯ͠Βઃܭ࣮ͯ͠૷͢΂͖ͩͬͨ ɾઃܭΛݟ௚ͯ͠ϦϑΝΫλͯ͠ςετΛॻ͘ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠

Slide 30

Slide 30 text

σβΠφʔͱΤϯδχΞͷؒͷߔ ෼͔Γ·ͨ͠ɻৄࡉը໘ͷ͜ͷ೔෇දࣔͬͯڞ௨Ͱ͔͢ʁ ͋ͷʔɺҰཡը໘ʹ΋೔෇Λग़͢Α͏ʹ͍ͯͩ͘͠͞ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠ σβΠφʔ ΤϯδχΞ

Slide 31

Slide 31 text

σβΠφʔͱΤϯδχΞͷؒͷߔ ͍͑ɺҰཡը໘ͷํ͸ΞΠςϜ໊ͷํΛ໨ཱ͍ͨͤͨͷͰɺҧ͍·͢ ಉ͡೔෇ද͔ࣔͩΒɺίϯϙʔωϯτ୯ҐͰߟ͑Δͱ ͜͜͸ڞ௨ԽͰ͖Δͱࢥ͏ΜͰ͢ΑͶʜɻʢ͋ΕɺͰ΋ҧ͏͔ͳʁʣ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠ σβΠφʔ ΤϯδχΞ

Slide 32

Slide 32 text

σβΠφʔͱΤϯδχΞͷؒͷߔ ͳͥͦ͏ͳ͔ͬͨ ɾʰڞ௨Խʱͱ͍ͬͯ΋ͦΕͧΕͷཱ৔Ͱײ͕֮ҧ͏ Ͳ͏͢΂͖͔ͩͬͨ ɾSFBDUTUPSZCPPLͳͲͰίϯϙʔωϯτҰཡΛ࡞੒͠ ɹೝࣝΛڞ༗ʢཧ૝ʣ ɾ͔͠͠޻਺తʹ೉͔ͬͨ͠ SFBDUTUPSZCPPLͷαϯϓϧ IUUQSFBDUDBSCPOEFTJHOTZTUFNDPN ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠

Slide 33

Slide 33 text

σβΠφʔͱΤϯδχΞͷؒͷߔ Ͳ͏͔ͨ͠ ɾ9ϓϩδΣΫτͷͨΊʹ੮ସ͑ͯ͠ɺ ɹσβΠφʔͱϑϩϯτΤϯδχΞͷ࠲੮Λۙͨ͘͠ ɾର࿩ɺΩϟϓνϟ΍ಈ࡞͢Δը໘Λݟͯ΋Βͬͯ ɹڞ௨ೝࣝΛͱͬͯਐΊͨ ͏·͍͔͘ͳ͔ͬͨ࿩ɺͦͯ͠ɺͲ͏͔ͨ͠

Slide 34

Slide 34 text

͓͠·͍ ϑϦʔૉࡐͺͨͦ͘ʢwww.pakutaso.comʣ