「遺書一筆」の作り方
遺書一筆というサービスの技術解説編です。
想い編は前回のこちらの記事です
サービス構成
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とかこんな感じで書けます。
このサービスについて
「遺書一筆」は、遺書を書くことができるサービスです。
・・・
cssやjavascriptを考えなくても、単にModalタグを呼び出せばokです。楽ですね。
ソース
ソースコード絶賛公開しております。
見て参考にしていただくなり、プルリクエスト投げるなり、好きに使ってください！
https://github.com/papettoTV/isyo
今後
課金機能つくらねば。。。