annictでreact-nativeの練習した
react-native の練習のために annict クライアント作りました。
コードここにあります
GitHub - gong023/annictApp: annict client by react-native
一応デモもあります。動くといいですね
デモ見てもらったらわかるんですが間違ってもストアに乗っけられる代物ではないです。annict のクライアントつくって小銭稼ごうみたいな意図はなく、単純に練習のために作りました。それも一段落したので今後機能追加等を行うこともないと思います。
何を目的にしていたかというと、一つは単純に react-native を動かしてみること、もう一つは redux に始まるフロントエンド周りアーキテクチャを咀嚼するすることです。興味が js 部分に寄っていたので、アプリとしては ios しかつくってません。今回書いたコードは android でも動かせるはずですが、deeplink の設定とか .env の読み込み設定とか結構面倒くさいのでパスしています。
中の作りに関しては、package.json を少し間引いてみるとなんとなく見えると思います
"dependencies": {
"axios": "^0.16.1",
"lodash": "^4.17.4",
"react": "16.0.0-alpha.6",
"react-native": "^0.44.0",
"react-native-config": "^0.4.1",
"react-native-router-flux": "^3.38.1",
"react-redux": "^5.0.4",
"redux": "^3.6.0",
"redux-logger": "^3.0.1",
"redux-observable": "^0.14.1",
"rxjs": "^5.3.0"
},
"devDependencies": {
"eslint": "^3.13.1",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jest": "^1.0.2",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
}
redux, redux-observable, react-native-router-flux 辺りがキモになるかと思いますが、js のシーンを真面目に追っている人間ではないので、だいたいこんな感じ？っていうのは探り探りで作りました。
とはいえ最終的に、見た目の雑さに反して裏側はそこそこ真面目に作れたような気がしてます。まあこれくらいやっとけば割と機能追加やブラッシュアップはいけるかなと。あげたコードが自分のような初学者の助けになればいいなと思います。一応 oauth 認証 -> ログイン -> いくつかの API を叩くという一連のフローは書いています。特に oauth 周りは面倒くさいので、そのサンプルとしてはいいかもしれません。
全体的にやってみた感想としては、react-native、割とドキュメントどおりにやれば動くのですごいなと思いました。この手の技術は正しくやってるはずなのになんか動かないっていうケースが多い印象だったんですが、そういうのでハマった記憶が特にありません。まあ、簡単なものしか作ってないからだと思いますが。しかし全体的に web の js よりコンフィグが100倍楽な印象があり、初学者がフロントエンドの js やるなら web より先に react-native やった方が楽なんじゃないかと思うレベルでした。
とりあえず今回の一件はロジックの組み方に焦点を当てられたのでとても体験良かったです。js 色々言われているし色々ありますが、パラダイムシフトとしてこの辺かなあというのを実際に手を動かしながら見れたのは楽しかったです。コード見てみたけどお前ここダメだよとかあったら教えてもらえるとうれしいです。
時間かかったなあと思うのは xcode へのライブラリ追加とか deeplink の設定とか appetize.io にアップロードする際の release ビルドとか、ios 側の設定です。自分のようにサーバーサイドに寄っている人はこの辺不慣れですし避けることもできないので変なストレスがあると思います。とはいえ本来フルネイティブでやるとしたら全部そんな感じになるはずなので、js の知識を使いまわしてアプリを書く部分だけでも楽できるっていうのはすごいことだなと思いました。
