AngularJS楽しい:)

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. 以上です。
ありがとうございました。:)