Dive into SmartHR UI

Encraft #6 Focus on UI Component 実装 での発表資料です。
https://knowledgework.connpass.com/event/291226/

Transcript

1. %JWF
   JOUP
   4NBSU)3
   6*
   
   
   8FE
   &ODSBGU
   
   'PDVT
   PO
   6*
   $PNQPOFOU
   ࣮૷ OBCFMJXP
   4NBSU)3
   ϓϩμΫτΤϯδχΞ
2. ࣗݾ঺հ 4NBSU)3
   ϓϩμΫτΤϯδχΞάϧʔϓ
   ϓϥοτϑΥʔϜ։ൃϢχοτ
   ϑϩϯτΤϯυΤϯδχΞ
   5ZQF4DSJQU
   3FBDU
   /FYUKT
   ͳͲ
   OBCFMJXP
3. ࠓ೔࿩͢͜ͱ
4. ࠓ೔࿩͢͜ͱ ɾ4NBSU)3
   6*
   ͱ͸
   ɾࢧ͑Δٕज़
   ɾ։ൃɾӡ༻ମ੍
   ɾ͜Ε͔Βͷ࿩
   
5. 4NBSU)3
   6*
   ͱ͸
6. 4NBSU)3
   6*
   ͱ͸ 3FBDU
   Ͱ࣮૷͞Εͨڞ௨ίϯϙʔωϯτू
   ໨త
   ɾࣾ಺ͷෳ਺ͷϓϩμΫτͰ
   6*
   Λἧ͍͑ͨ
   ɾϓϩμΫτͷ։ൃΛՃ଎͍ͤͨ͞
   
7. 4NBSU)3
   Ͱ͸ଟ͘ͷαʔϏεΛ։ൃ͍ͯ͠Δ
   
8. ಛ௃ ɾ5ZQF4DSJQU
   3FBDU
   TUZMFEDPNQPOFOUT
   ɾ+*4
   9
   
   ͷద߹Ϩϕϧ"४ڌ
   ɾ044
   ͱͯ͠ެ։͍ͯ͠Δ
   ɹɾIUUQTHJUIVCDPNLVGVTNBSUISVJ
   ɾσβΠϯγεςϜͷߏ੒ཁૉͷͭ
   ɹɾIUUQTTNBSUISEFTJHO
9. ར༻࣮੷ ɾࣾ಺ͷ΄΅͢΂ͯͷϓϩμΫτͰར༻͞ Ε͍ͯΔ
   ɾάϧʔϓձࣾ΍։ൃύʔτφʔձࣾͷҰ ෦Ͱ΋ར༻͞Ε͍ͯΔ
10. ։ൃن໛
    
    ࣌఺ ɾ
    fi STU
    DPNNJU
    ɾ
    DPNNJUT
    ɾW
    ɾTSD
    ҎԼߦ਺
     
11. 4NBSU)3
    6*
    Λࢧ͑Δٕज़
12. 4NBSU)3
    6*
    Λࢧ͑Δٕज़ ɾ࣮૷
    ɾΞΫηγϏϦςΟରԠ
    ɾςετํ਑
    
13. CONFIDENTIAL ࣮૷
14. ࣮૷ ɾ࢖͍ํ
    ɾਪ͠ίϯϙʔωϯτ
    #VUUPO
    ɾਪ͠ίϯϙʔωϯτ
    $PNCP#PY
    ɾਪ͠ίϯϙʔωϯτ
    ϨΠΞ΢τ
    ɾTNBSUISQBUUFSOTɺུͯ͠εϚύλ
    
15. ࢖͍ํ
16. ςʔϚ DPMPS
    GPOU4J[F
    TQBDJOH
    MFBEJOH
    TIBEPX
    SBEJVT
    [*OEFY
    ͳͲ͕͋ΓɺͦΕͧΕ্ॻ͖Ͱ͖ΔΑ͏ʹ ͳ͍ͬͯΔɻ
    ͜ΕΒͷσϑΥϧτͷ஋͸σβΠϯγεςϜͷσβ ΠϯτʔΫϯʹରԠ͍ͯ͠Δɻ
    IUUQTTNBSUISEFTJHOQSPEVDUTEFTJHOUPLFOT
    
17. ΧελϜςʔϚ
18. #VUUPO
    ίϯϙʔωϯτ
19. #VUUPO
    ίϯϙʔωϯτ WBSJBOU
20. #VUUPO
    ίϯϙʔωϯτ WBSJBOU TJ[F XJEF
21. #VUUPO
    ίϯϙʔωϯτ WBSJBOU TJ[F XJEF TV ffi Y QSF fi Y TRVBSF
22. #VUUPO
    ίϯϙʔωϯτ WBSJBOU TJ[F XJEF TV ffi Y QSF fi Y TRVBSF MPBEJOH
23. #VUUPO
    ίϯϙʔωϯτ WBSJBOU TJ[F XJEF TV ffi Y QSF fi Y TRVBSF MPBEJOH EJTBCMFE%FUBJM
24. վળͷΤίγεςϜ
25. #VUUPO
    ਪ͠ϙΠϯτ ɾQSPQT
    Ͱ͍͡ΕΔύλʔϯͷଟ͞ɺ൚༻ ੑͷߴ͞
    ɾ͋ͱ͔ΒͲΜͲΜ֦ு͞ΕͯศརϘλϯ ʹͳͬͨ
    ɾར༻ˠվળˠؐݩˠར༻ͷΤίγεςϜ
26. $PNCP#PY
    ίϯϙʔωϯτ
27. %&.0 IUUQTTUPSZTNBSUISVJEFW QBUIEPDTGPSNTʢϑΥʔϜʣDPNCPCPYEPDT
    IUUQTHJUIVCDPNLVGVTNBSUISVJUSFFNBTUFSTSDDPNQPOFOUT$PNCP#PY
28. $PNCP#PY
    ਪ͠ϙΠϯτ ɾෳࡶͳ
    6*
    ΋టष͘ؤு͍ͬͯΔ
    ɾΩʔϘʔυͰશͯૢ࡞Ͱ͖ΔΑ͏ʹͯ͠ ͍Δ
    ɾ%SPQEPXO
    %JBMPH
    %BUFQJDLFS
    ͳͲ΋
29. ϨΠΞ΢τܥίϯϙʔωϯτ ɾ$FOUFS
    ɾ$MVTUFS
    ɾ4UBDL
    ɾ4JEFCBS
    ɾ3FFM
36. ϨΠΞ΢τ
    ਪ͠ϙΠϯτ ɾ&7&3:
    -":065
    Λࢀߟʹͨ͠ϨΠΞ΢ τ܈
    ɾը໘্ͷ
    6*
    શͯ
    4NBSU)3
    6*
    Ͱ࣮૷Ͱ ͖ΔΑ͏ʹͳͬͨ
37. TNBSUISQBUUFSOT
    ུͯ͠εϚύλ 4NBSU)3
    6*Λ࢖͑͹Ұ؏ͨ͠6*ʹͳΔ͸ͣ
    ͕
    ૊Έ߹Θͤํ΍༨നʹݸਓ͕ࠩग़Δ
39. TNBSUISQBUUFSOT
    ུͯ͠εϚύλ ɾසग़ϨΠΞ΢τΛ·ͱΊͨύλʔϯू
    ɾαϯϓϧίʔυΛݟͳ͕Β࣮૷͢Δ
40. CONFIDENTIAL ΞΫηγϏϦςΟରԠ
41. ΞΫηγϏϦςΟରԠ ɾ΢ΣϒΞΫηγϏϦςΟํ਑
    ɹɾIUUQTBDDFTTJCJMJUZTNBSUISDPKQEFWFMPQNFOU
    ɾ΢ΣϒΞΫηγϏϦςΟࢼݧ݁Ռ
    
    ೥݄
    ɹɾIUUQTBDDFTTJCJMJUZTNBSUISDPKQEFWFMPQNFOUUFTU
42. ΞΫηγϏϦςΟରԠ 4NBSU)3
    6*
    ͷΞΫηγϏϦςΟΛ޲্ͤ͞Δ͜ͱ ͕
    4NBSU)3
    ͷ͢΂ͯͷϓϩμΫτͷΞΫηγϏϦ ςΟͷ޲্ʹܨ͕Δ
    
43. CONFIDENTIAL ςετํ਑
44. ςετํ਑ ɾ4UPSZCPPL
    ʹΑΔΧλϩάԽ
    ɾ$ISPNBUJD
    ʹΑΔը૾ճؼςετ
    ɾUFTUDBGF
    ʹΑΔ
    FF
    
45. 4UPSZCPPL
    ʹΑΔΧλϩάԽ IUUQTTUPSZTNBSUISVJEFW
46. $ISPNBUJD
    ʹΑΔը૾ճؼςετ
47. 5FTUDBGF
    ʹΑΔ
    FF %BUF1JDLFS
    $PNCP#PY
    %JBMPH
    %SPQEPXO
    ͳͲͷ ෳ਺εςοϓͷૢ࡞͕ඞཁʹͳΔίϯϙʔωϯτͷ ৔߹͸
    FF
    Λॻ͍ͯڍಈΛ୲อ͍ͯ͠Δ
    
48. 4NBSU)3
    6*
    ͷ։ൃɾӡ༻ମ੍
49. 4NBSU)3
    6*
    ͷ։ൃɾӡ༻ମ੍ ɾઐ೚νʔϜΛஔ͔ͳ͍
    ɾΤϯδχΞ͚ͩͷ΋ͷͰ͸ͳ͍
    ɾϦϦʔεϑϩʔͷ؆ུԽ
50. ઐ೚νʔϜΛஔ͔ͳ͍ ɾίϛοτ͸શһ͕͢Δ
    ɾϩʔυϚοϓͳͲͷେ͖ͳܾΊ͸֤ ϓϩμΫτʹॴଐ͢Δϝϯόʔͷ༗ࢤ Ͱू·ͬͯ࿩͠߹͍ͬͯΔ
51. ΤϯδχΞ͚ͩͷ΋ͷͰ͸ͳ͍ ΤϯδχΞ͚ͩͰͳ͘ɺσβΠφʔɺ 69ϥΠλʔ΋ੵۃతʹίϛοτͯ͠ ͍Δ
52. ϦϦʔεϑϩʔͷ؆ུԽ ɾ(JU)VC
    ϙνϙν͚ͩͰϦϦʔεʙ $)"/(&-0(
    ͷ࡞੒·ͰͰ͖ΔΑ͏ʹͳ͍ͬͯ Δ
    ɹɾ4NBSU)3
    6*
    ͷϦϦʔε࡞ۀΛ
    (JU)VC
    "DUJPOT
    ͰࣗಈԽ ͨ͠࿩
    ɹɾIUUQTUFDITNBSUISKQFOUSZ
    
53. 4NBSU)3
    6*
    ͷ͜Ε͔Β
54. 4NBSU)3
    6*
    ͷ՝୊ ɾ3FBDU
    4FSWFS
    $PNQPOFOUT
    ରԠ
    ɾTUZMFEDPNQPOFOUT
    ґଘ
    ɾίϯϙʔωϯτଟ͗͢໰୊
55. 4NBSU)3
    6*
    ͷ՝୊ ͜ΕΒͷ՝୊΁ͷରԠΛ໨ԼਐΊ͍ͯ·͢ɻ
    ·ͩݕ౼தͷ͜ͱ΋ଟ͘͜͜Ͱ͸࿩͖͠Εͳ͍ͷͰ ؾʹͳΔํ͸௚઀ฉ͍͍ͯͩ͘͞ʂ
    
56. ͓ΘΓ
57. ࢀߟࢿྉ ɾϓϩμΫτؒڞ௨ͷ
    3FBDU
    ίϯϙʔωϯτϥΠϒϥϦΛӡ༻͢Δ࿩
    ɹɾIUUQTUFDITNBSUISKQFOUSZ
    ɾʮϓϩμΫτؒڞ௨ͷ
    3FBDU
    ίϯϙʔωϯτϥΠϒϥϦʯ͕Ͳ͏ͳͬ ͔ͨɺͱ͍͏࿩
    ɹɾIUUQTUFDITNBSUISKQFOUSZ
    ɾ4NBSU)3
    6*
    ͷϦϦʔε࡞ۀΛ
    (JU)VC
    "DUJPOT
    ͰࣗಈԽͨ͠࿩
    ɹɾIUUQTUFDITNBSUISKQFOUSZ
    ɾ4NBSU)3
    6*
    Λத৺ͱͨ͠ΤίγεςϜͷ͢͢Ί
    ɹɾIUUQTUFDITNBSUISKQFOUSZ