$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angularコーディングスタイルガイドはいいぞ
Search
puku0x
June 22, 2023
Technology
1
390
Angularコーディングスタイルガイドはいいぞ
TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2
puku0x
June 22, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
生成AIではじめるテスト駆動開発
puku0x
0
660
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
2.2k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.4k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
240
ファインディでのGitHub Actions活用事例
puku0x
9
3.6k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
450
Findyの開発生産性を上げるためにやったこと
puku0x
1
620
Nx CloudでCIを爆速にした話
puku0x
0
910
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
Other Decks in Technology
See All in Technology
Uncertainty in the LLM era - Science, more than scale
gaelvaroquaux
0
470
安いGPUレンタルサービスについて
aratako
1
1.6k
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
640
DGX SparkでローカルLLMをLangChainで動かした話
ruzia
1
260
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3.3k
私も懇親会は苦手でした ~苦手だからこそ懇親会を楽しむ方法~ / 20251127 Masaki Okuda
shift_evolve
PRO
4
550
手動から自動へ、そしてその先へ
moritamasami
0
180
Capture Checking / Separation Checking 入門
tanishiking
0
110
翻訳・対話・越境で強いチームワークを作ろう! / Building Strong Teamwork through Interpretation, Dialogue, and Border-Crossing
ar_tama
4
1.6k
私のRails開発環境
yahonda
0
180
mablでリグレッションテストをデイリー実行するまで #mablExperience
bengo4com
0
470
Databricksによるエージェント構築
taka_aki
1
120
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
Six Lessons from altMBA
skipperchong
29
4.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
How GitHub (no longer) Works
holman
316
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Visualization
eitanlees
150
16k
Building Applications with DynamoDB
mza
96
6.8k
Designing for humans not robots
tammielis
254
26k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Side Projects
sachag
455
43k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
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