フロントエンド開発にtextlintを導入して運用している話

by diescake

Slide 1

Slide 1 text

ϑϩϯτΤϯυ։ൃʹtextlin t Λಋೖͯ͠ӡ༻͍ͯ͠Δ࿩ 2021.07.13 Tue. SaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢ@ΦϯϥΠϯ @diescake SmartHR ϓϩμΫτΤϯδχΞ

Slide 2

Slide 2 text

ۙ౻ େհ SmartHR ϓϩμΫτΤϯδχΞ ʗ೥຤ௐ੔νʔϜʗओʹWebϑϩϯτΤϯυʢReact + TypeScriptʣ ● 2020೥1݄SmartHRೖࣾ ● SmartHR೥຤ௐ੔νʔϜΛॅॲʹͯ͠ɺ2020೥ͷ೥຤ௐ੔ ͷ؅ཧը໘ϦχϡʔΞϧ͔Β࢟Λݱ͢ ● ΫϥϑτϏʔϧΛϙνͬͯ͸ྫྷଂݿʹੵΉशੑΛ࣋ͭ @diescake

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ܦҢɾϞνϕʔγϣϯ

Slide 6

Slide 6 text

SmartHRͷ։ൃάϧʔϓ͸ɺ ϑΟʔνϟʔνʔϜߏ૝Λܝ͛ɺ ΫϩεϑΝϯΫγϣφϧԽͷऔΓ૊ΈΛਐΊ͍ͯ·͢

Slide 7

Slide 7 text

SmartHRຊମ։ൃͷϑΟʔνϟʔνʔϜʢLeSSʣ σβΠϯ ΤϯδχΞϦϯά QA ϓϩμΫτϚωδϝϯτ UXϥΠςΟϯά ΧελϚʔαϙʔτ ਓࣄDB΍͍͖ͬͯνʔϜ ࿈ܞ΍͍͖ͬͯνʔϜ ڊେاۀαΫηενʔϜ ैۀһαΫηενʔϜ ࿈ܞ΍͍͖ͬͯνʔϜ

Slide 8

Slide 8 text

SmartHRຊମ։ൃͷϑΟʔνϟʔνʔϜʢLeSSʣ

Slide 9

Slide 9 text

ΫϩεϑΝϯΫγϣφϧԽͷҰ؀Ͱ จݴʢUXϥΠςΟϯάʣͱ޲͖߹͍࢝Ίͨdiescake Ͱ͕͋ͬͨ…

Slide 10

Slide 10 text

ΫϩεϑΝϯΫγϣφϧԽͷҰ؀Ͱ จݴʢUXϥΠςΟϯάʣͱ޲͖߹͍࢝Ίͨdiescake Ͱ͕͋ͬͨ…

Slide 11

Slide 11 text

ΫϩεϑΝϯΫγϣφϧԽͷҰ؀Ͱ จݴʢUXϥΠςΟϯάʣͱ޲͖߹͍࢝Ίͨdiescake Ͱ͕͋ͬͨ…

Slide 12

Slide 12 text

ΫϩεϑΝϯΫγϣφϧԽͷҰ؀Ͱ จݴʢUXϥΠςΟϯάʣͱ޲͖߹͍࢝Ίͨdiescake Ͱ͕͋ͬͨ…

Slide 13

Slide 13 text

ΫϩεϑΝϯΫγϣφϧԽͷҰ؀Ͱ จݴʢUXϥΠςΟϯάʣͱ޲͖߹͍࢝Ίͨdiescake Ͱ͕͋ͬͨ… ʻ ѱ͍ ΍ͬͺͭΕ͐Θ…

Slide 14

Slide 14 text

- ୯७ͳදه༳ΕɾϧʔϧʹىҼ͢ΔෆඋΛҰ૟͍ͨ͠ - PRͰSuggested changes͕ඈͼަ͏ - ݸʑ୯ޠͷදهΛ͖֮͑Εͳ͍ - SmartHRͷจݴΨΠυϥΠϯࡦఆҎલͷจݴ΋͋Θ͍ͤͨ - ਓ͕ؒຊ౰ʹ೰Ή΂͖఺ʹ஫ྗ͍ͨ͠ Ϟνϕʔγϣϯɾղܾ͍ͨ͠՝୊

Slide 15

Slide 15 text

- ୯७ͳදه༳ΕɾϧʔϧʹىҼ͢ΔෆඋΛҰ૟͍ͨ͠ - PRͰSuggested changes͕ඈͼަ͏ - ݸʑ୯ޠͷදهΛ͖֮͑Εͳ͍ - SmartHRͷจݴΨΠυϥΠϯࡦఆҎલͷจݴ΋͋Θ͍ͤͨ - ਓ͕ؒຊ౰ʹ೰Ή΂͖఺ʹ஫ྗ͍ͨ͠ Ϟνϕʔγϣϯɾղܾ͍ͨ͠՝୊ ʻ ͪΌΜͱݴ͑ͨ͡ΌͶ͔͑

Slide 16

Slide 16 text

textlintͱ͸ʁ

Slide 17

Slide 17 text

- ࣗવݴޠʹର͢Δ੩తνΣοΫπʔϧʢlinterʣ - σϑΥϧτͰplain textɾMarkdownΛαϙʔτ - ϧʔϧɾର৅ϑΝΠϧछผΛϥΠϒϥϦͰ֦ுՄೳ - GitHub্ʹ200Ҏ্ͷϧʔϧ͕ެ։͞Ε͍ͯΔ - author: @azu_re͞Μ textlintͱ͸ʁ

Slide 18

Slide 18 text

textlint͕ݒ໋ʹಇ͍͍ͯΔ༷ࢠ

Slide 19

Slide 19 text

textlintͱϧʔϧɾϓϥάΠϯͱͷؔ܎ 🔌 ϓϥάΠϯ - ର৅ϑΝΠϧΛ௥Ճʢparser࣮૷ʣ - ϥΠϒϥϦ໊͸ textlint-plugin-* ✅ ϧʔϧ - จݴʹର͢ΔϧʔϧΛ௥Ճ - ϥΠϒϥϦ໊͸ textlint-rule-* textlintຊମ - plain text parser - Markdown parser ઃఆϑΝΠϧͰ Πϯϙʔτ ઃఆϑΝΠϧͰ Πϯϙʔτ

Slide 20

Slide 20 text

textlintͱϧʔϧɾϓϥάΠϯͱͷؔ܎ʢReal-worldʣ textlintຊମ - plain text parser - Markdown parser ✅ ϧʔϧAɿ textlint-rule-hoge ઃఆϑΝΠϧͰ Πϯϙʔτ ✅ ϧʔϧBɿ textlint-rule-foo ✅ ϧʔϧCɿ textlint-rule-piyo ✅ ϧʔϧDɿ textlint-rule-buz … 🔌 ϓϥάΠϯAɿ textlint-plugin-waga 🔌 ϓϥάΠϯBɿ textlint-plugin-hai 🔌 ϓϥάΠϯCɿ textlint-plugin-neko 🔌 ϓϥάΠϯDɿ textlint-plugin-dayo … … …

Slide 21

Slide 21 text

Slide 22

Slide 22 text

textlint-rule-preset-smarthr 🎉🎉 - kufu/textlint-rule-preset-smarthr - textlint-rule-preset-smarthr

Slide 23

Slide 23 text

textlintͱϧʔϧɾϓϥάΠϯͱͷؔ܎ʢReal-worldʣ textlintຊମ - plain text parser - Markdown parser ઃఆϑΝΠϧͰ Πϯϙʔτ ✅ ϧʔϧηοτɿ textlint-rule-preset-smarthr 🔌 ϓϥάΠϯAɿ textlint-plugin-waga 🔌 ϓϥάΠϯBɿ textlint-plugin-hai 🔌 ϓϥάΠϯCɿ textlint-plugin-neko 🔌 ϓϥάΠϯDɿ textlint-plugin-dayo … … 🤗

Slide 24

Slide 24 text

- SmartHRͷจݴΨΠυϥΠϯʹ४ڌͨ͠ϧʔϧΛ·ͱΊͨϓ Ϧηοτ - textlintΛಋೖ͢ΔϓϩμΫτଆͰ͸ݸʑͷϧʔϧΛҙࣝͤͣ textlint-rule-preset-smarthrΛΠϯϙʔτ͢Ε͹Α͍ - ৳ͼ͠Ζʹຬͪ͋;Ε͍ͯ·͢😌 textlint-rule-preset-smarthrͱ͸ʁ

Slide 25

Slide 25 text

- textlint-rule-ja-no-redundant-expression - ʮ͢Δ͜ͱ͕Ͱ͖Δʯ➔ʮͰ͖ΔʯͷΑ͏ʹɺͳͯ͘΋͍͍ɾͳ͍΄͏͕ ಡΈ΍͍͢දݱΛݕग़͢Δ - textlint-rule-preset-ja-spacing - ӳޠɾ೔ຊޠؒͷεϖʔε༗ແΛݕग़͢Δ - SmartHRͷจݴΨΠυϥΠϯͰ͸ɺ൒֯ӳ਺ࣈͱ೔ຊޠͷؒʹ͸εϖʔε ΛೖΕͳ͍ϧʔϧΛ࠾༻͍ͯ͠Δ - textlint-rule-ja-hiragana-keishikimeishi - ͻΒ͕ͳͰදهͨ͠΄͏͕ಡΈ΍͍͢ܗ໊ࣜࢺΛݕग़͢Δ - ex.) ໌೔΍Δ͜ͱɺ໌೔΍Δࣄ ✅ ࠾༻͍ͯ͠Δ୅දతͳϧʔϧ

Slide 26

Slide 26 text

- textlint-rule-prh - ࣙॻΛ࣋ͪɺ୯ޠͷظ଴஋Λొ࿥͢Δ͜ͱͰΏΒ͗Λݕग़͢Δ - ਖ਼نදݱʹΑΔ୯ޠొ࿥Λαϙʔτ ✅ ࠾༻͍ͯ͠Δ୅දతͳϧʔϧ

Slide 27

Slide 27 text

✅ ࠾༻͍ͯ͠Δ୅දతͳϧʔϧ - textlint-rule-prh - ࣙॻΛ࣋ͪɺ୯ޠදهͷΏΒ͗Λݕग़͢Δ - ਖ਼نදݱʹΑΔ୯ޠొ࿥Λαϙʔτ

Slide 28

Slide 28 text

textlintΛ ϓϩμΫτʹಋೖ͢Δ

Slide 29

Slide 29 text

ʢ࠶ܝʣtextlintͱϧʔϧɾϓϥάΠϯͱͷؔ܎ʢReal-worldʣ textlintຊମ - plain text parser - Markdown parser ઃఆϑΝΠϧͰ Πϯϙʔτ ✅ ϧʔϧηοτɿ textlint-rule-preset-smarthr 🔌 ϓϥάΠϯAɿ textlint-plugin-waga 🔌 ϓϥάΠϯBɿ textlint-plugin-hai 🔌 ϓϥάΠϯCɿ textlint-plugin-neko 🔌 ϓϥάΠϯDɿ textlint-plugin-dayo … …

Slide 30

Slide 30 text

textlintͱϓϩμΫτͱͷؔ܎ ✅ ϧʔϧηοτɿ textlint-rule-preset-smarthr 🔌 ϓϥάΠϯAɿ textlint-plugin-waga 🔌 ϓϥάΠϯBɿ textlint-plugin-hai 🔌 ϓϥάΠϯCɿ textlint-plugin-neko 🔌 ϓϥάΠϯDɿ textlint-plugin-dayo … … textlintຊମ package.json ϓϩμΫτʢ΢ΣϒϑϩϯτΤϯυɾSlackbotɾChrome Extension ͳͲʣ

Slide 31

Slide 31 text

- textlintຊମɾϧʔϧɾϓϥάΠϯྨΛΠϯετʔϧ - ৄ͘͠͸ɺެࣜυΩϡϝϯτࢀর

Slide 32

Slide 32 text

- textlintͷର৅ϑΝΠϧʹϑϩϯτΤϯυͷιʔείʔυΛ௥Ճ ͢Δʢ*.js, *.ts, *.jsx, *.tsxʣ - ϓϥάΠϯ໊ͦ͜jsxͰ͋Δ͕ɺೖྗϑΝΠϧΛtypescriptͷ parserΛར༻ͯ͠ASTʹม׵͍ͯ͠ΔͷͰTypeScript΋αϙʔτ 🔌 textlint-plugin-jsx

Slide 33

Slide 33 text

- textlintͷઃఆϑΝΠϧʹΤϥʔΛڐ༰͢ΔจݴΛ௥ՃͰ͖Δ - ਖ਼نදݱͷهड़͕Մೳ - 💡 ಋೖɾӡ༻ͷཁʢޙड़ʣ ✅ textlint-filter-rule-allowlist

Slide 34

Slide 34 text

https://textlint.github.io/docs/configuring.htmlΑΓҾ༻ ⚙ textlintͷઃఆϑΝΠϧΛهड़͢Δ

Slide 35

Slide 35 text

- ઃఆϑΝΠϧ͸.textlintrcਪ঑ͱ͞Ε͍ͯΔ͕.textlintrc.ymlΛ࠾ ༻ͨ͠ - 👍 ֦ுࢠ͕໌ࣔ͞Ε͍ͯΔͱsyntax highlighting΍lintingɺΦʔ τϑΥʔϚοτ͕ޮ͘ʢେࣄʣ - 👍 YAML͸ίϝϯτ͕ॻ͚Δʢ௒େࣄʣ ⚙ textlintͷઃఆϑΝΠϧΛهड़͢Δ

Slide 36

Slide 36 text

- Πϯετʔϧͨ͠ϧʔϧͱϓϥάΠϯΛ༗ޮԽ - ৄ͘͠͸ɺެࣜυΩϡϝϯτࢀর .textlintrc.ymlͷૉ๿ͳઃఆ

Slide 37

Slide 37 text

textlintΛ ϓϩμΫτ։ൃͰӡ༻͢Δ

Slide 38

Slide 38 text

≒ textlintΛCIʹࡌͤΔ͜ͱ

Slide 39

Slide 39 text

➔ textlintΛ௨͍ͨ͠…ʂ

Slide 40

Slide 40 text

- textlintΛطଘϓϩμΫτʹಋೖͨ͠௚ޙ͸େྔͷΤϥʔ͕Ͱ Δ͸ͣ 🐛🐛🐛 - ϧʔϧΛ؇ΊͨΓର৅ϑΝΠϧΛݶఆͯ͠Α͍ͷͰɺCIʹࡌ ͤͯάϦʔϯʹͳΔ͜ͱΛ໨ඪʹͯ͠मਖ਼͍ͯ͘͠ - CIͰtextlint͕௨Δ؀ڥΛ࡞͔ͬͯΒɺஈ֊తʹ޿͍͛ͯ͘ - small startͰfalse-negativeͳӡ༻͕େࣄ 💪 textlintΛ௨͍ͨ͠…ʂ

Slide 41

Slide 41 text

- ϧʔϧηοτͷΠϯϙʔτଆͰɺ෦෼తʹϧʔϧΛΦʔόʔϥΠυͰ͖Δ - ແޮԽͨ͠ཧ༝Λίϝϯτͱͯ͠࢒͓ͯ͘͠ͱهԱ૕ࣦʹͳͬͯ΋େৎ෉ textlint-rule-preset-smarthrͷҰ෦ͷϧʔϧΛແޮԽ

Slide 42

Slide 42 text

- ςετίʔυ΍ϞοΫ౳ͷμϛʔσʔλ͕ΤϥʔʹͳΔ৔߹ ͸আ֎͓ͯ͘͠ɺΈ͍ͨͳ࢖͍ํ͕Ͱ͖Δ .textlintignoreͰର৅σΟϨΫτϦɾϑΝΠϧΛݶఆ͢Δ

Slide 43

Slide 43 text

- ͋Γ;Εͨํ๏Ͱ͸͋Δ͕୭ͷ໨ʹ΋Θ͔Γ΍͘͢༗ޮ npm scriptsͰର৅σΟϨΫτϦɾϑΝΠϧΛݶఆ͢Δ

Slide 44

Slide 44 text

- ϧʔϧҧ൓ͱͳΔݻ༗໊ࢺΛొ࿥ͯ͠ΤϥʔΛճආ - textlintͷϧʔϧෆඋʹΑΔΤϥʔ΍Ұ࣌తͳΤϥʔճආͱͯ͠׆༻Ͱ͖Δ allowlistʹ୯ޠΛొ࿥ͯ͠Τϥʔճආ

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

ࠔͬͨΒallowlist 😌

Slide 47

Slide 47 text

- ࣗવݴޠΛѻ͏ͨΊɺ༧ظͤ͵ޡݕ஌͕ൃੜ͠΍͍͢ - ͔͠͠ɺڞ௨ϧʔϧηοτͷमਖ਼➔ϦϦʔεʹ͸ϦʔυλΠ Ϝ͕͔͔Δ - ޡݕ஌͞Εͨจݴ͸allowlistʹ௥Ճ͢Δ͜ͱͰCIͷάϦʔϯ ΛΩʔϓͯ͠࡞ۀΛܧଓͰ͖Δ - ֤ϦϙδτϦͷallowlistΛ؂ࢹ͢Δͱϧʔϧͷ໰୊఺͕ूΊ ΒΕͦ͏ 💡 textlintͷϧʔϧޡݕ஌ճආͷͨΊͷallowlist

Slide 48

Slide 48 text

VSCode࿈ܞ

Slide 49

Slide 49 text

VSCode্Ͱtextlint͕ϦΞϧλΠϜʹ࣮ߦ͞Ε͍ͯΔ༷ࢠ

Slide 50

Slide 50 text

- taichi.vscode-textlintΛΠϯετʔϧ͢Δ - VSCodeͷઃఆʢsettings.jsonʣʹvscode-textlintͷର৅ͱ͢Δ ݴޠΛ௥Ճ͢Δ - σϑΥϧτͰ͸*.js, *.jsx, *.ts, *.tsx͸ର৅ʹͳΒͳ͍ VSCode Extensionͷvscode-textlintΛΠϯετʔϧ

Slide 51

Slide 51 text

ৼΓฦͬͯΈΔ

Slide 52

Slide 52 text

- ୯७ͳදه༳ΕɾϧʔϧʹىҼ͢ΔෆඋΛҰ૟͍ͨ͠ - PRͰSuggested changes͕ඈͼަ͏ - ݸʑ୯ޠͷදهΛ͖֮͑Εͳ͍ - SmartHRͷจݴΨΠυϥΠϯࡦఆҎલͷจݴ΋͋Θ͍ͤͨ - ਓ͕ؒຊ౰ʹ೰Ή΂͖఺ʹ஫ྗ͍ͨ͠ ʢ࠶ܝʣϞνϕʔγϣϯɾղܾ͍ͨ͠՝୊

Slide 53

Slide 53 text

- ୯७ͳදه༳ΕɾϧʔϧʹىҼ͢ΔෆඋΛҰ૟͍ͨ͠ - PRͰSuggested changes͕ඈͼަ͏ - ݸʑ୯ޠͷදهΛ͖֮͑Εͳ͍ - SmartHRͷจݴΨΠυϥΠϯࡦఆҎલͷจݴ΋͋Θ͍ͤͨ - ਓ͕ؒຊ౰ʹ೰Ή΂͖఺ʹ஫ྗ͍ͨ͠ ʢ࠶ܝʣϞνϕʔγϣϯɾղܾ͍ͨ͠՝୊ ׂͱLGTM 🎉🎉

Slide 54

Slide 54 text

- ୯७ͳදه༳ΕɾϧʔϧʹىҼ͢ΔෆඋΛҰ૟͍ͨ͠ - PRͰSuggested changes͕ඈͼަ͏ - ݸʑ୯ޠͷදهΛ͖֮͑Εͳ͍ - SmartHRͷจݴΨΠυϥΠϯࡦఆҎલͷจݴ΋͋Θ͍ͤͨ - ਓ͕ؒຊ౰ʹ೰Ή΂͖఺ʹ஫ྗ͍ͨ͠ ʢ࠶ܝʣϞνϕʔγϣϯɾղܾ͍ͨ͠՝୊ ʻ ΦϨ ͷ͜ͱ޷͖ͩΘ

Slide 55

Slide 55 text

- ׂΕ૭Λ࡞Βͳ͍ܧଓతͳӡ༻ - ΧδϡΞϧʹallowlistʹಥͬࠐΉӡ༻Ͱ΋े෼ޮՌ͸ಘΒΕ Δ - จݴΨΠυϥΠϯͷϧʔϧΛεϜʔζʹϓϩμΫτʹ൓ө͞ ͤΔͨΊͷ౔୆࡞Γ - ΦϯϘʔσΟϯάίετͷ௿ݮ - ਫ਼ਆӴੜͷ޲্ 🤗 👍 Α͔ͬͨ͜ͱɾ࣮ݱͰ͖ͨ͜ͱ

Slide 56

Slide 56 text

- ϧʔϧΛ֦ॆͤͯ͞ɺจݴΨΠυϥΠϯͷΧόϨοδΛ޲্͢ Δ - จݴΛ࣋ͭͷ͸ϑϩϯτΤϯυͷιʔείʔυ͚ͩͰ͸ͳ͍ ʢ*.rb, *.erb ʣ - ϑΝΠϧʹରԠ͢Δtextlint pluginͷ࣮૷͕ඞཁʹͳΔ - จݴΨΠυϥΠϯ͔ΒtextlintͷϧʔϧΛߋ৽͢Δϑϩʔͷ੔උ - ޡݕ஌ͱͳͬͨ୯ޠɾεςʔτϝϯτͷࠜຊղܾ 🤔 ՝୊ɾ΍͍͖͍ͬͯͨ͜ͱ

Slide 57

Slide 57 text

- ࠓճ͸ɺϓϩμΫτͷϑϩϯτΤϯυʹϑΥʔΧεͨ͠࿩Λ ͕ͨ͠ɺαϙʔταΠτ΍ɺΦ΢ϯυϝσΟΞͳͲϢʔβͱ ͷλονϙΠϯτ͸ͨ͘͞Μ͋Δ - ଞ৬ೳͷϝϯόʔΛר͖ࠐΈͳ͕ΒɺΫϩεϑΝϯΫγϣφ ϧʹ׆༻ͷ෯΋޿͍͖͍͛ͯͨ…ʂ 🤔 ՝୊ɾ΍͍͖͍ͬͯͨ͜ͱ

Slide 58

Slide 58 text

https://hello-world.smarthr.co.jp/ ϑϩϯτΤϯυΤϯδχΞੵۃ࠾༻த…ʂʂ 🙏