hrefとlocation.assignの違いを徹底解説｜クリックしたくなる使い分けガイド

---

hrefとlocation.assignの違いを理解する基本

初めてウェブページを作るとき、よく混乱するのが href と location.assign の違いです。
この二つはどちらも「別ページへ移動する」という同じ目的を持っていますが、使われ方や影響が大きく異なります。
href は HTML の属性で、リンクをクリックしたときにだけ発生します。つまり、ユーザーの操作を前提にしている点が大きな特徴です。リンク先のURLをあらかじめ決めておき、クリックされたときにだけ遷移します。ここで大切なのは、遷移のタイミングを作るのは「ページを表示している人」だという点です。

一方で location.assign は JavaScript の機能です。ページが表示されている状態で、プログラム的に別の URL へ遷移させたいときに使います。実行すると現在のページの履歴に新しいエントリが追加され、Back ボタンで前のページへ戻ることが可能です。この「履歴に新規エントリを追加する」挙動は、リンク とは違う強みを持っています。たとえば、ユーザーの操作を待たずに自動で遷移させる通知機能や、条件に応じて動的に遷移先を決めたい場合に適しています。

ここまでを整理すると、href は「リンクを作るための HTML 属性」、location.assign は「スクリプトでページを動的に変える方法」という理解が基本になります。
ただし、使い分けを間違えると、ユーザー体験が低下したり、ブラウザの挙動が思い通りにならないことがあります。実務では、ユーザーの操作を待つリンクか、プログラムで遷移を制御する必要があるか を基準に判断します。

実例と使い分けのポイント

実際のコード例で見てみましょう。最初の例は HTML 側のリンクです。
移動する という形で書くと、クリック時に指定先へ遷移します。これが基本の使い方です。

次の例は JavaScript での遷移です。
location.assign('https://example.com') は、リンクをクリックする代わりに、スクリプトから直接遷移を指示します。現在のページは履歴に残り、Back で戻ることができます。逆に履歴を残したくない場合は location.replace('https://example.com') を使います。これだと現在の履歴エントリを置き換え、Back で戻れなくなります。

able>項目挙動用途hrefHTML 属性としてリンクを作る。クリック時に遷移ユーザーの操作を前提にした移動location.assignJavaScript から新しい URL へ遷移。現在の履歴エントリを追加動的遷移や自動遷移の実装location.replace現在の履歴エントリを置換して遷移履歴を残したくない場合の遷移ble>

このように、使い分けのポイントを押さえると、ユーザー体験を崩さずに機能を実装できます。特に「戻るボタンの挙動」や「遷移のトリガーがユーザー操作か自動か」という観点は、最初に決めておくと後の保守が楽になります。ウェブ開発の基本スキルとして、これらの差を理解しておくことは非常に大切です。

ピックアップ解説

location.assign というキーワードを深掘りすると、ただの“遷移”以上の意味が見えてきます。僕らが日常的に使うのは、クリックで移動する href ですが、状況によっては自動で移動させたい場面もあります。そんなときに location.assign は強力な道具です。例えば、ログイン後に自動的にダッシュボードへ飛ばす、あるいは条件に応じてページを切り替えるといった使い方。履歴に新しいエントリを作る性質のおかげで、Back ボタンで前の状態に戻せる体験を保つことができます。ただし、ユーザーがどこへ行くのかを知る機会を奪ってしまうリスクもあるので、UX を考えつつ使うのが大事です。

---