みんなの「作ってみた」

Django+Reactで初めてのSPA作ったった

2019/01/16

John_sugai
John_sugai
スタートアップで働くエンジニアです。Deep Learningを少しやってます。よろしくお願いします。

作家の人気投票ができるサイトBook Timelineを作ってみました。自分の好きな作家を人気投票の対象に登録することができます。投票はそれぞれの作家のページからQiitaのいいねボタンみたいな感じでスターボタンがあるので、それを押すと一票いれることができます。色々と遊んでみてください!
スクリーンショット 2019-01-16 22.37.16.png

使った技術

  • Django
  • React
  • Heroku

バックエンドをDjango、フロントエンドをReactで作っています。といっても、ベースはDjangoでtemplateからReactのビルドファイルを読み込んでいるような形になっています。Django + Reactの構成って調べてみると色々あってどれがいいのか迷ったのですが、最終的にはこの記事を参考にして同じ構成でやってみました。

Reactといえば、SPAですがBook Timelineも例に漏れずSPAになっています。ページ間の遷移による読み込みがなく、特にパフォーマンスチューニングもしてませんが(する知見を持っていない)、割とサクサク動いてくれている気がします。DBからのデータの取得などは、Django REST FrameworkでAPIのエンドポイントを作成し、Reactからfetchで非同期でとってきています。

書籍の情報の取得には外部APIを利用しています。書籍情報を取得できるAPIは、OpenBDやらGoogle Books APIやら国立国会図書館のAPIやら色々あるのですが、今回は楽天ブックス書籍検索APIを使いました。それぞれのAPIで結構特徴が異なるので目的に応じて使い分ける、または組み合わせて使うのが良いかと思います。

個人開発のすゝめ

個人開発おすすめです。

やはりフロントエンド、バックエンドからインフラまで一人でやらなければならないので、知識がついた気がします。会社でコードを書いているとベース部分は他の人が作っちゃってて、ロジック部分だけコーディングして...といった感じでpython一応書けるけど、環境構築よくわからないとかインフラ全然わかりませんとなってしまいがちだったんですが、企画・設計・開発・リリースまで一通り経験できたのは良かったのかなと思います。(こんなにきっちりフェーズ分けてはやってないんですが...)

あとReactは、きちんとComponent分けをして実装すれば、そのまま再利用可能なので、書いたコードが自分の資産にもなります。他の言語と比べてもその特色は強い気がします。コンポーネントを記述したファイルをコピーするだけで済んじゃいますからね。

それと、自分一人でできることが増えてくると、なぜだか色々とアイデアが浮かんでくるようになりました。まぁたいていは、翌朝になってみると大したことのないアイデアだなぁとなるんですが。。。きっといつかはすごいものを思いつくことでしょう。。。ご期待ください。

ただやっぱりモチベーションの維持は大変だなぁと感じながらやってました。納期があるわけでもないものを自分の意思だけで仕事以外の時間を使って続けるのって大変に決まってますよね。私はやりたくない時、やる気が起きない時はやらないことにしてました。則天去私、天の意思に任せます。もしくは、個人開発によってガッポガッポお金が懐に入って来たときのことを想像して、自分を奮い立たせましょう。
Enjoy coding!!

補足

Book Timelineよろしくお願いします!
技術書だけじゃなくて、小説も読んでみませんか。