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

Reactで Food Health API のデモを作成した

http://numb86.net/tech/food-health-react/

3週間ほど前、Food Health APIに栄養素のデータを追加した。
これで、食品データと組み合わせることで例えば、1日の食事の内容を入力して不足している栄養素は何か調べる、ということも一応可能になった。

また、以前から興味のあったReactの勉強に着手したので、その実践として、ReactでAPIのデモを作ってみることにした。

それから、CUIでのGitの利用、もこのデモの制作で試してみた。もちろん今までもGitは使っていたのだが、GUIでやっていた。だがそろそろCUIで使えるようになりたかったので、今回からCUIでやってみることにした。
お試しということで、複雑なことはやっていない。そもそも一人で開発するなら、さほど複雑なことは必要ないだろうし。

UIは、以前作ったデモの流用。
そして、BootstrapがReact用のコンポーネントを公開してくれているので、すぐに作れた。

ただ、スマホ対応だけ、上手くいかなかった。PCで確認するとレスポンシブ自体は上手くいっているのだが、スマホだと表示が最適化されない。
先程のBootstrapのサイトをスマホ環境で見たところ、そもそも公式でも上手く動いていなかった(ように見える)ので、諦めた。
あくまでもReactとGitの練習なので、本質的でないことは避けたかった。

正直なところ、この程度の規模ではReactのメリットは実感できないだろうし、まだ書き始めたばかりなのでReactの「お作法」も分かっていない。
なのでReactは素晴らしい、というような状態には今のところなっていない。
jQueryでDOMを操作したりイベントをバインドしたりしていた頃とは違う考え方が必要なのだろうが、その切り替えもまだ出来ていない。

ただ、コンポーネントを作りそれを組み上げることで全体を作っていく、というアプローチは、新鮮で面白かった。

引き続きReactに投資していくつもりである。
来月中に2つくらいは習作を作りたいと思っている。