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
470
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
910
新メンバーのために、シニアエンジニアが環境を作る時代
puku0x
0
1.6k
Agent Skills 入門
puku0x
0
2.1k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
2.2k
生成AIではじめるテスト駆動開発
puku0x
0
1.5k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
3.4k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.7k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
320
ファインディでのGitHub Actions活用事例
puku0x
9
4k
Other Decks in Technology
See All in Technology
コミュニティから始まった農業IoTとの7年間 ——人との関わりが教えてくれたこと
peacemaker07
0
110
tamachi.go 誕生の裏側
rymiyamoto
1
200
AI時代の「OAuth認証」にどう物申すか?(OAuth/OIDC Numa (Immersion) Workshop 2026)
oidfj
PRO
0
130
Eight Engineering Unit 紹介資料
sansan33
PRO
3
8.3k
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
12
85k
AI画像認識を活用したゲーム内決済処理検証の自動化
gree_tech
PRO
0
450
医療の現場を変革に挑戦した半年間の軌跡 - PythonとAIで現場を変える / From Code to Care
soudai
PRO
1
610
Kiro Crew で始める マルチエージェント開発
miu_crescent
PRO
0
180
パスキーでドライブする アカウント統合(OAuth/OIDC Numa (Immersion) Workshop 2026)
oidfj
PRO
0
130
わたしが知り合いゼロの勉強会に 行けるようになるまで
r5ni4
2
630
NANDでも描画したい!
nichica906
3
690
MIXIで活躍できるエンジニアを 若手社員目線で考えてみる
mixi_engineers
PRO
0
150
Featured
See All Featured
Producing Creativity
orderedlist
PRO
348
40k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.8k
Ruling the World: When Life Gets Gamed
codingconduct
0
310
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
560
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
380
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
3k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.2k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
470
The Illustrated Children's Guide to Kubernetes
chrisshort
51
53k
A better future with KSS
kneath
240
18k
Deep Space Network (abreviated)
tonyrice
0
270
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