Tweet
Tweet

Slide 1

Slide 1 text

Angularコーディングスタイルガイド はいいぞ TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2 @puku0x Noriyuki Shinpuku

Slide 2

Slide 2 text

@puku0x 2

Slide 3

Slide 3 text

@puku0x 3 FindyはReactを使っています

Slide 4

Slide 4 text

@puku0x 4 今日はAngularの話をします

Slide 5

Slide 5 text

@puku0x 5

Slide 6

Slide 6 text

@puku0x 6 自由に作っていいよ

Slide 7

Slide 7 text

@puku0x 7 React以外は知らんけど

Slide 8

Slide 8 text

@puku0x 8 おすすめの ディレクトリ構成は？

Slide 9

Slide 9 text

@puku0x 9 https://ja.legacy.reactjs.org/docs/faq-structure.html

Slide 10

Slide 10 text

@puku0x 10 おすすめの 命名規則は？

Slide 11

Slide 11 text

@puku0x 11 自由にやっていいよ 知るか自分で考えろ

Slide 12

Slide 12 text

@puku0x 12 Reactのオピニオンは最小限

Slide 13

Slide 13 text

@puku0x 13 ※それでも決めないといけないリードの皆さん

Slide 14

Slide 14 text

@puku0x 14 https://angular.jp/guide/styleguide

Slide 15

Slide 15 text

@puku0x Angularコーディングスタイルガイド 15 ● 1ファイル400行まで ● 7ファイル以上はディレクトリを切る ● ファイル名はケバブケースに統一 ● ファイルの命名規則は ..ts ：

Slide 16

Slide 16 text

@puku0x 実際にやってみた 16 ● 名前で悩まない ○○.component.tsx, △△.container.tsx function XxxComponent() {...}, function XxxContainer() {...} ● 検索しやすい 拡張子でフィルタをかけやすい

Slide 17

Slide 17 text

@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

Slide 18

Slide 18 text

@puku0x 18 意外と良いかも

Slide 19

Slide 19 text

@puku0x オープンマインド でいきましょう 19

Slide 20

Slide 20 text

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