エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!?
非エンジニアから見たAngularJSの感動するポイント3つ
最高記録(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を使ってみて思ったこと
ということで感動したところ3つほどに絞って紹介していきます:)
〜感動Pointその1〜データバインディングで
リアルタイムな反応が一瞬でできてうれしい!
リアルタイムな反応が一瞬でできる
AngularJSを読み込んで…
リアルタイムな反応が一瞬でできる
え!?これだけ!?!?
〜感動ポイントその2〜超簡単にinputフォームのフィルターができる!!
フィルターが簡単すぎる
え!?これだけ!?!?
他にも「え?これだけ??」がいっぱい。
こことかササッっと概要つかめました→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/
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-●●がいっぱい出てくる
・もっと複雑なことすると、多分もっと難しいです。
以上です。ありがとうございました。:)