$30 off During Our Annual Pro Sale. View Details »

フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記

wakamsha
November 19, 2023

 フロントエンドリアーキテクチャリングと開発チームのスキルトランスファーにおける9ヶ月間の奮闘記

https://jsconf.jp/2023/talk/wakamsha-1/
https://www.youtube.com/live/N1lhkH33fwY?si=Ytihy_yTzuAdbd5L&t=8774

2023年1月から9月にかけて弊社 BtoB web アプリケーションのリアーキテクチャリングプロジェクトにフロントエンドのシステムアーキテクトとして参画し、技術選定から開発メンバーのスキルトランスファー(育成)、果ては包括的な開発プロセスの改善までと幅広く支援してきました(2023年11月現在も進行中)。そこでの奮闘で得た学びと新たに浮き彫りとなった課題についてご紹介します。

wakamsha

November 19, 2023
Tweet

More Decks by wakamsha

Other Decks in Technology

Transcript

  1. πʔϧ΍ϥΠϒϥϦબఆʹ͓͚Δॿݴ ϑϩϯτΤϯυΞʔΩςΫνϟͷఏҊ ίʔσΟϯάϚχϡΞϧͷఏڙ ίʔυϨϏϡʔ ϖΞϓϩάϥϛϯά αϯϓϧίʔυͷ࡞੒ɾఏڙ খن໛ͳ࣮૷ etc… ຊ֨తͳ࣮૷࡞ۀʹ͸ܞΘΒͳ͍ɻ ͋͘·Ͱʮٕज़ࢧԉऀʯͱ͍͏ཱͪҐஔͰαϙʔτʹప͢Δɻ

    Advice on tool and library selection Proposal of front-end architecture Provision of coding manuals Code review Pair programming Creation and Provision of sample code Small-scale implementation etc… %PO`UFOHBHFJOGVMMTDBMFJNQMFNFOUBUJPOXPSL 0OMZQSPWJEFTVQQPSUJOUIFDBQBDJUZPGUIFl5FDIOJDBM"TTJTUBOUz
  2. ,OPXMFEHFXJMMCFJOUSPEVDFEJOTUBHFTBDDPSEJOHUPTLJMMMFWFM εΩϧϨϕϧʹԠͯ͡ஈ֊తʹಋೖ GraphQL Fragment ͸ graphql-codegen ͷಋೖͱಉ࣌Ͱ͸ͳ͘ɺ Fragment Colocation ͕ඞཁͳՕॴͷ࣮૷λεΫ͕ొ৔͔ͯ͠Βಋೖɻ

    (SBQI2-'SBHNFOUXBTO`UJOUSPEVDFEBUUIFTBNFUJNFBTHSBQIRMDPEFHFO *OUSPEVDFEBGUFSJNQMFNFOUBUJPOUBTLTXIFSF'SBHNFOU$PMPDBUJPOJTSFRVJSFE BQQFBSFE
  3. CSS Flexbox -FBSOPOMZUIFDPSFGFBUVSFT ֩ͱͳΔػೳʹߜΔ ·ͣ͸ fl exbox Λ࢖͍౗͢ɻ ͋Δఔ౓׳Ε͖ͯͨΒ grid

    ʹεςοϓΞοϓ͢Ε͹͍͍ɻ 'JSTU VTF fl FYCPY 0ODFZPVHFUVTFEUPJUUPTPNFFYUFOU ZPVDBOTUFQVQUPHSJE
  4. &OIBODFUIF+4%PD ॆ෼ͳ JSDoc ಺෦࣮૷Λಡ·ΕͨΒෛ͚ɻ ESLint Λಋೖͯ͠ Doc comment ͷهड़ΛඞਢԽ͢Δɻ GitHub

    Copilot Λ׆༻͢Ε͹ͦΕ΄Ͳෛ୲ʹͳΒͳ͍ɻ *GTPNFPOFSFBETZPVSJOUFSOBMJNQMFNFOUBUJPO ZPVMPTF *OUSPEVDJOH&4-JOUBOENBLJOHJUNBOEBUPSZUPXSJUF%PDDPNNFOUT *GZPVVTF(JU)VC$PQJMPU JUXPOUCFUIBUNVDIPGBCVSEFO
  5. .BUUFSTGPSSF fl FDUJPO ൓ল఺ ૣظ͔Βٕज़ݕূɾΩϟονΞοϓ༻ͷ Experimental ϦϙδτϦΛ࡞Δ΂͖ͩͬͨɻ ෳࡶɾଟػೳͳίϯϙʔωϯτ΍ϖʔδ͔Βணखͨ͜͠ͱͰඞཁҎ্ʹۤ࿑͢Δ৔໘͕͋ͬͨɻ Design Doc

    ͱ ADRs ʹର͢Δཧղ͕ෆ଍͓ͯ͠Γɺ૒ํ͕੔ཧ͞Ε͍ͯͳ͍ɻ "OFYQFSJNFOUBMSFQPTJUPSZGPSUFDIOJDBMWFSJ fi DBUJPOBOEDBUDIVQTIPVMEIBWFCFFODSFBUFEGSPNBOFBSMZTUBHF 5IFSFXFSFUJNFTXIFO*TUSVHHMFENPSFUIBOOFDFTTBSZCFDBVTF*TUBSUFEXJUIDPNQMFYBOENVMUJGVODUJPOBM DPNQPOFOUTBOEQBHFT %VFUPBMBDLPGVOEFSTUBOEJOHPG%FTJHO%PDBOE"%3T CPUIXFSFEJTPSHBOJ[FE