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
480
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.4k
新メンバーのために、シニアエンジニアが環境を作る時代
puku0x
0
1.6k
Agent Skills 入門
puku0x
0
2.2k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
2.2k
生成AIではじめるテスト駆動開発
puku0x
0
1.5k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
3.4k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.7k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
330
ファインディでのGitHub Actions活用事例
puku0x
9
4k
Other Decks in Technology
See All in Technology
AI 時代のスタートアップエコシステ厶から考究する技術的負債との向き合い方
m3m0r7
PRO
0
190
10Xに技術的負債をもたらした「2つの境界の歪み」その構造と解消への営み
10xinc
0
640
AIに丸投げしないトイル削減 / Eliminating Toil Without Leaving It All to AI
kohbis
4
1.1k
Tab5をRubyで動くパソコンにする
kishima
2
360
HRC_Frontend_Conference_Fukuoka_2026.pdf
ts020
0
620
安心して変更できるWebフロントエンドの作り方
pirosikick
4
1.9k
GoCon2026 - Open Source, Open World
sanposhiho
4
3.5k
株式会社シーエーシー エンジニア向け会社紹介資料
cac
0
57k
Slack上でインフラをトラブルシュートする! Agentic Platform Engineeringの第一歩
teru0x1
4
1.5k
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
lycorptech_jp
PRO
1
280
Sigmaユーザーのための有用リソース一挙公開 & Sigmaで使えるMCP #sigma_ucj /useful-resources-for-sigma-computing-users-and-mcps-with-sigma
shinyaa31
0
200
2026-09-09 【sigma_ucj#1】Sigma を IaC 管理したい! / IaC for Sigma
civitaspo
0
120
Featured
See All Featured
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
270
Building AI with AI
inesmontani
PRO
1
1.2k
エンジニアに許された特別な時間の終わり
watany
108
250k
Build your cross-platform service in a week with App Engine
jlugia
234
19k
The Pragmatic Product Professional
lauravandoore
37
7.4k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
240
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.2k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
Amusing Abliteration
ianozsvald
1
290
RailsConf 2023
tenderlove
30
1.5k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.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