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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
puku0x
June 22, 2023
Technology
1
410
Angularコーディングスタイルガイドはいいぞ
TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2
puku0x
June 22, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
1.7k
生成AIではじめるテスト駆動開発
puku0x
0
960
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
2.8k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.5k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
280
ファインディでのGitHub Actions活用事例
puku0x
9
3.7k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
470
Findyの開発生産性を上げるためにやったこと
puku0x
1
640
Nx CloudでCIを爆速にした話
puku0x
0
950
Other Decks in Technology
See All in Technology
AI駆動開発を事業のコアに置く
tasukuonizawa
1
320
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
kekke_n
1
500
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
rocketmartue
1
310
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
aeonpeople
1
250
usermode linux without MMU - fosdem2026 kernel devroom
thehajime
0
240
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
usanchuu
3
450
22nd ACRi Webinar - NTT Kawahara-san's slide
nao_sumikawa
0
100
SRE Enabling戦記 - 急成長する組織にSREを浸透させる戦いの歴史
markie1009
0
140
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
capytan
6
2.8k
超初心者からでも大丈夫!オープンソース半導体の楽しみ方〜今こそ!オレオレチップをつくろう〜
keropiyo
0
120
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
rvirus0817
0
320
日本の85%が使う公共SaaSは、どう育ったのか
taketakekaho
1
230
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
Become a Pro
speakerdeck
PRO
31
5.8k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
220
WCS-LA-2024
lcolladotor
0
450
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
120
Six Lessons from altMBA
skipperchong
29
4.2k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
100
Odyssey Design
rkendrick25
PRO
1
500
Chasing Engaging Ingredients in Design
codingconduct
0
110
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
380
エンジニアに許された特別な時間の終わり
watany
106
230k
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