Submit Search
Upload
Angular2実践入門
•
Download as PPTX, PDF
•
43 likes
•
37,791 views
Shumpei Shiraishi
Follow
ng-japan 2016で発表したスライドです。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 47
Download now
Recommended
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
Yoshiki Hayama
UIViewControllerのライフサイクル
UIViewControllerのライフサイクル
Satoshi Anai
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
Yoshiki Hayama
JCSQE初級受けてみたの
JCSQE初級受けてみたの
ノグチ ノグチ
スクラムはもうだめぽよ!新しい開発手法『パワープレイ』をお姉さんが教えてあげちゃう!
スクラムはもうだめぽよ!新しい開発手法『パワープレイ』をお姉さんが教えてあげちゃう!
Moto Arima
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
Yoshiki Hayama
ChatGPT、 何が「できる」「みえる」ようになってきたのか!
ChatGPT、 何が「できる」「みえる」ようになってきたのか!
Jingun Jung
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
Yoshiki Hayama
Recommended
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
Yoshiki Hayama
UIViewControllerのライフサイクル
UIViewControllerのライフサイクル
Satoshi Anai
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
Yoshiki Hayama
JCSQE初級受けてみたの
JCSQE初級受けてみたの
ノグチ ノグチ
スクラムはもうだめぽよ!新しい開発手法『パワープレイ』をお姉さんが教えてあげちゃう!
スクラムはもうだめぽよ!新しい開発手法『パワープレイ』をお姉さんが教えてあげちゃう!
Moto Arima
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
Yoshiki Hayama
ChatGPT、 何が「できる」「みえる」ようになってきたのか!
ChatGPT、 何が「できる」「みえる」ようになってきたのか!
Jingun Jung
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
Yoshiki Hayama
生成AI? LLM? UXデザインにどうつなげればいいの? 人にうれしいAIプロダクトをつくるUXデザイン
生成AI? LLM? UXデザインにどうつなげればいいの? 人にうれしいAIプロダクトをつくるUXデザイン
Yoshiki Hayama
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
Yoshiki Hayama
AIとUXデザイン 〜ユーザーのためのAIを設計するために〜:第22回 Machine Learning 15minutes!
AIとUXデザイン 〜ユーザーのためのAIを設計するために〜:第22回 Machine Learning 15minutes!
Yoshiki Hayama
テストエンジニアの品格 #automatornight
テストエンジニアの品格 #automatornight
kyon mm
チャットボットのUXと、導入現場のリアル(第2版)
チャットボットのUXと、導入現場のリアル(第2版)
Yoshiki Hayama
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
schoowebcampus
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
Yoshiki Hayama
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
Yoshiki Hayama
What is quality culture? Is it something tasty?
What is quality culture? Is it something tasty?
Yasuharu Nishi
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
Yuhei Miyazato
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Yoshiki Hayama
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
Yoshiki Hayama
エンジニアのプレゼン資料作成/入門
エンジニアのプレゼン資料作成/入門
iKenji
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
Yoshiki Hayama
自己紹介スライドショー201606
自己紹介スライドショー201606
LEFT HAND RULE
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
Yoshiki Hayama
綺麗なプレゼン資料の作り方、10のテクニック
綺麗なプレゼン資料の作り方、10のテクニック
Manabu Uekusa
難易度ボラタリティグラフという分析手法
難易度ボラタリティグラフという分析手法
Tokoroten Nakayama
僕はどうしてAngular2をテーマに登壇することになってしまったのか
僕はどうしてAngular2をテーマに登壇することになってしまったのか
Tomohiro Noguchi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
More Related Content
What's hot
生成AI? LLM? UXデザインにどうつなげればいいの? 人にうれしいAIプロダクトをつくるUXデザイン
生成AI? LLM? UXデザインにどうつなげればいいの? 人にうれしいAIプロダクトをつくるUXデザイン
Yoshiki Hayama
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
Yoshiki Hayama
AIとUXデザイン 〜ユーザーのためのAIを設計するために〜:第22回 Machine Learning 15minutes!
AIとUXデザイン 〜ユーザーのためのAIを設計するために〜:第22回 Machine Learning 15minutes!
Yoshiki Hayama
テストエンジニアの品格 #automatornight
テストエンジニアの品格 #automatornight
kyon mm
チャットボットのUXと、導入現場のリアル(第2版)
チャットボットのUXと、導入現場のリアル(第2版)
Yoshiki Hayama
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
schoowebcampus
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
Yoshiki Hayama
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
Yoshiki Hayama
What is quality culture? Is it something tasty?
What is quality culture? Is it something tasty?
Yasuharu Nishi
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
Yuhei Miyazato
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Yoshiki Hayama
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
Yoshiki Hayama
エンジニアのプレゼン資料作成/入門
エンジニアのプレゼン資料作成/入門
iKenji
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
Yoshiki Hayama
自己紹介スライドショー201606
自己紹介スライドショー201606
LEFT HAND RULE
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
Yoshiki Hayama
綺麗なプレゼン資料の作り方、10のテクニック
綺麗なプレゼン資料の作り方、10のテクニック
Manabu Uekusa
難易度ボラタリティグラフという分析手法
難易度ボラタリティグラフという分析手法
Tokoroten Nakayama
What's hot
(20)
生成AI? LLM? UXデザインにどうつなげればいいの? 人にうれしいAIプロダクトをつくるUXデザイン
生成AI? LLM? UXデザインにどうつなげればいいの? 人にうれしいAIプロダクトをつくるUXデザイン
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
AIとUXデザイン 〜ユーザーのためのAIを設計するために〜:第22回 Machine Learning 15minutes!
AIとUXデザイン 〜ユーザーのためのAIを設計するために〜:第22回 Machine Learning 15minutes!
テストエンジニアの品格 #automatornight
テストエンジニアの品格 #automatornight
チャットボットのUXと、導入現場のリアル(第2版)
チャットボットのUXと、導入現場のリアル(第2版)
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
ユーザー調査・分析に基づいた、”刺さる”WEBサービス・プロダクトデザイン 先生:羽山 祥樹
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
What is quality culture? Is it something tasty?
What is quality culture? Is it something tasty?
WebSocketのキホン
WebSocketのキホン
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
エンジニアのプレゼン資料作成/入門
エンジニアのプレゼン資料作成/入門
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
UXデザインのはじめの一歩を体験しよう! ユーザーインタビュー、ユーザー心理分析の基本:DevLOVE関西
自己紹介スライドショー201606
自己紹介スライドショー201606
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:2015年10月9日 ...
綺麗なプレゼン資料の作り方、10のテクニック
綺麗なプレゼン資料の作り方、10のテクニック
難易度ボラタリティグラフという分析手法
難易度ボラタリティグラフという分析手法
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
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Recently uploaded
(11)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
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