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
1
400
Angularコーディングスタイルガイドはいいぞ
TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2
puku0x
June 22, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
1.4k
生成AIではじめるテスト駆動開発
puku0x
0
830
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
2.5k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.4k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
270
ファインディでのGitHub Actions活用事例
puku0x
9
3.6k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
460
Findyの開発生産性を上げるためにやったこと
puku0x
1
630
Nx CloudでCIを爆速にした話
puku0x
0
930
Other Decks in Technology
See All in Technology
AI Agent Standards and Protocols: a Walkthrough of MCP, A2A, and more...
glaforge
0
210
歴史から学ぶ、Goのメモリ管理基礎
logica0419
14
2.7k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.3k
AI に「学ばせ、調べさせ、作らせる」。Auth0 開発を加速させる7つの実践的アプローチ
scova0731
0
240
Cloud WAN MCP Serverから考える新しいネットワーク運用 / 20251228 Masaki Okuda
shift_evolve
PRO
0
150
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
5
1.5k
次世代AIコーディング:OpenAI Codex の最新動向 進行スライド/nikkei-tech-talk-40
nikkei_engineer_recruiting
0
140
Oracle Cloud Infrastructure:2025年12月度サービス・アップデート
oracle4engineer
PRO
0
280
「アウトプット脳からユーザー価値脳へ」がそんなに簡単にできたら苦労しない #RSGT2026
aki_iinuma
11
5k
re:Invent2025 セッションレポ ~Spec-driven development with Kiro~
nrinetcom
PRO
2
170
旬のブリと旬の技術で楽しむ AI エージェント設計開発レシピ
chack411
1
240
Redshift認可、アップデートでどう変わった?
handy
1
140
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
220
The Cost Of JavaScript in 2023
addyosmani
55
9.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
120
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
1.8k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
270
Become a Pro
speakerdeck
PRO
31
5.8k
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.7k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
140
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