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 Platform
Search
puku0x
February 26, 2019
Technology
5
490
Angular Platform
FukuokaJS #7
puku0x
February 26, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
170
ファインディでのGitHub Actions活用事例
puku0x
9
3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
410
Findyの開発生産性を上げるためにやったこと
puku0x
1
560
Angularコーディングスタイルガイドはいいぞ
puku0x
1
270
Nx CloudでCIを爆速にした話
puku0x
0
760
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
790
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.6k
Other Decks in Technology
See All in Technology
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
Building Products in the LLM Era
ymatsuwitter
10
4.4k
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
How to train your dragon (web standard)
notwaldorf
90
5.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Code Reviewing Like a Champion
maltzj
521
39k
The Invisible Side of Design
smashingmag
299
50k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Facilitating Awesome Meetings
lara
51
6.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Transcript
Angular Platform FukuokaJS #7
Noriyuki Shinpuku ng-fukuoka organizer @puku0x 2 VEGA corporation Co., Ltd.
フロントエンドの課題 • 複雑&大規模化 • デザイン • パフォーマンス • トレンドの追従 •
生産性 • 保守 : 3
4 つらい
5 Angular
Angular Googleが開発するフロントエンドフレームワーク • フルスタック • 堅牢&高速 • 充実したエコシステム https://angular.io/ 6
Why Angular? 7
8
TypeScript • JSのスーパーセット • 漸進的型付け言語 • 高い保守性 9 TypeScript ES201x
ES5
コンポーネント @Component({ selector: 'app-root', template: `<p>Hello, {{ title }} !</p>`,
}) export class AppComponent { title = 'Angular'; } 10
サービス/プロバイダ 11 @Injectable({ providedIn: 'root' }) export class UserService {
constructor(private http: HttpClient) {} fetchUsers() { return this.http.get<User[]>('/users'); } }
12 モジュール機構(NgModule) Root Module Feature Module Shared Module Feature Module
Feature Module Bootstrap Eager Loaded Lazy Loaded { path: './feature', loadChildren: './feature.module#FeatureModule' } @NgModule({ imports: [SharedModule] }) export class FeatureModule { }
13 is “Full Stack”
公式パッケージ 14
Angular Material 15
Angular Material • 公式UIライブラリ • 新Material Design対応 16 https://material.angular.io
17
Component Dev Kit 18
Component Dev Kit • Virtual Scroll & Drag-and-Drop https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-s croll-drag-and-drop-and-more-c594e22e7b8c
19
Angular Elements 20
Custom Elementsとして出力 export class AppModule implements DoBootstrap { constructor(injector: Injector)
{ const el = createCustomElement(HelloComponent, { injector }); customElements.define('app-hello', el); } ngDoBootstrap(appRef: ApplicationRef) {} } 21
22 Tools
Angular CLI 23 環境構築 $ ng new コード生成/機能追加 $ ng
generate $ ng add 開発/リリース $ ng serve $ ng build --prod https://cli.angular.io/
$ npm install -g @angular/cli 24
Angularアプリケーションの作成 $ ng new my-app ? Would you like to
add Angular routing? Yes ? Which stylesheet format would you like to use? (Use arrow keys) ❯ CSS SCSS [ http://sass-lang.com ] SASS [ http://sass-lang.com ] LESS [ http://lesscss.org ] Stylus [ http://stylus-lang.com ] 25
• Schematicsによる拡張 CLIエコシステム 26
27 $ ng add
ng add 対応パッケージ 28
29 $ ng update
サポート期間 半年 年 今ここ 30 APIの破壊的変更は 段階的に適用される
31 https://link.medium.com/KgTODwwFWT
Language Service(VS Code 拡張) 32 • コード補完 • テンプレートチェック •
定義ジャンプ https://marketplace.visualstudio.com/items?itemName =Angular.ng-template
33
Angular Console Angular CLIのGUI版 デスクトップアプリ または VS Code拡張 34 https://angularconsole.com/
StackBlitz 35 オンライン版 VS Code 様々なテンプレート • Angular • Ionic
• React https://stackblitz.com/
36 Community
37 ng-japan 2018 Keynote
38 150万人/月のアクティブユーザ https://twitter.com/angular/status/1069727630734151680
39 https://news.crunchbase.com/news/popular-web-frameworks-seed-early-stage-startups/
40 国内 約1万人/月のアクティブユーザ
国内コミュニティ 41 • 東京 • 京都 • 神戸 • 福岡
• 群馬 https://community.angular.jp/
Angular in 2019 42
Angular v8/v9 43
Ivy 新しいレンダラー ・バンドルサイズ削減 ・高速なビルド ・シンプルなAPI ng-conf 2018: Angular Keynote https://docs.google.com/presentation/d/1zgpjyV
kDgUPfGKuxOcU0lLusCiMSfLZZjYHWrFvl71I 44
45 ng-conf 2018: Angular Keynote(和訳)
$ ng new my-app --experimental-ivy ※正常に動作しない場合があります 46
47 Bazel
Bazelビルドサポート $ npm i -g @angular/bazel $ ng new my-app
--collection=@angular/bazel $ cd my-app $ ng serve $ ng build --prod 48
49 ngAtlanta 2019: Angular in 2019 http://bit.ly/ngAtlanta-2019 Angular Mix 2018:
Angular Prototyping Tool http://bit.ly/AngularCodesign
50 Angular
51 学習コストが...
まぁわかる 52
でも 53
コストに見合う リターンがある 54
Angularを選んで良かったこと(1) • 強いオピニオン ◦ Angularチームのベストプラクティス ◦ 高品質なデフォルトセット ◦ 意思決定のコスト削減 •
プロダクトの価値に集中できる 55
Angularを選んで良かったこと(2) • 将来の資産となる知識 ◦ モダンなWeb技術 ◦ 次世代のWeb標準 ◦ コンポーネント設計、テスト設計 •
将来を見据えた技術習得 56
• スピード • スケーラビリティ • 将来性 57
58 https://angular.jp/ Angularをはじめよう 日本語ドキュメント もあります
新福 宜侑 @puku0x ng-fukuoka organizer Thank you! 59