エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間！？非エンジニアから見たAngularJSの感動するポイント3つ

エンジニアじゃなくても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へのイメージ


・敷居が高いらしい…

・え、フロント側でフレームワーク？MVW？

・Model-View-Whatever…Whateverって何だ…？


・敷居が高いらしい…

・え、フロント側でフレームワーク？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ファイルの中身はこんな感じ



MIlkcocoa読み込んで



bodyにng-appの名前をつける



その中にコントローラーを用意します。



このコントローラーの中にいろいろ書いていくのが基本です：）



userという名前のng-modelと



msgという名前のng-modelを用意



クリックイベントを設定



ng-repeatを使うと「for文」的な繰り返しが使える



ついでにdeleteボタンもつけときます



これだけ！！

続いて、JavaScriptの中身


JSファイルの中身は30行だけ！！


先頭部分


先頭部分

ng-appでつけた名前をモジュール名として使います


先頭部分

ng-controllerでつけた名前をコントローラ名として使います


先頭部分

Milkccoaを使うインスタンスを用意。


先頭部分

Milkccoaのデータベースを「ng-twipainter」って名前をつけて使いますよ〜。


先頭部分

その他の変数を用意。


MilkcocoaのDBからデータを読み込んで、apply()でデータを返します。


メッセージをMilkcocoaのDBに送信。


ng-modelでとってきたデータは、$scope.モデル名やthis.モデル名で使います


×ボタン押したらメッセージを削除するやつ。


メッセージがpushかremoveされたら、readMes関数が動きます


これだけ！！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-●●がいっぱい出てくる

・もっと複雑なことすると、多分もっと難しいです。

以上です。ありがとうございました。:)

Engineering

エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間！？ 非エンジニアから見たAngularJSの感動するポイント3つ

エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間！？非エンジニアから見たAngularJSの感動するポイント3つ