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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
puku0x
June 22, 2023
Technology
460
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
1.5k
Agent Skills 入門
puku0x
0
1.9k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
2.1k
生成AIではじめるテスト駆動開発
puku0x
0
1.4k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
3.3k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.7k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
310
ファインディでのGitHub Actions活用事例
puku0x
9
3.9k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
490
Other Decks in Technology
See All in Technology
しくみを学んで使いこなそう GitHub Copilot app
torumakabe
1
180
AI Agent SaaS を支える自社仮想化基盤への挑戦と実運用 / ai-agent-saas-virtualization
flatt_security
2
3.6k
勉強会企画をアプリで構造化してみた 〜そこで見えた、AIとの付き合い方〜 / I've structured a study group plan using an app.
pauli
0
340
テスト設計の本質を改めて考えてみる~生成AIを活用する時代だからこそ、作ったテストの説明性を高めよう~
yamasaki696
1
450
AWS Summit の片隅で、体育座りしながらコミュニティがにぎわう理由を考えた
k_adachi_01
2
370
Foxgloveについて 実際にExtensionを開発して公開するまでの話 / About Foxglove: The Story of Developing and Releasing an Extension
ry0_ka
0
190
デジタル・デザイン:次の50年を描く「進化する青写真」
y150saya
0
840
デジタル・デザイン構想 by Sayaka Ishizuka
y150saya
0
200
環境凍結という Toil を倒す -セルフサービス型 Ephemeral テスト環境の 設計と実践
shirouz
1
2.1k
CSに"SLO"は要らない、経営層に"99.9%"は伝わらない - SREを全社に"翻訳"する3原則
cscengineer
PRO
1
4.3k
プライバシー保護の理論と実践
lycorptech_jp
PRO
1
250
ADDF - ループエンジニアリングするフレームワークを作ったら/I Didn't Set Out to Build Loop Engineering, But ADDF Did
fruitriin
0
100
Featured
See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
310
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.7k
Darren the Foodie - Storyboard
khoart
PRO
3
3.4k
AI: The stuff that nobody shows you
jnunemaker
PRO
8
810
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Utilizing Notion as your number one productivity tool
mfonobong
4
360
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
490
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.7k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
760
So, you think you're a good person
axbom
PRO
2
2.1k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.6k
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