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
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
940
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
2.7k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.5k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
280
ファインディでのGitHub Actions活用事例
puku0x
9
3.6k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
470
Findyの開発生産性を上げるためにやったこと
puku0x
1
640
Nx CloudでCIを爆速にした話
puku0x
0
940
Other Decks in Technology
See All in Technology
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
slsops
2
200
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
kworkdev
PRO
1
360
Mosaic AI Gatewayでコーディングエージェントを配るための運用Tips / JEDAI 2026 新春 Meetup! AIコーディング特集
genda
0
150
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
kekke_n
1
310
(金融庁共催)第4回金融データ活用チャレンジ勉強会資料
takumimukaiyama
0
110
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
torounit
0
420
GSIが複数キー対応したことで、俺達はいったい何が嬉しいのか?
smt7174
3
130
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
bwkw
2
810
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
aeonpeople
1
150
20260129_CB_Kansai
takuyay0ne
1
270
Webhook best practices for rock solid and resilient deployments
glaforge
1
240
データ民主化のための LLM 活用状況と課題紹介(IVRy の場合)
wxyzzz
2
640
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
71k
Become a Pro
speakerdeck
PRO
31
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
Music & Morning Musume
bryan
47
7.1k
A Tale of Four Properties
chriscoyier
162
24k
Automating Front-end Workflow
addyosmani
1371
200k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.7k
The untapped power of vector embeddings
frankvandijk
1
1.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
750
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