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.7k
Angularの今とこれから
FUKUOKA Engineers Day 2018 ~Autumn~
puku0x
September 22, 2018
Tweet
Share
More Decks by puku0x
See All by puku0x
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
1.8k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.3k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
240
ファインディでのGitHub Actions活用事例
puku0x
9
3.5k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
440
Findyの開発生産性を上げるためにやったこと
puku0x
1
610
Angularコーディングスタイルガイドはいいぞ
puku0x
1
370
Nx CloudでCIを爆速にした話
puku0x
0
890
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
Other Decks in Technology
See All in Technology
AWS re:Invent 2025事前勉強会資料 / AWS re:Invent 2025 pre study meetup
kinunori
0
780
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
6
1.4k
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
120
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
120
CLIPでマルチモーダル画像検索 →とても良い
wm3
0
530
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
1
620
OSSで50の競合と戦うためにやったこと
yamadashy
3
1k
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.2k
AWSが好きすぎて、41歳でエンジニアになり、AAIを経由してAWSパートナー企業に入った話
yama3133
1
180
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
5
1.4k
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
290
Okta Identity Governanceで実現する最小権限の原則
demaecan
0
190
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
A designer walks into a library…
pauljervisheath
209
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
120
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 ご清聴ありがとうございました