React / TypeScript_の_コード品質について考えた.pdf

Transcript

1. React / TypeScript の コード品質について考える created_at: 2019-07-19　updated_at: 2019-07-20
2. 椎野 太喜 (22) > 出身 　　茨城県出身 > 所属 　　redish株式会社　新卒エンジニア > アカウント 　　Twitter: buena926 　　GitHub: taikishiino 自己紹介
3. 　コード品質
4. プロダクトが立ち上げフィーズ から 運用フェーズに入った テーマのきっかけ
5. テーマのきっかけ 3ヶ月のフロントエンドリプレイス
6. テーマのきっかけ 3ヶ月のフロントエンドリプレイス
7. ソースコードがきたない テーマのきっかけ
8. たまにキャメルケースがあったり たまにセミコロンがあったり たまにダブルクォートがあったり たまに変な改行があったり ソースコードがきたない テーマのきっかけ
9. 自分のきたないコードをどうやって 隠そうか考えた テーマのきっかけ
10. 方法 Lint達にまかせる
11. ESLint ・コードクオリティーチェック ・フォーマットルールチェック Prettier (プリティア??) ・フォーマットルールチェック ・自動修正 に特化したツール Component (.tsx) フォーマット整形 ESLint と Prettireを併用する @eslint-config-prettier ×
12. Styleライブラリ
13. styled-component フォーマット整形 stylelint @stylelint-processor-styled-components styled-components用のStyleLint Processor ライブラリ ・フォーマットチェック ・自動修正
14. いつ フォーマットチェックと自動整形を 走らせるか？
15. コミット時にチェック/整形 pre-commit機能でgit commit時にeslint --fixが実行
16. 共同開発でのコード品質を一定に commit push
17. プロジェクトフロー commit push
18. プロジェクトフロー commit push build & test
19. プロジェクトフロー commit push build & test masterマージ Trigger build & deploy
20. まとめ コーディングルールは 自動整形ツールにまかせよう