TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでページ遷移する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptでページ遷移する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでページ遷移する方法について現役エンジニアが解説しています。ページ遷移するには、現在のページを別のページに遷移する方法や別画面を起動し、そちらでページ遷移する方法があります。location.hrefやopenメソッドを使用します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptでページ遷移する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

JavaScriptでページ遷移することで、JavaScriptの処理に応じたページ遷移が可能になります。

実務でも、JavaScriptでページ遷移することで、クリックされた場合などに操作に応じたページ遷移を行うため、ぜひ学習してみてください。

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

目次

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

JavaScriptでページ遷移する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

JavaScriptでページ遷移する方法

JavaScriptでページを遷移する方法です。

利用シーンとして2つの方法を紹介します。

  1. 自身のページを別のページへ遷移する方法
  2. 別画面を起動し、別画面でページ遷移する方法

 

1.自身のページを別のページへ遷移する方法

自身のページを別のページへ遷移する指定の仕方は、次のようにlocation.hrefに対してURLを代入します。

location.href = "URL"

利用するのは、”location.href”を利用します。

このプロパティは、現在のページのパス情報を含んでいます。

値を変更すれば、ページ遷移ができます。

 

2.別画面を起動し、別画面でページ遷移する方法

別画面を起動し、別画面でページ遷移するには、”open”メソッドを利用して新しい画面を開くと同時にページ遷移を行います。

open( "URL","_blank") ;

“open”メソッドは新しい画面を開くメソッドです。

第1引数に遷移したいURL(パス)を指定します。

第2引数には、何も指定しなくても良いのですが、新しい画面を開く場合は”_blank”を指定します。

 

実際に書いてみよう

ここでは、実際にJavaScriptで遷移する方法を書いてみましょう。

 

サンプルコード

// 1.自身のページを別のページへ遷移する方法
location.href = "http://techacademy.jp/";

// 2.別画面を起動し、そちらでページ遷移する方法
open( "http://techacademy.jp/", "_blank") ;

解説

location.href = “https://www.google.com”;では、この行が読み込まれたときに、開いているページがテックアカデミーのページに遷移します。

open( “https://www.google.com”, “_blank”) ;では、この行が読み込まれたときに、新しいページが開きテックアカデミーのページに遷移します。

 

[PR] コーディングで副業する方法とは

まとめ

今回は、JavaScriptのコードを利用したページ遷移処理を解説しました。

location.hrefを利用すると、同じ画面でページ遷移が可能になります。

openメソッドの第2引数に”_blank”を指定することで、新しいウィンドウが開き、指定ページへ遷移します

HTMLでJavaScriptを読み込む（呼び出す）方法についても参考にしてみてください。

 

大石ゆかり

内容が分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

記事を検索

関連するキーワード

関連する記事

JavaScriptでの非同期のwhileループの書き方を現役エンジニアが解説【初心者向け】

JavaScriptでの非同期のwhileループの書き方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
JavaScript

JavaScriptで非同期処理を実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptで非同期処理を実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptのbreak文の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのbreak文の使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 brea...
JavaScript

JavaScriptのindexOfで配列要素の存在をチェックする方法を現役エンジニアが解説【初心者向け】

JavaScriptのindexOfで配列要素の存在をチェックする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...
JavaScript

JavaScriptで時間の比較を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptで時間の比較を行う方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向け...
JavaScript

JavaScriptのappendChildメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのappendChildメソッドの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また...
JavaScript

あわせてよく読まれている記事

JavaScriptでページ遷移する方法を現役エンジニアが解説【初心者向け】

JavaScriptでページ遷移する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでページ遷移する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ページ遷移とは ブラウザで現在表示しているページから別のページへと移動することを**ページ遷移**と呼びます。 例えばTechAcademyのページ(https://techacademy.jp/)から、TechAcademyのTwitterアカウントページ(https://twitter.com/techacademy)に移動することもページ遷移です。 JavaScriptでページ遷移する方法 JavaScriptでページ遷移するにはlocation.hrefプロパティを使用します。 ChromeでDeveloper toolsを開いてConsoleタブでlocation.hrefを打ち込んだ結果がこちらです。 現在見ているページのURLである「https://techacademy.jp/」が返ってきます。 location.hrefに移動したいページのURLを入力することで、ページ遷移することができます。 location.href = "移動したいページの URL";   [PR] コーディングで副業する方法とはjQueryでページ遷移する方法 jQueryでページ遷移する場合でもlocationオブジェクトのhrefプロパティを使います。 タイプ数も増えるので location.href = urlで直接設定する方が良いと思いますが、jQueryでページ遷移する場合はattrメソッドを使って以下のように書きます $(location).attr("href", "移動したいページの URL");   実際に書いてみよう ChromeのDeveloper Toolsを開いて確認していきましょう。 この記事ページで試すと、別ページに移動してしまうため新しくタブかウィンドウを開いてそこで試すのが良いでしょう。 Developer Toolsの開き方はWindowsだと[F12] キー、Macだと[Command] + [Shift] + [I]になります。開いたら「Console」タブを選択します。 デフォルト設定だとページ遷移でコンソールの内容もクリアされてしまうため、実行結果を残したい場合には右上の歯車アイコンから「Preserve log」にチェックを入れましょう。 まずはGoogleのトップページに移動してみましょう。コンソールに以下の内容を打ち込んでみてください。 location.href = "https://google.co.jp"   ページ遷移が確認できたら、次はjQueryのページに移動してみましょう。 location.href = "https://jquery.com/"   最後にjQueryを使ったページ遷移を試してみましょう。TechAcademy ページに移動してみます。   $(location).attr("href", "https://techacademy.jp/")   各ページに遷移できることが確認できたのではないでしょうか。なお、当然ではありますがjQueryを使ったページ遷移は、jQueryを読み込んでいないと使用できませんのでご注意ください。 筆者プロフィール メンター稲員さん フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。 おうち大好きマンです。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptでlocation.replaceメソッドでURLを置換する方法を現役エンジニアが解説【初心者向け】

JavaScriptでlocation.replaceメソッドでURLを置換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事を見てみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでlocation.replaceメソッドを使ってを現在のURLを置換する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 location.replaceメソッドとは location.replaceメソッドの使い方 現在のURLを置換する方法 実際に書いてみよう まとめ   location.replaceメソッドとは location.replaceメソッドとは、指定したURLへページを遷移させることのできるメソッドです。 このメソッドを利用するとJavaScriptによって任意のURLへ画面遷移させることが可能です。 また、location.replaceメソッドによってページを遷移した場合は履歴が残らないためブラウザの戻るボタンで前のページへ戻ることができません。   [PR] コーディングで副業する方法とはlocation.replaceメソッドの使い方 location.replaceメソッドは以下のように移動先URLを指定して使うものです。 location.replace(移動先URL)   現在のURLを置換する方法 現在のURLを置換し、ページ遷移させるには以下のように移動先URLを引数に指定しましょう。 location.replace("./page1.html");   実際に書いてみよう 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
JavaScript

HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け】

HTMLでhref属性の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 href属性の使い方について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLでhref属性の使い方について サイト作成では必ず登場する、aタグとそれに紐づくhref属性の使い方について解説してみます。 aタグとは。リンク＝次のページ・コンテンツへつながるドアのようなもの。と理解しておくと良いでしょう。ドアの先には行き先が必ずあるものです。行き先がhref属性と覚えておきましょう。 これらはセットです。hrefの中が空白であると構文エラーになり、表示動作も不安定になります。注意しておきましょう。 <a href="https://techacademy.jp/">テックアカデミー</a> これを和訳すると、「テックアカデミー」と書かれた箇所をクリックすると、実際のテックアカデミーのサイトに遷移する。となります。   hrefのよくある「行き先」5種 リンクの行き先は、内部と外部のどちらも設定することができます。主に以下の5つになるでしょう。 サイト内の別のページへ遷移する 同じページ内の違う位置へ遷移する（ページ内リンク） 外部サイトへ遷移する サイト内のファイルに直接遷移する（例えばPDFなど） サイト内のファイルに直接遷移、そしてダウンロードする（例えばzipファイルなど） 以下がそれぞれのリンクの書き方です。　※４、5番目は実際のリンクではありません。 <a href="https://techacademy.jp/webdesign-wordpress-set">テックアカデミー　※講座のページへ遷移する</a> <a href="https://techacademy.jp/#training-top">テックアカデミー　※トップページの「トレーニング」部分へ遷移する</a> <a href="https://www.kiramex.com/">テックアカデミー　※運営会社のキラメックス株式会社へ遷移する</a> <a href="https://techacademy.jp/download/design.pdf">pdfファイルを表示させる。　※サンプルなので表示しません</a> <a href="pdf/design.pdf">pdfファイルをダウンロードさせる。　※サンプルなので動作しません</a>   [PR] コーディングで副業する方法とはhrefの指定方法 指定をするには、合わせてパスの構造を理解しておきましょう。 絶対パス 絶対パスは呼び出したいファイルが同じディレクトリ内になく、外部で公開されている場合などに使います。世界中の誰が見ても参照できる位置を示します。 東京都港区南青山1-2-3建物名・号室〜といったような住所と同じような、ものです。 <a href="https://techacademy.jp/">テックアカデミー</a> 相対パス 基本となるパスの書き方です。「パスを書くそのファイルから見た、呼び出すファイルの位置」になります。 <a href="index.html">テックアカデミー</a> ルートパス サイトのルートから（今回の例であれば「demo」フォルダがルート）見たパスになります。最初につける/がルートを意味します。サイトルートから見た位置関係になるのですべて/からはじめます。WordPressなどや、.htaccessで指定している場合のみ利用できます。 <a href="/webdesign/training/">テックアカデミー</a>   hrefの指定方法その２ 同じページ内での位置指定をする事もできます。これは、html構文内で、#（id）を記述している場合に指定できます。 <a href="https://techacademy.jp/#training-top">テックアカデミー　※トップページの「トレーニング」部分へ遷移する</a>   hrefと、そのターゲット属性 リンクの行き先は、同じページタブで開くこともできますし、別のウィンドウにて遷移させる。という方法があります。 それが、「target属性」です。4種類ありますが、_blankが頻度が高く、それ以外は近年はあまり使用されていません。 _self／通常パターン。現在のウィンドウで開く指定。 _blank／別のウィンドウで開く指定。 _top／フレームセットは解除、単一のページのみが表示される指定。 _parent／リンク先のページは親フレームに表示される指定。   実際に書いてみよう <a href="https://techacademy.jp/webdesign-wordpress-set">テックアカデミーのウェブデザイン・WordPress講座</a> <a href="https://techacademy.jp/#training-top">テックアカデミー「トレーニング」へ</a> <a href="https://www.kiramex.com/" target="_blank" rel="noopener">キラメックス株式会社（外部サイト）</a> <a href="https://techacademy.jp/download/design.pdf">pdfファイル(XXXkb)。　※サンプルです</a> <a href="pdf/design.pdf">pdfファイルのダウンロードはこちら　※サンプルです</a> 今回は、リンク指定をするaタグを解説してみました。使い方を覚え、ページを作成してみましょう！！   監修してくれたメンター ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

Androidアプリでインテントを使って画面を遷移させる方法【初心者向け】

Androidアプリの開発では、「インテント（Intent）」という機能を使って画面を遷移させることが可能です。 インテントは、Androidの特徴的な機能の一つで、アプリケーション内の機能や他のアプリケーションへの橋渡しの役割をしてくれます。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！アプリの画面遷移ってどうやって実装するんですか？ 田島悠介 複数のアクティビティを作っておいてインテントっていう機能を使うと遷移できるんだ。 大石ゆかり インテント、ですか・・・？どうやるんですか〜？   2つの画面を用意する 画面遷移をさせるための準備をまずは行います。 今回は同じアプリ内に2つのアクティビティを用意しました。   1つ目の画面であるMainActivityには、テキストボックスとサブ画面に遷移するためのボタンを用意しています。   2つ目の画面であるSubActivityには、1つ目の画面のテキストボックスで入力された文字列を表示するためのテキストビューを用意してあります。   新しくアクティビティを追加した場合は、下記のようにマニフェストファイルにアクティビティの宣言を追加してください。 <activity android:name=”.SubActivity”></activity>   メイン画面を用意する 続いてメインの画面を用意します。 xmlファイルで、サブアクティビティを呼び出すボタンにandroid:onclicl属性を追加し、イベントが発生したときにonClickメゾットを呼び出すようにしてあります。 また、onClickイベントを作成します。   下記のように記述しましょう。 public void onClick(View v) { //インテントの作成 Intent intent = new Intent(this, SubActivity.class); //データをセット EditText editText = (EditText)this.findViewById(R.id.editText); intent.putExtra("sendText",editText.getText().toString()); //遷移先の画面を起動 startActivity(intent); }   19行目でインテントの作成を行い、遷移先のクラス名を指定しています。 また、22行目のputExtraで遷移先に渡すデータを名前と値のセットで登録し、26行目で遷移先の画面を起動します。   [PR] コーディングで副業する方法とはサブ画面を用意する 次にサブ画面を用意します。 ここでは、下記のように記述しました。 Intent intent = this.getIntent(); String text = intent.getStringExtra("sendText"); TextView textView = (TextView)this.findViewById(R.id.textViewSub); textView.setText(text);   遷移された画面では、getIntentメゾットでインテントを使って渡されたデータを受け取ることができます。16行目のgetStringExtraでデータを取得します。 今回は文字列なので、getStringExtraメゾットを使っていますが、受け取るデータによって、getBooleanExtra,getIntExtraというように置き換える必要があります。     動作確認をする 最後に、エミュレーターを使って画面が遷移できるかどうか動作確認をしてみましょう。   まず、アプリを起動するとメイン画面が表示されます。テキストボックスに好きな文字を入力して、ボタンをクリックします。   ここでサブ画面が起動し、メイン画面で入力した文字が表示されれば成功です。    アプリによっては画面遷移を多く使うこともあると思いますので、覚えておきましょう。 エミュレータだけでなく、Androidを実機でテストすることも試してみましょう。   大石ゆかり 画面遷移できました！！！ 田島悠介 アプリはよほど簡単なアプリでない限り1画面で終わることはないから、インテントは覚えておいたほうが良いね♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

Web制作の仕事をするうえでの心構え【初心者必見】

Web制作の仕事をするうえでの心構えについて解説します。 最近、在宅でできる副業としてWeb制作の仕事を目指す人が増えています。 ここでは一例として、実際にホームページを制作して顧客へ納品する前にどのようなポイントを確認するのかを説明します。 また、納品後のサイト運用の際にも活用できる内容ですのでしっかりと確認して、サイトの品質向上に役立てましょう。 目次JavaScriptでページ遷移する方法実際に書いてみようまとめJavaScriptを学習中の方へ   1 制作前と制作中の注意点 1.1 ヒアリングの際に注意すべき事 在宅でできる副業としてWeb制作の仕事をする場合、Webディレクションからデザイン、コーディングまでの一連の作業を一人で行なうことがあり、効率よく進めることが納期を達成する鍵になります。 顧客からヒアリングを行ない、仕様をまとめワイヤーフレーム、デザインカンプを作成し、コーディングを行なって、公開となります。その際、制作の根底にある、以下のようなサイト制作の目的を顧客と共有します。 なんのためにサイトを作るのか サイトを作ったことで何を達成したいのか その目的にあったデザイン・システムの提案と設計、導線設計、SNSやWeb広告などの戦略やユーザビリティも加味した仕様書・ワイヤーフレーム・デザインカンプの作成を進めていきましょう。 顧客ともワンチームということで認識を合わせ、同業他社のページや実際にあるサイトのページを見ながら打ち合わせを行なうなど、イメージを共有しながら進めるとズレがなくスムーズに進行します。 あとになって、大幅な仕様追加などの要求が出ないように小まめに情報や目的を共有するためにコミュニケーションを取りましょう。 1.2 制作中に注意すべき事 いざ、仕様が決まりワイヤーフレーム、デザインカンプ作成からコーディングを行なう際の注意点として、顧客とFIXした仕様書のとおりにデザインを作成し、コーディングを行なっているかが大前提となります。 以下のようなエラーがあるままで納品してしまうと信用を損なってしまい、次の仕事につながらなくなります。 デザインが崩れている プログラムが動作しない フォントの種類がデザインカンプと異なる 異なるブラウザやデバイスによる見え方の調整を行なっていない etc… また、無事納品は終えたとしても、目標達成のためのデータ解析や分析タグの設定などの対策を怠ると、せっかく受注して仕事をしても今回きりで後々のお付き合いにはつながらない可能性があります。 ページ管理やリニューアル等でも末長いお付き合いを続けるためには、目的を達成するためのツールとしてお金をいただいてホームページを作成するという意識を忘れず、ユーザや顧客に自分を置き換えて、他者目線も意識した、快適に目的を達することができるサイト作成をしましょう。   2 制作後、納品前の注意点 2.1 デザイン関連のチェック項目 2.1.1 表記チェック デザインカンプと仕様書の条件を確認し、顧客の指定の表記方法に基づいているか、スペルミスや表記ゆれも同時にチェックします。 ページ内のテキストチェックツール　difff(デュフフ) https://difff.jp/ 2.1.2 デザインチェック デザインカンプと比較し、レイアウト配置や色、余白、文字（フォントの種類、サイズ・太さ・文字間隔・ジャンプ率）などデザインを忠実に再現しているか確認します。 2.1.3 ダミーチェック 提案時にダミーで入れたテキストや画像をそのままにしていないか、画像・動画の表示有無やサイズ、容量が適切かも最終チェックします。 2.1.4 faviconの設定 Webページに設置するシンボルマークのことです。設定は必須ではありませんが、タブ内にページの象徴するアイコン（例：会社ロゴ等）があることにより、ユーザはサイトを認識しやすくなりリピートに繋げることができる重要なアイコンです。 WebブラウザではURLの左横またはタブに表示され、お気に入りに登録するとブックマークアイコンとして表示されます。 ファビコン favicon.icoを作ろう！ https://ao-system.net/favicon/ 設定した後は、しっかり表示されるかどうかを必ず確認しましょう。 2.1.5 著作物、使用写真等流用掲載についての確認 一般的に、写真や音源、動画などには著作権が設定されており、他者の著作物をWebページで掲載する場合は、権利元が設定している利用規約を確認する必要があります。著作物によっては、権利元に承諾を得てから掲載することが求められます。 著作物をダウンロードするときだけでなく、Webページの公開前にも再度、利用規約を確認しましょう。 2.2 コーディング関連のチェック項目 2.2.1 ブラウザチェック レスポンシブサイトの場合は、Google Chromeのデベロッパーツールに付属のエミュレーターでのチェックの他、WindowsやMacといったPCでFirefox・Safari・Edgeでのブラウザチェック、スマートフォン（iPhone/Android）の実機を使ったチェックを行ないます。 各種ブラウザでチェックを行ない、レイアウトの崩れがないか確認しましょう。 2.2.2 HTML/CSS記述チェック 制作したホームページのHTMLやCSSが要求仕様に即した正しい記述をしているかを以下のチェックツールで確認し、エラーがあれば修正しましょう。 The W3C Markup Validation Service https://validator.w3.org/ Another HTML-lint gateway http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 2.2.3 jQuery・JavaScript・PHP等で作成したコンテンツ jQuery・JavaScript・PHPなどのコンテンツについて、以下のような内容の動作チェックを行ないます。 正常に動作するかどうか 読み込み速度は遅くないか 画像容量は重くないか 各種ブラウザに対応しているか etc… また、商用利用や改変は可能か、使用可能であっても著作権の表示などの条件はないか、などを公開前にあらためて確認しておきましょう。 海外のサイトからのオープンソースを流用した場合は、翻訳機能を使用するなどして、しっかりと確認してから使用しましょう。 PageSpeed Insights https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect&hl=ja たくさんあるオープンソースライセンスのそれぞれの特徴のまとめ https://qiita.com/tukiyo3/items/58b8b3f51e9dc8e96886 2.2.4 リンクチェック リンク切れしていないかをチェックします。パンくずリストのリンクもチェックします。ヘッダーやフッターなどの共通部分についても、リンク切れがないか確認しましょう。 リンク切れチェックツール　Dead-link-checker.com http://dead-link-checker.com/ja/ 2.2.5 404ページ サーバに接続できたものの、該当するページが移動または削除されたことでページがない場合に表示させるページを「404ページ」といいます。 サイトの品質維持のためにも、あらかじめオリジナルページとして作成しておきます。このページが正しく表示されるか確認しましょう。 2.2.6 301リダイレクト設定 あるページへのアクセスを別のページに転送させることを「301リダイレクト」といいます。 たとえばサイトをリニューアルしてURLが変わった場合は、301リダイレクトの設定に漏れがないか、新旧サイトの各コンテンツ（ページ）の設定が1対1になっているか確認しましょう。 301リダイレクトは、ドメインやサーバに変更がある場合、必須となる設定です。301リダイレクトの設定をすることにより、検索順位が下がるリスクを軽減します。 2.3フォーム関連のチェック 2.3.1 入力された内容のチェックに関する動作確認 フォームの各項目の入力内容に対し、「必須項目なのに入力されていない」「半角英数のみ受けつけるルールなのに全角文字が入力されている」などがあった場合にエラーメッセージを返しているか確認しましょう。 2.3.2 ページ遷移の確認 入力画面→確認画面→完了画面にページが正しく遷移するかどうかを確認しましょう。 2.3.3 自動返信メールの確認 送信完了の画面が表示された際、ユーザのアドレスと管理者のアドレスにそれぞれメールが届いているかを確認します。 サンクスメールの文面やアクセスページなどへのリンクを設けた場合は、リンク切れのチェックも行いましょう。 2.4 タグ関連のチェック（SEO関連設定チェックも含む） Googleの検索エンジンのロボット（クローラー）のページ理解を上げる対策が、ページの管理や整理にもなり、結果としてサイトの検索順位の向上やページの質の向上につながります。そのため、作成後のチェックだけで終わらせず、ページを運用する際にもこれらの作業は日々継続して行なうとよいでしょう。 2.4.1 metaタグの設定チェック Googleの検索エンジンの進化とともに、以下のようなWebページが検索上位に表示される傾向となってきました。 – コンテンツとページ内容をしっかりと作成している – 内容に準じた適切なmetaタグを設定している 各ページに適したタイトル・ディスクリプションが、適正な文字数で、なおかつページに即した内容で設定されているかを確認しましょう。 また、キーワードは重要視されなくなりましたが、ページ内容に準じて設定しているかどうかも、合わせて確認しておきましょう。 META SEO inspector サイト作成後のチェックだけでなく、運用の際のサイトメンテナンスとしてGoogle Chromeのアプリとして設定して使用できる便利なツールです。 https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef WordPressでページを作成した場合は、プラグインを使います。 All in One SEO metaタグ作成の他、後述の「サイトマップXML」の作成もできます。 https://ja.wordpress.org/plugins/all-in-one-seo-pack/ 2.5 OGPの設定 OGP（Open Graph Protocol）は、SNSでシェアされた際に、そのページのタイトルや概要・URL・アイキャッチ画像を表示させるためのhtml要素です。 OGPを設定しておくと、ユーザに対してページの内容を正しく伝えることができます。設定していない場合、SNS側で勝手に説明文や画像を抽出して表示してしまい、サイトオーナーの意図していない内容がSNSに表示されてしまいます。 また、Facebookでは、OGPを設定することにより、分析や解析ツールである「ページインサイト」の機能を利用できます。 以下のサイトで、設定したOGPがSNSでシェアされた際にどのような見え方なのかを確認できます。 OGP確認 https://rakko.tools/tools/9/ 2.6 hタグ（見出し）の設定 h1からh6の見出しタグが適切に設定されているかどうかを確認します。数字が小さいほど重要度は上がります。クローラーがページを理解するための大切な要素です。 hタグの使用には順番のルールがあります。数字が小さい順（重要度の大きい順）に並べます。マトリョーシカ人形と同じイメージで、たとえば、h3より重要度の大きなh2をh3の中に入れるような並べ方は推奨されません。 クローラーにコンテンツの構造を正確に伝えるためには順番を守って使用するようにしましょう。 2.7 alt属性 alt属性には、各画像の説明を入力します。alt属性を設定することで、万が一、画像が表示されていない場合に、画像の説明が表示されるようになります。 入力内容については、SEO対策にもなるように、画像の内容に即した内容を入力します。検索順位向上のためには、画像の内容説明はページ内容をクローラーに認識させる大事な要素ですので、漏れがないように登録しましょう。 2.8 サイトマップXML クローラーにページの構造を理解してもらうために使います。以下のようなツールを使って簡単に作成できます。作成後は、サーバに設定することでクローラーがサイトを認識します。 サイトマップを作成-自動生成ツール sitemap.xml Editor 1,000ページまでのサイトであれば無料で作成できます。 http://www.sitemapxml.jp/ ページの新規追加やリニューアル等でページ構成が変わった際には、サイトマップも合わせて同期しておきましょう。 新ページだけでなく旧ページもアップしておく場合など、内容の重複するページが存在する場合は、「悪質なコピーコンテンツではない」ということや、「重要なページである」ということをクローラーに知らせる必要があります。本記事では説明を省略しますが、「canonical」の設定や、「.htaccess」によるURLの正規化設定も、必要に応じて行なうようにしましょう。 また、サイトのリニューアルの場合は、ページの統合やURLの変更が多々ありますので、古いURLから新しいURLに自動的にページを転送する「リダイレクト」の設定も合わせて行ないましょう。 2.9 Web解析、計測タグ　チェック 2.9.1 解析ツールタグ・コンバージョン計測タグ・リマーケティングタグの設定 顧客とFIXしたサイト仕様書に応じて、GoogleAnalyticsやGoogle Adwords、Yahoo!プロモーション広告、タグマネージャーの設定内容と設置場所を確認します。 申し込み数・資料請求数などをコンバージョンとして設定し、計測する場合は、行動につながる導線設計が適切か正しく設定されていて、データが計測されているかも確認しましょう。   [PR] コーディングで副業する方法とは3.まとめ Web制作の仕事は、Webサイトなどの成果物に対して対価をいただく仕事です。 完成した成果物をチェックしてエラーや不具合がないことが必須となります。上記のチェック事項を参考にして、作業の区切りで確認、修正を経て品質の高いサイトを作成して納品するようにしましょう。 ひとつひとつの正確で丁寧な作業が、信頼を築き、新たな受注につながります。トライ＆エラーを繰り返しながら技術を身につけ、サイト制作を重ねていくことにより成長していきましょう。 Web業界でキャリアを重ねていくには、継続的な技術習得と努力と柔軟な対応力が必要です。習得した技術を活かせる制作業務を楽しみととらえ、日々前進しましょう。   Web制作の仕事を確実にしたいなら Web制作はスキル習得の難易度が低いため、競合となる働き手が多いです。 もちろん、企業で実務経験を積んだハイレベル人材とも案件を取り合うことになります。 そのため、未経験からだとなかなか案件を獲得できないことも。 テックアカデミーのはじめての副業コースでは、Web制作の案件紹介をしているので、確実に仕事を受けられます。 ※フリーランスを目指す方にもおすすめです。 ※コース終了後の審査に合格し、案件に応募された方には1ヶ月以内の案件紹介を確約しています。 その他、案件サポート対象コースはこちら Webデザインコース フロントエンドコース フロントエンド副業コース（審査の合格までサポート） また、このようなお悩みを持ったことはありませんか？ 「スキルは習得したけど、自分の実力でこなせる自信がなく、案件への応募に躊躇してしまった」 このあるあるを解決すべく、現役エンジニア/Webデザイナー講師が案件の進行や、技術的なわからない点のサポートを無料で行います。 お仕事紹介 プロのサポート この2つのサービスがあるので、安心してお仕事に取り組めます。 Web制作に必要なスキルを体系的に学んで、確実にお仕事を手にしませんか？ まずは無料体験からお試しください。
Webデザイン

JavaScriptで戻るボタンのイベントハンドラを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptで戻るボタンのイベントハンドラを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、あわせてご覧ください。 目次JavaScriptでページ遷移する方法実際に書いてみようまとめJavaScriptを学習中の方へ そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで戻るボタンのイベントハンドラを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   はじめに 今回はブラウザの戻るボタンでどんな処理が行われているか説明します。 みなさんもご利用になったことがあると思いますが、気軽に前ページに戻ることができる大変便利な機能です。 では、戻るボタンを押した時に具体的にどのようなことが行われているかはご存知でしょうか？ ページ（URL）を移動する場合、通常はWebサーバにリクエストをして新しいページをレスポンスとして受け取ります。 しかしながら、戻るボタンを押した場合は通常の動きと違い、ブラウザがキャッシュしているページを呼び出し表示します。 そのため、サーバを介さず素早くページを表示をすることができます。   戻るボタンとURL遷移の違い 例えば、トップページからメニューページに遷移して、再度トップページに遷移したとします。 戻るボタンを使わずに遷移する場合は、前述の通り遷移のたびにWebサーバにリクエストを送り、返却されたレスポンス（Webページ）をブラウザ上に表示する動作が都度行われます。 下記の図がすべてリクエストを送って遷移した場合です。 3回Webサーバへの問い合わせを行っていますね。   一方、トップページ→メニューページと遷移した後にブラウザの戻るボタンを押した場合は、ブラウザのキャッシュ情報からWebページを表示できますので、Webサーバへの問い合わせは1回少なくなります。 またキャッシュ情報からページを表示するため、リクエストを送る処理やレスポンスをWebサーバで返却する場合に比べ、高速にページを表示できるというメリットがあります。   一方、戻るボタンはWebサーバへ問い合わせを行わず、一度表示したWebの情報を表示していますので、”古い情報”を表示している場合があります。 例えばですが、ECサイトなどで買い物かごに商品を入れて戻るボタンを押した際に、メニュー上部などの買い物かごの商品数が入っていない場合がありますよね。 ページのリロードなどを行えば解消はしますが、古い情報を参照して遷移すると思わぬ不具合が発生する場合もありますので、申込画面などではブラウザの戻るボタンを利用しないように注意を促しているサイトなどもあります。   [PR] コーディングで副業する方法とは戻るボタンのイベントハンドラを実装する方法 今回は、戻るボタンが押された時のイベントハンドラを実装する方法について説明してきます。 前述の通り、戻るボタンをユーザーが押した場合に、「申込途中の内容が破棄されますがよろしいですか？」といったアラートの表示を出す場合などに利用することがあります。 しかし、JavaScriptで直接戻るボタンが押下されたことを検知するイベントハンドラはありません。 そこで、利用するのがaddEventListener()です。 これは様々なイベントを処理できる関数で、戻るボタンを押下されたことを検知するには’popstate’のイベント種類を指定します。 ‘popstate’は、履歴が更新された時にイベントを検知します。   実際に書いてみよう それでは実際にaddEventListener()を使用して、戻るボタンのイベントハンドラを実装してみましょう。 形式 window.addEventListener( イベントハンドラ, 関数, イベント伝達) イベントハンドラには、先ほど説明した’popstate’ 関数は取りあえず今回は、’function(e)’ イベント伝達は、false※もしくは省略 実装 <html> <head> 　　　　<title>JavaScriptで戻るボタンのイベントハンドラを実装する方法</title> </head> <body> 戻るボタンを押すと、メッセージが表示されます<br> 　　　<script type="text/javascript"> 　　　　　window.addEventListener('popstate', function(e) { 　　　　　　　alert('ブラウザバックを検知しました。'); 　　　　　}); 　　　</script> </body> </html> これで、戻るボタンのイベントハンドラの代替え処理を実装できます。   まとめ 今回は、ブラウザの戻るボタンとリクエストによる遷移との違いと、戻るボタンが押された際にJavaScriptで検知する方法を学びました。 現在はSPA（Single Page Application）と呼ばれるWebサーバへのリクエスト回数やページ遷移の少ないWebアプリなども多くなってきており、ブラウザバッグのイベント処理などを制御する際に利用頻度は多くなってきました。 ぜひ、今回の記事の内容を普段の実装で利用する場合に役立ててくださいね。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   JavaScriptを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでページ遷移する方法を現役エンジニアが解説【初心者向け】