Vue.jsコンポーネントからERBの画面をリロードするにはreloadメソッドを使う

業務でERB（Embedded Ruby）でできている画面の一部分だけをVue.js化しています。

Vue.jsで作ったコンポーネントで特定の操作を実行した際に画面全体をリロードしたかったのですが、やり方が分からなかったので備忘録として残します。

問題

ERBでできている画面のうち、ダイアログだけをVue.jsへ移行する作業に取り組んでいました。

元々の仕様として、ダイアログ内で「登録」ボタンを押すと処理の実行後に画面全体がリロードされる挙動でしたが、Vue.jsに移行後もその仕様を踏襲する方針となりました。

なのでVue.jsのコンポーネントからERBで実装されている画面をリロードする必要があるんですが、「Vue.jsからERBでできている画面全体をどう操作するんだ？」と混乱していました。

解決方法

単純にJavaScriptのreloadメソッドを用いてwindow.location.reload();と記述すれば良いだけでした。

const onSubmit = async () => {
  if (!props.onClickSubmit) return;

  await props.onClickSubmit();
  // 画面全体をリロード
  window.location.reload();
};

JavaScriptに用意されているメソッドを使えばDOMを操作できるので、ERBだろうとVue.jsだろうと問題ないですね。

捕捉：window.location.reload()とは？

reloadメソッドはwindowオブジェクトのlocationプロパティに含まれているメソッドです。

windowオブジェクトはブラウザ側で用意してくれているオブジェクトで、locationプロパティには現在のページのURLに関連する情報や操作が提供されています。

windowオブジェクトやlocationプロパティの内容は開発者ツールから確認できます↓

ちなみにデバッグでよく使うconsole.log()のconsoleもwindowオブジェクトと同じくブラウザが用意してくれるオブジェクトですね。

おわりに

ブラウザの機能やJavaScript自体への理解が相当浅い、ということを再認識できました。

参考文献

• Location – Web API | MDN

技術書が好きなエンジニア向け

あわせて読みたい

【エンジニア向け】効率的な技術書の読み方5選【経験談】 スキルアップに直結させるための効率的な技術書の読み方を知りたくないですか？この記事ではエンジニア向けに効果的なインプットのための技術書の読み方を5つ紹介します。最後まで読めば自分に合う読み方が1つくらい見つかるはずです。ぜひご一読ください。