TwitterをAngularJSとTypeScriptで作るとこんな感じ

top

Twitterのサービスを一言で言ってしまえば「140文字以内のテキストを投稿するSNS」で凄くシンプルで取っ付き易く、わかりやすいサービスで、技術的な題材としても最適です。

TwitterをAngularJSとTypeScriptで作るとこんな感じかな?と思い、触りだけ作ってみました。

http://kaibadash.github.io/angularjs_twitter/

ソース:
https://github.com/kaibadash/angularjs_twitter

対象

AngularJSはハッキリいって敷居(学習コスト)が高いです。
このエントリは、AngularJSを調べ始めて、これから凝ったことを始めるぞ!という方をターゲットに書いたつもりで、まだ一切書いたことが無い方には不向きかもしれません。
TypeScriptを使っていますが、コンパイルされたJavaScript(js/twitter.js)は人間が読めるものなので、参考になると思います。

このサンプルについて

  • Home、Mention、リプライの動作しか作っていません(がサンプルとしては十分かな…)
  • APIはダミーのファイルが置かれており、それをリクエストしています。実際はクロスドメインの問題とOAuth認証の問題があるので、APIを中継するようなサーバを作る必要があるでしょう。
  • TypeScriptを使っています。
  • Twitterを真似たレイアウトになっていますが、対応するAPIが無いため、実際はTwitterと同じものを作ることはできません。
  • あとからソースコードを修正する可能性があります。githubが最新で正しいコードになるようにします。pull request歓迎です^^;
  • ControllerはxxxViewModelという名前に統一しています。

使用ライブラリなど

特殊なものは使っていません。

  • bootstrap
    • Twitter社製、CSS frameworkです。サクッとそれなりのデザインにできる。
    • スマフォ対応も簡単。
    • Twitter社製なので、TwitterっぽいUIにできますね。
  • ui-router
    • 標準の$routeより、多機能で情報も豊富。
  • bower
    • Twitter社製。
    • JavaScriptのライブラリをコマンドラインで配置できる。
    • 最近はオワコンという声をよく聞くが…?
  • gulp
    • TypeScriptの変更を監視し、自動的にビルドしてくれる。
  • tsd
    • TypeScriptのヘッダファイルd.tsを管理してくれる。

ポイントと懺悔

  • MVVMでViewModelの役割は、ViewとModelのbindingです。ビジネスロジックは極力Serviceにやらせましょう。
  • テンプレートで頑張りすぎてはいけません。条件分岐はビジネスロジックですのでViewでやってはいけません。三項演算子で頑張りそうになったら、scopeにプロパティを作って、ViewModelから受け取るようにしましょう。
  • ServiceやViewModelを自分でnewしてはいけません。自前でnewしたい時はViewModel間でやりとりしたい時だと思いますが、密結合になってしまいます。
  • ViewModel間の連携はbroadcast/emitで行いましょう。
  • $scopeになんでもぶち込んではいけません。$scopeはViewとViewModelの間にあるものなので、$scopeに置いていいものは、Model、ViewModelのプロパティ、ViewModelのメソッドです。間違ってもServiceやViewModelをぶち込んではいけません。

と、偉そうに書きましたが、全部僕がハマったポイントであります。申し訳ありません。

本当は全6エントリくらいにわたり詳細に解説しようかと思ったんですが、力尽きてやめた…。要望があれば考えます。

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL