Angularコーディングスタイルガイドはいいぞ

TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2

Transcript

1. Angularコーディングスタイルガイド はいいぞ TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2 @puku0x Noriyuki Shinpuku
2. @puku0x 2
3. @puku0x 3 FindyはReactを使っています
4. @puku0x 4 今日はAngularの話をします
5. @puku0x 5
6. @puku0x 6 自由に作っていいよ
7. @puku0x 7 React以外は知らんけど
8. @puku0x 8 おすすめの ディレクトリ構成は？
9. @puku0x 9 https://ja.legacy.reactjs.org/docs/faq-structure.html
10. @puku0x 10 おすすめの 命名規則は？
11. @puku0x 11 自由にやっていいよ 知るか自分で考えろ
12. @puku0x 12 Reactのオピニオンは最小限
13. @puku0x 13 ※それでも決めないといけないリードの皆さん
14. @puku0x 14 https://angular.jp/guide/styleguide
15. @puku0x Angularコーディングスタイルガイド 15 • 1ファイル400行まで • 7ファイル以上はディレクトリを切る • ファイル名はケバブケースに統一 • ファイルの命名規則は <feature>.<type>.ts ：
16. @puku0x 実際にやってみた 16 • 名前で悩まない ◦◦.component.tsx, △△.container.tsx function XxxComponent() {...}, function XxxContainer() {...} • 検索しやすい 拡張子でフィルタをかけやすい
17. @puku0x コミュニティの知見も活用 17 • Container Component層のロジックのHooks → Facade https://thomasburlesonia.medium.com/ngrx-facades-better-state-management-82a04b9a1e39 • Presentational Component層のロジックのHooks → Presenter https://dev.to/this-is-angular/model-view-presenter-with-angular-533h
18. @puku0x 18 意外と良いかも
19. @puku0x オープンマインド でいきましょう 19
20. @puku0x Angularコーディングスタイルガイド はいいぞ @puku0x Noriyuki Shinpuku