レスポンスを改善する！
Silicon Valley Super Ware
2020年7月21日
レスポンスを改善する！
前回までで一通りの機能の実装の方針を解説してきましたが如何ですか？ 実際に制作された方はどれくらいいらっしゃるですしょうか？実際に制作された方は使ってみてどのような印象をお持ちですか？
メッセージを入力するフォームで「宛先リスト」と「登録送信者のリスト」を 使っていますが、リストの数が増えると取得に時間がかかると思いませんか？
これから何日かに分けて、この改善策を考えて行きます。どこで「リスト」を取得するか？
これまでに解説してきた方針では、メッセージのフォームを読み込む際に SendGridからバックエンドを介してデータを取得しています。実際に運用しているサービスではないので、テスト用にせいぜい10名程度の 登録者で実験をしていて「ちょっと遅いな！」と思う感じです。
実際にサービスを使う場合を考えると、フォームを立ち上げるために 読み込むのは少し無駄ですよね？
そこで、読み込む場所を検討してみる事にします。続けてメッセージを送る事を考えると、フォームを立ち上げる度に情報を取っていては 毎回読み込みの時間の間待たなければいけなくなります。
そう考えると、読み込む場所は検討の余地があります。
一番簡単でユーザーが遅いと感じるケースを減らすには、「サービスの起動時」に 読み込む方法が待ち時間を最小にする方法です。
いずれにしても、読み込みに必要な時間は余り変わりません。 「回数」を減らす事で、複数のメッセージを送る場合の待ち時間を減らすというのが 一つの方法です。サービスの立ち上げ時に多少時間がかかるのは比較的受け入れられやすい というか、ある程度やむをえないと考えてくれる人が多いと考えられるからです。
読み込んだデータはVUEXで管理しているので、読み込む場所はフォームのViewである必要は ありません。まずは、読み込み場所を変えて待ち時間を減らす試みをしようという事です。
では、サービスの起動時に読み込むにはどうしたらいいでしょうか？
アプリケーションのトップビュー「App.vue」で読み込む。
Vue.jsをCLIで使う場合、標準のプロジェクトのテンプレートでは、 App.vueというファイルがトップレベルのViewになります。 まずは、このモジュールの起動時に読み込みます。 Reactなどを使う場合は、標準のトップレベルのViewは「App.js」になります。Vue.jsの場合は、スクリプトのセクションで、「created」の部分が、ページが読み込まれた時に 実行される部分になりますので、ここから「store」の「actions」の、宛先リストや 登録送信者のリストを取得する「method」を呼び出して、「storeのstate」を更新します。
これで、必要なリスト情報は、storeに格納されたので、2回目以降は読み込む必要はありません。
これだけでも、「感覚的」には速くなったように感じるはずです。
ちょっとした工夫ですが、利用者の感覚は違うものです。 Webサービスで重要なのは「良い、使用体験を提供する」というのはそのサービスの成功に大きく影響します。
完全なサービスを目指す場合
ブログではメッセージの送信に集中して解説していますが、完全なサービスを提供するには この他にも機能を提供する事が重要です。「リストの作成、削除、更新」は完全なサービスを作るには必要な機能になります。
この場合、リストの情報を操作しているので、その情報の更新をどうするかが一つの課題になります。 次回はこの辺を含めて解説する予定です。
シリコンバレースーパーウエアでは、バックエンドを含めた本格的なWebサービスを短期間で 作れるようになる講座を提供しています。 単純に、Webサービスを作るだけではなく、どのように作って、どのようにビジネスにつなげて 行くかを提供します。また、フリーランスの方だけではなく、就職を考えている方にも 「実践力」を養うことで「即戦力」のエンジニアとしてのスキルを身に着ける事ができます！
興味のある方は今すぐお問合せください！
またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。
コメント
コメントを投稿