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
370
Angularコーディングスタイルガイドはいいぞ
TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2
puku0x
June 22, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
1.7k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.3k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
240
ファインディでのGitHub Actions活用事例
puku0x
9
3.5k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
440
Findyの開発生産性を上げるためにやったこと
puku0x
1
610
Nx CloudでCIを爆速にした話
puku0x
0
890
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
880
Other Decks in Technology
See All in Technology
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
120
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
150
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
670
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
230
様々なファイルシステム
sat
PRO
0
240
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
130
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
170
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
360
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
2.3k
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
160
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Faster Mobile Websites
deanohume
310
31k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Side Projects
sachag
455
43k
Statistics for Hackers
jakevdp
799
220k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Embracing the Ebb and Flow
colly
88
4.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Designing for humans not robots
tammielis
254
26k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
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