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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
puku0x
June 22, 2023
Technology
440
1
Share
Angularコーディングスタイルガイドはいいぞ
TechBrew 〜 一杯のお酒で繋がるエンジニアたち〜@福岡 #2
puku0x
June 22, 2023
More Decks by puku0x
See All by puku0x
新メンバーのために、シニアエンジニアが環境を作る時代
puku0x
0
1.4k
Agent Skills 入門
puku0x
0
1.8k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
2k
生成AIではじめるテスト駆動開発
puku0x
0
1.3k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
3.2k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.6k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
300
ファインディでのGitHub Actions活用事例
puku0x
9
3.8k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
480
Other Decks in Technology
See All in Technology
データモデリング通り #5オンライン勉強会: AIに『ビジネスの文脈』を教え込むデータモデリング
datayokocho
0
260
自動テストだけで リリース判断できるチームへ - 鍵はテストの量ではなくリリース判断基準の再設計にあった / Redesigning Release Criteria for Lightweight Releases
ewa
7
3.7k
要件定義の精度を高めるための型と生成AIの活用 / Using Types and Generative AI to Improve the Accuracy of Requirements Definition
haru860
0
320
React 19×Rustツール 進化の「ズレ」を設計で埋める
remrem0090
1
110
「強制アップデート」か「チームの自律」か?エンタープライズが辿り着いたプラットフォームのハイブリッド運用/cloudnative-kaigi-hybrid-platform-operations
mhrtech
0
180
ESP32 IoTを動かしながらメモリ使用量を観測してみた話
zozotech
PRO
0
110
ブラウザの投機的読み込みと投機ルールAPIを理解し、Webサービスのパフォーマンスを最適化する
shuta13
3
300
可視化から活用へ — Mesh化・Segmentation・アライメントの研究動向
gpuunite_official
0
170
クラウドネイティブ DB はいかにして制約を 克服したか? 〜進化歴史から紐解く、スケーラブルアーキテクチャ設計指針〜
hacomono
PRO
6
920
そのSLO 99.9%、本当に必要ですか? 〜優先度付きSLOによる責任共有の設計思想〜 / Is that 99.9% SLO really necessary? Design philosophy of shared responsibility through prioritized SLOs
vtryo
0
600
鹿野さんに聞く!CSSの最新トレンド Ver.2026
tonkotsuboy_com
6
2.9k
AI時代の品質はテストプロセスの作り直し #scrumniigata
kyonmm
PRO
4
1.5k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.6k
Designing for Performance
lara
611
70k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
290
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
140
Into the Great Unknown - MozCon
thekraken
41
2.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.3k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
190
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.4k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
180
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.8k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
300
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