Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Angularコーディングスタイルガイドはいいぞ
Search
puku0x
June 22, 2023
Technology
500
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
1
1.9k
新メンバーのために、シニアエンジニアが環境を作る時代
puku0x
0
1.6k
Agent Skills 入門
puku0x
0
2.4k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
2.3k
生成AIではじめるテスト駆動開発
puku0x
0
1.6k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
3.5k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.8k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
330
ファインディでのGitHub Actions活用事例
puku0x
9
4.1k
Other Decks in Technology
See All in Technology
FinOpsを導入してマルチプロダクトのコスト最適化を実現する
kworkdev
PRO
0
130
Maestro MCPとClaude Code Skillsによる自律的なE2Eテスト支援
asmz
0
420
渡米前の準備を制す!re:Invent 2026徹底準備術 / The Ultimate Preparation Guide for re:Invent 2026
yuj1osm
1
550
生成AI時代のIAMのマニアックな話
takuros
6
1.9k
バックオフィスに染み出すTypeScript ── clasp で安全に仕組みを作る
nealle
1
180
Copilot Coworkで「みのるん式」やってみた
minorun365
PRO
2
1.5k
Building Audio Plugin Ecosystem for Android in 2026
atsushieno
2
150
Autonomous AI Lakehouse - Live AI Hubから始めるセキュアなAIデータ活用 -
oracle4engineer
PRO
3
190
セキュリティ専任チームなしで攻撃を先回りするSREが実践したSIEM on Amazon OpenSearch Service
cscengineer
PRO
0
240
超⼩型・多⾔語検索モデル Bekko Embedding
hotchpotch
1
110
PostgreSQL オプティマイザ統計の秘密
nori_shinoda
0
340
AIで選択肢が広がった組織設計の理想と現実
konifar
16
7.7k
Featured
See All Featured
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
400
Building the Perfect Custom Keyboard
takai
2
950
Building AI with AI
inesmontani
PRO
1
1.4k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
370
The Language of Interfaces
destraynor
162
27k
30 Presentation Tips
portentint
PRO
1
460
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
290
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3.1k
First, design no harm
axbom
PRO
2
1.4k
How GitHub (no longer) Works
holman
316
150k
What the history of the web can teach us about the future of AI
inesmontani
PRO
2
790
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