フロントエンドこんにちは。(普通トラックを使用して荷主の荷物を運送する業界)向けのサービス「ハコベルコネクト」のフロントエンドを担当している丸山です。サービスの開発・運用している中で、フロントエンドのコードが古いまま使用してしまっているユーザーがいて、APIの変更と食い違い困ったことなどないでしょうか。今回は我々がその問題に直面して考えた、強制アップデートする方法をご紹介します。使用して、遷移やリロードを行うことなくタブの移動や絞り込み、案件の受注などの操作をできるようにしています。便利さの一方で、長時間にわたって一覧ページをリロードしないでも使い続けることができるため、JavaScriptのコードが古いまま使っているケースがあります。サーバーサイドの変更のため、エンドポイントやレスポンスの形式を変える必要がある場面もあります。その際に、古いフロントエンドのコードと新しいAPIのレスポンスの組み合わせによりエラーが発生してしまうという課題がありました。いった事態が稀に起きていたので課題ではあったのですが、先日APIを大幅に変更する必要がありその機会に手を入れようということで、クライアントサイドを最新のバージョンにアップデートさせる方法を検討することにしました。実現するための方法としては以下の2つが出てきました。ログインセッションの有効期限を短くして強制ログアウトさせるHTTPヘッダーなどを活用して強制リロード機能を作るセッションの有効期限を変更する方針は、API変更をリリースするタイミングで同時にセッションを無効にし、有効期限を短くするという方法です。頻繁に再ログインが必要となりユーザビリティを損ねてしまうこと、セッションを無効にすることでユーザーが普段と違う挙動を感じてしまい問い合わせの増加することなどが懸念としてありました。HTTPヘッダーを利用する方針であれば、リリースのタイミングに合わせて強制アップデートを有効にすることができます。リロードの必要がないような小さい変更であればversionを変更しないといった柔軟な運用が可能です。リロードせずに使っているユーザーには届かないという課題はありますが、APIの変更前に一定期間を置くことで浸透させることは可能だと考えました。そのバランスからHTTPヘッダーを利用する方針を採用することとしました。この問題を、採用プロセスで技術ディスカッションのトピックに採用したこともありました。採用の中でリアルな悩みに触れてもらい、こちらとしても熱の入るトピックで、採用の場でしたがこちらも刺激を受ける内容となることが多かったです。その際の候補者の皆さまへの感謝もこの場を借りて伝えさせてください。方針は決まったのでフロントエンドとサーバーサイドをそれぞれ実装していきます。今回の要件としては、強制アップデートが必要かがわかればよいなどの理由で見送りました。今回はUNIXタイムスタンプを使い強制アップデートの判定をすることにしました。サーバーサイドサーバーサイドではバージョン番号の設定、アップデートが必要かの判定を行います。バージョン番号を取り出します。使用してheader周りの処理を行います。リクエストを送信する場合。config}そしてレスポンルを受け取った時の処理も実装します。判別して、強制的にリロードを行うようにします。設定すれば準備完了です。axios今回はリロードしないとサービスを使うことができないので自動でリロードされるようにしています。リロードする部分については一度ダイアログを表示するなどした方がユーザーにとって親切かもしれませんね。モバイルアプリのように継続利用はできるけどアップデートしてほしい場合に、強制的なリロードではなく選択できるようにしてもいいかもしれません。結果・まとめこのようにして強制アップデート処理を作成しました。コンテンツを使用するようになったら、APIの変更など破壊的な変更のあるリリースを安心して実行できます。今回はAPIの変更に先行してリリースしましたが、プロダクトのローンチ時に仕込んでおくとさらに良かったですね。ハコベルではユーザー環境で実際に正しくアップデートが行われるかをウォッチするためにSentryでSlackに通知を送るようにしていました。我々の期待通り、APIの変更をリリースした翌日にアップデートが行われていました。SPAなどモダンフロントエンドを使っているとUI/UXを向上させやすい一方で、実際にリリースして改善を続けていく中でユーザーの使っているリソースが古くなるという問題に遭遇しました。フロントエンドにこだわったサービスが増えてきているので、このようなサービスを続けていく中での知見がもっと増えていくといいなと思います。読んでいただきありがとうございました!採用情報のご案内ラクスルではエンジニア・プロダクトマネージャーを募集中!募集内容は以下のリンクをご確認ください。フロントエンドをモノレポ移行した話ラクスル事業部エンタープライズ開発グループの宮田です。Busines...2019-07-22既存プロダクトに最小構成でTypeScriptを導入するこんにちは。地域LT会はじめました。eventハコベルテックブログ注目記事はてなブログをはじめよう!raksuldevさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。