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
470
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
270
新メンバーのために、シニアエンジニアが環境を作る時代
puku0x
0
1.5k
Agent Skills 入門
puku0x
0
2k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
2.2k
生成AIではじめるテスト駆動開発
puku0x
0
1.5k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
3.4k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.7k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
320
ファインディでのGitHub Actions活用事例
puku0x
9
3.9k
Other Decks in Technology
See All in Technology
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
1.2k
[MIRU26] To What Extent Does MLLM-as-a-Judge Exhibit Cross-Model Preference Bias?
keio_smilab
PRO
0
200
GitHub CopilotのFinOps- AI CreditのObservabilityと価値を生むためのエージェント設計
yuriemori
0
100
名古屋の市バスGTFS-JPデータ×スガキヤ 最寄りバス停検索をAmazon ElastiCache Serverless for Valkeyで最適化する
usanchuu
1
270
『三匹の子ぶた』から学ぶネットワークセキュリティの昔と今 / Network Security: Then and Now Through the Lens of The Three Little Pigs
nttcom
1
1.7k
MIRU 2026 チュートリアル
keisuke198619
0
810
データ組織の転換期 一足飛びしない段階的戦略
leveragestech
PRO
0
150
Master Dataグループ紹介資料
sansan33
PRO
1
4.8k
今こそ聞きたいソフトウェア設計 ドメイン駆動設計再入門
masuda220
PRO
16
5.7k
トヨタ⽣産⽅式(TPS)⼊⾨
recruitengineers
PRO
1
400
Digitization部 紹介資料
sansan33
PRO
2
7.7k
Cursor Meetup Sapporo - Cursor物語 続編
cocacola917
0
120
Featured
See All Featured
KATA
mclloyd
PRO
35
15k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
67
56k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.2k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
360
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
56
3.4k
Designing for Timeless Needs
cassininazir
1
430
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
820
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
270
Prompt Engineering for Job Search
mfonobong
0
390
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
190
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
460
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