Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angularコーディングスタイルガイドはいいぞ
Search
puku0x
June 22, 2023
Technology
1
400
Angularコーディングスタイルガイドはいいぞ
TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2
puku0x
June 22, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
生成AIではじめるテスト駆動開発
puku0x
0
740
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
2.4k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.4k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
250
ファインディでのGitHub Actions活用事例
puku0x
9
3.6k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
450
Findyの開発生産性を上げるためにやったこと
puku0x
1
630
Nx CloudでCIを爆速にした話
puku0x
0
920
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
Other Decks in Technology
See All in Technology
AWS運用を効率化する!AWS Organizationsを軸にした一元管理の実践/nikkei-tech-talk-202512
nikkei_engineer_recruiting
0
170
[Data & AI Summit '25 Fall] AIでデータ活用を進化させる!Google Cloudで作るデータ活用の未来
kirimaru
0
3.5k
障害対応訓練、その前に
coconala_engineer
0
190
2025-12-18_AI駆動開発推進プロジェクト運営について / AIDD-Promotion project management
yayoi_dd
0
150
テストセンター受験、オンライン受験、どっちなんだい?
yama3133
0
120
Authlete で実装する MCP OAuth 認可サーバー #CIMD の実装を添えて
watahani
0
150
マイクロサービスへの5年間 ぶっちゃけ何をしてどうなったか
joker1007
19
7.5k
Snowflake導入から1年、LayerXのデータ活用の現在 / One Year into Snowflake: How LayerX Uses Data Today
civitaspo
0
2.3k
MariaDB Connector/C のcaching_sha2_passwordプラグインの仕様について
boro1234
0
1k
NIKKEI Tech Talk #41: セキュア・バイ・デザインからクラウド管理を考える
sekido
PRO
0
200
Strands AgentsとNova 2 SonicでS2Sを実践してみた
yama3133
1
1.7k
M&Aで拡大し続けるGENDAのデータ活用を促すためのDatabricks権限管理 / AEON TECH HUB #22
genda
0
230
Featured
See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
330
We Are The Robots
honzajavorek
0
120
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
580
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Designing for humans not robots
tammielis
254
26k
Google's AI Overviews - The New Search
badams
0
870
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
73
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
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