JavaScriptでlocationオブジェクトを使う方法【初心者向け】
プログラミング初心者向けに、JavaScriptで【locationオブジェクト】を使う方法を解説した記事です。本記事では、locationオブジェクトをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,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.関数名
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講座）を開催しています。プログラミングの初心者でも受講可能です。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
