Twitter Facebook github

おとといやったこと

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番の方法を切り替えると良いのではないかと推測・・・。この辺は実装を続けていく中で見えてくると思う。

コメントを残す

メールアドレスが公開されることはありません。