「フロントエンドフレームワーク」 今回はデザイナーさんやディレクションの方向けに、その中身を「ボヤッと」理解してもらうのが目的のハンズオン形式の勉強会でした。

1. ∼そもそもWebって∼
2015.09.10
AngularJS勉強会
勉強会

2. 自己紹介
高橋知成
デザインエンジニア（見習い）
去年の11月からツクロアでインターンをしています。
今月30日からちょっと飛び立ちます。

3. 今回は。。。
最近よく耳にする
『フレームワーク』『AngularJS』『何ちゃらjs』・・・
デザイナーの方とディレクションの方に向けて

4. 『ボヤッと』
わかってもらえることがゴールです。

5. AngularJSとは
・JavaScriptフレームワーク（Google製）
・HTMLベースのテンプレート
・双方向データバインディング
・ルーティング機構
・Ajaxサポート

6. AngularJSとは
・JavaScriptフレームワーク（Google製）
・HTMLベースのテンプレート
・双方向データバインディング
・ルーティング機構
・Ajaxサポート

7. まだ理解できなくていいです

8. そもそも自分が
・今年の夏前から「AngularJS」を触り始める
・「MEGANATOR」をその流れで実装してみることに
・なのでAngularJS歴3ヶ月とか

9. まずは
実際にどこで使われているのかを見てみましょう

10. メインでやってることは
・画面遷移とそれに応じた表示の切り替え
・データ通信
・クリックなどのイベント処理
・データの表示
ーー「トップ」「計測」「フィッテング」など
ーーメガネのデータを取得
ーーメガネを選択したらどうするのかなど
ーーメガネを繰り返しをして表示したりなど

11. それぞれ見ていきましょう

12. 画面遷移
meganator.tuqulore.com/#/

13. 画面遷移
meganator.tuqulore.com/#/set_up

14. 画面遷移
meganator.tuqulore.com/#/fitting

15. 画面遷移
『/』の時は
これ 表示
『/set_up』の時は
これ 表示

16. 通信
{JSON}
データ

17. 通信

18. データの表示とイベント処理

19. データの表示とイベント処理

20. データの表示とイベント処理

21. データの表示とイベント処理

22. でも、全部じゃないんです

23. を使っています・・・
メガネの表示などは
『∼JS』
2個目

24. 『∼JS』は本当にたくさんあります

25. しばしば組み合わせられて使われます

26. では、AngularJSの具体的な事例から離れて
『JSライブラリー』『JSフレームワーク』
なんでできたんだという話をします。

27. 『技術の進化』
『守備範囲』
ポイントは

28. 少し前までは
JS＝『オワコン』
・環境によって動かない
・遅い
・型がない

29. 今では
JS＝『重要っしょ』
・非同期通信（Googleマップなど）必須
・弱点も補えるような仕組みの確立

30. こんなことする（できる）ようになった

31. そんなにやること（やれること）が多くなかった。
アニメーションとかはFLASHだったり。。。
少し前までは

32. 自前のPC
サーバー
PCの性能の向上などがあり
仕事量激増
今まではサーバーでやっていた処理の代行や、新たな処理ができるように
今では

33. 『もっとラクしたいなっ』

34. 『JSライブラリー』
JavaScriptの便利機能集のようなもの
DOM操作系 グラフィック系
それぞれ『守備範囲』があります

35. 例えば『ボックスをフェードアウト』させる

36. それではこれは

37. DOM操作系 グラフィック系
それぞれ『守備範囲』があります

38. DOM操作系 グラフィック系
それぞれ『守備範囲』があります

39. 『JSライブラリー』
守備範囲に特化した便利機能集
＝

40. それでもコード数千行とかになるケース続出

41. プログラミング言語ってとても自由
だから色々なものが作れる

42. 『コード数千行』。。。
自由が故に

43. CSSで例えてみましょう
インライン
style.css headタグ内

44. 『JSフレームワーク』
『ライブラリー』＋『ルールを提供』

45. 『JSフレームワーク』
・ライブラリーと同じで『守備範囲』がある
・ライブラリーと同じで『便利機能』を持っている

46. +
『JSフレームワーク』
・ライブラリーと同じで『守備範囲』がある
・ライブラリーと同じで『便利機能』を持っている
大枠の書くルールが決められている。
「どこに」「どんな名前で」「どんな風に」

47. 自分の脳内イメージですが
Angularさん
「自分を使うんですね。
わかりました。ということは、大体○ △のよ
うなサイトを作るんですね。
それじゃ自分の指示に従ってもらいますね」

48. 『守備範囲』ならばコードを短くスッキリと
誰もが見易くなるようになる。

49. 『技術の進化』
『守備範囲』
ポイントは
ここで一旦小まとめ

50. 『守備範囲』
フレームワークの

51. そもそもWEBって

52. サーバー
自前のPC
通信
データ
・高橋知成
・友達000人
・写真000枚
・グループ000に参加

53. サーバー
自前のPC
データ
・高橋知成
・友達000人
・写真000枚
・グループ000に参加
表示

54. サーバー
自前のPC
画面遷移
ニュースフィード個人ページ

55. サーバー
自前のPC
通信
イベント
投稿する・友達申請

56. 通信・画面遷移・データ・イベント・表示

57. 『守備範囲』
フレームワークの
通信・画面遷移・データ・イベント・表示

58. 『守備範囲』
フルスタック
通信・画面遷移・データ・イベント・表示

59. 『守備範囲』
通信・画面遷移・データ・イベント・表示
表示特化

60. 『守備範囲』
通信・画面遷移・データ・イベント・表示
便利機能少なめ

61. それじゃなんでもAngularJSで作れば。。。

62. スピードが遅い
覚える量が多い
決まりでガチガチ

63. 守備範囲が狭く単体ではあまり意味がない

64. 守備範囲が狭く単体ではあまり意味がない
色々な組み合わせをすることができる

65. その時々の状況にあった選択が大切

66. んじゃAngularJSに向いてる物って?

67. ダッシュボード系アプリケーション
https://dribbble.com/shots/1283529-The-Pony-Express-Mail

68. https://dribbble.com/shots/928345-Sush-io-Mac-App-Full-view
+

69. それでは作ってみましょ

70. 完成予想図

71. 補足：APIについて
http://api.gnavi.co.jp/ver1/RestSearchAPI/?
『？』の後に
『キーワード名』＝『キーワード』
『＆』で複数続けて

72. できました！！！

73. まとめ
AngularJSのルールに則って書くことで
短くスッキリと書くことができる。

74. まとめ
フレームワークとは守備範囲がある

75. ご静聴ありがとうございました
2015.09.10勉強会