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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
puku0x
June 22, 2023
Technology
490
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
4k
Other Decks in Technology
See All in Technology
Post AI時代のリファクタリング実践記 / Refactoring in the post AI era
kaminashi
1
300
会社紹介資料 / Sansan Company Profile
sansan33
PRO
31
430k
TinyGoでオブザーバビリティ?OpenTelemetryはTinyGoで使えるのか / Is OpenTelemetry available in TinyGo environment?
ymotongpoo
2
140
Gemini Intelligence 入門 ― AppFunctions と Gemini Nano
takuroabe
0
300
会社説明資料
persolserverworks
0
9.8k
『SAR衛星データ解析入門』のご紹介とその応用
syuchimu
0
120
僕のハーネスを紹介します
watany
3
120
Webの常識が通じないHTMLメールのダークモード
teamlab
PRO
0
140
LambdaWebFunctionsを試してみた / exploring-lambda-web-functions
koukihosaka
1
360
DGX Spark でどこまでハッキングができるのか?
kash1064
3
1.4k
How to Design Configuration for Rails Applications
willnet
1
850
AI × アーキテクト 第1・2章|生成AIの課題とアーキテクトの素養
daidaidai
0
190
Featured
See All Featured
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
480
Visualization
eitanlees
153
17k
GitHub's CSS Performance
jonrohan
1033
470k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
530
Intergalactic Javascript Robots from Outer Space
tanoku
273
28k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
570
Into the Great Unknown - MozCon
thekraken
41
2.8k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
520
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
380
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
580
HDC tutorial
michielstock
2
960
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