target="_new"だと一回しか別タブで開かない問題(target="_blank"を使おう)

f:id:ryoutaku_jo:20190803002900p:plain

【結論】

・HTMLのリンクに対して、target="_new"を設定した場合、リンクを別タブで開いてくれる

・但し開いた別タブ内で、再度target="_new"を設定しているリンクは別タブで開かない

・何度も別タブで開く様にするには、target="_blank"を設定する

【目次】

【本題】

target="_new"だと一回しか別タブで開かない

HTMLにはtarget属性というリンクの表示先を指定するプロパティが存在します。

これを指定することで、リンクを別タブで開くことが可能になります。

以下が、target属性を指定した場合のサンプルコードです。

<a target="_new" href="/posts/new">記事を投稿</a>

しかし、このコードだと、別タブでリンクを開いた後、更に同じリンクを開くと、それは別タブでは開かなくなります。

f:id:ryoutaku_jo:20190803172952g:plain

今回は、この現象の原因と対策についてまとめます。

解決策:target="_blank"を使う

先に解決方法から説明します。それはtarget="_blank"を使うことです。

<a `target="_blank"` href="/posts/new">記事を投稿</a>

f:id:ryoutaku_jo:20190803173355g:plain

こうすることで、リンクを踏むと毎回別タブが開く様になります。

原因:target属性で任意の名前を設定した場合、同じタブを更新してしまう

そもそも、HTMLのtarget属性は、表示先のブラウジング・コンテキスト(ウィンドウやタブ)を指定するものです。

target="_new"と設定した場合、まずnewという名前のブラウジング・コンテキストを探し、無ければ新しくnewという名前のブラウジング・コンテキストを作成します。

これにより、1回目は新しいタブが生成されます。

しかし、2回目以降は、既にnewという名前のブラウジング・コンテキストが存在するので、そのページを更新するだけとなり、別タブを開きません。

ちなみに、名前は任意で設定できるので、new以外でも(例えばhogeなど)でも同様の現象が発生します。

対して、target="_blank"と設定した場合、毎回名前の無いブラウジング・コンテキストを新たに作成します。

その為、何回やっても新しいタブが生成されたのです。

なお、表示先のブラウジング・コンテキストをタブにするのか?ウィンドウにするのか?といった部分は、ブラウザに依存します。

今回試したGoogleChromeであれば、デフォルトでタブで開きますが、他ではそうならない可能性があるので注意が必要です。

参考情報

HTML - target="_new"について|teratail

HTML5 & CSS3 リファレンス - target属性 (コンテンツを表示する対象)

target=”_blank” の正しい使い方講座 | アイオイクスのSEO・CV改善・Webサイト集客情報ブログ|SEO Japan

target 属性 | HTML5 タグリファレンス | W3 Watch Reference

《今日の学習進捗(3年以内に10000時間に向けて)》

コールバックの設定漏れでバグが発生した。

本来であれば事前のテストで防げた内容だが、私が全体のテストケースを作成する際、文字数のバリデーションが設定されている事を失念していた為、エラー系のテストケースが作成されていなかった。 自身が実装していない機能のテストケース作成時は、バリデーションの設定を良く把握し、それらに対するエラー系のテストを設ける必要性を改めて実感した。

それと、文字数制限については、今回の様に暫定で設定している箇所もあるが、何らかの要求で設定した箇所も存在するので、変えて良いのか判断に迷う場面が散見される。 コメントアウトで意図を説明したり、定数に格納して定数名でわかる様にするなど、工夫が必要かもしれない。

また、現状、レビューを行う際、どの様に動作を検証するのか?を定めていない為、チェックの精度が属人的になっていたり、稼働が逼迫してきた際にチェックの精度が落ちるといった課題がある。

今回の様なコールバックの設定漏れは、非常に典型的なミスで他の機能を実装する際にも、共通する問題だと考えている。 なので、「各バリデーションに対するエラー系のテストを実行する」など、汎用的なテストケースを作成し、それをチェックリストにしてレビューを行う運用が出来れば、誰がどの様な状況でどの機能をレビューを行っても、一定の品質は担保できると考えている。

学習開始からの期間 :238日
今日までの合計時間:2285h
一日あたりの平均学習時間:9.7h
今日までに到達すべき目標時間:2174h
目標との解離:111h
「10,000時間」まで、

残り・・・「7715時間!」