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.3k
Angularの今とこれから
FUKUOKA Engineers Day 2018 ~Autumn~
puku0x
September 22, 2018
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
350
Findyの開発生産性を上げるためにやったこと
puku0x
1
430
Angularコーディングスタイルガイドはいいぞ
puku0x
1
140
Nx CloudでCIを爆速にした話
puku0x
0
520
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.5k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
700
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
1.8k
Nxはいいぞ
puku0x
0
640
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
250
Other Decks in Technology
See All in Technology
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
210
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
320
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
530
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
310
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
480
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
360
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
本当のAWS基礎
toru_kubota
0
520
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
Databricks における 『MLOps』
databricksjapan
2
170
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
BBQ
matthewcrist
80
8.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Bash Introduction
62gerente
604
210k
The Language of Interfaces
destraynor
151
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
4 Signs Your Business is Dying
shpigford
175
21k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
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 ご清聴ありがとうございました