@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

【TechBuzz】第1回.js系勉強会 #techbuzz に行ってきました

event javascript

第1回目ですが、食いつきがものすごく良かったそうです。そんな私も一瞬で食いつきました。みなさんJavaScriptのMVC系フレームワークには関心が高いようですね。今後ますますJavaScriptで大規模なものを作っていく事になりそうですから、当然といえば当然なのかも知れません。
そんな訳で、メモったことを書いていきます。

Angular.jsのここがアツい！！シンプルで楽しい開発の実践

資料 → Angular.jsのここがアツい！！

Angular.jsって何？
  • 近年のWebってどうなの？
    • AjaxとかWebSocketとかでリアルタイム性が出てきてる
      • 紙芝居的な作りから変わってきている
      • 操作したらすぐ反応するようなインタラクティブ性あふれる感じになってきている
    • 表現力が上がって、高機能になってるし、ブラウザの性能も上がっている
    • Webがデータを持って、ブラウザで処理・表現する世界観になってる
    • これらを実現するために、ブラウザで動作するJavaScriptでのMVCをシンプルにする方向性
      • ゴツゴツしていると、開発はもちろん、テストとかも大変
  • Angular.jsのアツいポイント
    • 簡単に始められる
    • HTML5自体がテンプレートである
      • ModelとViewが密結合にならない
    • ModelとViewの同期が楽
      • 双方向同期
      • Modelを変更すればViewが変わる
      • Viewを変更すればModelも変わる
    • Routingとかが楽
    • カスタムタグや、カスタム属性などを作ってシンプルに保てる
      • Viewの部品化、ライブラリ化が簡単
    • つまり、シンプル！
実装（和色検索の例）
  • Step1. 簡単にはじめよう
    • htmlタグ部分にng-app属性をつける。ngはAngularのこと。
    • {{}}中括弧2つで囲まれた部分に式が書ける。
    • 変数（Model）はng-model="name"のように定義する。input要素に属性を追加する感じ。
    • {{name}}ってしておけばinput要素の変更に合わせて自動で値を入れてくれる
  • Step2. コントローラー
    • functionを定義して、HTMLファイルにng-controller="function"で定義する。
    • $scopeを引数にする
      • $scope.xxx = 'hoge';とか書くと、Viewから{{xxx}}で参照出来る
      • 繰り返しはng-repeat="color in colors"みたいにViewに書く。
    • JSONを非同期に取るようにする
      • functionの引数を$scopeと$httpの2つにする。引数の順番は関係なくて、引数の名前が大事です。引数はimportみたいなイメージです。
      • $http.get('jsonurl').success(function(data) {$scope.colors = data;}) みたいに取得出来る。
    • 各要素にコントローラーは設定できる。
      • ng-repeatの中でやれば、リストのそれぞれの要素にも対応してくれる。
    • ng-click="onClickHoge"でイベントと登録する
  • Step3. フィルタリング
    • ng-repeatをパイプで繋ぐ。
      • ng-repeat="color in colors | filter:query" のように書くと、ng-model="query"でモデル定義したものでフィルタリング出来る。
    • ng-repeat="color in colors | filter:query | orderBy:orderProp"と書けば、colorオブジェクトのプロパティでソートされる
    • 今までの作りと、ぜんぜん違うので、アプリの作り方が変わります。
  • Step4. ルーティング
    • angular.moduleを拡張します
      • $routeProvider.when('パス', {templateUrl: 'htmlの名前', controller: 'controllerのfunction'}).when().when()・・・
      • htmlのAタグのhrefを#/path/to/htmlにするとかして、そのAタグがクリックされるとテンプレートのHTMLファイルが切り替わる
  • Step5. カスタムタグ
    • module.directive('カスタムタグの名前', 挙動のfunction)で拡張していく。
      • 要素、属性、CSSのクラス、コメントを定義出来る
まとめ
  • とっかかりはものすごく簡単です
  • 多少の規模ならば複雑なものも作っていけます
  • 大規模なものではわかりません。事前に検証が必要になるかもしれません。
    • 自動でバインドされたりするので、細かい動きをカスタマイズしたりが難しいかもしれません。
      • クロスブラウザ対応とか
      • ng-appが1つしか定義出来ないとか
      • 裏でどんな動きをしているかがわからないとか
  • Angular.jsは手段の一つでしかないので、本当に重要なのは、何を作るのか、作りたいのかである。

Backbone.jsでつくるWebアプリケーション

資料 → slides/backbone_webapp at gh-pages · hokaccha/slides · GitHub (ZIPでダウンロードして展開すればいいと思う)
スライド → Backbone.jsでつくるWebアプリケーション

Backbone.jsとは
  • 概要
    • JavaScriptのMVC系フレームワークです
      • Spineが似ていて、Backboneにインスパイヤされて作られたものです
      • Angular.jsとかEmbar.jsなどもあります。
    • すごく軽量です。
      • 圧縮版で5.6KBしかありません。
      • Angular.jsは76KBあります。
      • 困ったときに中身を読むのも楽です。
  • 解決したい問題点
    • 大規模なJavaScriptになったときに機能分けが難しい
    • 分業がしにくい
    • テストしづらい
  • 解決するためには
    • 分割出来るようにする
      • ファイルをModelとViewとControllerで分けます
      • 役割で分けることが出来る
      • よって、テストもしやすくなる
  • Backboneで出来ることは
    • 役割と機能によってJavaScriptファイルを分割します。
    • 大規模であればあるほど効いてきます
  • Backboneで出来ないことは
    • コード量を減らすことは出来ません
      • Angular.jsのように自動的なバインドなどは出来ません
    • 高速化とかは出来ません
      • 遅くなるかと言うと、体感出来るほどではないと思います
    • 小規模なアプリでの保守性が上がることはない
    • 短期的な生産性の向上にはならない
      • 学習コストなどがかかるので
アーキテクチャ
  • Controller
    • Backbone.Router
    • Backbone.History
  • Model
    • Backbone.Model
      • 一つのModelオブジェクト
    • Backbone.Collection
      • Modelオブジェクトを束ねたリスト
  • View
    • Backbone.View
      • フォームとか、まとまった表示エリアとか、一覧表示部分とか。
      • Viewの中にViewを持つような子要素的なことも定義出来る
  • 挙動
    • Viewの中でSubmit等のイベントが発生したらModelに通知
    • Modelで処理をして、変更を通知するイベントをViewに通知し、Viewが結果を描画する
    • View→Model、Model→Viewのような関連になる
      • ViewからViewを直接見ることがないので、画面のパーツの部品化がしやすい
  • 実装
    • ディレクトリ構成
      • jsディレクトリをmodel, view, controllerでさらに分ける
    • View
      • Backbone.View.extend({中身})で定義する
      • initialize: function() {}で初期化処理を書く
      • elでViewの対象とするHTMLのセレクタを指定する
      • this.$elでjQuery(el)を操作出来る
      • events {submit: 'onSubmit'}のようにイベントをバインドする
      • onSubmitの中でイベント処理を書く→Modelに通知する
      • $el.find('selector')はよく使うので、$('selector')のエイリアスが使える
    • Collection
      • Collectionの中身が変更になるとresetイベントを発火します
      • View内でresetイベントをハンドリングします
      • collection.on('reset', ハンドラのfunction)

この辺りでライブコーディングしながらだったので、追いつかずにメモ出来なくなってしまいました。

まとめ
  • 役割で分割して、メンテナンス性を向上出来ます
  • Backboneはあくまで手段の一つです
  • 今後はJavaScriptでのアプリ開発での設計する力が求められるでしょう
その他