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

JavaScriptでリダイレクトを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでリダイレクトを実装する方法について現役エンジニアが解説しています。リダイレクトは、あるページから別のページに転送することを指します。location.hrefにURLを渡すことで、そのURLに転送することができます。

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

JavaScriptでリダイレクトを実装する方法について解説します。

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

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

 

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

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでリダイレクトを実装する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

リダイレクトとは

リダイレクトとは、あるページから別のページに転送することを指します。別名、URLリダイレクトともいいます。

Webサイトのドメイン変更や引っ越しの場合に、旧サイトから新サイトへ転送する場合やメンテナンス画面やエラー画面への転送、モバイルサイトとPCサイト間の転送などで使用されます。
 

JavaScriptでリダイレクトを実装する方法

JavaScriptでリダイレクトを実装するには、location.hrefを使用します。

使い方は以下の通りです。
 

location.href = "url"

 
location.hrefにURLを渡すことで、そのURLに転送できます。
 

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

実際に書いてみよう

それでは実際に書いてみましょう。
GoogleのURLを入力して、Googleのホームページにリダイレクトしてみましょう。
以下のコードを書いて実行します。
 

location.href="https://www.google.com/";

 
実行すると”https://www.google.com/”のページに移動します。

 

筆者プロフィール

この記事を監修してくれた方

メンター金成さん。
2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptで再帰処理を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptで再帰処理を行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 Jav...
JavaScript

JavaScriptによるboolean型のif判定について現役エンジニアが解説【初心者向け】

JavaScriptによるboolean型のif判定について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptで空白文字列を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptで空白文字列を削除する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJ...
JavaScript

JavaScriptのNull合体演算子について現役エンジニアが解説【初心者向け】

JavaScriptのNull合体演算子について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそ...
JavaScript

JavaScriptとASP.NETについて現役エンジニアが解説【初心者向け】

JavaScriptとASP.NETについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
JavaScript

JavaScriptのおすすめGridライブラリ5選を現役エンジニアが紹介【初心者向け】

JavaScriptのおすすめGridライブラリ5選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
JavaScript

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

Redirectionの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグインの使い方を紹介する記事です。 サイトが移転した時や別のサイトに移動させたい時に便利なプラグイン、Redirectionの使い方について解説していきます。 なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター、あるお客様がWordPressのサイトを移転したんですけど、移転先にリダイレクトさせたいんです。どうしたらいいでしょうか？ 田島悠介 「Redirection」っていうプラグインでなんとかなりそうだね。教えてあげるね。 大石ゆかり はい、お願いします〜♪   Redirectionとは WordPressのプラグイン「Redirection」を使用すると、指定したURLから他のURLへと転送を行うことができます。サイトが移転した時などに設定しておくと便利なプラグインです。   新規リダイレクトを追加する このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。 インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。   有効化したら、左メニューの「ツール」→「リディレクション」を選択します。 ※Redirectionは日本語対応プラグインです。   新しいリダイレクトを追加する際は下の「新しい転送ルールを追加」から行います。 ソースURL：転送元のURLを入力します。 ターゲットURL：転送先のURLを入力します。 入力が完了したら下の「新しい転送ルールを追加」をクリックします。 今回は「wp_test」という名前のサイトにリダイレクト用の記事を作成し、そこから転送先の「wp_test_2」というサイトに転送処理を行うように設定してみました。 (パーマリンクの設定は「基本」にしています) 該当の記事をクリックします。 転送先のページが自動で表示されました。   [PR] コーディングで副業する方法とはリダイレクトの編集・削除を行う 一度作成したリダイレクトは、「ツール」→「リディレクション」の管理画面で一覧表示されます。 項目にマウスポインタを合わせると編集・削除・無効化のメニューが表示されるので、そこから各種の処理を行うことができます。 編集：項目のURLを再編集することができます。 削除：設定したリダイレクトを削除します。 無効化：リダイレクトを一時的に無効にします。再びメニューから「有効化」をクリックすることで元に戻ります。 ※リダイレクトを削除しても設定が戻らず、該当のページに転送されることがあります。 その場合はブラウザのキャッシュをクリアすることで元の状態に戻すことができます。 また、ステータスコードは初期では301に設定されていますが、管理画面の「編集」からこのアイコンをクリックすることで302か307に変更することができます。(サイトの引っ越しなど恒久的に転送させる場合は301のままで構いません)     以上でRedirectionの使い方の解説は終わりです。 設定も簡単ですので、今必要なくても覚えておくと便利でしょう。 ぜひ、WordPressの使い方を覚えましょう！   大石ゆかり 転送元と転送先を指定するだけでリダイレクトを作ってくれるんですね。 田島悠介 うん、そうだね。サイトの移転以外にも更新記事を書いた場合だとか、活用できる場面がありそうだね。 大石ゆかり そうですね！！！   [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
WordPress

今さら聞けない！ターミナルの使い方【初心者向け】

Mac OSを使っていると、システム環境設定などでは設定することができない、高度な設定をしたいと思う場合があるかと思います。 そのようなカスタマイズをおこなうためには、Mac OSのターミナルという機能を使う必要があります。また、ターミナルはプログラミングをする際にも利用します。 そこで今回は、初心者向けにターミナルの利用方法を紹介します。   なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。 なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 目次 本記事は、下記の流れで説明します。主要コマンドも紹介しているので、記事を読んだらすぐに使ってみてください。 ターミナルとは ターミナルの使い方 ターミナルの主要コマンド   ターミナルとは ターミナルとは、コマンドと呼ばれる命令文を用いてMacの操作や設定をおこなうためのツールです。 通常は利用する必要はありませんが、高度な設定をする場合や、Macでプログラミングをおこなう場合には利用する必要があります。 Windowsにおけるコマンドプロンプトと呼ばれているものとほぼ同じものです。 ターミナル上では、マウスやトラックパッドを用いて操作するのではなく、キーボードで「コマンド」と呼ばれる命令を入力することによって操作します。 この記事では、ターミナルの基本的な使い方や、よく利用されるコマンドについてまとめています。     [PR] コーディングで副業する方法とはターミナルの使い方 ターミナルは、「アプリケーションフォルダ」内の「ユーティリティフォルダ」にインストールされています。 起動すると、次のような真っ白な画面が表示されると思います。 しばらくすると時刻などが表示されますので、それまで待ちましょう。 このとき表示されている文字の意味は、次の通りです。 ログイン日時：ターミナルを起動した日時、1行目に表示 コンピュータ名：コンピュータの名前、2行目前半に表示 ディレクトリ：現在のディレクトリの位置、2行目後半に表示 ※この画像では個人情報が含まれるために上記の情報は消していますが、実際は画像中赤文字の上にこれらの情報が表示されます   ディレクトリとは、「Finder」で言うところの「フォルダ」と同じものです。 例えば、先ほどの画像で示したターミナルで開いているディレクトリは、個人情報なため、ここでは白で隠してありますが、Macのユーザ名と同じ名前のディレクトリです。 Finderですと、次のようにフォルダに該当します。 （左側のメニューから、自分のユーザ名と同じフォルダを開いています） このように、ターミナルは特定のディレクトリについて操作をおこなうツールになります。 そのため、特定のファイルに対して操作をおこないたい場合、そのファイルが存在するディレクトリに移動してから操作する必要があります。 （詳しくは「コマンドの使い方」にて記載します）   ターミナルの設定は、通常のアプリケーションと同じく、上部バーの「ターミナル」内にある「環境設定」からおこなえます。   背景や文字の色を変えたい場合は、この環境設定中にある「プロファイル」から変更することができます。 ここでは、あらかじめ用意されているいくつかの配色パターンから、背景色や文字の色を選ぶこともできます。 例えば、この画像中にある「Homebrew」を選択すると、ターミナルは次のように変わります。 また、これらの配色は自分の好きな色にカスタマイズすることもできます。 カスタマイズする場合は、同じくプロファイルの左下にある「+」ボタンから、新しいプロファイルを作成し、右側の「テキスト」や「ウィンドウ」のタブを切り替えながら、色などを選択します。     ターミナルの主要コマンド 基本的な設定がわかったら、ターミナルのコマンドを覚えていきましょう。 今回は、ターミナルでよく利用するコマンドを11個紹介していきます。全てのコマンドは、入力した後にEnterを押すことによって実行されます。   cd ディレクトリ間を移動する場合に使用します。 「ターミナルの使い方」でも述べたとおり、ターミナルでは1つのディレクトリしか開くことができません。 そのため、他のディレクトリにあるファイルを操作したい場合は、そのディレクトリまで移動する必要があります。 （パスを指定する方法もありますが、ここでは割愛します） このディレクトリの移動に用いるコマンドが「cd」コマンドです。 「cd ディレクトリ名」と入力して実行します。 例えば、現在のディレクトリ中にある「Documents」ディレクトリへ移動したい場合は、「cd Documents」と入力します。 このとき、もし入力したディレクトリが存在しない場合は、「No such file or directory」というエラーが出ます。 また、現在のディレクトリよりも1つ上のディレクトリへ移動したい際は、「cd ../」と入力します。 これらのディレクトリ名は、連続で入力することもできます。 例えば、Documentsディレクトリ内にあるtextディレクトリを開きたい場合は、「cd Documents/text」と入力すると移動できます。   ls 現在のディレクトリ内に存在する、ディレクトリやファイルを表示するコマンドです。 このコマンドは「ls」のみで実行します。 例えば、先ほど画像で示したユーザ名のディレクトリですと、この図のように表示されます。（ユーザー名は白で隠してあります） Finderのフォルダと比較すると、全く同じ名前のディレクトリを表示していることが分かるかと思います。 先ほど紹介したcdコマンドでディレクトリを移動する際は、このlsコマンドで事前に移動したいディレクトリが存在するか確認すると便利です。   mkdir ディレクトリを作成するためのコマンドです。 「mkdir 作成したいディレクトリ名」で実行します。 例えば「mkdir AAA」と入力し実行すると、AAAというディレクトリが作成されます。   rm ファイルを削除するコマンドです。 「rm ファイル名」で実行します。 このコマンドで削除したファイルはゴミ箱には入らず、また警告等も出ませんので、十分注意して実行するようにしてください。 誤って重要なファイルを削除してしまった場合、コンピュータが起動しなくなる可能性もあります。   mv ファイルやディレクトリの名前を変更する場合や、移動する場合に利用します。 用途が2つあるので紛らわしいのですが、どちらの場合も「mv AAA BBB」のように入力して実行します。 AAAとBBBは、ファイルまたはディレクトリの名前です。 このコマンドを実行した場合の動作は、このAAAとBBBによって、次のように異なります。 BBBというディレクトリが存在する場合は、AAAをBBBの中へ移動 BBBというファイルが存在する場合で、かつAAAがファイルの名前である場合は、BBBへ上書き保存 BBBが存在しない場合には、AAAをBBBという名前に変更   cp ファイルをコピーするコマンドです。 「cp AAA BBB」と入力すると、AAAというファイルがBBBという名前でコピーされます。 このとき、BBBというファイルが既に存在している場合は、BBBへ上書き保存します。 また、BBBがディレクトリの名前である場合は、BBBディレクトリの中にAAAがコピーされます。   pwd 今開いているディレクトリまでのパスを表示します。 ターミナルで今どのディレクトリを表示しているのか分からなくなったら、このコマンドを実行しましょう。 このコマンドもlsと同様に、「pwd」のみで実行します。   man コマンドのマニュアルを開きます。 マニュアルは英語ですが、各コマンドのオプションなどが表示されるので、1度は試してみましょう。 「man マニュアルを開きたいコマンド名」で実行します。 例えば、「man man」と入力した場合は、次のようにmanコマンドの利用方法が表示されます。 このマニュアルを読んでいると、「OPTIONS」という項目があることが分かるかと思います。 この記事では説明を割愛しましたが、多くのコマンドにはオプションと呼ばれる機能を付加して実行することができます。 例えばmvやcpコマンドで「-n」オプションを付けて実行すると、上書き保存を防止することなどができます。 特にプログラミングなどをターミナルでおこなう場合にはオプションもかなり利用することになると思いますので、こちらのmanコマンドでオプションの使い方などを一通り目を通してみましょう。 このマニュアルは、終了する場合に「q」を入力します。 qを入力して終了しないと、次のコマンドを受け付けませんので注意しましょう。   find ファイルやディレクトリの検索に利用します。 「find 検索する場所 -name 検索するファイル名」で実行します。 「検索する場所」が分からない場合には、先ほどのpwdコマンドやlsコマンドを用いて、大体の目星を付けましょう。   clear ターミナル画面をクリアし、表示された文字を全て消去します。 実行した内容が取り消される訳ではありません。 同じコマンドを何度も実行する場合などは、どのコマンドをいつ実行したのかが分かりにくくなってしまいます。 そのような場合はこのコマンドを実行し、一旦ターミナルを見やすくしましょう。 このコマンドは「clear」のみで実行できます。   exit ログアウトする場合に用います。 通常のターミナル利用では、ログアウトせずにターミナルを終了しても問題ありません。 しかし、サーバ等に接続している場合は必ずこのコマンドでログアウトしてからターミナルを終了しましょう。 このコマンドは「exit」のみで実行できます。 exitではなく、「logout」コマンドでもログアウトすることができます。       さいごに 今回の記事は以上です。 ターミナルではかなり高度な設定や操作をおこなうことができます。しかし、コマンドを一度実行してしまうと、その操作を取り消すことはできません。 rmコマンドの欄にも記載しましたが、コンピュータ中の重要なファイルを消去してしまったり、破損させてしまったりした場合は、起動しなくなる場合も起こりえます。 インターネット上では、ターミナルで実行できる様々なコマンドが紹介されていますが、どのような動作をするのか分からないコマンドは、十分に調べてから実行するようにしましょう。 [お知らせ]TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。各自にパーソナルメンターがつきます。 また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
プログラミング

これだけは覚えておきたい！基本的なUNIXコマンド20【初心者向け】

今回は、プログラミング初心者でも覚えておきたいUNIXコマンドを紹介します。 プログラミングを学んでWeb開発する際に、WebサーバのOSとしてLinuxやUNIX系を利用することがあります。 そのため、Web開発をするためにUNIXコマンドの知識が必要です。 Amazonが運営するAWSといったサービスやCloud9といったサービスでも、UbuntuやLinuxが利用されています。 そのため、特定のOSで利用可能なコマンドです。 また、Macのターミナルを扱う時も使用しますので、覚えておくと便利です。 WindowsでUNIXコマンドを利用できるので、コマンド操作に慣れることは実務においても技術的なレベルが上がります。 そこでこの記事では、プログラミング初心者でも覚えておきたいUNIXコマンドを初心者向けに紹介します。 目次リダイレクトとはJavaScriptでリダイレクトを実装する方法実際に書いてみよう筆者プロフィール    UNIXコマンドとは UNIXコマンドとは、LinuxやUNIX系OSのWeb開発で利用するコマンドです。 ウィンドウやボタン、アイコンといった視覚的なオブジェクトをマウスで操作するインターフェイスをGUI（Graphical User Interface）と呼びます。 一方、文字入力によってコンピュータに命令を与えて操作するインターフェイスをCLI（Command Line Interface）、あるいはCUI（Character User Interface）と呼びます。 「コマンド」とはコンピュータに指示する命令であり、CLI上で用いるプログラム／アプリケーションのことを指します。 UNIXに由来するコマンドを「UNIXコマンド」と呼称します。 現在ではGUIがコンピュータを操作する手法として主流ですが、ある操作の結果を別の操作に用いたり、自動的に複数の操作を行ったりする場合など、CLIの方が適している作業が多く存在します。   Windows10でUNIXコマンドを利用する方法 2021年3月現在の最新バージョンのWindows10では、WSL（Windows Subsystem for Linux）を有効化することでUNIXコマンドを利用できます。 コントロールパネル プログラム プログラムと機能 Windowsの機能の有効化または無効化 上記の順に選択をして、「Linux用 Windows サブシステム」をチェックしてください。 コントロールパネルを開いてプログラムを選択する画面 プログラムを選択してWindowsの機能の有効化または無効化を選択する画面 Linux用Windowsサブシステムを選択してOKを押してください。   Microsoft StoreでUbuntuをインストール Microsoft StoreをWindowsで起動します。 Ubuntuを検索して出てきた表示の入手をクリックしてUbuntuをインストールします。   インストールにはしばらく時間が必要です。   インストールが完了したら起動ボタンを押してください。   Windows上で初期設定を行うための起動が始まります。 初回のみ起動時間が必要です。   ユーザー名とパスワードを設定すると完了です。 パスワードは設定用と入力用に同じものを2回入力する必要があります。   設定が完了したら、UNIXコマンドの入力が可能になります。     [PR] コーディングで副業する方法とは覚えておきたいUNIXコマンド20 ここからは主要なUNIXコマンド20選を紹介します。 いずれもMacのターミナルで入力した例を画像で表示しているので、ぜひ自分のPCでも試してみてください。   ディレクトリとファイルの確認、移動に使うコマンド   pwd 現在の作業ディレクトリの絶対パスを表示します。 なお絶対パスとは、最上位階層から目的のファイルやフォルダまでの道筋を省略なく記述する方式のことです。 一方の相対パスは、起点となる現在位置から目的のファイルやフォルダまでの道筋を記述する方式です。 入力例： pwd 現在どのディレクトリにいるのかを確認するときに使います。 cd 作業ディレクトリを変更するコマンドです（ディレクトリを移動します）。 入力例： cd (ディレクトリ名) cdだけで実行するとホームディレクトリへ移動します。 「cd -」とすると、直前にいたディレクトリへ移動します。「cd ..」とすると親ディレクトリへ移動します。 ls ディレクトリの内容をリスト表示するコマンドです。 入力例： ls (ディレクトリ名) lsだけで実行すると、現在のディレクトリに含まれるファイル名をリスト表示します。 ディレクトリを指定すると、そのディレクトリに含まれるファイル名をリスト表示します。 また、「ls -l」でパーミッションや所有者などの関連情報を付加して表示、「ls -a」で隠しファイル・隠しフォルダを含めて表示することが可能です。 ディレクトリとファイルの操作で使うコマンド cp ファイルをコピーするコマンドです。 入力例： cp (ファイルA) (ファイルB) この場合ファイルAをファイルBにコピーします。 また「-f」オプションをつけた場合、コピー先に同名のファイルがあった場合上書きされます。 「-i」オプションをつけた場合は上書きするかどうかをファイルごとに確認します。 なおディレクトリを内容ごと（再帰的に）コピーするときは、「-R」オプションをつけます。 mv ファイルの移動およびリネームを行うコマンドです。 入力例： mv (ファイルA) (ディレクトリB) mv (ファイルA) (ファイルB) 1つめの例では、ファイルAをディレクトリBに移動します。 2つめの例では、ファイルAからファイルBに名前を変えることができます。   cpコマンドと同じように、「-f」オプションをつけた場合、移動先に同名のファイルがあった場合は上書きされます。 「-i」オプションをつけた場合は、上書きするかどうかを確認します。 rm ファイルを削除するコマンドです。 入力例： rm (ファイル名) ディレクトリを削除する場合は「-d」オプションを指定しますが、削除できるのは空のディレクトリだけです。 ディレクトリに内容物がある場合は「-r」オプションを指定することで、中に入っているファイルを含めてディレクトリを削除します。   ゴミ箱へ入れるのではなく、即座に削除されることに注意してください。 mkdir ディレクトリを作成するコマンドです。 入力例： mkdir (ディレクトリ名) 通常、指定したパスの途中のディレクトリが存在しない場合はエラーになります。 「-p」オプションをつけると、途中のディレクトリが存在しない場合、それらを含めてディレクトリを作成することが可能です。 touch ファイルの変更日を更新するコマンドです。 入力例： touch (ファイル名) 「touch file1.txt」とすると、「file1.txt」の変更日時が更新されます。 存在しないファイル名を指定した場合、その名前で空のファイルが作成されます。 ln リンクを作成するコマンドです。 入力例： ln -s (ファイル名) (リンク名) 「-s」オプションを付けることで、シンボリックリンクを作成します。 シンボリックリンクは、ディレクトリやファイルのショートカットとして用いられます。 chmod ファイルのパーミッション（所有権）を変更します。 入力例： chmod 750 (ファイル名) この入力例は、ファイル所有者にすべての権限を与え、グループに読み込みと実行権、その他のユーザーは権限なしにするコマンドです。 パーミッションは「mode」引数に8進数字あるいは記号で指定します。 上記の入力例は8進数字の指定です。   8進数字指定する場合は、3桁の値で指定します。 1桁目が「ファイル所有者」のアクセス権、2桁目が「グループ」のアクセス権、3桁目が「その他のユーザー」のアクセス権です。 各桁の値は、読み込み権を表す4と、書き込み権を表す2と、実行権を表す1の和を指定します。 例えば、読み込み権と実行権のみを与える場合には、4と1の和である「5」を指定します。 それぞれの権限の組み合わせと値は、下記の表をご覧ください。 アクセス権 値 0 権限なし 1 実行権 2 書き込み権 3 書き込み権と実行権 4 読み込み権 5 読み込み権と実行権 6 読み込み権と書き込み権 7 すべての権限   また、記号で指定する場合は、以下の記号を組み合わせてパーミッションを指定します。 chmod a+w (ファイル名) この入力例の場合、すべてのユーザーに書き込み権限を付加します。 記号 誰に a すべてのユーザ u 所有者 g グループ o 他のユーザ   記号 付加・除去 + 付加 – 除去 = 全クリア   記号 権限の種類 r 読み w 書き x 実行 chown ファイル・ディレクトリの所有者とグループを変更します。 入力例： chown (ユーザー名) (ファイル名) この例では、指定したファイルの所有者を指定したユーザーに変更します。 なお、ファイルの所有者とグループはファイルのパーミッション範囲に関係してきます（あるユーザーのみアクセス可能など）。 所有者の変更はスーパーユーザーのみ可能です。 chgrp ファイルのグループを変更します。 入力例： chgrp (グループ名) (ファイル名) この例では、指定したファイルの所属グループを変更します。 chownと同じく、グループはファイルのパーミッション範囲に関係してきます（あるグループに属しているユーザーのみアクセス可能など）。   ファイル内容の表示、閲覧するときに使うコマンド cat ファイルの内容を結合し、表示するコマンドです。 入力例： cat (ファイルA) (ファイルB) 複数ファイルの内容を結合して表示します。 ファイルを1つだけ指定して、単にその内容を表示する場合にも使用可能です。 less ファイルの内容をスクロール可能な状態で表示するコマンドです。 入力例： less (ファイル名) ファイル内容を一画面しか見ることができない（スクロールできない）catコマンドとは異なり、スクロール可能な状態で表示するコマンドです。 qを入力すると表示が終了します。   ファイルの検索で使うコマンド find ファイルを検索するコマンドです。 入力例： find (ディレクトリ名) find (ディレクトリ名) -name (文字列) 1つめの入力例では、ディレクトリ内にあるファイルを表示します。 -nameを付けることで、ディレクトリ内にある文字列を指定して検索できます。 また「find . -ctime -1h」とすると、現在のディレクトリ以下で1時間以内に変更のあったファイルを検索します。 grep 指定パターンの文字列を検索するコマンドです。 入力例： grep (検索文字列) (ファイル名) 例えばgrep ba
プログラミング

PHPのheader関数でリダイレクト処理を行う方法【初心者向け】

PHPプログラムのheader関数で別のページに移動させる方法やリダイレクトの使い方について解説します。 会員機能などがあるサービスでは、よくあるページにリダイレクトされるのを目にすることがあると思いますが、実際の開発でも役立つ知識なので、ぜひ覚えておきましょう。 目次 PHPのheader関数で別ページにリダイレクトする 別ページへ移動するリダイレクトの使い方 リダイレクト時に発生するエラーの対処方法 おわりに   PHPのheader関数で別ページにリダイレクトする header関数自体は、HTTPヘッダを送信する、という機能です。 簡単に言うと、ブラウザでアクセスしてくれた人に、情報を送ることができます。 echoやprintなどの標準出力関数も似てますね。   echo("おはよう"); 上記とした場合、おはようが出力されると思いますが、PHPはサーバサイドで実行されるプログラミング言語です。 ブラウザでアクセスした先のコンピュータ上で実行されて、ブラウザがあるコンピュータ側に、おはようと送信されます。 header関数だけが、HTTPヘッダを送信するわけではなく、PHPプログラミングがあれば、加工されてからHTTPヘッダとして送信されます。   サンプルコード <?php 　 header('Location: https://techacademy.jp/'); 解説 1行目の<?php では、このプログラムがPHPプログラムであることを意味します。 2行目のheader('Location: https://techacademy.jp/'); では、header関数を利用して、techacademy.jpという位置をLocationと指定して、移動する処理を実装しています。 この際、httpから始まる絶対パスでも、.から始まる相対パスでもOKです。 今回は、アクセスした瞬間に「https://techacademy.jp」へ移動します。     大石ゆかり 田島メンター！リダイレクトでは、外部のサイトでも自分のサイトの別のページでも移動させることができるんですか？ 田島悠介 そうだよ。別のサイトやページに移動させることができるんだ。 大石ゆかり どういう時に使うんでしょうか？アクセスした途端に、別のURLに飛ばされたら嫌ですね。 田島悠介 PHPによるリダイレクトなので、PHPに関わりがあるところが良いかな。実際の使用例を見てみよう！   [PR] コーディングで副業する方法とは別ページへ移動するリダイレクトの使い方 ページにアクセスすると、別のページへ移動させる方法なんてHTMLでもJavaScriptでもあるのに、PHPのheader関数は必要なの？と思うかもしれません。 どんな時に使用されるのか見ていきましょう。 ログイン時 アフィリエイトIDなどを隠したい場合   1. ログイン時 ログインが必要なページにアクセスした場合、未ログインならば、IDとパスワードの入力を促されるページにリダイレクトするなどで使用します。 PHPの中で、条件にしたがって使用するリダイレクトです。   サンプルコード <?php $user=''; if(!$user){   header('Location: https://techacademy.jp/'); }   解説 1行目の<?phpでは、このプログラムがPHPプログラムであることを意味します。 2行目の$user='';では今回サンプルプログラムを動作させるために、ユーザーがログインしていない状態を想定して、変数$userを空っぽの状態にしています。 3行目のif(!$user){では、変数$userに値が入っていなければという条件式を実装しています。 変数の前に!を記載しているのは否定演算子です。 つまり、変数$userを否定することで、変数$userの値がない場合という条件を作成しています。 PHPのif文に関しては次の記事を参考にしてみてください。 PHPで条件分岐（if文）を使う方法【初心者向け】 | TechAcademyマガジン 4行目のheader('Location: https://techacademy.jp/');では、header関数を利用して、ユーザーがログインしていない場合にこのページが表示された瞬間、Locationで指定したhttps://techacademy.jp/に移動する処理を実装しています。   2. アフィリエイトIDなどを隠したい場合 アフィリエイトIDなどを隠したい場合に使用します。 専用のリダイレクトページを用意して、header関数でリダイレクトさせることによって、アフィリエイトIDを表示させずに移動してもらうことができます。 例えば、自分のURL上に、r.phpを用意しておきます。 専用のリダイレクトプログラムです。   また、別のページにある広告のリンク先を自分のURL/r.php?id=1などとしておきます。 広告のリンクの飛び先を、リダイレクトページに指定しておいて、リダイレクトページにて実際に飛ばしたいページへ移動させます。   サンプルコード <?php $redirect[1] = "http://affiliate-test.com?my_affiliate_id=33"; if( isset($_GET['id']) ){
PHP

Laravelでredirect（リダイレクト）させる方法【初心者向け】

Laravelでredirect（リダイレクト）させる方法について解説します。 どのようなシーンで使われる処理なのかも含めて使い方を理解しておきましょう。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、Laravelに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Laravelでredirectさせる方法について詳しく説明していくね！ 大石ゆかり お願いします！   リダイレクトとは 簡単に言うとURL転送です。リクエストされたURLとは別のURLに直ちに再リクエストさせます。 Webアプリケーションでは次のようなシーンで使われます。 ユーザー登録に成功したら、homeページにリダイレクト 未認証ユーザーが要認証ページにアクセスしようとしたら、ログインページにリダイレクト 認証に成功したら、アクセスしようとしていたページまたはhomeページにリダイレクト 認証済ユーザーがログインページにアクセスしようとしたら、homeページにリダイレクト フォーム処理でバリデーションエラーが発生したら、フォームのページにリダイレクト リソースの作成/更新/削除が成功したら、リソースの一覧ページにリダイレクト 多くの場合、ユーザーにはただのページ遷移に見えますが、普通のページ表示と異なる点は、一旦レスポンスが返るためブラウザからのリクエストが2回になることです。 リダイレクトの動作原理は次のようなものです。 Webサーバーがリダイレクトという特別なレスポンスを返す ブラウザはそのレスポンスを受信すると直ちに移動先のURLにリクエストする リダイレクトのレスポンスには以下のような情報が含まれ、ブラウザはその情報をもとにリダイレクトと判断します。 – 300番台のHTTPステータスコード（302, 303, …） – Locationヘッダで示される移動先のURL   Laravelのリダイレクトの書き方 アクションから、RedirectResponseのインスタンスを生成して返します。 RedirectResponseのインスタンスを生成するには様々な方法があります。 // redirect関数にパスを指定する方法 return redirect($to = null, $status = 302, $headers = [], $secure = null); // redirect関数で取得したリダイレクタインスタンスにパスを指定する方法 return redirect()->to($path, $status = 302, $headers = [], $secure = null); // redirect関数で取得したリダイレクタインスタンスにルートを指定する方法 return redirect()->route($route, $parameters = [], $status = 302, $headers = []); // redirect関数で取得したリダイレクタインスタンスにアクションを指定する方法 return redirect()->action($action, $parameters = [], $status = 302, $headers = []); // redirect関数で取得したリダイレクタインスタンスに外部ドメインを指定する方法 return redirect()->away($path, $status =
PHP

HTMLのフォルダ・ディレクトリ構造を現役エンジニアが解説【初心者向け】

HTMLのフォルダ・ディレクトリ構造について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 フォルダ・ディレクトリ構造について詳しく説明していくね！ 大石ゆかり お願いします！   目次 ディレクトリとは ディレクトリ構造とファイルパス ファイルの種類とディレクトリ配置 ディレクトリを作ってみよう   ディレクトリとは ディレクトリとは、パソコンのフォルダと同義です。 パソコンのフォルダには、テキストファイルやバイナリファイルなどのファイルを入れられます。 またフォルダの中に複数のフォルダを作成している場合も少なくありません。   unixやmacでは、ターミナルにコマンドを打ち込み、新しいフォルダを作ることが可能です。 その場合には、mkdirコマンドを使い、mkdir「Make　ディレクトリ」＝ディレクトリを作るという意味のコマンドを使いましょう。   そのため、unix環境などではフォルダのことをディレクトリと呼んでいます。 ディレクトリの中にさらにディレクトリを作ることもでき、ディレクトリはOSの中でツリー上の階層構造として記録されることになるでしょう。   [PR] コーディングで副業する方法とはディレクトリ構造とファイルパス windows環境ではフォルダをダブルクリックをすると、中のフォルダやファイルを確認できます。 ディレクトリの構造から見ると、ディレクトリがツリー状になった階層構造の下位のディレクトリを参照しています。   また、ツリーの構造の一番上は、windowsの場合はcドライブです。 macの場合にはMacintochHDがそれにあたり、一番上の階層から下位の階層を見ていく形式です。 下位にある特定のファイルにアクセスする場合には、ディレクトリ名とファイル名の連ねた「ファイルバス」で指定しています。   マウス操作ではなくターミナルから特定のファイルにアクセスしたい場合にはファイルパスを打ち込みます。 windowsの場合にはcドライブからフォルダ名を連ねているため、下記のようにパス名で特定のファイルがある場所を表しましょう。 「c:¥フォルダ名¥フォルダ名￥ファイル名.txt」   また、unix環境の場合には、パス名でファイル場所を表しています。 「/Users/フォルダ名/フォルダ名/ファイル名.txt」     ファイルの種類とディレクトリ配置 ファイルの種類は大きく分けて２種類しかありません。 テキストファイルとバイナリファイルです。 テキストファイルにはファイル名の末尾が.txtや.csvという拡張子になっているものなどが代表例です。   対して、バイナリファイルは下記のようにそれぞれデータ形式が違います。 画像ファイル 動画ファイル 音声ファイル そのため、どのようなファイルなのかを判断するには各拡張子を確認する必要があります。 これらのファイルはディレクトリに入れることになるもの、ファイルの構造を意識して配置しなければなりません。 一番上の階層を「ルート階層」と呼び、その直下の階層が第一階層、さらにその下の階層が第二階層となります。   ディレクトリを作ってみよう ディレクトリはマウス操作の右クリックなどでも作成できるものの、今回はプログラミングコードを記述して作成しましょう。 windowsのコマンドプロンプトなどのターミナルを開きます。 現在の開いているディレクトリを確認するために下記のように入力しましょう。 pwd その際、下記のようにディレクトリ名が分かります。 /Users/test1/test2 test2のような末尾に表示されている表記が現在開いているのディレクトリ名です。   これをカレントディレクトリと呼び、カレンディレクトリの直下に新しいディレクトリを作成します。 mkdir test3 このように実行すると、test2の下の階層にtest3のディレクトリが作成されています。 確認するためには以下のコマンドを実行します。 ls 以下のように返ってきていればディレクトリの作成は成功です。 「/Users/test1/test2/test3」   執筆してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり HTMLのフォルダ・ディレクトリ構造がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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