Submit Search
Upload
Angular2実践入門
•
Download as PPTX, PDF
•
43 likes
•
37,790 views
Shumpei Shiraishi
Follow
ng-japan 2016で発表したスライドです。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 47
Download now
Recommended
「自分の内側を観る」と 世界が変わるかも?~自分自身を紐解くメンタルモデルのご紹介~
「自分の内側を観る」と 世界が変わるかも?~自分自身を紐解くメンタルモデルのご紹介~
Takeshi Kakeda
リーンスタートアップ、アジャイル開発導入事例
リーンスタートアップ、アジャイル開発導入事例
Arata Fujimura
概念モデルって難しいですよね
概念モデルって難しいですよね
Takuya Kawabe
ビルド職人の朝は早い
ビルド職人の朝は早い
Masashi MATSUI
基本設計+詳細設計の書き方 社内勉強会0304
基本設計+詳細設計の書き方 社内勉強会0304
furuCRM株式会社 CEO/Dreamforce Vietnam Founder
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
ザ・ジェネラリスト #5000dai
ザ・ジェネラリスト #5000dai
kyon mm
良いコードとは
良いコードとは
Nobuyuki Matsui
Recommended
「自分の内側を観る」と 世界が変わるかも?~自分自身を紐解くメンタルモデルのご紹介~
「自分の内側を観る」と 世界が変わるかも?~自分自身を紐解くメンタルモデルのご紹介~
Takeshi Kakeda
リーンスタートアップ、アジャイル開発導入事例
リーンスタートアップ、アジャイル開発導入事例
Arata Fujimura
概念モデルって難しいですよね
概念モデルって難しいですよね
Takuya Kawabe
ビルド職人の朝は早い
ビルド職人の朝は早い
Masashi MATSUI
基本設計+詳細設計の書き方 社内勉強会0304
基本設計+詳細設計の書き方 社内勉強会0304
furuCRM株式会社 CEO/Dreamforce Vietnam Founder
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
ザ・ジェネラリスト #5000dai
ザ・ジェネラリスト #5000dai
kyon mm
良いコードとは
良いコードとは
Nobuyuki Matsui
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
Yoshitaka Kawashima
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話
Yusuke Hisatsu
JobSchedulerを使ったAsakusaのジョブ管理
JobSchedulerを使ったAsakusaのジョブ管理
OSSラボ株式会社
從Arduino 與 8051之戰看台灣產業根深蒂固的硬體 costdown思維
從Arduino 與 8051之戰看台灣產業根深蒂固的硬體 costdown思維
鍾誠 陳鍾誠
ソーシャルゲームにおけるMongoDB適用事例 - Animal Land
ソーシャルゲームにおけるMongoDB適用事例 - Animal Land
Masakazu Matsushita
会社にGitHub Enterpriseを導入してみた話
会社にGitHub Enterpriseを導入してみた話
Shuji Yamada
Node-RED TIPS:functionノード間で関数を共有する方法
Node-RED TIPS:functionノード間で関数を共有する方法
Kazuki Saito
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
「コンバージョン数を2倍にしてくれ」と言われた時の対処法
「コンバージョン数を2倍にしてくれ」と言われた時の対処法
Tsuyoshi Kaneko
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
Yoshiki Hayama
PostgreSQLのトラブルシューティング@第5回中国地方DB勉強会
PostgreSQLのトラブルシューティング@第5回中国地方DB勉強会
Shigeru Hanada
Git入門
Git入門
小川 昌吾
ノンプログラマのGit入門
ノンプログラマのGit入門
Muyuu Fujita
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさ
Yoshiki Hayama
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
テストコード入門
テストコード入門
小川 昌吾
差別化で未来を生き抜く エンジニアの7つの秘訣
差別化で未来を生き抜く エンジニアの7つの秘訣
Yusuke Yamamoto
(2017.6.9) Neo4jの可視化ライブラリまとめ
(2017.6.9) Neo4jの可視化ライブラリまとめ
Mitsutoshi Kiuchi
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
僕はどうしてAngular2をテーマに登壇することになってしまったのか
僕はどうしてAngular2をテーマに登壇することになってしまったのか
Tomohiro Noguchi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
More Related Content
What's hot
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
Yoshitaka Kawashima
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話
Yusuke Hisatsu
JobSchedulerを使ったAsakusaのジョブ管理
JobSchedulerを使ったAsakusaのジョブ管理
OSSラボ株式会社
從Arduino 與 8051之戰看台灣產業根深蒂固的硬體 costdown思維
從Arduino 與 8051之戰看台灣產業根深蒂固的硬體 costdown思維
鍾誠 陳鍾誠
ソーシャルゲームにおけるMongoDB適用事例 - Animal Land
ソーシャルゲームにおけるMongoDB適用事例 - Animal Land
Masakazu Matsushita
会社にGitHub Enterpriseを導入してみた話
会社にGitHub Enterpriseを導入してみた話
Shuji Yamada
Node-RED TIPS:functionノード間で関数を共有する方法
Node-RED TIPS:functionノード間で関数を共有する方法
Kazuki Saito
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
Koichiro Matsuoka
「コンバージョン数を2倍にしてくれ」と言われた時の対処法
「コンバージョン数を2倍にしてくれ」と言われた時の対処法
Tsuyoshi Kaneko
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
Yoshiki Hayama
PostgreSQLのトラブルシューティング@第5回中国地方DB勉強会
PostgreSQLのトラブルシューティング@第5回中国地方DB勉強会
Shigeru Hanada
Git入門
Git入門
小川 昌吾
ノンプログラマのGit入門
ノンプログラマのGit入門
Muyuu Fujita
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさ
Yoshiki Hayama
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
テストコード入門
テストコード入門
小川 昌吾
差別化で未来を生き抜く エンジニアの7つの秘訣
差別化で未来を生き抜く エンジニアの7つの秘訣
Yusuke Yamamoto
(2017.6.9) Neo4jの可視化ライブラリまとめ
(2017.6.9) Neo4jの可視化ライブラリまとめ
Mitsutoshi Kiuchi
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
What's hot
(20)
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
思考停止しないアーキテクチャ設計 ➖ JJUG CCC 2018 Fall
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話
JobSchedulerを使ったAsakusaのジョブ管理
JobSchedulerを使ったAsakusaのジョブ管理
從Arduino 與 8051之戰看台灣產業根深蒂固的硬體 costdown思維
從Arduino 與 8051之戰看台灣產業根深蒂固的硬體 costdown思維
ソーシャルゲームにおけるMongoDB適用事例 - Animal Land
ソーシャルゲームにおけるMongoDB適用事例 - Animal Land
会社にGitHub Enterpriseを導入してみた話
会社にGitHub Enterpriseを導入してみた話
Node-RED TIPS:functionノード間で関数を共有する方法
Node-RED TIPS:functionノード間で関数を共有する方法
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
「コンバージョン数を2倍にしてくれ」と言われた時の対処法
「コンバージョン数を2倍にしてくれ」と言われた時の対処法
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
PostgreSQLのトラブルシューティング@第5回中国地方DB勉強会
PostgreSQLのトラブルシューティング@第5回中国地方DB勉強会
Git入門
Git入門
ノンプログラマのGit入門
ノンプログラマのGit入門
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさ
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
テストコード入門
テストコード入門
差別化で未来を生き抜く エンジニアの7つの秘訣
差別化で未来を生き抜く エンジニアの7つの秘訣
(2017.6.9) Neo4jの可視化ライブラリまとめ
(2017.6.9) Neo4jの可視化ライブラリまとめ
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Similar to Angular2実践入門
僕はどうしてAngular2をテーマに登壇することになってしまったのか
僕はどうしてAngular2をテーマに登壇することになってしまったのか
Tomohiro Noguchi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
Nodeにしましょう
Nodeにしましょう
Yuzo Hebishima
初心者向けAndroidゲーム開発ノウハウ
初心者向けAndroidゲーム開発ノウハウ
Kentarou Mukunasi
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
【関東GPGPU勉強会#3】OpenCVの新機能 UMatを先取りしよう
【関東GPGPU勉強会#3】OpenCVの新機能 UMatを先取りしよう
Yasuhiro Yoshimura
パターンでわかる! .NET Coreの非同期処理
パターンでわかる! .NET Coreの非同期処理
Kouji Matsui
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
77web
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
leverages_event
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について
Kazuhiro Hara
Telloをarマーカーで操作する
Telloをarマーカーで操作する
ssuser81580e
2006-04-22 CLR/H #14 .NET and open source
2006-04-22 CLR/H #14 .NET and open source
Yoshiyuki Nakamura
OpenCLに触れてみよう
OpenCLに触れてみよう
You&I
【関東GPGPU勉強会#2】OpenCVのOpenCL実装oclMat
【関東GPGPU勉強会#2】OpenCVのOpenCL実装oclMat
Yasuhiro Yoshimura
2010年11月27日土曜日FlexUserGroup勉強会 第125回 京都 Flex & Google App Engine for Java & ...
2010年11月27日土曜日FlexUserGroup勉強会 第125回 京都 Flex & Google App Engine for Java & ...
Sadao Tokuyama
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
Masahito Zembutsu
Deep Dive into Modules
Deep Dive into Modules
Hideki Saito
Qt5のセンサーAPIを使ってみたい
Qt5のセンサーAPIを使ってみたい
You&I
『フルスタックエンジニアを目指す』ためのOpenStack勉強術 - OpenStack最新情報セミナー 2014年2月
『フルスタックエンジニアを目指す』ためのOpenStack勉強術 - OpenStack最新情報セミナー 2014年2月
VirtualTech Japan Inc.
Similar to Angular2実践入門
(20)
僕はどうしてAngular2をテーマに登壇することになってしまったのか
僕はどうしてAngular2をテーマに登壇することになってしまったのか
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Nodeにしましょう
Nodeにしましょう
初心者向けAndroidゲーム開発ノウハウ
初心者向けAndroidゲーム開発ノウハウ
Angular#Kanazawa
Angular#Kanazawa
【関東GPGPU勉強会#3】OpenCVの新機能 UMatを先取りしよう
【関東GPGPU勉強会#3】OpenCVの新機能 UMatを先取りしよう
パターンでわかる! .NET Coreの非同期処理
パターンでわかる! .NET Coreの非同期処理
Enterprise x AngularJS
Enterprise x AngularJS
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について
Telloをarマーカーで操作する
Telloをarマーカーで操作する
2006-04-22 CLR/H #14 .NET and open source
2006-04-22 CLR/H #14 .NET and open source
OpenCLに触れてみよう
OpenCLに触れてみよう
【関東GPGPU勉強会#2】OpenCVのOpenCL実装oclMat
【関東GPGPU勉強会#2】OpenCVのOpenCL実装oclMat
2010年11月27日土曜日FlexUserGroup勉強会 第125回 京都 Flex & Google App Engine for Java & ...
2010年11月27日土曜日FlexUserGroup勉強会 第125回 京都 Flex & Google App Engine for Java & ...
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
Deep Dive into Modules
Deep Dive into Modules
Qt5のセンサーAPIを使ってみたい
Qt5のセンサーAPIを使ってみたい
『フルスタックエンジニアを目指す』ためのOpenStack勉強術 - OpenStack最新情報セミナー 2014年2月
『フルスタックエンジニアを目指す』ためのOpenStack勉強術 - OpenStack最新情報セミナー 2014年2月
More from Shumpei Shiraishi
俺的GEB概論(前半)
俺的GEB概論(前半)
Shumpei Shiraishi
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
Shumpei Shiraishi
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
Shumpei Shiraishi
変身×フランツ・カフカ
変身×フランツ・カフカ
Shumpei Shiraishi
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
Shumpei Shiraishi
漫☆画太郎論
漫☆画太郎論
Shumpei Shiraishi
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
Shumpei Shiraishi
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
Shumpei Shiraishi
はじめにことばありき
はじめにことばありき
Shumpei Shiraishi
秒速一億円
秒速一億円
Shumpei Shiraishi
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
Shumpei Shiraishi
20130921レジュメ2
20130921レジュメ2
Shumpei Shiraishi
第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」
第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」
Shumpei Shiraishi
はやぶさ」からの贈り物
はやぶさ」からの贈り物
Shumpei Shiraishi
More from Shumpei Shiraishi
(20)
俺的GEB概論(前半)
俺的GEB概論(前半)
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
変身×フランツ・カフカ
変身×フランツ・カフカ
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
漫☆画太郎論
漫☆画太郎論
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
はじめにことばありき
はじめにことばありき
秒速一億円
秒速一億円
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
20130921レジュメ2
20130921レジュメ2
第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」
第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」
はやぶさ」からの贈り物
はやぶさ」からの贈り物
Recently uploaded
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
Recently uploaded
(8)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
Angular2実践入門
1.
Angular2実践入門 株式会社オープンウェブ・テクノロジー 白石俊平
2.
自己紹介 • html5jファウンダー • HTML5
Experts.jp編集長 • 株式会社オープンウェブ・テクノロ ジー代表取締役 • TechFeedというサービスをはじめ ました
3.
本日の流れ • ライブコーディングで学ぶAngular2 • Angular2を始めたらあなたが出会うであ ろう11のこと
4.
ライブコーディングで学ぶ Angular2
5.
スターターキット作りました • https://goo.gl/WiM2zn – 短縮前:
https://github.com/shumpei/angular2-webpack-starter-minimum • Angular2をWebpackで始めるための最小構成。 – 教育用途、もしくは開発環境を自作したい人向け • Out-of-boxを求めるなら以下がおすすめ – angular-seed・・・公式のスターターキット。全 部入り。 – angular-webpack-starter・・・それなりにコンパ クトで割と全部入り
6.
動かしてみる $ git clone
https://github.com/shumpei/angular2- webpack-starter-minimum $ cd angular2-webpack-starter-minimum $ npm install $ npm start http://localhost:8080/webpack-dev-server/
7.
Angular2の特徴 • TypeScriptを推奨 • コンポーネント指向 •
ちょっとキモい • Angularっぽさ • やっぱりキモい
8.
特徴その1: TypeScript • ES.next全部
+ 型 • 実験的なサポート扱いの「デコレー ター」は必須
9.
コードを眺めてみる
10.
import {Component} from
'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } app.component.ts
11.
import {Component} from
'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } コンポーネント定義 (デコレーター) app.component.ts
12.
import {Component} from
'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } <my-app>で 埋め込めるように app.component.ts
13.
import {Component} from
'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } テンプレート ファイルのURL app.component.ts
14.
特徴その2: コンポーネント指向 • UIコンポーネントをツリー上に構成して アプリケーションを作る
15.
コンポーネントを書いてみる
16.
import {Component} from
'angular2/core'; @Component({ selector: 'my-alert-button', templateUrl: '/src/components/alert- button.component.html' }) export class AlertButtonComponent { } alert-button.component.ts <button>Click me!</button> alert-button.component.html <my-alert-button>で 埋め込めるように
17.
import {Component} from
'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html', directives: [AlertButtonComponent] }) export class AppComponent { } 使用するディレク ティブを宣言 app.component.ts <h1>My first Angular2 app!</h1> <my-alert-button></my-alert-button> alert-button.component.html ディレクティブを 利用
18.
特徴その3: ちょっとキモい • テンプレートのシンタックスがキモい
19.
クリックイベントを捕捉してみる
20.
<button (click)="onClick()">Click me!</button> キモい alert-button.component.ts export
class AlertButtonComponent { onClick(): void { window.alert('Hello!'); } } alert-button.component.ts 対応するイベントハ ンドラ
21.
特徴その4: Angularっぽさ • サービス/DI/ディレクティブなど、 Angular1で使われてた用語/概念を引き 継いでいる –
やり方は大きく変わったけど
22.
サービスを書いてDIしてみる
23.
import {Injectable} from
'angular2/core'; @Injectable() export class MyService { loadData(): string[] { return ['a', 'b', 'c']; } } DI可能なサービスの 定義 my.service.ts
24.
... import {MyService} from
'../services/my.service'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html', directives: [AlertButtonComponent], providers: [MyService] }) export class AppComponent { private data: string[]; constructor(private myService: MyService) { this.data = myService.loadData(); } } プロバイダの指定 my.service.ts Inject!
25.
特徴その5: やっぱりキモい • テンプレート中では、以下の様な記法を 要素内に記述していくことになる。 –
( ), [ ], [( )], #, * – 全力出すとこんな感じ: • HTML/CSSをデコレーターで指定できる <input *ngIf="alive" [(ngModel)]="name" #name>
26.
ループを書いてみる(ngFor)
27.
... <ul> <li *ngFor="#item of
data">{{item}}</li> </ul> DI可能なサービスの 定義 app.component.html
28.
テンプレートをデコレーターに 埋め込んでみる。 ついでにCSSも。
29.
@Component({ selector: 'my-app', template: ` <h1>My
first Angular2 app!</h1> <my-alert-button></my-alert-button> <ul> <li *ngFor="#item of data">{{item}}</li> </ul> `, styles: [` h1 { color: red; } `], directives: [AlertButtonComponent], providers: [MyService] }) export class AppComponent {...} alert-button.component.ts app.component.ts HTMLもCSSも デコレータに埋め込 める
30.
CSSもカプセル化される • @Componentデコレーターのstylesというプ ロパティにCSSを指定できる。 • そのCSSはコンポーネント内のみ有効 import
{Component} from 'angular2/core'; @Component({ selector: 'my-alert-button', templateUrl: '/src/components/alert- button.component.html', styles: [`* {color: blue;}`] }) export class AlertButtonComponent { } コンポーネント外に は影響しない
31.
Angular2を始めたらあなたが 出会うであろう11のこと
32.
techfeed.io 最先端が、ここにある。 世界中からエンジニア向け情報を収集するサービス Angular2を仕事で使ってみた
33.
その1: ハードル高くない? • 前提技術大杉。 –
TypeScript (ES.next全部+型) – モジュールバンドラー – RxJS – そしてもちろんAngular2 • 意外とそうでもなかった(個人的には) – Angularの文脈を引き継いでいる – TypeScriptはJavaっぽい(白石は元Java屋) – RxJSは最初から詳しく知っている必要なし – Webpackの調整が一番時間かかった。。 • でもこれは誰か一人がやればいいこと
34.
その2: 言語はどれを選ぶ? • TypeScript一択、だと思う –
ドキュメント完備 – 型があるのは嬉しい(コンパイル/コード補 完) – デコレーターが嬉しい • その他の選択肢について – JavaScript/Babel…止めはしない。 (が、きっとTSのほうが楽) – Dart…ごめんなさい
35.
その3: バンドラーを何にする? • TypeScriptを選んだのなら、モジュールバ ンドラー必須 import
{Component} from 'angular2/core' ↓ (TypeScriptコンパイラ) var Component = require('angular2/core').Component; ↓ (モジュールバンドラーがrequireをブラウザ上で使えるよう変換) var component_1 = __webpack_require__(1);
36.
その3: バンドラーを何にする? • TechFeedではWebpackを選択 –
実績豊富 – なんでもできそう – 既に下調べが済んでいた • その他の選択肢について – Browserify…未調査 – System.js • 現在のところAngular2公式? • 後発なため情報が少なめ • JSPMも組み合わせる必要あり? • 参考文献 – http://webpack.github.io/docs/comparison.html – http://ilikekillnerds.com/2015/07/jspm-vs-webpack/
37.
その4: エディタは何にする? • TypeScript対応のものを(できればtslint も) –
Atom+Plugins – Sublime Text+Plugins – Visual Studio Code – WebStorm • 元Java屋さんとしては、「IDE」にも心惹 かれる今日このごろ
38.
その5: テンプレートを どこに書く? Webpackを使えばこんなことも! @Component({template: `code`})
// (1) @Component({templateUrl:'url'}) // (2) VS @Component({template:require('a.html')}) // (3) リクエスト数 ファイル数 HTML分離 エディタサ ポート 前処理 (1)埋め込み 少 少 × × × (2)URL 多 多 ○ ○ × (3)Webpack 少 少 ○ ○ ○
39.
その6: テンプレートがキモい • 慣れろ •
新しいメンタルモデルを理解すれば、少しは楽に なる。 – こいつはHTMLじゃない。HTML Plusだ。 – タグの属性と(DOMの)プロパティはそもそも似て非 なるものだ。 – [ ]はプロパティを指している – 属性ってやつは、プロパティの初期化に過ぎない。 <!-- 属性でスタイルを指定 --> <div style="font-size: 16px"></div> <!-- プロパティでスタイルを指定 --> <div [style.fontSize]="16px"></div>
40.
その7: Sassを使いたい • モジュールバンドラーの機能を駆使すれば、 Sass/Less/Stylus/PostCSSなども利用可能 @Component({styles:[require('comp.scss')]}) loaders:
[ {test: /.scss$/, loaders: ['raw', 'sass?sourceMap', 'postcss'], exclude: /node_modules/} ... ] • Webpackでの設定例
41.
その8: RxJSとのつきあい方 • RxJS(リアクティブプログラミング用ライブラリ) は、理解が必須ではないものの、限りなく必須に近い –
HTTP, EventEmitterなどの頻出APIがRxJS前提なため • ObservableはES7にも提案されているので、この機会 に勉強しておくのは吉 – でも、奥深すぎ。。 • Angular2はRxJS5 (Beta)を使っているので要注意! – ググッて先頭に出てくるのは4系 – 「ReactiveX」ってやつが5系です – 5系は、ドキュメントとかもまだまだ・・・
42.
その9: ページネーションしたい • よくあるユースケースだけど、世界中が現在実装方法 を模索中 •
ぼくらはObservableの簡単なラッパーを作りました – 以下はイメージを伝えるための擬似コード interface PagedObservable<T> extends Observable<T> { nextPage(): void; } class EntryService { getTimeline(): PagedObservable<Entry[]> } class TimelineComponent { timeline: PagedObservable<Entry[]>; more() { this.timeline.nextPage(); } }
43.
その10: UIフレームワーク 使いたい! • TechFeedではIonic2を採用 –
Angular2で完全にリライトされている – Angular2開発の参考にもなる • その他(調査中) – Onsen UI 2.0 – angular-material2 – ng2-bootstrap
44.
その11: コンポーネント設計 • コンポーネントの粒度や、振る舞いや状態をどこ に配置するかは、現在熱い話題 •
「Presentational and Container Components」が 議論の土台 – だが、やはり悩ましい – 「全部外側に移譲する」ってこと?めんどくさすぎ ない? – Google MapsやYoutubeの埋め込みプレーヤー、「い いね!」ボタンなどは良いコンポーネントの例に思 える。スマートだけど再利用性高い。 • 「必要になるまで分割するな」 – 個人的に、唯一の正解と思えていること
45.
おまけ
46.
Angularの最新情報は こちらでどうぞ! https://techfeed.io/channels/AngularJS
47.
ご清聴ありがとうございました。
Download now