Submit Search
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
0 likes
1,140 views
Yusaku Kinoshita
AngularJS楽しい:)
Engineering
Read more
1 of 72
Download now
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
More Related Content
What's hot
(20)
PPTX
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
PPTX
jQueryで気をつけてほしいこと
良太 増子
PDF
20170722_Dragonboardで買い物メモ
Kenzo Nagahisa
PDF
2013 08-19 jjug
sk44_
PDF
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
Satoshi Takami
PPTX
プログラミングのお勉強としてscratchをさわってみた
HirokiIwanaga
PPTX
みんなが不幸にならないための要件定義の話
英明 伊藤
PDF
20160219 Developers Summit 2016 gusukuハンズオン
Midori Ikegami
PDF
iPhoneアプリを Javaで書くよ?
Toshio Ehara
PPT
Pythonで始める競技プログラミング
shunki fujiwara
PPTX
pythonで始める筋トレ(競技プログラミング)
shunki fujiwara
PPTX
Electron を知る
Tomoya Shibata
PDF
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
智治 長沢
PDF
ネットワークトラブルシューティング ~自端末編~
creaism
PDF
えっ?まだそのツール使ってるの?
Daiki Egashira
PDF
Make TypingGame in JavaScript
undertale1
PDF
Wcan 2013 autumn_trident_mizuno
TRIDENT
PDF
日曜プログラマーとigoogle先生
Yuusuke Takeuchi
PDF
JS Board で IoT は楽勝か?
Shingo Fukui
PDF
three.jsで作る3Dの世界
AdvancedTechNight
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
jQueryで気をつけてほしいこと
良太 増子
20170722_Dragonboardで買い物メモ
Kenzo Nagahisa
2013 08-19 jjug
sk44_
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
Satoshi Takami
プログラミングのお勉強としてscratchをさわってみた
HirokiIwanaga
みんなが不幸にならないための要件定義の話
英明 伊藤
20160219 Developers Summit 2016 gusukuハンズオン
Midori Ikegami
iPhoneアプリを Javaで書くよ?
Toshio Ehara
Pythonで始める競技プログラミング
shunki fujiwara
pythonで始める筋トレ(競技プログラミング)
shunki fujiwara
Electron を知る
Tomoya Shibata
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
智治 長沢
ネットワークトラブルシューティング ~自端末編~
creaism
えっ?まだそのツール使ってるの?
Daiki Egashira
Make TypingGame in JavaScript
undertale1
Wcan 2013 autumn_trident_mizuno
TRIDENT
日曜プログラマーとigoogle先生
Yuusuke Takeuchi
JS Board で IoT は楽勝か?
Shingo Fukui
three.jsで作る3Dの世界
AdvancedTechNight
Viewers also liked
(8)
PDF
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
PPTX
CordovaでAngularJSアプリ開発
アシアル株式会社
PDF
AndroidでWebSocket
Kohei Kadowaki
PDF
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
PPTX
AWSを利用したcms冗長化構成
渉 米須
PDF
WebSocketのキホン
You_Kinjoh
PDF
JavaScript 研修
Yuki Ishikawa
PDF
Cmujp21_node-webkit
Sugawara Ryousuke
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
CordovaでAngularJSアプリ開発
アシアル株式会社
AndroidでWebSocket
Kohei Kadowaki
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
AWSを利用したcms冗長化構成
渉 米須
WebSocketのキホン
You_Kinjoh
JavaScript 研修
Yuki Ishikawa
Cmujp21_node-webkit
Sugawara Ryousuke
Ad
Similar to エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
(20)
PDF
「ゼロから構築するDev rel体制」20160316@devrelmeetup
Yusaku Kinoshita
PDF
77枚の資料を5分で発表してみたやつ【G’s academy 卒業制作」発表資料(016.03.02) 】
Yusaku Kinoshita
PDF
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
PDF
これができたらエンジニア|YAPC::Asia 2015 LT rejected
Takahiro YAMAGUCHI
PDF
今からでも遅くない! 2から始めるangular js
Kohashi Daisuke
PDF
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
PDF
OSC2013 HIROSHIMA ライトニングトーク すごい広島
Tomohiko Himura
PDF
はじめてのJavaScript / JS Girls Tokyo #1
Takami Yamada
PPTX
実践 Redux Saga -Practical Redux Saga-
Shinichiro Yoshida
PDF
DevLove四国_LT_yohhatu
Yoh Nakamura
PPTX
from_beginner_to_engineer
Yuka Tokuyama
PPTX
【DroidKaigi2015】初学者に嬉しいAndroid開発環境(あとMVCとか)
Hiroyuki Kusu
PDF
コンソールベタ打ち卒業:スクリプトエディタを使おう
Yu Tamura
PDF
Ng mtg#3
Kenichi Kanai
PPTX
WebGL入門ハンズオン資料
Kazuya Hiruma
PDF
今更聞けない? Androidのテストのいろは
Hiroshi Kikuchi
PDF
CoderDojo ひばりヶ丘の取り組み
Masao Niizuma
PPTX
20130921 技術ひろばの勉強会
Seiji Noro
PDF
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
PDF
クラウド移住体験記
Takehito Tanabe
「ゼロから構築するDev rel体制」20160316@devrelmeetup
Yusaku Kinoshita
77枚の資料を5分で発表してみたやつ【G’s academy 卒業制作」発表資料(016.03.02) 】
Yusaku Kinoshita
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
これができたらエンジニア|YAPC::Asia 2015 LT rejected
Takahiro YAMAGUCHI
今からでも遅くない! 2から始めるangular js
Kohashi Daisuke
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
OSC2013 HIROSHIMA ライトニングトーク すごい広島
Tomohiko Himura
はじめてのJavaScript / JS Girls Tokyo #1
Takami Yamada
実践 Redux Saga -Practical Redux Saga-
Shinichiro Yoshida
DevLove四国_LT_yohhatu
Yoh Nakamura
from_beginner_to_engineer
Yuka Tokuyama
【DroidKaigi2015】初学者に嬉しいAndroid開発環境(あとMVCとか)
Hiroyuki Kusu
コンソールベタ打ち卒業:スクリプトエディタを使おう
Yu Tamura
Ng mtg#3
Kenichi Kanai
WebGL入門ハンズオン資料
Kazuya Hiruma
今更聞けない? Androidのテストのいろは
Hiroshi Kikuchi
CoderDojo ひばりヶ丘の取り組み
Masao Niizuma
20130921 技術ひろばの勉強会
Seiji Noro
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
クラウド移住体験記
Takehito Tanabe
Ad
More from Yusaku Kinoshita
(11)
PDF
集まっTail(集まっている)#8
Yusaku Kinoshita
PDF
Bridging the Gap for Beginners in Developer Communities@DevRelConTokyo_20170729
Yusaku Kinoshita
PDF
集まっtail#7「teratailより」
Yusaku Kinoshita
PDF
Motohashi.#3
Yusaku Kinoshita
PPTX
個人開発アプリのご紹介とあり得ない不具合に対する掲示板の活用事例
Yusaku Kinoshita
PDF
G'sアカデミー2期入学式資料(投影資料版)
Yusaku Kinoshita
PDF
5分でわかるphalcon php
Yusaku Kinoshita
PPTX
効率的かつユニークな学習法
Yusaku Kinoshita
PDF
150612 middleman(ikuwow)
Yusaku Kinoshita
PPT
Google先生との付き合い方(lightwill氏)
Yusaku Kinoshita
PDF
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
Yusaku Kinoshita
集まっTail(集まっている)#8
Yusaku Kinoshita
Bridging the Gap for Beginners in Developer Communities@DevRelConTokyo_20170729
Yusaku Kinoshita
集まっtail#7「teratailより」
Yusaku Kinoshita
Motohashi.#3
Yusaku Kinoshita
個人開発アプリのご紹介とあり得ない不具合に対する掲示板の活用事例
Yusaku Kinoshita
G'sアカデミー2期入学式資料(投影資料版)
Yusaku Kinoshita
5分でわかるphalcon php
Yusaku Kinoshita
効率的かつユニークな学習法
Yusaku Kinoshita
150612 middleman(ikuwow)
Yusaku Kinoshita
Google先生との付き合い方(lightwill氏)
Yusaku Kinoshita
20150226 炎上を防ぐためにフロントエンドエンジニアとしてできること
Yusaku Kinoshita
Recently uploaded
(6)
PDF
【AITRIOS】人vs生成AIでジェスチャーゲームをAITIROSを使ってしてみた
ueda0116
PDF
React Native vs React Lynx (React Native Meetup #22)
Taiju Muto
PDF
フィジカルAI時代のセキュリティ:ロボティクスとAIセキュリティの融合のあり方
Osaka University
PPTX
[Liberaware] Engineer Summer Internship.pptx
koyamakohei
PDF
AWS BedrockによるIoT実装例紹介とAI進化の展望@AWS Summit ExecLeaders Scale Session
Osaka University
PDF
音学シンポジウム2025 招待講演 遠隔会話音声認識のための音声強調フロントエンド:概要と我々の取り組み
Tsubasa Ochiai
【AITRIOS】人vs生成AIでジェスチャーゲームをAITIROSを使ってしてみた
ueda0116
React Native vs React Lynx (React Native Meetup #22)
Taiju Muto
フィジカルAI時代のセキュリティ:ロボティクスとAIセキュリティの融合のあり方
Osaka University
[Liberaware] Engineer Summer Internship.pptx
koyamakohei
AWS BedrockによるIoT実装例紹介とAI進化の展望@AWS Summit ExecLeaders Scale Session
Osaka University
音学シンポジウム2025 招待講演 遠隔会話音声認識のための音声強調フロントエンド:概要と我々の取り組み
Tsubasa Ochiai
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
1.
エンジニアじゃなくても AngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
2.
今日のスライド枚数
3.
72枚!!
4.
最高記録(77枚)に1歩及ばす…;;
5.
はじめます。
6.
まずは…
7.
自己紹介 ■名前: 木下 雄策(27歳・福岡出身) @afroscript10 ■略歴: 九州大学大学院で宇宙の研究 2013年 レバレジーズ入社 ■今のお仕事: 日本のエンジニア業界を最強にすること!! →エンジニア特化型Q&Aサイト【teratail】のDevRel担当 →ITの勉強会【ヒカ☆ラボ】 ■その他 →Gs'ACADEMY2期生の趣味エンジニア →LIGブログ「0エンジニアから0.5エンジニアへ」連載中
8.
※前提※ AngularJS全く触ったことない、 ものすっっっごい初心者向けの発表で、 ものすっっっごい薄いところを話そうと思います
9.
伝えたいこと
10.
伝えたいこと 非エンジニアでも、 思ってた以上にAngularJSへの"入門"の敷居は低くて、 使ってすぐ感動するから、 気軽にやってみようよ!! って話。
11.
「え?簡単に入門できそうじゃん! 自分もやってみよ!!」 …って思って頂けるとうれしいです:)
12.
では、はじめます。
13.
木下(非エンジニア)の最初のスペック
14.
木下(非エンジニア)の最初のスペック ・2月末にAngularJS初体験(AngularJS入門ハンズオン) ・JavaScript暦1年くらい(週末のみ) ・jQueryくらいは多少使ってる ・MEANstackで簡単なCRUDアプリ作ったことある
15.
始める前のAngularJSへのイメージ
16.
始める前のAngularJSへのイメージ ・敷居が高いらしい… ・え、フロント側でフレームワーク?MVW? ・Model-View-Whatever…Whateverって何だ…?
17.
始める前のAngularJSへのイメージ ・敷居が高いらしい… ・え、フロント側でフレームワーク?MVW? ・Model-View-Whatever…Whateverって何だ…? ↓ ・そんなこんなで、初心者にはやたら難しそうな印象…
18.
AngularJSを使ってみて思ったこと
19.
使い始めて30秒で 感動する!!
20.
ということで感動したところ3つほどに絞って 紹介していきます:)
21.
〜感動Pointその1〜 データバインディングで リアルタイムな反応が一瞬でできてうれしい!
22.
リアルタイムな反応が一瞬でできる
23.
リアルタイムな反応が一瞬でできる AngularJSを 読み込んで…
24.
リアルタイムな反応が一瞬でできる
25.
リアルタイムな反応が一瞬でできる え!? これだけ!?!?
26.
そう、これだけ。
27.
Demo1
28.
〜感動ポイントその2〜 超簡単にinputフォームのフィルターができる!!
29.
フィルターが簡単すぎる
30.
フィルターが簡単すぎる え!? これだけ!?!?
31.
そう、これだけ。
32.
Demo2
33.
他にも「え?これだけ??」がいっぱい。 こことかササッっと概要つかめました→http://www.tohoho-web.com/ex/angularjs.html
34.
〜感動ポイントその3〜 AngularJS×milkcocoaで、 1時間でチャットアプリが作れた!!
35.
milkcocoaって? BaaS(Backebd as a
Service)です。
36.
milkcocoaって? ちなみに作ったのが同じ大学の同級生なので、愛着ある感じ。:)
37.
milkcocoaって? JavaScriptだけで簡単にバックエンドも扱えます。:)
38.
こちらのページ見て作りました。 ↓ http://masatolan.com/programming/milkcocoa-and-angularjs/
39.
Demo
40.
まずはHTMLの中身
41.
AngularJS×milkcocoaで簡単チャットアプリ htmlファイルの中身はこんな感じ
42.
AngularJS×milkcocoaで簡単チャットアプリ htmlファイルの中身はこんな感じ MIlkcocoa読み込んで
43.
AngularJS×milkcocoaで簡単チャットアプリ htmlファイルの中身はこんな感じ bodyにng-appの 名前をつける
44.
AngularJS×milkcocoaで簡単チャットアプリ htmlファイルの中身はこんな感じ その中に コントローラーを 用意します。
45.
AngularJS×milkcocoaで簡単チャットアプリ htmlファイルの中身はこんな感じ この コントローラーの中に いろいろ書いていくのが 基本です:)
46.
AngularJS×milkcocoaで簡単チャットアプリ htmlファイルの中身はこんな感じ userという名前の ng-modelと
47.
AngularJS×milkcocoaで簡単チャットアプリ htmlファイルの中身はこんな感じ msgという名前の ng-modelを用意
48.
AngularJS×milkcocoaで簡単チャットアプリ htmlファイルの中身はこんな感じ クリックイベントを 設定
49.
AngularJS×milkcocoaで簡単チャットアプリ htmlファイルの中身はこんな感じ ng-repeatを使うと 「for文」的な繰り返しが 使える
50.
AngularJS×milkcocoaで簡単チャットアプリ htmlファイルの中身はこんな感じ ついでに deleteボタンも つけときます
51.
AngularJS×milkcocoaで簡単チャットアプリ htmlファイルの中身はこんな感じ これだけ!!
52.
続いて、JavaScriptの中身
53.
AngularJS×milkcocoaで簡単チャットアプリ JSファイルの中身は 30行だけ!!
54.
AngularJS×milkcocoaで簡単チャットアプリ 先頭部分
55.
AngularJS×milkcocoaで簡単チャットアプリ 先頭部分 ng-appでつけた名前を モジュール名として使います
56.
AngularJS×milkcocoaで簡単チャットアプリ 先頭部分 ng-controllerでつけた名前を コントローラ名として 使います
57.
AngularJS×milkcocoaで簡単チャットアプリ 先頭部分 Milkccoaを使うインスタンスを 用意。
58.
AngularJS×milkcocoaで簡単チャットアプリ 先頭部分 Milkccoaのデータベースを 「ng-twipainter」って名前を つけて使いますよ〜。
59.
AngularJS×milkcocoaで簡単チャットアプリ 先頭部分 その他の変数を用意。
60.
AngularJS×milkcocoaで簡単チャットアプリ MilkcocoaのDBから データを読み込んで、 apply()で データを返します。
61.
AngularJS×milkcocoaで簡単チャットアプリ メッセージを MilkcocoaのDBに 送信。
62.
AngularJS×milkcocoaで簡単チャットアプリ ng-modelでとってきた データは、 $scope.モデル名 や this.モデル名 で使います
63.
AngularJS×milkcocoaで簡単チャットアプリ ×ボタン押したら メッセージを 削除するやつ。
64.
AngularJS×milkcocoaで簡単チャットアプリ メッセージが pushかremoveされたら、 readMes関数が動きます
65.
AngularJS×milkcocoaで簡単チャットアプリ これだけ!! 31行!!
66.
非エンジニアでも コード読み解きつつ、写経して、動かして… 約1時間くらいでできました:)
67.
簡単っっ!!
68.
逆にAngularJSで難しかったこと
69.
ng-●●がいっぱい出てきて わけわからなくなる…!!
70.
ng-●●がいっぱい出てくる問題 まずはここだけ抑えればいいと思う。 <HTMLの中> ng-app="Appの名前" ng-controller="コントローラの名前" ng-model ng-repeat ng-click ng-●● etc... <scriptの中> angular.modules('Appの名前',[] .controller('コントローラの名前', function(){ //ここに変数や関数を書くよ });
71.
まとめ ・開始30秒で目に見える楽しさが体験できる! ・ちょっとHTMLを拡張するくらいの気持ちで使ってもいいので は? ・milkcocoaとの連携で、1時間でチャットアプリができるお手軽 さ! ・ng-●●はいっぱい出てくるので、 ng-app > ng-controller
> ng-●●がいっぱい出てくる ・もっと複雑なことすると、多分もっと難しいです。
72.
以上です。 ありがとうございました。:)
Download