おとといやったこと
Reactでログイン画面のマークアップ。ベースとなる部分が曖昧だと死を見るので、設計に時間をかけた。
成果は画面比率を固定するコンポーネント。
昨日やったこと
昨日の記事にある通り、APIサーバー用の開発環境を構築。
今日やったこと
APIドキュメントとモックアップに apiary.io を採用
マークアップに独自のシンタックスを覚える必要があった。
マークアップのドキュメントとサンプルはgithubにあり。
apiaryio/api-blueprint
後述のSuperAgentでリクエストした際にParse Errorになって、何かと思えば Response のキーの後ろにカンマ , が入っていた。TSlintではカンマを強制するルールを有効にしていて、癖で入れてしまっていた。apiaryのコンソールやcurlからはエラーにならなくてハマった。
SuperAgentを使ってApiaryのAPIを叩いた
Apiaryとても便利。
ログインAPIの応答に基づいてシーンの変更を行った
コンポーネントの構造として App の下に各シーンを並列に設置しているんだけど、
シーンの切り替えはAppが責任を持つべきなので、Appに現在のシーンをステートとして持たせた。
Reactの子コンポーネントから親コンポーネントを呼び出して、シーンを切り替えする必要があるが、その実装に迷った。
- Reactドキュメント通り、親から子へpropsで渡して呼ぶ
- AppにstaticなAppインスタンスの変数を作り、そのインスタンス経由で呼ぶ
- JSのEventを使ってPubsubぽく実装する
どれもpros/consがあるが、2番目の方法を選択。
3番目の方法と同じく、どこからでもコール可能であることと、3番よりもコードのトレーサビリティに優れているため。
どこから呼ぶ関数か、によって、1番と2番の方法を切り替えると良いのではないかと推測・・・。この辺は実装を続けていく中で見えてくると思う。