SlideShare a Scribd company logo
エンジニアじゃなくても
AngularJS×milkcocoaでチャットアプリが1時間!?
非エンジニアから見たAngularJSの感動するポイント3つ
今日のスライド枚数
72枚!!
最高記録(77枚)に1歩及ばす…;;
はじめます。
まずは…
自己紹介
■名前:
 木下 雄策(27歳・福岡出身) @afroscript10
■略歴:
 九州大学大学院で宇宙の研究
 2013年 レバレジーズ入社
■今のお仕事:
 日本のエンジニア業界を最強にすること!!
 →エンジニア特化型Q&Aサイト【teratail】のDevRel担当
 →ITの勉強会【ヒカ☆ラボ】
■その他
 →Gs'ACADEMY2期生の趣味エンジニア
 →LIGブログ「0エンジニアから0.5エンジニアへ」連載中
※前提※
AngularJS全く触ったことない、
ものすっっっごい初心者向けの発表で、
ものすっっっごい薄いところを話そうと思います
伝えたいこと
伝えたいこと
非エンジニアでも、
思ってた以上にAngularJSへの"入門"の敷居は低くて、
使ってすぐ感動するから、
気軽にやってみようよ!!
って話。
「え?簡単に入門できそうじゃん!
自分もやってみよ!!」
…って思って頂けるとうれしいです:)
では、はじめます。
木下(非エンジニア)の最初のスペック
木下(非エンジニア)の最初のスペック
・2月末にAngularJS初体験(AngularJS入門ハンズオン)
・JavaScript暦1年くらい(週末のみ)
・jQueryくらいは多少使ってる
・MEANstackで簡単なCRUDアプリ作ったことある
始める前のAngularJSへのイメージ
始める前のAngularJSへのイメージ
・敷居が高いらしい…
・え、フロント側でフレームワーク?MVW?
・Model-View-Whatever…Whateverって何だ…?
始める前のAngularJSへのイメージ
・敷居が高いらしい…
・え、フロント側でフレームワーク?MVW?
・Model-View-Whatever…Whateverって何だ…?
 ↓
・そんなこんなで、初心者にはやたら難しそうな印象…
AngularJSを使ってみて思ったこと
使い始めて30秒で
感動する!!
ということで感動したところ3つほどに絞って
紹介していきます:)
〜感動Pointその1〜
データバインディングで
リアルタイムな反応が一瞬でできてうれしい!
リアルタイムな反応が一瞬でできる
リアルタイムな反応が一瞬でできる
AngularJSを
読み込んで…
リアルタイムな反応が一瞬でできる
リアルタイムな反応が一瞬でできる
え!?
これだけ!?!?
そう、これだけ。
Demo1
〜感動ポイントその2〜
超簡単にinputフォームのフィルターができる!!
フィルターが簡単すぎる
フィルターが簡単すぎる
え!?
これだけ!?!?
そう、これだけ。
Demo2
他にも「え?これだけ??」がいっぱい。
こことかササッっと概要つかめました→http://www.tohoho-web.com/ex/angularjs.html
〜感動ポイントその3〜
AngularJS×milkcocoaで、
1時間でチャットアプリが作れた!!
milkcocoaって?
BaaS(Backebd as a Service)です。
milkcocoaって?
ちなみに作ったのが同じ大学の同級生なので、愛着ある感じ。:)
milkcocoaって?
JavaScriptだけで簡単にバックエンドも扱えます。:)
こちらのページ見て作りました。
↓
http://masatolan.com/programming/milkcocoa-and-angularjs/
Demo
まずはHTMLの中身
AngularJS×milkcocoaで簡単チャットアプリ
htmlファイルの中身はこんな感じ
AngularJS×milkcocoaで簡単チャットアプリ
htmlファイルの中身はこんな感じ
MIlkcocoa読み込んで
AngularJS×milkcocoaで簡単チャットアプリ
htmlファイルの中身はこんな感じ
bodyにng-appの
名前をつける
AngularJS×milkcocoaで簡単チャットアプリ
htmlファイルの中身はこんな感じ
その中に
コントローラーを
用意します。
AngularJS×milkcocoaで簡単チャットアプリ
htmlファイルの中身はこんな感じ
この
コントローラーの中に
いろいろ書いていくのが
基本です:)
AngularJS×milkcocoaで簡単チャットアプリ
htmlファイルの中身はこんな感じ
userという名前の
ng-modelと
AngularJS×milkcocoaで簡単チャットアプリ
htmlファイルの中身はこんな感じ
msgという名前の
ng-modelを用意
AngularJS×milkcocoaで簡単チャットアプリ
htmlファイルの中身はこんな感じ
クリックイベントを
設定
AngularJS×milkcocoaで簡単チャットアプリ
htmlファイルの中身はこんな感じ
ng-repeatを使うと
「for文」的な繰り返しが
使える
AngularJS×milkcocoaで簡単チャットアプリ
htmlファイルの中身はこんな感じ
ついでに
deleteボタンも
つけときます
AngularJS×milkcocoaで簡単チャットアプリ
htmlファイルの中身はこんな感じ
これだけ!!
続いて、JavaScriptの中身
AngularJS×milkcocoaで簡単チャットアプリ
JSファイルの中身は
30行だけ!!
AngularJS×milkcocoaで簡単チャットアプリ
先頭部分
AngularJS×milkcocoaで簡単チャットアプリ
先頭部分
ng-appでつけた名前を
モジュール名として使います
AngularJS×milkcocoaで簡単チャットアプリ
先頭部分
ng-controllerでつけた名前を
コントローラ名として
使います
AngularJS×milkcocoaで簡単チャットアプリ
先頭部分
Milkccoaを使うインスタンスを
用意。
AngularJS×milkcocoaで簡単チャットアプリ
先頭部分
Milkccoaのデータベースを
「ng-twipainter」って名前を
つけて使いますよ〜。
AngularJS×milkcocoaで簡単チャットアプリ
先頭部分
その他の変数を用意。
AngularJS×milkcocoaで簡単チャットアプリ
MilkcocoaのDBから
データを読み込んで、
apply()で
データを返します。
AngularJS×milkcocoaで簡単チャットアプリ
メッセージを
MilkcocoaのDBに
送信。
AngularJS×milkcocoaで簡単チャットアプリ
ng-modelでとってきた
データは、
$scope.モデル名
や
this.モデル名
で使います
AngularJS×milkcocoaで簡単チャットアプリ
×ボタン押したら
メッセージを
削除するやつ。
AngularJS×milkcocoaで簡単チャットアプリ
メッセージが
pushかremoveされたら、
readMes関数が動きます
AngularJS×milkcocoaで簡単チャットアプリ
これだけ!!
31行!!
非エンジニアでも
コード読み解きつつ、写経して、動かして…
約1時間くらいでできました:)
簡単っっ!!
逆にAngularJSで難しかったこと
ng-●●がいっぱい出てきて
わけわからなくなる…!!
ng-●●がいっぱい出てくる問題
まずはここだけ抑えればいいと思う。
<HTMLの中>
 ng-app="Appの名前"
  ng-controller="コントローラの名前"
   ng-model
   ng-repeat
   ng-click
   ng-●● etc...
<scriptの中>
angular.modules('Appの名前',[]
.controller('コントローラの名前',
function(){
//ここに変数や関数を書くよ
});
まとめ
・開始30秒で目に見える楽しさが体験できる!
・ちょっとHTMLを拡張するくらいの気持ちで使ってもいいので
は?
・milkcocoaとの連携で、1時間でチャットアプリができるお手軽
さ!
・ng-●●はいっぱい出てくるので、
 ng-app > ng-controller > ng-●●がいっぱい出てくる
・もっと複雑なことすると、多分もっと難しいです。
以上です。
ありがとうございました。:)

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つ