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
September 22, 2018
Technology
4
2.6k
Angularの今とこれから
FUKUOKA Engineers Day 2018 ~Autumn~
puku0x
September 22, 2018
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
210
ファインディでのGitHub Actions活用事例
puku0x
9
3.3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
590
Angularコーディングスタイルガイドはいいぞ
puku0x
1
330
Nx CloudでCIを爆速にした話
puku0x
0
850
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
850
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.8k
Other Decks in Technology
See All in Technology
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
260
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
540
解析の定理証明実践@Lean 4
dec9ue
0
180
OpenHands🤲にContributeしてみた
kotauchisunsun
1
430
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
740
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
400
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
270
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
230
Witchcraft for Memory
pocke
1
310
Featured
See All Featured
Docker and Python
trallard
44
3.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
A better future with KSS
kneath
239
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Side Projects
sachag
455
42k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Building Applications with DynamoDB
mza
95
6.5k
Why Our Code Smells
bkeepers
PRO
337
57k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
GitHub's CSS Performance
jonrohan
1031
460k
Statistics for Hackers
jakevdp
799
220k
Transcript
Angularの今とこれから 新福 宜侑 @puku0x ng-fukuoka organizer
最近のフロントエンド • 言語 • スタイル • パフォーマンス • ライブラリ •
ビルドツール • テスト :
None
Angular
Angular Googleが主導するフロントエンドフレームワーク • TypeScript • フルスタック • 高いパフォーマンス • 充実したエコシステム
https://angular.io/
TypeScript • MS製のAltJS ◦ ESのスーパーセット ◦ 静的型付け言語 → 保守性に優れる TypeScript
ES201x ES5
コンポーネント @Component({ selector: 'my-app', template: `Hello, {{title}} !` }) export
class AppComponent { title = 'Angular'; }
サービス @Injectable() export class AppService { constructor(private http: HttpClient) {}
getTodos() { return this.http.get<Todo[]>('/todos'); } }
なぜ Angular ? • フルスタック ◦ ビュー、ルーティング、非同期通信など全部入り • アプリケーション開発に専念できる ◦
ライブラリ選定や環境構築、保守で疲弊しない
Angularの今
Angular 6
Angularのバージョン • セマンティックバージョニング採用 6.0.0 Patch: バグ修正 Minor: 機能追加(破壊的変更なし) Major: 半年毎に更新(破壊的変更あり)
サポート期間 v4 v5 v6 v4 LTS v5 LTS v6 LTS
半年 1年 ※9/23 v4のLTSは終了しました
Angular 6 • 「Stability & Innovation」 • フレームワークとしての安定性UP • ツール周りの拡充
新しいDI機構(Tree-shakable Providers) @Injectable({ providedIn: 'root' // シングルトンのサービスが作られる }) export class
AppService { constructor(private http: HttpClient) {} }
Router Scroller(v6.1〜) @NgModule({ imports: [ RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled', anchorScrolling:
'enabled', }) ],
Angular Elements
Angular Elements • コンポーネントをCustom Elementsにできる ◦ React/Vue.js/jQueryとの柔軟な組み合わせ • 起動処理を変更してビルドするだけ
Custom Elements 生成 export class AppComponent { constructor(injector: Injector) {
const HelloElement = createCustomElement( HelloComponent, { injector }); customElements.define('app-hello', HelloElement); } } ※ ビルド時に tsconfig.json で "target": "es2015" の指定が必要です
Tools
Angular CLI 環境構築 $ ng new コード生成 $ ng generate
$ ng add バージョンアップ $ ng update https://cli.angular.io/
ng add 対応モジュール Angular Elements Progressive Web App Angular Material
Angular Language Service(VS Code 拡張) • コード補完 • テンプレートチェック •
定義ジャンプ https://marketplace.visualstudio.com/items?itemName =Angular.ng-template
StackBlitz オンライン版 VS Code 様々なテンプレート • Angular • Ionic •
React • Vue.js https://stackblitz.com/
公式ドキュメント https://angular.io/ ドキュメント自体がAngular アプリケーション
Community
790以上のミートアップ 53万人以上のメンバー 今後も成長 ng-japan 2018 Keynote コミュニティ
140万人/月のアクティブユーザ ng-japan 2018 Keynote
国内の コミュニティ • 東京 • 京都 • 神戸 • 福岡
• 群馬 [New] https://community.angular.jp/
国内ユーザ数 https://angular.jp 月間9000人以上の アクティブユーザ
Angularのこれから
Ivy 新しいレンダラー ・バンドルサイズ削減 ・高速なビルド ・シンプルなAPI ng-conf 2018: Angular Keynote https://docs.google.com/presentation/d/1zgpjyV
kDgUPfGKuxOcU0lLusCiMSfLZZjYHWrFvl71I
ng-conf 2018: Angular Keynote(翻訳)
2.7kB すごい(語彙力)
今すぐ試したい?
$ ng new my-app --experimental-ivy ※開発中のため動作保証されません
Angular Console Angular CLIのGUI版 まだベータ版 https://angularconsole.com/
Angular for Designers Cloud Prototyping Tool Angular用のビジュアル プロトタイピングツール が登場する? ng-conf
2018: Angular for Designers - Stephen Fluin https://www.youtube.com/watch?v=LP-fNM8OITI
AngularJS 1.7.xで最後 LTSは2021年6月末まで Angularに移行しましょう 2009 − 2021
まとめ • Angularコミュニティは世界中で成長 • ツールの拡充でより使いやすくなった • v7以降で導入予定のIvyに期待
ng-fukuokaのイベントもよろしくお願いします https://ng-fukuoka.connpass.com/
【宣伝】フロントエンドカンファレンス【福岡】 https://frontend-conf.fukuoka.jp/
新福 宜侑 @puku0x ng-fukuoka organizer ご清聴ありがとうございました