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.5k
新メンバーのために、シニアエンジニアが環境を作る時代
puku0x
0
1.6k
Agent Skills 入門
puku0x
0
2.2k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
2.3k
生成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に奪われないし、たぶんその BIも要らない
hikaruri
0
470
AI時代、データエンジニアが一番おもろい
genshun9
0
600
Geolonia の開発現場における AIの活用について
miya0001
0
100
Claude Codeを「使うほど育つ」AI秘書にするノウハウ
minorun365
PRO
27
22k
顧客に向き合う開発組織へ。リアーキテクチャとフィーチャーチーム化で挑む組織改革
safie
0
1.9k
AI時代の「技術的負債」の変質ー概念の終焉と再解釈、エージェントと共に向かう先
nwiizo
0
2.6k
AIを活用するために決めた "やらないこと" - 価値に注目する / Not betting on AI
soudai
PRO
1
520
Claude in Chrome 入門 / Introduction to Claude in Chrome
cielo1985
0
810
開発投資の期待値を上げるプロダクトロードマップづくり ~プロダクトエンジニアが越境して事業を伸ばす~
kekekenta
1
170
今話題のAI「Jev」って何? 宇宙最速で学ぶ会
minorun365
PRO
21
12k
SREは、MCPとAutopilotをこう使え!
kazumax55
2
800
バイブコーディング時代のWebアプリ開発入門~Cloud Runで学ぶセキュアなビルドとデプロイ
waiwai2111
1
120
Featured
See All Featured
Designing Powerful Visuals for Engaging Learning
tmiket
1
550
The agentic SEO stack - context over prompts
schlessera
0
940
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
1
520
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
590
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
280
Statistics for Hackers
jakevdp
799
230k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
480
Designing for humans not robots
tammielis
254
26k
A Soul's Torment
seathinner
8
3.6k
エンジニアに許された特別な時間の終わり
watany
109
250k
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