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.4k
Angularの今とこれから
FUKUOKA Engineers Day 2018 ~Autumn~
puku0x
September 22, 2018
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
380
Findyの開発生産性を上げるためにやったこと
puku0x
1
470
Angularコーディングスタイルガイドはいいぞ
puku0x
1
180
Nx CloudでCIを爆速にした話
puku0x
0
590
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
730
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.1k
Nxはいいぞ
puku0x
0
670
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
290
Other Decks in Technology
See All in Technology
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
34k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Web Components: a chance to create the future
zenorocha
307
41k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
The Mythical Team-Month
searls
217
43k
YesSQL, Process and Tooling at Scale
rocio
166
14k
4 Signs Your Business is Dying
shpigford
178
21k
Infographics Made Easy
chrislema
238
18k
GraphQLとの向き合い方2022年版
quramy
36
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
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 ご清聴ありがとうございました