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
200
ファインディでのGitHub Actions活用事例
puku0x
9
3.3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
420
Findyの開発生産性を上げるためにやったこと
puku0x
1
590
Angularコーディングスタイルガイドはいいぞ
puku0x
1
320
Nx CloudでCIを爆速にした話
puku0x
0
840
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
840
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.7k
Other Decks in Technology
See All in Technology
Kotlinで学ぶ 代数的データ型
ysknsid25
5
1.1k
doda開発 生成AI元年宣言!自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
techtekt
0
130
Nonaka Sensei
kawaguti
PRO
3
610
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
OCI Oracle Database Services新機能アップデート(2025/03-2025/05)
oracle4engineer
PRO
1
140
「規約、知識、オペレーション」から考える中規模以上の開発組織のCursorルールの 考え方・育て方 / Cursor Rules for Coding Styles, Domain Knowledges and Operations
yuitosato
6
1.6k
自分を理解するAI時代の準備 〜マイプロフィールMCPの実装〜
edo_m18
0
100
Data Hubグループ 紹介資料
sansan33
PRO
0
1.8k
Go Connectへの想い
chiroruxx
0
160
AWS と定理証明 〜ポリシー言語 Cedar 開発の舞台裏〜 #fp_matsuri / FP Matsuri 2025
ytaka23
9
2.4k
大失敗しないための Web API 開発レシピ / A recipe for not making a big failure on WebAPI development
yokawasa
1
260
Securing your Lambda 101
chillzprezi
0
240
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Agile that works and the tools we love
rasmusluckow
329
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
A designer walks into a library…
pauljervisheath
206
24k
Done Done
chrislema
184
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
For a Future-Friendly Web
brad_frost
179
9.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
KATA
mclloyd
29
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
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 ご清聴ありがとうございました