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
430
1
Share
Angularコーディングスタイルガイドはいいぞ
TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2
puku0x
June 22, 2023
More Decks by puku0x
See All by puku0x
新メンバーのために、シニアエンジニアが環境を作る時代
puku0x
0
1.1k
Agent Skills 入門
puku0x
0
1.7k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
2k
生成AIではじめるテスト駆動開発
puku0x
0
1.2k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
3.1k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.6k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
300
ファインディでのGitHub Actions活用事例
puku0x
9
3.8k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
470
Other Decks in Technology
See All in Technology
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
250
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
4.2k
Claude Code を安全に使おう勉強会 / Claude Code Security Basics
masahirokawahara
1
9.1k
終盤で崩壊させないAI駆動開発
j5ik2o
2
2.2k
Azure Static Web Apps の自動ビルドがタイムアウトしやすくなった状況に対応した件/global-azure2026
thara0402
0
350
こんなアーキテクチャ図はいやだ / Anti-pattern in AWS Architecture Diagrams
naospon
1
400
「責任あるAIエージェント」こそ自社で開発しよう!
minorun365
8
1.5k
扱える不確実性を増やしていく - スタートアップEMが考える「任せ方」
kadoppe
0
230
EarthCopilotに学ぶマルチエージェントオーケストレーション
nakasho
0
250
クラウドネイティブな開発 ~ 認知負荷に立ち向かうためのコンテナ活用
literalice
0
100
AI時代にデータ基盤が持つべきCapabilityを考える + Snowflake Data Superheroやっていき宣言 / Considering the Capabilities Data Platforms Should Have in the AI Era + Declaration of Commitment as a Snowflake Data Superhero
civitaspo
0
110
ネットワーク運用を楽にするAWS DevOps Agent活用法!! / 20260421 Masaki Okuda
shift_evolve
PRO
2
180
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
How GitHub (no longer) Works
holman
316
150k
The untapped power of vector embeddings
frankvandijk
2
1.7k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
210
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
110
We Are The Robots
honzajavorek
0
210
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
210
For a Future-Friendly Web
brad_frost
183
10k
Accessibility Awareness
sabderemane
0
99
The Illustrated Children's Guide to Kubernetes
chrisshort
51
52k
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