Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

puku0x
June 22, 2023

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

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

puku0x

June 22, 2023
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. @puku0x 10
    おすすめの
    命名規則は?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. @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

    View full-size slide

  16. @puku0x 18
    意外と良いかも

    View full-size slide

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

    View full-size slide

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

    View full-size slide