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
1
400
Angularコーディングスタイルガイドはいいぞ
TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2
puku0x
June 22, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
生成AIではじめるテスト駆動開発
puku0x
0
780
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
2.5k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.4k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
260
ファインディでのGitHub Actions活用事例
puku0x
9
3.6k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
460
Findyの開発生産性を上げるためにやったこと
puku0x
1
630
Nx CloudでCIを爆速にした話
puku0x
0
930
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
Other Decks in Technology
See All in Technology
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
5
1.5k
20251203_AIxIoTビジネス共創ラボ_第4回勉強会_BP山崎.pdf
iotcomjpadmin
0
170
Qiita Bash アドカレ LT #1
okaru
0
150
2025-12-27 Claude CodeでPRレビュー対応を効率化する@機械学習社会実装勉強会第54回
nakamasato
4
1.4k
M&Aで拡大し続けるGENDAのデータ活用を促すためのDatabricks権限管理 / AEON TECH HUB #22
genda
0
310
Claude Skillsの テスト業務での活用事例
moritamasami
1
130
AIエージェントを5分で一気におさらい!AIエージェント「構築」元年に備えよう
yakumo
1
130
AI駆動開発ライフサイクル(AI-DLC)の始め方
ryansbcho79
0
290
投資戦略を量産せよ 2 - マケデコセミナー(2025/12/26)
gamella
0
570
国井さんにPurview の話を聞く会
sophiakunii
1
250
I tried making a solo advent calendar!
zzzzico
0
120
[PR] はじめてのデジタルアイデンティティという本を書きました
ritou
0
720
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Ethics towards AI in product and experience design
skipperchong
1
150
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
240
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
690
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
38
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Cost Of JavaScript in 2023
addyosmani
55
9.4k
Scaling GitHub
holman
464
140k
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