Submit Search
Upload
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
•
2 likes
•
1,159 views
tomonari takahashi
Follow
「フロントエンドフレームワーク」 今回はデザイナーさんやディレクションの方向けに、その中身を「ボヤッと」理解してもらうのが目的のハンズオン形式の勉強会でした。
Read less
Read more
Report
Share
Report
Share
1 of 75
Download now
Download to read offline
Recommended
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
2015/01/24 13:00 JavaQne(じゃばきゅん) 2015 Fukuoka
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
今後のWeb開発の未来を考えて AngularJSにしました ~とあるSIerの場合~ いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念イベント発表資料 http://angularjs-jp.doorkeeper.jp/events/14893
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
こちらの資料の拡大版です。 http://www.slideshare.net/mitsuruogawa33/webangularjs
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
Mitsuru Ogawa
2014/09/09に開催した「エンタープライヤーのためのWeb Componentsハンズオン〜Web ComponentsでWeb名刺を作ろう!〜」の資料です。 イベントサイト https://atnd.org/events/55761 ハンズオン資料 https://github.com/html5bizj/x-business-card
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
2014/06/02 LIGにて行われたイベントの時に発表したスライド AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会 http://eventdots.jp/event/52461
AngularJS入門の巻
AngularJS入門の巻
Toshio Ehara
2014/5/11(日)第8回福岡市西区プログラム勉強会 ”福岡の西の果てでIT系の総合勉強会”
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
AngularJS出版記念イベントLTです
Angular js開発事例
Angular js開発事例
Shun Takeyama
AngularJS開発を通して感じたこと
Recommended
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
2015/01/24 13:00 JavaQne(じゃばきゅん) 2015 Fukuoka
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
今後のWeb開発の未来を考えて AngularJSにしました ~とあるSIerの場合~ いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念イベント発表資料 http://angularjs-jp.doorkeeper.jp/events/14893
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
こちらの資料の拡大版です。 http://www.slideshare.net/mitsuruogawa33/webangularjs
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
Mitsuru Ogawa
2014/09/09に開催した「エンタープライヤーのためのWeb Componentsハンズオン〜Web ComponentsでWeb名刺を作ろう!〜」の資料です。 イベントサイト https://atnd.org/events/55761 ハンズオン資料 https://github.com/html5bizj/x-business-card
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
2014/06/02 LIGにて行われたイベントの時に発表したスライド AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会 http://eventdots.jp/event/52461
AngularJS入門の巻
AngularJS入門の巻
Toshio Ehara
2014/5/11(日)第8回福岡市西区プログラム勉強会 ”福岡の西の果てでIT系の総合勉強会”
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
AngularJS出版記念イベントLTです
Angular js開発事例
Angular js開発事例
Shun Takeyama
AngularJS開発を通して感じたこと
3分でわかるangular js
3分でわかるangular js
Shin Adachi
社内LTで自分の番だったので、チュートリアルしかやってないのにAngularJSの解説を書いた。
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
Enterprise x HTML5 Web Application Conference 2014
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
Staffnet_Inc
スタッフネット株式会社主催、オンライン・マンツーマン形式「AngularモダンWeb開発セミナー」の紹介 http://www.staffnet.co.jp/hp/semi/modern/
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
source code is here -> http://qiita.com/PharaohKJ/private/e0e81296b53514f41db2
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
学 松崎
JavaQne(じゃばきゅん) 2015 Fukuokaで発表したスライドです https://atnd.org/events/61398
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
第1回ペパボテックカンファレンス http://pepabo.connpass.com/event/13208/ #pbtech AngularJSの継続的なバージョンアップ
Angular2
Angular2
Kenichi Kanai
2015/5/18 Webプラットフォーム部 - 第6回勉強会 フレームワークの世界まる見え!JS特捜部 ~ React,Angular,WinJSだらけの2時間SP!~
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Mitsuru Ogawa
2013/7/3 社内勉強会で発表した資料です。
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
ng-japan 2015 LT資料です。 One-time Bindingと$digestについて簡単にお話しました。 LIGブログでこの内容をまとめました。 http://liginc.co.jp/web/js/other-js/153751
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
もうすぐリリースされる Angular 4 について、rc 版をさわってみました。Angular 2 からの変更点をダイジェストにご紹介します。 後半では、社内運用している Angular 2 アプリケーションを、実際に Angular 4 に移行してみたお話をしました。
AngularJS入門の巻2
AngularJS入門の巻2
Toshio Ehara
第9回福岡市西区プログラム勉強会 福岡の西の果てでIT系の総合勉強会
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
GDG神戸 Angular勉強会#3 資料
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
HTML5 Conference 2016で発表したスライドです。 TechFeed (https://techfeed.io) での開発経験を元に、Angular2, Webpack, Ionic2, Cordovaについて、それらの技術を採用した経緯と、実際に使ってみて感じたメリット・デメリットなどを解説しています。
インフラエンジニアに送る Visual Studio Code ~Azure 編~
インフラエンジニアに送る Visual Studio Code ~Azure 編~
Shinsuke Saito
VS Code Meetup #2 - Live Share編 2020/1/23
A/BテストをAzure×Googleアナリティクスで試してみました。
A/BテストをAzure×Googleアナリティクスで試してみました。
典子 松本
JAZUG5周年総会 「Go (5) JAZUG」のLTで使用したスライドです。
Angularおじさんの1年
Angularおじさんの1年
Hayashi Yuichi
Angularおじさんが1年のアップデートを振り返ったときのスライドです。@21cafe
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
2015年9月現在、私が取り組んでいる新規開発案件におけるフロントエンド開発環境周りについてまとめたもの
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
シングルページWebアプリケーションに関する背景と利用にあたってのメリット・デメリットを整理しました
Visual Studio UserのためのMicrosoft Learn入門
Visual Studio UserのためのMicrosoft Learn入門
Akiyoshi Tsuchida
Visual Studio Users Community Japan #5 の発表資料です https://vsuc.connpass.com/event/180470/
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Hayashi Yuichi
HTML5 Minutes!#6の登壇資料です。https://atnd.org/events/61106 GulpやらWebPackやらを使って開発効率を高める環境を作ってみたので、そのご紹介です。 LIGブログで話しきれなかった内容をまとめました。 http://liginc.co.jp/web/js/other-js/143500
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Toshio Ehara
第7回西区プログラム勉強会 http://www.zusaar.com/event/3507006 twitterハッシュ: #nishipro
Ng mtg#3
Ng mtg#3
Kenichi Kanai
ng-mtg#3 で使ったスライドです。
More Related Content
What's hot
3分でわかるangular js
3分でわかるangular js
Shin Adachi
社内LTで自分の番だったので、チュートリアルしかやってないのにAngularJSの解説を書いた。
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
Enterprise x HTML5 Web Application Conference 2014
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
Staffnet_Inc
スタッフネット株式会社主催、オンライン・マンツーマン形式「AngularモダンWeb開発セミナー」の紹介 http://www.staffnet.co.jp/hp/semi/modern/
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
source code is here -> http://qiita.com/PharaohKJ/private/e0e81296b53514f41db2
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
学 松崎
JavaQne(じゃばきゅん) 2015 Fukuokaで発表したスライドです https://atnd.org/events/61398
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
第1回ペパボテックカンファレンス http://pepabo.connpass.com/event/13208/ #pbtech AngularJSの継続的なバージョンアップ
Angular2
Angular2
Kenichi Kanai
2015/5/18 Webプラットフォーム部 - 第6回勉強会 フレームワークの世界まる見え!JS特捜部 ~ React,Angular,WinJSだらけの2時間SP!~
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Mitsuru Ogawa
2013/7/3 社内勉強会で発表した資料です。
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
ng-japan 2015 LT資料です。 One-time Bindingと$digestについて簡単にお話しました。 LIGブログでこの内容をまとめました。 http://liginc.co.jp/web/js/other-js/153751
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
もうすぐリリースされる Angular 4 について、rc 版をさわってみました。Angular 2 からの変更点をダイジェストにご紹介します。 後半では、社内運用している Angular 2 アプリケーションを、実際に Angular 4 に移行してみたお話をしました。
AngularJS入門の巻2
AngularJS入門の巻2
Toshio Ehara
第9回福岡市西区プログラム勉強会 福岡の西の果てでIT系の総合勉強会
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
GDG神戸 Angular勉強会#3 資料
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
HTML5 Conference 2016で発表したスライドです。 TechFeed (https://techfeed.io) での開発経験を元に、Angular2, Webpack, Ionic2, Cordovaについて、それらの技術を採用した経緯と、実際に使ってみて感じたメリット・デメリットなどを解説しています。
インフラエンジニアに送る Visual Studio Code ~Azure 編~
インフラエンジニアに送る Visual Studio Code ~Azure 編~
Shinsuke Saito
VS Code Meetup #2 - Live Share編 2020/1/23
A/BテストをAzure×Googleアナリティクスで試してみました。
A/BテストをAzure×Googleアナリティクスで試してみました。
典子 松本
JAZUG5周年総会 「Go (5) JAZUG」のLTで使用したスライドです。
Angularおじさんの1年
Angularおじさんの1年
Hayashi Yuichi
Angularおじさんが1年のアップデートを振り返ったときのスライドです。@21cafe
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
2015年9月現在、私が取り組んでいる新規開発案件におけるフロントエンド開発環境周りについてまとめたもの
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
シングルページWebアプリケーションに関する背景と利用にあたってのメリット・デメリットを整理しました
Visual Studio UserのためのMicrosoft Learn入門
Visual Studio UserのためのMicrosoft Learn入門
Akiyoshi Tsuchida
Visual Studio Users Community Japan #5 の発表資料です https://vsuc.connpass.com/event/180470/
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Hayashi Yuichi
HTML5 Minutes!#6の登壇資料です。https://atnd.org/events/61106 GulpやらWebPackやらを使って開発効率を高める環境を作ってみたので、そのご紹介です。 LIGブログで話しきれなかった内容をまとめました。 http://liginc.co.jp/web/js/other-js/143500
What's hot
(20)
3分でわかるangular js
3分でわかるangular js
Enterprise x AngularJS
Enterprise x AngularJS
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
俺とAngular JS 2
俺とAngular JS 2
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Angular2
Angular2
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
One-time Binding & $digest
One-time Binding & $digest
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
AngularJS入門の巻2
AngularJS入門の巻2
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
インフラエンジニアに送る Visual Studio Code ~Azure 編~
インフラエンジニアに送る Visual Studio Code ~Azure 編~
A/BテストをAzure×Googleアナリティクスで試してみました。
A/BテストをAzure×Googleアナリティクスで試してみました。
Angularおじさんの1年
Angularおじさんの1年
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Visual Studio UserのためのMicrosoft Learn入門
Visual Studio UserのためのMicrosoft Learn入門
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Similar to AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Toshio Ehara
第7回西区プログラム勉強会 http://www.zusaar.com/event/3507006 twitterハッシュ: #nishipro
Ng mtg#3
Ng mtg#3
Kenichi Kanai
ng-mtg#3 で使ったスライドです。
STORES.jp x AngularJS
STORES.jp x AngularJS
Keisuke Makino
「AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会」発表資料です。 http://eventdots.jp/event/52461
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
We Are JavaScripters! :)) #8での発表資料です。
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
Yusaku Kinoshita
AngularJS楽しい:)
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
Hiroyuki Kusu
本資料は「ITエンジニア勉強会~ Engineer’s Learning Vesper」での発表資料です。 http://learningvesper.doorkeeper.jp/events
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
Mitsuru Ogawa
2013/11/09 JJUG CCCでの発表資料です。
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
Horiguchi Seito
AngularJS 1.3.1を用いて、フォームページをちょっとリッチにする方法。 できるだけ簡単に実装する方法を紹介しています。
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
2013/9/9 業務システムエンジニアのためのHTML5勉強会#04 Web✕Java - HTML5で進化したWeb標準を、Java技術でどう扱うのか? - オープニングトーク資料です。
Our Track to Modern Angular
Our Track to Modern Angular
Yuta Shimizu
ng-japan meetup 2019 Spring の発表資料です。
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Takuya Ueda
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
Google製JavaScriptフレームワークAngularJS(http://angularjs.org/)の良さを10分くらいで紹介するための資料です.身内向けの勉強会でしゃべるときに使いました. スライド中のサンプルコードはこちらに https://github.com/daisy1754/angular-simple-demo-flickr-cat
20161125 米田 angular_jsを触ってみた
20161125 米田 angular_jsを触ってみた
Tsuyoshi Saito
2016年11月25日 メディアフォース社内LT大会資料の代理アップロード presenter by yoneda
2014-10-17 「“A9共催! AWSプロダクトシリーズ よくわかる AWS CloudSearch” スクーでのCloudSearch利用実例」
2014-10-17 「“A9共催! AWSプロダクトシリーズ よくわかる AWS CloudSearch” スクーでのCloudSearch利用実例」
Hiromitsu Ito
2014-10-17開催 「“A9共催! AWSプロダクトシリーズ よくわかる AWS CloudSearch” スクーでのCloudSearch利用実例」 発表資料
Alt01-LT
Alt01-LT
Yuta Hiroto
今更ながらALT#1でのLT発表資料を上げました。 angular-fullstack
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る
hiroki-ishikawa
2013年11月1日に、あるセミナーに登壇させていただきました。その時のスライド資料です。 フラットデザインとレスポンシブWebデザインを中心に、2013年のWebデザインのトレンド・6つについて、事例やメリット・デメリットを織り交ぜながら振り返りました。
ngJapan報告会
ngJapan報告会
Fumio SAGAWA
angular
今度こそ始めるjQuery超入門
今度こそ始めるjQuery超入門
西畑 一馬
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
pinmarch_t Tada
GDG神戸開催のAngularJS勉強会での資料です。個人的な感想を交えてAngularJSの紹介をしました。
Similar to AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
(20)
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Ng mtg#3
Ng mtg#3
STORES.jp x AngularJS
STORES.jp x AngularJS
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
Our Track to Modern Angular
Our Track to Modern Angular
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
20161125 米田 angular_jsを触ってみた
20161125 米田 angular_jsを触ってみた
2014-10-17 「“A9共催! AWSプロダクトシリーズ よくわかる AWS CloudSearch” スクーでのCloudSearch利用実例」
2014-10-17 「“A9共催! AWSプロダクトシリーズ よくわかる AWS CloudSearch” スクーでのCloudSearch利用実例」
Alt01-LT
Alt01-LT
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る
ngJapan報告会
ngJapan報告会
今度こそ始めるjQuery超入門
今度こそ始めるjQuery超入門
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
1.
∼そもそもWebって∼ 2015.09.10 AngularJS勉強会 勉強会
2.
自己紹介 高橋知成 デザインエンジニア(見習い) 去年の11月からツクロアでインターンをしています。 今月30日からちょっと飛び立ちます。
3.
今回は。。。 最近よく耳にする 『フレームワーク』『AngularJS』『何ちゃらjs』・・・ デザイナーの方とディレクションの方に向けて
4.
『ボヤッと』 わかってもらえることがゴールです。
5.
AngularJSとは ・JavaScriptフレームワーク(Google製) ・HTMLベースのテンプレート ・双方向データバインディング ・ルーティング機構 ・Ajaxサポート
6.
AngularJSとは ・JavaScriptフレームワーク(Google製) ・HTMLベースのテンプレート ・双方向データバインディング ・ルーティング機構 ・Ajaxサポート
7.
まだ理解できなくていいです
8.
そもそも自分が ・今年の夏前から「AngularJS」を触り始める ・「MEGANATOR」をその流れで実装してみることに ・なのでAngularJS歴3ヶ月とか
9.
まずは 実際にどこで使われているのかを見てみましょう
10.
メインでやってることは ・画面遷移とそれに応じた表示の切り替え ・データ通信 ・クリックなどのイベント処理 ・データの表示 ーー「トップ」「計測」「フィッテング」など ーーメガネのデータを取得 ーーメガネを選択したらどうするのかなど ーーメガネを繰り返しをして表示したりなど
11.
それぞれ見ていきましょう
12.
画面遷移 meganator.tuqulore.com/#/
13.
画面遷移 meganator.tuqulore.com/#/set_up
14.
画面遷移 meganator.tuqulore.com/#/fitting
15.
画面遷移 『/』の時は これ 表示 『/set_up』の時は これ 表示
16.
通信 {JSON} データ
17.
通信
18.
データの表示とイベント処理
19.
データの表示とイベント処理
20.
データの表示とイベント処理
21.
データの表示とイベント処理
22.
でも、全部じゃないんです
23.
を使っています・・・ メガネの表示などは 『∼JS』 2個目
24.
『∼JS』は本当にたくさんあります
25.
しばしば組み合わせられて使われます
26.
では、AngularJSの具体的な事例から離れて 『JSライブラリー』『JSフレームワーク』 なんでできたんだという話をします。
27.
『技術の進化』 『守備範囲』 ポイントは
28.
少し前までは JS=『オワコン』 ・環境によって動かない ・遅い ・型がない
29.
今では JS=『重要っしょ』 ・非同期通信(Googleマップなど)必須 ・弱点も補えるような仕組みの確立
30.
こんなことする(できる)ようになった
31.
そんなにやること(やれること)が多くなかった。 アニメーションとかはFLASHだったり。。。 少し前までは
32.
自前のPC サーバー PCの性能の向上などがあり 仕事量激増 今まではサーバーでやっていた処理の代行や、新たな処理ができるように 今では
33.
『もっとラクしたいなっ』
34.
『JSライブラリー』 JavaScriptの便利機能集のようなもの DOM操作系 グラフィック系 それぞれ『守備範囲』があります
35.
例えば『ボックスをフェードアウト』させる
36.
それではこれは
37.
DOM操作系 グラフィック系 それぞれ『守備範囲』があります
38.
DOM操作系 グラフィック系 それぞれ『守備範囲』があります
39.
『JSライブラリー』 守備範囲に特化した便利機能集 =
40.
それでもコード数千行とかになるケース続出
41.
プログラミング言語ってとても自由 だから色々なものが作れる
42.
『コード数千行』。。。 自由が故に
43.
CSSで例えてみましょう インライン style.css headタグ内
44.
『JSフレームワーク』 『ライブラリー』+『ルールを提供』
45.
『JSフレームワーク』 ・ライブラリーと同じで『守備範囲』がある ・ライブラリーと同じで『便利機能』を持っている
46.
+ 『JSフレームワーク』 ・ライブラリーと同じで『守備範囲』がある ・ライブラリーと同じで『便利機能』を持っている 大枠の書くルールが決められている。 「どこに」「どんな名前で」「どんな風に」
47.
自分の脳内イメージですが Angularさん 「自分を使うんですね。 わかりました。ということは、大体○ △のよ うなサイトを作るんですね。 それじゃ自分の指示に従ってもらいますね」
48.
『守備範囲』ならばコードを短くスッキリと 誰もが見易くなるようになる。
49.
『技術の進化』 『守備範囲』 ポイントは ここで一旦小まとめ
50.
『守備範囲』 フレームワークの
51.
そもそもWEBって
52.
サーバー 自前のPC 通信 データ ・高橋知成 ・友達000人 ・写真000枚 ・グループ000に参加
53.
サーバー 自前のPC データ ・高橋知成 ・友達000人 ・写真000枚 ・グループ000に参加 表示
54.
サーバー 自前のPC 画面遷移 ニュースフィード個人ページ
55.
サーバー 自前のPC 通信 イベント 投稿する・友達申請
56.
通信・画面遷移・データ・イベント・表示
57.
『守備範囲』 フレームワークの 通信・画面遷移・データ・イベント・表示
58.
『守備範囲』 フルスタック 通信・画面遷移・データ・イベント・表示
59.
『守備範囲』 通信・画面遷移・データ・イベント・表示 表示特化
60.
『守備範囲』 通信・画面遷移・データ・イベント・表示 便利機能少なめ
61.
それじゃなんでもAngularJSで作れば。。。
62.
スピードが遅い 覚える量が多い 決まりでガチガチ
63.
守備範囲が狭く単体ではあまり意味がない
64.
守備範囲が狭く単体ではあまり意味がない 色々な組み合わせをすることができる
65.
その時々の状況にあった選択が大切
66.
んじゃAngularJSに向いてる物って?
67.
ダッシュボード系アプリケーション https://dribbble.com/shots/1283529-The-Pony-Express-Mail
68.
https://dribbble.com/shots/928345-Sush-io-Mac-App-Full-view +
69.
それでは作ってみましょ
70.
完成予想図
71.
補足:APIについて http://api.gnavi.co.jp/ver1/RestSearchAPI/? 『?』の後に 『キーワード名』=『キーワード』 『&』で複数続けて
72.
できました!!!
73.
まとめ AngularJSのルールに則って書くことで 短くスッキリと書くことができる。
74.
まとめ フレームワークとは守備範囲がある
75.
ご静聴ありがとうございました 2015.09.10勉強会
Download now