「遺書一筆」の作り方

2017/10/24

遺書一筆というサービスの技術解説編です。

想い編は前回のこちらの記事です

サービス構成

  • express + loopback
  • React.js
  • Bootstrap（react-bootstrap）

を使った構成としました。プログラムはすべてjavascriptです。
これは現在会社で開発しているサービスを学ぶために、同じ構成にしました。
どちらかというと、React.js が初挑戦のため、こちらメインです。

学んだこと

とにかくこの点が圧倒的に大きい

  • SPAっぽいサービスにReact.js使うときって、設計の考え方を変えないといけない

今までの、サーバ・クライアントが、だいたい１対１で処理し合う関係、でした。
この考え方だと全くReact.jsらしくない構成になってしまうので、ここは何度も壊して作り直しました。

今の私のイメージだと

  • 最初の画面（例えばindex.html）をロードしたら、それ以降の遷移で必要なパラメータはできるだけ一気にロードしておく
  • それ以降の画面遷移や画面の切り替えは、React（つまりクライアントのみでサーバと通信しない）で処理
  • 画面遷移先で、特定ユーザの情報など、再度サーバと通信が必要な際に、
    • 画面ごと遷移してロードし直し（今まで /#〜　というURLで動いていたものが、 例えば /mypage#〜 に変わる）
    • 非同期で、取得（ajaxで非同期通信してその結果を受けて、画面再描画）
      のどちらか２つを選ぶ、という考え方になるのかなと思いました。
      この最後の２択の判断基準に、まだ知識が足りてない感があるので、今後の課題ですね。

とりあえず、まだまだreactらしく作れていない点はあるとおもいますが、
この、今までとの作りの考え方に、大きな違いがある、ということが学べたことが収穫でした

React.jsの特に悩んだところ

最初の構築環境の壁が高すぎる・・・

色々試した結果、ここが一番触りやすかったです。
Bootstrapも導入したかったので、その導入のし易さでこちらをベースにさせていただきました。

画面遷移をどう設計するか

そもそも、画面を遷移させる必要があるのか、を考えないといけない。
単なる、ポップアップ（modalとか）でいいのじゃないか。とか。

細かいUIは後付でなんとなりますが、大きな遷移（データの流れ・外部サービスとの連携とか）は変えにくいので、きっちり設計しないといけませんね。

（というとwebサービスでは当たり前の話でした。。。

APIの叩き方

ajaxなスクリプト呼んだけど、これはスマートなやり方なのか。。。
でも、これはあくまで、ReactはUIライブラリなので、React関係ない話ですかね。にしても、componentファイルにajaxのコード書くのは違和感があるなー。

値の引き回し方

これ自体、あまりスマートに掛けないことがわかった。多くの遷移を跨いでの引き回しは非常にコードがきれいじゃないなと。
だからFluxやReduxが必要になるんだなと理解しました。まだそこまではいけてない。

見た目

デザインの設計なんて出来ない人なので、そこはBootstrapにお任せ。難しいことはしない、できるだけ身を任せました。

その他感想

ただ、ちょっとしたUIパーツの実装は非常に楽だしスマートですね。

例えばmodalとかこんな感じで書けます。

<Modal show={this.state.showModal} onHide={this.close}>
  <Modal.Header closeButton>
    <Modal.Title>このサービスについて</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    「遺書一筆」は、遺書を書くことができるサービスです。
    ・・・
  </Modal.Body>
</Modal>

cssやjavascriptを考えなくても、単にModalタグを呼び出せばokです。楽ですね。

ソース

ソースコード絶賛公開しております。
見て参考にしていただくなり、プルリクエスト投げるなり、好きに使ってください！

https://github.com/papettoTV/isyo

今後

課金機能つくらねば。。。

こちらの記事もどうぞ