【Javascript】リンク(URL)を開く方法（location.hrefとwindow.open()）

今回の記事は、

• 特定の動作の後に違うURLへ遷移させたい
• Javascriptを使って新規タブでリンクを開きたい
• Javascriptを使って新規ウィンドウでリンクを開きたい

というお悩みをお持ちの方に向けた記事になっています。

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

Javascriptでリンクを開く方法

「Javascriptでリンクを開く」と一口に言っても、その方法は3つ存在しています。

• 1. location.hrefを使って同一タブで開く
• 2. window.open()を使って新規タブで開く
• 3. window.open()を使って新規ウィンドウで開く

それぞれ順を追って解説していきます。

Javascriptでリンクを開く方法その１ location.href

まずは「location.href」を使用した方法をご紹介します。

windowオブジェクトにはlocationというプロパティが存在しており、このlocationにアクセスすることで、「現在のURL」や「ホスト情報」、「クエリ情報」などを取得することができます。

実装コード

const url = window.location.href

console.log(url)

出力結果

=> https://hataworakuni.net/how-to-open-url-in-javascript

このように、locationプロパティの中のhrefプロパティにアクセスすることで現在のページのURLを取得することができます。

このhrefプロパティを書き換えることで、別のリンクを開くことができるのです。

実装コード

<p>以下のボタンを押すとこのブログのTOPページへ遷移します</p>

<button onClick="changeLocation()">遷移する</button>

<script>
function changeLocation() {
  window.location.href = https://hataworakuni.net/
}
</script>

動作確認用

以下のボタンを押すとこのブログのTOPページへ遷移します
遷移する  

Javascriptでリンクを開く方法その２ window.open()（※新規タブ）

続いては、window.open()メソッドを使って、新規タブでリンクを開く方法をご紹介します。

こちらも非常に簡単で、引数にURLを指定するだけで新規タブでリンクを開くことができます。

実装コード

<p>以下のボタンを押すと新規タブでこのブログが開きます</p>

<button onClick="openNewTab()">新規タブで開く</button>

<script>
function openNewTab() {
  window.open(https://hataworakuni.net/)
}
</script>

動作確認用

以下のボタンを押すと新規タブでこのブログが開きます
新規タブで開く  

Javascriptでリンクを開く方法その３ window.open()（※新規ウィンドウ）

最後は、window.open()メソッドを使って、新規ウィンドウでリンクを開く方法をご紹介します。

先ほどは引数にURLのみを指定しましたが、実はwindow.open()メソッドは第3引数まで指定することができ、それらを設定することで新規ウィンドウでリンクを開くことができるようになります。

実装コード

<p>以下のボタンを押すと新規ウィンドウでこのブログが開きます</p>

<button onClick="openNewWindow()">新規ウィンドウで開く</button>

<script>
function openNewWindow() {
  window.open(https://hataworakuni.net/, null, 'top=100, left=500, width=1000, height=800')
}
</script>

動作確認用

以下のボタンを押すと新規ウィンドウでこのブログが開きます
新規ウィンドウで開く  

このように、第2引数と第3引数を指定することで、指定したURLを新規ウィンドウで開くことができます。

この第2引数には「新規ウィンドウ名」を指定するのですが、新たに開いたウィンドウで何か処理を行うということは少ないと思いますので、基本的にはnullで問題ないです。

第3引数には、新規ウィンドウの位置やサイズを指定します。

実装例で見た以外にも様々なオプションが用意されていますので、色々と試してみてくださいね。

ただし、menubar以下のオプションについては、対応ブラウザが限られているため、出来る限り「位置」と「サイズ」の設定のみ利用するようにしましょう。

おすすめ記事

【Javascript】window.closeでウィンドウを閉じる方法【コピペで動きます】

みなさんこんにちは！ 今回の記事は、 悩みを抱えた人 ・JavaScriptでウィンドウを閉じるにはどうしたらいいの？・window.close()メソッドを使ってもウィンドウが閉じられない... というお悩みを[…]

最後に

さて、ここまでJavascriptを使ってリンク(URL)を開く方法について解説してきましたがいかがでしたか？

こうして体系的に整理してみると、それほど難しい内容ではないことがお分かりいただけたかと思います。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ