JavaScriptでlocationオブジェクトを使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【locationオブジェクト】を使う方法を解説した記事です。本記事では、locationオブジェクトをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでlocationオブジェクトを使う方法について解説します。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

大石ゆかり

田島メンター!locationオブジェクトというのは何でしょうか?

田島悠介

ブラウザで表示したWebページのアドレス(URL)に関する情報が格納されているんだ。また、指定したアドレスに移動したりもできるんだよ。

大石ゆかり

どのような書き方があるのですか?

田島悠介

例を見ながら説明していくね!

 

locationオブジェクトとは

プログラムを作っていると、Webページのアドレス(URL)に関する情報を取得したり、指定したアドレスに移動したい場面があるのではないでしょうか。そんな時に便利なのが、locationオブジェクトです。

URLとは、Uniform Resource Locator の略で、インターネット上でのページの「住所=アドレス」のことを指します。URLには、情報の種類やサーバ名、ポート番号やファイル名など、プログラミングで使える様々な情報が格納されています。

それらの情報が格納されているのがlocationオブジェクトです。

実際の開発現場では、URLからパラメータを取得したり、指定したアドレスに移動したりする時に使います。

 

locationオブジェクトの書き方

基本的なプログラムは以下のようになります。locationキーワードの後ろに「.」ピリオドを付けて関数名を記載します。

主な関数については次章で紹介します。

location.関数名

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

locationオブジェクトの主な使い方

この記事では、locationオブジェクトの主な使い方について解説します。

まずは、簡単な関数を用意します。

<!DOCTYPE html>
<html lang = "ja">
<head>
  <meta charset = "utf-8">
  <title>JavaScriptの練習</title>
</head>
<body>
  <script>
    // locationオブジェクトを表示
    console.log(location);
    // urlを取得
    var url = location.href;
    console.log(url);

    // プロトコルを取得
    var protocol = location.protocol;
    console.log(protocol);

    // 指定したURLに遷移(確認する場合は以下のコメントを外して下さい)
    // location.href = 'https://techacademy.jp/magazine/?p=14568'
  </script>
</body>
</html>

 

実行すると次のようになります。

指定したURLに遷移した場合は、ログが消えますのでご確認の際はご注意下さい。

では、それぞれの内容を詳しく見ていきましょう。

 

locationオブジェクトのサンプル1

console.log( location ); 

locationオブジェクトをconsole.logで出力します。以下のように様々な情報が格納されていることが分かります。

locationオブジェクトのサンプル2

// urlを取得
var url = location.href;
console.log(url); 

「url」という変数を用意し、location.href関数の戻り値を格納します。

その結果、以下の文字列が出力されます。

https://ホスト名/content/06let.html

locationオブジェクトのサンプル3

// プロトコルを取得
var protocol = location.protocol;
console.log(protocol); 

「protocol」という変数を用意し、location.protocol関数の戻り値を格納します。

その結果、以下の文字列が出力されます。

https:

locationオブジェクトのサンプル4

// 指定したURLに遷移
location.href = 'https://techacademy.jp/magazine/?p=14568'; 

「location.href」に遷移したいページのURLを設定することで、該当するページに遷移できます。

 

今回の記事は以上です。

 

大石ゆかり

locationオブジェクトを使うと、WebページのURLに関する情報が簡単に取得できるんですね。

田島悠介

そうだね。上記の他にもパラメータを取得したり、いろんな使い方ができるんだ。試してみるといいよ。

大石ゆかり

分かりました〜。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。