aタグのtarget属性とは、古くはフレームで区切られたページのどの位置にリンクで開いた先のページを表示するかを指定するために使われていました。しかしHTML5ではframeタグが廃止されてしまったため、もうそういった用途で使われるのを見ることはないかも知れません。
では今はどんな用途に使われているかというと、リンクをクリックしたときに新しいウィンドウ／タブを開くために使われます。target="_blank"またはtarget="_new"と指定すると、リンクをクリックしたときに新しいウィンドウ／タブが開きます。同じリンクをクリックし続けると、target="_blank"の場合は常に新しいウィンドウ／タブが開き続ける動きになり、target="_new"の場合は新しく開いたウィンドウ／タブが再度更新され続ける動きになります。
しかし、リンクをクリックすると勝手に新しいウィンドウ／タブが開くというのも、なかなか強烈な動きですねー。
うーん、では、どういったときにtarget="_blank"を使うのが適切なのでしょうか。そんな内容についてCSS-TRICKSのWhen to use target=”_blank”で触れられていたので、ご紹介します。
target=”_blank”を使う悪い理由／良い理由
悪い理由：「好きだから使ってるんだよ！」
好き嫌いに関わらず、target="_blank"は「リンクを踏んだら違うページに遷移する」という元々の振る舞いを変えてしまうものです。もしユーザーが新しいウィンドウ／タブを開きたいと思っているのであれば、Cmdキーを押しながらクリックしたり、右クリックで開くメニューで新しいウィンドウを開いたりするでしょう。という訳で好き嫌いの理由は良くないです。
悪い理由：「だってページから離れてほしくないんだもん」
元サイトの言い分はよく分からなかったのですが、そんな理由でデフォルトの動作を変えるというのもユーザーフレンドリーではない気がします。
悪い理由：「内部リンクと外部リンクは違うでしょ？」
「そういう規約、あるのでは」と思っている人も多くいるけれども、そんなことはないんだぜと元記事では言っています。
悪い理由：「PDFへのリンクだから」
もしくはWebのリソースではないものへのリンクのときに使ってしまうというケースがあります。リンクを開いた先で、PDFリーダーがブラウザ内で開いたりと、画面が大きく変わってしまうからです。
でも別にそんなことは大きな問題ではなくて、ユーザーが元のページに戻りたければ「戻る」ボタンを押すよね、と元記事では言っています。どうしても画面遷移させたくないのであれば、download属性を使ってファイルをダウンロードさせましょう。
悪い理由：「だってクライアントがそうしろって言うんだもん」
で、出たー！ 何でもお客さまの言う通りにしちゃう奴ー！ プロなんだからちゃんと説明したらどうですか、と元記事では言っております。
悪い理由：「無限スクロールするページにあるリンクなので」
無限スクロールはJSで実現されているので、例えば通常のリンクで他の画面に遷移したあと、「戻る」ボタンで元の位置に戻ろうとすると、ちゃんと元の位置に戻れない（多分一番上に戻ってしまう）のが理由ではないかと言っています。それをどうにかするのが君の仕事でしょと突き放されたようなことが言われていますが、まぁそもそも無限スクロールするようなページはどうなのかと思ったりもする訳です・・・。
良い理由：「ユーザーが今何らかのメディアを再生しているので」
例えばページ内で音楽を再生している場合、通常のリンクをクリックしてしまうと、音楽が中断してしまいますよね。中断させたくてリンクを踏む僕のようなユーザーもいるかも知れませんが、例えば音楽を再生している場合は新しいウィンドウ／タブを開くような動きにして、音楽を再生していない場合は通常のリンクの動作にしてはいかがですかと言っています。
良い理由：「今開いているページでユーザーが作業しているので、リンクを踏んで画面遷移をすると何らかのデータが飛んでしまうんです」
例えば編集画面内のプレビューへのリンクはこのケースに該当すると思います。リンクを踏んだ時に自動保存されるなら良いですが、保存もされていないとしたら嫌すぎますよね・・・。更にlocalStorageに編集中の状態を保存するようにしておくなどの工夫をするのも良いのではないかと元記事では言っています。
あとがき
「PDFへのリンク」の部分なんかは諸説あって、むしろtarget=”_blank”を使った方が良いという意見もあるようです。「PDFドキュメントを開く場合にはブラウザがプラグインとPDFを読み込むのに時間がかかることが多い」というのが大きな理由のようです。
また、プレビューへのリンクの場合は、target="_blank"よりtarget="_new"を使う方が良いと思います。プレビューを見るのに、毎回新しく別のウィンドウ／タブが開くなんて、ちょっと嫌な感じしますよねー。
それでは、良きtarget="_blank"ライフを。
