ReactとmBaaSを使って簡単な本棚シングルページアプリを作ってみた。

少しずつReactに慣れてきたので、ちょっと頑張ってアプリっぽいものを作ってみました。

リポジトリも公開しますので、ご参考(獲物)としてどうぞご確認下さい。

mBaaS

最初は、Google SpreadSheetをストレージとしてデータを入れたりしていたのですが、

取り回しがしにくかったり、色々と面倒事があってやる気がなくなったので、mBaaSを使ってみました。

なんとなく検索したら最初にでてきたインフティクラウドを使いました。

他にも色々なサービスがあるようなので、比較するのも面白いかもしれません。

使い方は至って簡単でした。サンプルコードがあるのでそれを真似るだけ。簡単にデータストアを利用できます。

管理画面も使いやすく、データをスプレッドシートのような感覚で表示・編集できます。

今回はただデータを入れるだけに利用しましたが、会員ユーザーを管理したり、関連を貼ったり、ファイルを保存したり、高度なこともできるようです。

アプリ

肝心の作ったアプリについては、色々とワキが甘い所があります(バリデーションとかURLとか)が、実装したいとおもったことは実装できました。

ハッシュやpushStateによるルーティングを上手く取り込む方法も身につけられれば、いい感じのSPAを作ることが出来そうな気がしてきました。

ArdaとかBackbone#Routerを使ってみようかと思ってますが、もうすでにベストプラクティスでもあるんでしょうか。

JSXについては、最初こそ抵抗がありましたが、いざ慣れ始めてくるとコンポーネント化するのが楽しくなってきます。

propsによるバケツリレー…確かにこれはコンポーネントが深くなってくると大変で、いじっているうちに途中で渡し忘れることなんかもありました。

うーん、なにか解決策ってあるんですかね。

表示の制御にはすこし苦労をしました。

今までならjQueryでクラスを弄ったり、簡単なものでよければjQuery#slideDown()とかjQuery#fadeOut()で済ませちゃえたんですけど。

ただ、ReactでもjQueryを使える部分はあるようなので、その見極めもしないとという感じです。

その分CSSアニメーションを使っていくという方向になるから、変にjsで属性やスタイルをいじられなくて済むといえばそうですね。

これがどなたかの参考になれば幸いです。

しかし、私自身大したエンジニアじゃないので、そんなヤツが頑張って作ってみたよくらいの成果なので、暖かく見守って、優しくアドバイスをいただけるとありがたいです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする