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
380
Angularコーディングスタイルガイドはいいぞ
TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2
puku0x
June 22, 2023
Tweet
Share
More Decks by puku0x
See All by puku0x
生成AIではじめるテスト駆動開発
puku0x
0
84
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
1.9k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.3k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
240
ファインディでのGitHub Actions活用事例
puku0x
9
3.6k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
440
Findyの開発生産性を上げるためにやったこと
puku0x
1
620
Nx CloudでCIを爆速にした話
puku0x
0
900
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
Other Decks in Technology
See All in Technology
Logik: A Free and Open-source FPGA Toolchain
omasanori
0
290
Post-AIコーディング時代のエンジニア生存戦略
shinoyu
0
250
AWS IAM Identity Centerによる権限設定をグラフ構造で可視化+グラフRAGへの挑戦
ykimi
2
720
re:Invent完全攻略ガイド
junjikoide
1
280
お試しで oxlint を導入してみる #vuefes_aftertalk
bengo4com
2
1.4k
QAエンジニアがプロダクト専任で チームの中に入ると。。。?/登壇資料(杉森 太樹)
hacobu
PRO
0
190
エンタープライズ企業における開発効率化のためのコンテキスト設計とその活用
sergicalsix
1
350
ステートレスなLLMでステートフルなAI agentを作る - YAPC::Fukuoka 2025
gfx
4
600
ubuntu-latest から ubuntu-slim へ移行しよう!コスト削減うれしい~!
asumikam
0
470
JJUG CCC 2025 Fall バッチ性能!!劇的ビフォーアフター
hayashiyuu1
0
140
旧から新へ: 大規模ウェブクローラの Perl から Go への移行 / YAPC::Fukuoka 2025
motemen
1
740
AIと共に開発する時代の組織、プロセス設計 freeeでの実践から見えてきたこと
freee
3
600
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
33k
How GitHub (no longer) Works
holman
315
140k
The Cult of Friendly URLs
andyhume
79
6.7k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.1k
Code Reviewing Like a Champion
maltzj
527
40k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
660
Site-Speed That Sticks
csswizardry
13
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