Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angularコーディングスタイルガイドはいいぞ
Search
puku0x
June 22, 2023
Technology
450
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Angularコーディングスタイルガイドはいいぞ
TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2
puku0x
June 22, 2023
More Decks by puku0x
See All by puku0x
新メンバーのために、シニアエンジニアが環境を作る時代
puku0x
0
1.5k
Agent Skills 入門
puku0x
0
1.9k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
2.1k
生成AIではじめるテスト駆動開発
puku0x
0
1.4k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
3.3k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.6k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
310
ファインディでのGitHub Actions活用事例
puku0x
9
3.9k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
490
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2026年6月度サービス・アップデート
oracle4engineer
PRO
0
130
ザ・データベース、MySQL ~ OSC 2026 Sendai ~
sakaik
0
140
IaC コードを資産へ:AWS CDK 社内ライブラリと横断展開 / aws-summit-japan-2026
gotok365
5
1.1k
脆弱性対応、どこで線を引くか
rymiyamoto
1
420
2026TECHFRESH畢業分享會 - Lightning Talk - 資料也要 CI/CD? 用 Airbyte 自動化資料同步
line_developers_tw
PRO
0
1.3k
Oracle AI Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
6
1.5k
Bucharest Tech Week 2026 - Guardians of the Cloud-Native Galaxy
edeandrea
PRO
0
120
【Snowflake Summit 2026 Recap!!】Snowflake Summit Deep Dive: Security & Governance
civitaspo
1
270
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
findy_eventslides
2
160
アジャイルな経理と Claude Code と経営の未来
kawaguti
PRO
3
160
2026 TECHFRESH 畢業分享會 - 開發日常大解密!從領域驅動到企業級上線
line_developers_tw
PRO
0
1.3k
2026TECHFRESH畢業分享會 - 原生還是跨平台? App 開發踩坑實錄
line_developers_tw
PRO
0
1.3k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Mobile First: as difficult as doing things right
swwweet
225
10k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
200
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
52k
Deep Space Network (abreviated)
tonyrice
0
210
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.1k
Are puppies a ranking factor?
jonoalderson
1
3.6k
WCS-LA-2024
lcolladotor
0
650
KATA
mclloyd
PRO
35
15k
The agentic SEO stack - context over prompts
schlessera
0
820
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
210
Transcript
Angularコーディングスタイルガイド はいいぞ TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2 @puku0x Noriyuki Shinpuku
@puku0x 2
@puku0x 3 FindyはReactを使っています
@puku0x 4 今日はAngularの話をします
@puku0x 5
@puku0x 6 自由に作っていいよ
@puku0x 7 React以外は知らんけど
@puku0x 8 おすすめの ディレクトリ構成は?
@puku0x 9 https://ja.legacy.reactjs.org/docs/faq-structure.html
@puku0x 10 おすすめの 命名規則は?
@puku0x 11 自由にやっていいよ 知るか自分で考えろ
@puku0x 12 Reactのオピニオンは最小限
@puku0x 13 ※それでも決めないといけないリードの皆さん
@puku0x 14 https://angular.jp/guide/styleguide
@puku0x Angularコーディングスタイルガイド 15 • 1ファイル400行まで • 7ファイル以上はディレクトリを切る • ファイル名はケバブケースに統一 •
ファイルの命名規則は <feature>.<type>.ts :
@puku0x 実際にやってみた 16 • 名前で悩まない ◦◦.component.tsx, △△.container.tsx function XxxComponent() {...},
function XxxContainer() {...} • 検索しやすい 拡張子でフィルタをかけやすい
@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
@puku0x 18 意外と良いかも
@puku0x オープンマインド でいきましょう 19
@puku0x Angularコーディングスタイルガイド はいいぞ @puku0x Noriyuki Shinpuku