Dive into SmartHR UI

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

Transcript

1. %JWFJOUP4NBSU)36*
   8FE&ODSBGU'PDVTPO6*$PNQPOFOU࣮૷
   OBCFMJXP
   4NBSU)3ϓϩμΫτΤϯδχΞ
   

   View Slide

2. ࣗݾ঺հ
   4NBSU)3
   ϓϩμΫτΤϯδχΞάϧʔϓ
   ϓϥοτϑΥʔϜ։ൃϢχοτ
   ϑϩϯτΤϯυΤϯδχΞ
   5ZQF4DSJQU 3FBDU /FYUKTͳͲ
   OBCFMJXP
   

   View Slide

3. ࠓ೔࿩͢͜ͱ
   

   View Slide

4. ࠓ೔࿩͢͜ͱ
   ɾ4NBSU)36*ͱ͸
   ɾࢧ͑Δٕज़
   ɾ։ൃɾӡ༻ମ੍
   ɾ͜Ε͔Βͷ࿩
   

   View Slide

5. 4NBSU)36*ͱ͸
   

   View Slide

6. 4NBSU)36*ͱ͸
   3FBDUͰ࣮૷͞Εͨڞ௨ίϯϙʔωϯτू
   ໨త
   ɾࣾ಺ͷෳ਺ͷϓϩμΫτͰ6*Λἧ͍͑ͨ
   ɾϓϩμΫτͷ։ൃΛՃ଎͍ͤͨ͞
   

   View Slide

7. 4NBSU)3Ͱ͸ଟ͘ͷαʔϏεΛ։ൃ͍ͯ͠Δ
   

   View Slide

8. ಛ௃
   ɾ5ZQF4DSJQU 3FBDU TUZMFEDPNQPOFOUT
   ɾ+*49ͷద߹Ϩϕϧ"४ڌ
   ɾ044ͱͯ͠ެ։͍ͯ͠Δ
   ɹɾIUUQTHJUIVCDPNLVGVTNBSUISVJ
   ɾσβΠϯγεςϜͷߏ੒ཁૉͷͭ
   ɹɾIUUQTTNBSUISEFTJHO
   

   View Slide

9. ར༻࣮੷
   ɾࣾ಺ͷ΄΅͢΂ͯͷϓϩμΫτͰར༻͞
   Ε͍ͯΔ
   ɾάϧʔϓձࣾ΍։ൃύʔτφʔձࣾͷҰ
   ෦Ͱ΋ར༻͞Ε͍ͯΔ
   

   View Slide

10. ։ൃن໛ ࣌఺
    
    ɾ
    fi
    STUDPNNJU
    ɾDPNNJUT
    ɾW
    ɾTSDҎԼߦ਺
    

    View Slide

11. 4NBSU)36*Λࢧ͑Δٕज़
    

    View Slide

12. 4NBSU)36*Λࢧ͑Δٕज़
    ɾ࣮૷
    ɾΞΫηγϏϦςΟରԠ
    ɾςετํ਑
    

    View Slide

13. CONFIDENTIAL
    ࣮૷
    

    View Slide

14. ࣮૷
    ɾ࢖͍ํ
    ɾਪ͠ίϯϙʔωϯτ#VUUPO
    ɾਪ͠ίϯϙʔωϯτ$PNCP#PY
    ɾਪ͠ίϯϙʔωϯτϨΠΞ΢τ
    ɾTNBSUISQBUUFSOTɺུͯ͠εϚύλ
    

    View Slide

15. ࢖͍ํ
    

    View Slide

16. ςʔϚ
    DPMPS GPOU4J[F TQBDJOH MFBEJOH TIBEPX SBEJVT
    [*OEFYͳͲ͕͋ΓɺͦΕͧΕ্ॻ͖Ͱ͖ΔΑ͏ʹ
    ͳ͍ͬͯΔɻ
    ͜ΕΒͷσϑΥϧτͷ஋͸σβΠϯγεςϜͷσβ
    ΠϯτʔΫϯʹରԠ͍ͯ͠Δɻ
    IUUQTTNBSUISEFTJHOQSPEVDUTEFTJHOUPLFOT
    

    View Slide

17. ΧελϜςʔϚ
    

    View Slide

18. #VUUPOίϯϙʔωϯτ
    

    View Slide

19. #VUUPOίϯϙʔωϯτ
    WBSJBOU
    

    View Slide

20. #VUUPOίϯϙʔωϯτ
    WBSJBOU
    TJ[F XJEF
    

    View Slide

21. #VUUPOίϯϙʔωϯτ
    WBSJBOU
    TJ[F XJEF
    TV
    ffi
    Y QSF
    fi
    Y TRVBSF
    

    View Slide

22. #VUUPOίϯϙʔωϯτ
    WBSJBOU
    TJ[F XJEF
    TV
    ffi
    Y QSF
    fi
    Y TRVBSF
    MPBEJOH
    

    View Slide

23. #VUUPOίϯϙʔωϯτ
    WBSJBOU
    TJ[F XJEF
    TV
    ffi
    Y QSF
    fi
    Y TRVBSF
    MPBEJOH
    EJTBCMFE%FUBJM
    

    View Slide

24. վળͷΤίγεςϜ
    

    View Slide

25. #VUUPOਪ͠ϙΠϯτ
    ɾQSPQTͰ͍͡ΕΔύλʔϯͷଟ͞ɺ൚༻
    ੑͷߴ͞
    ɾ͋ͱ͔ΒͲΜͲΜ֦ு͞ΕͯศརϘλϯ
    ʹͳͬͨ
    ɾར༻ˠվળˠؐݩˠར༻ͷΤίγεςϜ
    

    View Slide

26. $PNCP#PYίϯϙʔωϯτ
    

    View Slide

27. %&.0
    IUUQTTUPSZTNBSUISVJEFW QBUIEPDTGPSNTʢϑΥʔϜʣDPNCPCPYEPDT
    IUUQTHJUIVCDPNLVGVTNBSUISVJUSFFNBTUFSTSDDPNQPOFOUT$PNCP#PY
    

    View Slide

28. $PNCP#PYਪ͠ϙΠϯτ
    ɾෳࡶͳ6*΋టष͘ؤு͍ͬͯΔ
    ɾΩʔϘʔυͰશͯૢ࡞Ͱ͖ΔΑ͏ʹͯ͠
    ͍Δ
    ɾ%SPQEPXO %JBMPH %BUFQJDLFSͳͲ΋
    

    View Slide

29. ϨΠΞ΢τܥίϯϙʔωϯτ
    ɾ$FOUFS
    ɾ$MVTUFS
    ɾ4UBDL
    ɾ4JEFCBS
    ɾ3FFM
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. ϨΠΞ΢τਪ͠ϙΠϯτ
    ɾ&7&3:-":065Λࢀߟʹͨ͠ϨΠΞ΢
    τ܈
    ɾը໘্ͷ6*શͯ4NBSU)36*Ͱ࣮૷Ͱ
    ͖ΔΑ͏ʹͳͬͨ
    

    View Slide

37. TNBSUISQBUUFSOTུͯ͠εϚύλ
    4NBSU)36*Λ࢖͑͹Ұ؏ͨ͠6*ʹͳΔ͸ͣ
    ͕
    ૊Έ߹Θͤํ΍༨നʹݸਓ͕ࠩग़Δ
    

    View Slide

38. View Slide

39. TNBSUISQBUUFSOTུͯ͠εϚύλ
    ɾසग़ϨΠΞ΢τΛ·ͱΊͨύλʔϯू
    ɾαϯϓϧίʔυΛݟͳ͕Β࣮૷͢Δ
    

    View Slide

40. CONFIDENTIAL
    ΞΫηγϏϦςΟରԠ
    

    View Slide

41. ΞΫηγϏϦςΟରԠ
    ɾ΢ΣϒΞΫηγϏϦςΟํ਑
    ɹɾIUUQTBDDFTTJCJMJUZTNBSUISDPKQEFWFMPQNFOU
    ɾ΢ΣϒΞΫηγϏϦςΟࢼݧ݁Ռ
    ೥݄
    ɹɾIUUQTBDDFTTJCJMJUZTNBSUISDPKQEFWFMPQNFOUUFTU
    

    View Slide

42. ΞΫηγϏϦςΟରԠ
    4NBSU)36*ͷΞΫηγϏϦςΟΛ޲্ͤ͞Δ͜ͱ
    ͕4NBSU)3ͷ͢΂ͯͷϓϩμΫτͷΞΫηγϏϦ
    ςΟͷ޲্ʹܨ͕Δ
    

    View Slide

43. CONFIDENTIAL
    ςετํ਑
    

    View Slide

44. ςετํ਑
    ɾ4UPSZCPPLʹΑΔΧλϩάԽ
    ɾ$ISPNBUJDʹΑΔը૾ճؼςετ
    ɾUFTUDBGFʹΑΔFF
    

    View Slide

45. 4UPSZCPPLʹΑΔΧλϩάԽ
    IUUQTTUPSZTNBSUISVJEFW
    

    View Slide

46. $ISPNBUJDʹΑΔը૾ճؼςετ
    

    View Slide

47. 5FTUDBGFʹΑΔFF
    %BUF1JDLFS $PNCP#PY %JBMPH %SPQEPXOͳͲͷ
    ෳ਺εςοϓͷૢ࡞͕ඞཁʹͳΔίϯϙʔωϯτͷ
    ৔߹͸FFΛॻ͍ͯڍಈΛ୲อ͍ͯ͠Δ
    

    View Slide

48. 4NBSU)36*ͷ։ൃɾӡ༻ମ੍
    

    View Slide

49. 4NBSU)36*ͷ։ൃɾӡ༻ମ੍
    ɾઐ೚νʔϜΛஔ͔ͳ͍
    ɾΤϯδχΞ͚ͩͷ΋ͷͰ͸ͳ͍
    ɾϦϦʔεϑϩʔͷ؆ུԽ
    

    View Slide

50. ઐ೚νʔϜΛஔ͔ͳ͍
    ɾίϛοτ͸શһ͕͢Δ
    ɾϩʔυϚοϓͳͲͷେ͖ͳܾΊ͸֤
    ϓϩμΫτʹॴଐ͢Δϝϯόʔͷ༗ࢤ
    Ͱू·ͬͯ࿩͠߹͍ͬͯΔ
    

    View Slide

51. ΤϯδχΞ͚ͩͷ΋ͷͰ͸ͳ͍
    ΤϯδχΞ͚ͩͰͳ͘ɺσβΠφʔɺ
    69ϥΠλʔ΋ੵۃతʹίϛοτͯ͠
    ͍Δ
    

    View Slide

52. ϦϦʔεϑϩʔͷ؆ུԽ
    ɾ(JU)VCϙνϙν͚ͩͰϦϦʔεʙ
    $)"/(&-0(ͷ࡞੒·ͰͰ͖ΔΑ͏ʹͳ͍ͬͯ
    Δ
    ɹɾ4NBSU)36*ͷϦϦʔε࡞ۀΛ(JU)VC"DUJPOTͰࣗಈԽ
    ͨ͠࿩
    ɹɾIUUQTUFDITNBSUISKQFOUSZ
    

    View Slide

53. 4NBSU)36*ͷ͜Ε͔Β
    

    View Slide

54. 4NBSU)36*ͷ՝୊
    ɾ3FBDU4FSWFS$PNQPOFOUTରԠ
    ɾTUZMFEDPNQPOFOUTґଘ
    ɾίϯϙʔωϯτଟ͗͢໰୊
    

    View Slide

55. 4NBSU)36*ͷ՝୊
    ͜ΕΒͷ՝୊΁ͷରԠΛ໨ԼਐΊ͍ͯ·͢ɻ
    ·ͩݕ౼தͷ͜ͱ΋ଟ͘͜͜Ͱ͸࿩͖͠Εͳ͍ͷͰ
    ؾʹͳΔํ͸௚઀ฉ͍͍ͯͩ͘͞ʂ
    

    View Slide

56. ͓ΘΓ
    

    View Slide

57. ࢀߟࢿྉ
    ɾϓϩμΫτؒڞ௨ͷ3FBDUίϯϙʔωϯτϥΠϒϥϦΛӡ༻͢Δ࿩
    ɹɾIUUQTUFDITNBSUISKQFOUSZ
    ɾʮϓϩμΫτؒڞ௨ͷ3FBDUίϯϙʔωϯτϥΠϒϥϦʯ͕Ͳ͏ͳͬ
    ͔ͨɺͱ͍͏࿩
    ɹɾIUUQTUFDITNBSUISKQFOUSZ
    ɾ4NBSU)36*ͷϦϦʔε࡞ۀΛ(JU)VC"DUJPOTͰࣗಈԽͨ͠࿩
    ɹɾIUUQTUFDITNBSUISKQFOUSZ
    ɾ4NBSU)36*Λத৺ͱͨ͠ΤίγεςϜͷ͢͢Ί
    ɹɾIUUQTUFDITNBSUISKQFOUSZ
    

    View Slide