WebDesign Dackel

React.jsとMediaWikiAPIでWikipediaのビューワーアプリを作ってみた

React.jsとMediaWikiAPIでWikipediaのビューワーアプリを作ってみた

Hatena0
Google+0
Pocket0
Feedly0

はじめに

よくReact.jsとくっついて説明されているFluxを勉強したいなぁ〜と思ったので、サンプルとしてReact.jsMediaWikiAPIを使って、Wikipediaのビューワーアプリのようなものを作ってみました。

デモページ&ファイル

まず先に、どんなものを作ったのかを貼っておきます。

動作イメージ

デモページ

サンプルファイルはGitHubにあがっているので興味のある方は下記リポジトリからご確認下さい。

tsuyoshiwada/react-wiki-clip

下でも書いたのですが、反省点だらけのコードです…。
もしこれからFluxはじめるぜ!という方すいません。多分参考になりません。
Fluxに精通している方、ぜひ改善点や勉強方法などご教授頂けらと思っています…。

サンプルを作る前にやったこと

初めてのFluxということで、一応本家TODOチュートリアルのコードを写経してみました。

Tutorial – Todo List

あとは下記の記事やスライドを見てなんとなく分かった気になりました。(気になっただけでした…)

サンプルでやったこと

  • 入力したキーワードをMediaWikiAPIに送って該当するWikiを取得して一覧
  • これを無限スクロールでページング
  • Wikiを選択すると詳細なページが表示される
  • Wikiをお気に入りに登録できる
  • Fluxな構成に初挑戦
  • react-routerを使ってSPAに初挑戦
  • ページ数は下記4ページ
    • 検索
    • Wiki詳細
    • お気に入り一覧
    • このサイトについて

使用したライブラリなど

以下、導入したライブラリと用途です。

Fluxxor

Flux用のフレームワークです。これは下記のサイトで知りました。

Fluxなフレームワーク、Fluxxorの紹介 – マルシテイアは月の上

本家チュートリアルを終えて、あまりの自由さに何らかのレールを敷いてくれるものが恋しくったので導入してみました。

FluxxorではTODOリスト、非同期処理、react-routerを使ったサンプルなど、ひと通り必要な情報がありました。
Dispatcherを隠蔽してくれて、素のFluxに比べてシンプルに書けるみたいです。

REACT/ROUTER

ルーティングを行うために使用しています。
初のSPAにチャレンジして、フロントエンドのルーティングというのを初体験しました。
正直使い方はまだ良くわかっていませんが、とりあえず動かせたのでよしとします。

store.js

お気に入りのWikiをlocalStorageに保存する用途として使用しています。
素のlocalStorageと変わらないシンプルな使い勝手で、ブラウザ対応とObjectの保存をいい感じに処理してくれるので気にっています。

superagent (superagent-jsonp)

MediaWikiAPIとの通信に使用しています。
superagent本体だけだと、jsonpに対応できないのでsuperagent-jsonpを使うことで解決しました。
ここに関してはこの前記事にしましたので、興味のある方はご確認下さい。

SuperAgentでJSONPを取得してみる

es6-promise

Promiseを使うために導入しています。
これまでjQuery#Deferredでしか、Promise系の処理をしたことが無かったので、jQuery以外のPolyfillは何が鉄板か分からなかったので、あまり深く考えずGitHubStarが多かったこちらを選びました…。

他にも、ちまちまと使用していますが主要なのは上記かなと思います。

反省点や疑問点など

たったの4ページしかないアプリですが反省する点、疑問点が沢山ありました。

ちゃんと設計するべきだった

  • Fluxの勉強したいなぁ〜
  • MediaWikiならフロントエンドで完結したものが作れそうだぞ
  • Wikipediaの検索機能を実装(素のFluxで実装)
  • これをお気に入りに追加してみたいな
  • じゃあページ分けないと(ついでにSPAの練習もしたいしなぁ)
  • Fluxxorならもっと簡単に書けそう!
  • 外部リンクだけじゃなくてWikiの詳細もアプリ内でみたいなぁ

みたいにしっちゃかめっちゃかな感じで作ってました…。おかけでところどころ適当な感じのコードになりました。

実際作り始める前にちゃんと実装したい機能とか炙りだして設計するべきだったなぁと反省しています。

actionでの外部API連携について

他の方がFluxで実装したコードを読んでみると、APIを叩く際はactionの中でutilapiなどに専用のクラスなり関数を作りそちらで処理するようになっていました。
Fluxxorの非同期処理のサンプルではclientなるものを立ててそちらで処理していましたが、やっぱりここはutilapiが一般的なのかな?って気がしていますが実際のところどうなのでしょうか??

Action・Storeが煩雑っ!

Fluxxorのところで挙げたサイトでも書いていましたが、Storeのコードがぶくぶくと太っています。これを上手く回避するやり方なんかを見つけられたらなと思っています。

Actionclientに処理を渡すために、client内と同じようなコードをいくつか書いてしまっています。これもなんか汚い感じがしていてどうにかしたいです…。

ページングの値はどこに持たせるべき?

コンポーネント内のステートとして持たせれば良いのか、それともStoreの中に持たせるべきか悩んだ挙句、今回はとりあえずStoreの中に持たせてしまいましたが、どちらに持たせるのがFlux的にベストなのか、もっと勉強しないとですね。

まとめ

なんか中身の無い反省をつらつらと書いてしまいましたが、スライドやFluxを紹介している記事を見ただけで分かった気にならないで、実際に手を動かさないとわからないことばかりでその点すごく勉強になったなと思います。

今回はFluxFluxxorを使ってみましたが、“Yahoo`の作っているFluxibleも気になっていて、これを使ってまた何か作ってみたいなと思っています。
それぞれのフレームワークの違いなんかを通して学べることもあるんじゃないか?と思っている次第です。