読者です 読者をやめる 読者になる 読者になる

09

AngularJS お試し中

javascript angularjs 開発

jQueryを使って書く事に大分慣れてきたのでがしがし書いていたのだけど、ここのところAngularJS が自分の観測範囲内において急に人気が出てきたのでちょっと試してみている。

データバインディングの領域ではAngularJSの前にKnockoutも調べてみたのだけど、Knockoutはなんかあまり好きになれないっぽい。AngularJSは http://rebuild.fm/27 でDIがきもいと言う話を聞いていたので深入りはしたくない感じではあったのだけど、Knockoutが気に入らないせいで調べてみる気になった感じ。

とりあえずドットインストールを見れば大枠は分かるみたい。

もともとjQueryで書いてたアプリを少しずつ書き換える感じで使って見ているのだけど、第一印象はちょっと良い。なぜ良いか?個人的にこういう枠組み系のプロダクトを導入すると理由が分からないエラーにはまって全く前に進まなくなったりする経験がとても多かったのだけど、それが全くなかった。調べて書けばちゃんと動く見たいな。すばらしいと言わざるをえない。すばらしい。

でもちょっとどうかなと思うところもある。jQueryの素晴らしさはDOMの検索や編集をごく少ない手数で実装できる点にあると思うのだけど、AngularJSを使っていると、jQuery.data() によるDOMノードからデータへのマッピングが実はとても重要だった気がしてくる。 AngularJSやKnockoutは双方向データバインディングを主要機能に上げているけれど、基本的に双方向なのはいわゆるフォーム関連のユーザ入力を受け付けるエレメントについてのみ(だと思う)。HTMLとJavascriptを駆使したいわゆるSPA(Single Page Application)ではdivやspanなどもユーザの入力を受け付けるコントロールになり得る。ノードをドラッグアンドドロップで移動させるなんて最近ではWebでも普通のUIだが、何をどこに(何番目の)ノードにドロップしたか、がユーザの編集データとして重要な意味を持っている。 つまりこういったノードに対する操作もイベントリスナでハンドリングするのではなくデータバインディングとして取り扱いたい。これがうまくやれないと結局ビューにイベントハンドラを書いてモデルを直接触るみたいなコードが消えない気がする。どうしたものかな。ディレクティブでうまくやれるんだろうか。

まだ作っている最中&学んでいる最中なので、気付きがあればまた書こうと思う。 今までのところ、コード書くときには以下のような順番でトピックを辿っている。

  • データバインディング
    • {{}}
      • model data -> dom
    • ng-model
      • model data -> form value
      • form value -> model data
  • ディレクティブ
    • ng-repeat
    • ng-click
    • ng-show
  • ディレクティブを作ってみる
    • エレメントの初期化処理みたいな感じで処理が呼ばれるみたい
    • 対象エレメントが渡されるので普通にjQueryを使って $(element).draggable() とかやるとドラッグできるようになる。
    • データバインディングのところで dom -> modeldata が無い事からも分かるように、ドロップされた後にその操作が何を表していたのかは自前でイベントハンドラを書いてモデルデータを変更する必要がありそう。
  • ngResource
    • Ajaxでデータ取ってくるらしい。
    • 細かいところは学習中・・・