【Web】「押下すると画面遷移」をどのように実装するか

超寒がりの棚橋の棚橋でも、最近は暑いと明確に感じるようになりました。☀️

Webについての記事で恐縮なのですが、良くある基礎的なところを押さえてみようとまとめてみました。

今回のテーマは「押下すると画面遷移」です。UIの基本中の基本と言ったところでしょうか。

実は細かな部分を含めればいくつか手法がありますので参考になれば幸いです。

■ 1. aタグ

これは説明不要でしょう。

<a href="https://www.google.com">遷移</a>

別タブで開く場合は以下のようなrel属性も追加するのが望ましいようですが、良く忘れられます。

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">遷移</a>

「Ctrl」キー（Macであれば「command」キー）を押しながら押下すると、target="_blank" が無いaタグであっても別タブで開きます。

■ 2. formタグ + inputタグによる遷移

これも遷移です。type="text"などだともちろん遷移しませんので注意が必要です。

<form action="https://www.google.com" method="get">
	<input type="submit" value="遷移">
</form>

method属性はgetやpostとさまざまですが、ここでは割愛します。

■ 3. formタグ + buttonタグによる遷移

2. と同様ですが、type="button"だと遷移しませんので注意が必要です。

<form action="https://www.google.com" method="get">
	<button type="submit">遷移</button>
</form>

■ 3. `onclick属性 + location.hrefによる遷移`

HTMLにはonclick属性というものがあり、これにJSのlocation.hrefが実行されるようにする手法です。

<p onclick="location.href='https://www.google.co'">遷移</p>

よくinputタグやbuttonタグで説明がされますが、pタグでもdivタグでもなんでも動作します。

ただ、実務上はボタンのようなデザインにすると思いますので、書くCSSが増える結果あまり推奨できる手法とは言えません。

さらに、「Ctrl」キー（Macであれば「command」キー）を押しながら押下しても別タブで開きません。

■ 4. onclick属性 + JSの関数による遷移

3. を少し変則的にしたものです。move関数の中に遷移以外の処理も書けるという利点があります。

<script>
function move() {
location.href='https://www.google.com';
}
</script>

<p onclick="move()">遷移</p>

■ 5. JSによる遷移

JS頼りに遷移するような方法です。これも結局は 4. と本質は変わりません。

<p id="hoge">遷移</p>

<script>
function move(){
	location.href='https://www.google.com';
}

const button = document.getElementById('hoge');
button.addEventListener('click', move);
</script>

■ 6. jQueryによる遷移

JSでできるのであれば、jQueryでももちろんできます。

<p id="hoge">遷移</p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#hoge").on("click", function() {
	location.href='https://www.google.com';
});
</script>

■ 7. jQueryから属性を追加して遷移

もはや誰得なのかは分かりませんが、こんな方法もあります。もちろんピュアJSでも可能ですが割愛します。

<p id="hoge">遷移</p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#hoge").attr("onclick", "location.href='https://www.google.com';");
</script>

■ 8. そもそもaタグをjQueryから追加

やや本旨からずれるのですが、こんな方法でも結果ブラウザで見た時は問題なく遷移できますので、間違いでは無いです。

<div id="hoge-parent"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#hoge-parent").html('<a href="https://www.google.com">遷移</a>');
</script>

実務上はまずこんなことはしませんが、動的にaタグが増える時などはこの考え方を下地に、JSから行う場合もあります。

こうして見ると、Webは適当に(?)書いても要件定義上はクリアしてしまうような書き方が多いです。

ある意味これが初学者向きであると言えますが、これを興味深いととるか、体系的でないととるかで、向き不向きは変わっていくのかもしれません。

世の中にはさまざまな技術があります。ぜひ前向きに学んでいきましょう。

[素材]