JavaScriptでlocation.replaceメソッドでURLを置換する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでlocation.replaceメソッドでURLを置換する方法について現役エンジニアが解説しています。location.replaceメソッドとは指定したURLにページを遷移させるメソッドです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでlocation.replaceメソッドでURLを置換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事を見てみましょう。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでlocation.replaceメソッドを使ってを現在のURLを置換する方法について詳しく説明していくね！
お願いします！
目次
location.replaceメソッドとは
location.replaceメソッドとは、指定したURLへページを遷移させることのできるメソッドです。
このメソッドを利用するとJavaScriptによって任意のURLへ画面遷移させることが可能です。
また、location.replaceメソッドによってページを遷移した場合は履歴が残らないためブラウザの戻るボタンで前のページへ戻ることができません。
location.replaceメソッドの使い方
location.replaceメソッドは以下のように移動先URLを指定して使うものです。
location.replace(移動先URL)
現在のURLを置換する方法
現在のURLを置換し、ページ遷移させるには以下のように移動先URLを引数に指定しましょう。
location.replace("./page1.html");
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
実際に書いてみよう
location.replaceメソッドを使用し、ページ遷移を行うコードを実際に記述します。
今回は、任意のURLを入力しボタンを押下した際に入力されたURLへページ遷移するコードを書いてみましょう。
HTML
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<input id="url" />
<button id="page">ページ遷移</button>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script>
$('#page').on('click', function() {
var url = $('#url').val();
location.replace(url);
});
</script>
</body>
</html>
コードを解説していきます。
画面には文字入力欄とページ遷移ボタンを配置していましょう。
ページ遷移ボタンが押されると、文字入力欄に入力された値をlocation.replaceメソッドの引数に渡し、ページ遷移を行います。
まとめ
今回のlocation.replaceメソッドを使って現在のURLを置き換える方法を含め、JavaScriptを使ったページ遷移やURLの置き換えは様々な場面で使う機会が出てくるため、是非覚えておきましょう。
執筆してくれたメンター
| 黒木一志（くろきかずし）
TechAcademyジュニアのゲームアプリコースを担当しています黒木です。 現在は会社員としてシステムエンジニアをしております。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。 最近はスケボーにハマってます。 みなさんにプログラミングの楽しさをお伝え出来たらと思っております。 何卒宜しくお願い致します。 |
JavaScriptでlocation.replaceメソッドでURLを置換する方法がよく分かったので良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
