TechAcademy（テックアカデミー） プログラミング PHP XAMPPのローカル環境からメールを送信できるように設定する方法【初心者向け】
icon
icon
PHP

XAMPPのローカル環境からメールを送信できるように設定する方法【初心者向け】

XAMPPのローカル環境から【メールを送信】できるように設定する方法を初心者向けに解説した記事です。基礎となる、メール送受信の仕組みから解説しているので、初心者でも簡単に理解することができます。

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

PHPの開発環境として使われることが多いXAMPPは、ローカル環境からメールを送信することが可能です。

今回は初心者向けに、メール送信の設定方法を紹介します。

 

おさらい：メール送受信の仕組み

設定方法の前に、そもそもメールが送受信できる仕組みについて知っておきましょう。

通常、下記のような順序でメールは送受信がおこなわれます。

（※Gmailを使って、Yahoo!のメールアドレスにメールを送る場合を例にしています）

 

  1. ブラウザでGmailの画面を表示
  2. メール作成
  3. メール送信
  4. GmailのSMTPサーバがメールを受信
  5. GmailのSMTPサーバがyahooのSMTPサーバにメールを送信
  6. YahooのSMTPサーバがメールを受信
  7. YahooのSMTPサーバが該当のyahooメールアドレス宛にメールを送信
  8. 該当のYahooメールアドレスの持ち主がメールを受信

今回の設定では1〜4を扱うことになります。

この流れを意識しながら取り組んでみてください。

 

大石ゆかり

田島メンター！XAMPPでメールを送信する関数を書いてみたんですが、送信に失敗してしまうみたいなんですが。

田島悠介

レンタルサーバーだと送信できるんだけど、ローカルからだと少し設定が必要なんだ。方法を見てみよう！

大石ゆかり

はい！

 

事前準備

今回の作業では設定ファイルを直接編集することになります。万が一に備えて、作業前にバックアップは必ず取っておくようにしましょう。

また、メールアドレスを設定する必要があるので、利用できるメールアドレスをひとつ用意しておいてください。

（※今回はGmailを例として使います）

 

 

[PR] PHPプログラミングで挫折しない学習方法を動画で公開中

XAMPPでのメール送信設定

まずは、「C:xamppphp」直下にある、「php.ini」をテキストエディタを使って開きます。

※xamppフォルダの場所はインストール時に変更することができますが、今回はデフォルトのインストール先を使用しています。

 

テキストエディタで開いたら、「mail function」で検索をかけます。

検索に引っかかった行から28行分（緑の枠で囲まれた箇所）がXAMPPのメールに関する設定の箇所です。

WS0000031

ここで赤枠で囲まれた「；」を削除して、「php.ini」ファイルを上書き保存してファイルを閉じてください。

（※上書き保存前に必ずバックアップをとってください）

 

続いて、「C:xamppsendmail」直下にある、「sendmail.ini」を同じようにテキストエディタで開いてください。

開いたら「smtp_server」で検索をしてください。検索後、「smtp_server=mail.mydomain.com」の行が表示されるので、「smtp_server=smtp.gmail.com」に書き換えてください。

smtp_domain

 

そのまま、「smtp_port=25」で検索をしてください。検索後、「smtp_port=25」の行が表示されるので、「smtp_port=587」に書き換えます。

（※「smtp_port=587」に編集する理由は今回は割愛します）

smtpport

 

さらに、「auth_username」で検索をしてください。検索後、「auth_username」が検索に引っかかり、その下に「auth_password」の行があります。

auth

ここで「auth_username=」を「auth_username=test@gmail.com」に編集してください。

（※今回は例として「test@gmail.com」にしていますが、実際は利用するメールアドレスを記載してください）

 

今度は「test@gmail.com」を使用する際に必要なパスワードを、「auth_password=password」のように入力してください。

auth_after

 

最後に、「force_sender=」で検索をしてください。検索後「force_sender=」の行が表示されますので、先ほどのように「force_sender=test@gmail.com」と入力してください。

forcesender

以上で「sendmail.ini」の編集は完了ですので、上書き保存してファイルを閉じてください。

 

大石ゆかり

設定ファイルを変える、ポート番号を25から587にする。gmailのユーザー名とパスワードを設定する。これで良いですか？

田島悠介

OK！メールを送るにはSMTPサーバーが必要なんだよね。SMTPプログラムは25番ポートを使用するってだいたい決まってるんだよね。今回はgmailのSMTPサーバーを使うよ。

大石ゆかり

587番ポートに変更したのには理由があるんですか？

田島悠介

主に迷惑メール対策なんだ。誰でもSMTPサーバーからメールを送れたら困るので、587番ポートでユーザー認証もするようになったんだ。

 

メールの送信テスト

設定が完了したら、実際にメールが送れるかテストしてみましょう。

まずはじめに、「C:xamppphp」直下に、「test_mail.php」というファイルを作成してください。

作成後、下記の内容をコピーして保存しておきましょう。

<?php
if (mb_send_mail(‘送信先メールアドレスを入れる’, ‘TEST SUBJECT’, ‘TEST BODY’)) {
echo ‘送信完了’;
} else {
echo ‘送信失敗’;
}

 

作成した「test_mail.php」をダブルクリックするとメールが送信されるので、「sendmail.ini」に登録したメールアドレスに、メールが届いているか確認してください。

無事にメールが届いていれば設定完了です。

万が一メールが届いていない場合は、「C:xamppsendmail」直下に作成される「error.log」ファイルを確認し、問題箇所を特定してください。

（※error.logファイルはエラーが発生したタイミングで自動的に作成されるため、テストする前には存在しません）

 

おわりに

今回の記事は以上です。

XAMPPをさらに使いこなしたい場合は、XAMPPでセキュリティ設定を行う方法も合わせてご覧ください。

 

大石ゆかり

ローカルからメールが送信できました！

田島悠介

お問い合わせフォームなどを設置して、メールで送るのもいいね。

大石ゆかり

これからは、通常の案件はデータベースに登録して緊急の案件は、メールでも送るといった使い方が出来そうです。

田島悠介

後、言い忘れたんだけど、gmailのアカウントがあるからといって、不特定多数の人に大量にメールを送らないようにしたいね。メールは奥が深いので、興味がある人は、ブートキャンプで質問してね！

 

PHPを勉強していて、
・もっと効率的に勉強したい
・誰かに聞きながら学びたい
・自分でWebサービスを作りたい
と思ったことはないでしょうか？

そんな方のために、TechAcademyではオンラインブートキャンプPHP/Laravelコースを提供しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、オリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。

記事を検索

関連するキーワード

関連する記事

PHPで値に応じてcheckboxをcheckedにする方法【初心者向け】

PHPで値に応じてcheckboxをcheckedにする方法について解説します。特定のチェックボックスの要素にcheckedをつけます。   ...
PHP

PHPの文字列を連結する方法を現役エンジニアが解説【初心者向け】

PHPの文字列を連結する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   ...
PHP

PHPのtrimで文字列の先頭と末尾の空白を取り除く方法【初心者向け】現役エンジニアが解説

trim関数を使って文字列の先頭と末尾の空白を取り除く方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
PHP

PHPでラムダ式で関数を書く方法【初心者向け】

PHPでラムダ式で関数を書く方法について解説します。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を...
PHP

PHPの「値渡し」と「参照渡し」の使い方【初心者向け】

PHPの値渡しと参照渡しの使い方について解説します。新たにメモリの領域を確保して値をコピーしているのか、同じ場所を参照しているのかと考えるとわかりやすくなります...
PHP

PHPのdirnameでディレクトリ名を取得する方法を現役エンジニアが解説【初心者向け】

今回は、PHPのdirnameでディレクトリ名を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
PHP

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

Pythonでメール送信する方法を現役エンジニアが解説【初心者向け】

Pythonでメール送信する方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonでメール送信する方法について詳しく説明していくね！ 大石ゆかり お願いします！ プログラムでメール送信する手順 プログラムでメール送信するにはSMTP(Simple Mail Transfer Protocol)というプロトコル(手順)に従います。 SMTPはRFC 5321で定義されていて、TCP上での文字列コマンドやりとりを通じてメールを送受信します。 主流のプログラミング言語では、SMTPの使用を補助するライブラリがあるので、SMTPプロトコルを直接記述する必要はありません。 SMTPサーバの仕様(ポートや認証方式)はサービスごとに異なるので、あらかじめサービス提供元のサイトなどで調べておく必要があります。 smtplibモジュールとは smtplibモジュールはPythonでSMTPを扱うためのモジュールです。 以下のようにSMTPインスタンスを作成し、ログインやメール送信操作を続けます。 import smtplib s = smtplib.SMTP(host, port) # SMTPもしくはSMTPSを使用する s.login(username, password) # ログインが必要な場合 s.sendmail(...)   [PR] PHPプログラミングで挫折しない学習方法を動画で公開中実際に書いてみよう（サンプルコードなど） サンプルコード この記事ではGoogleのメールサービスであるGmailを用いました。 GmailでSMTP送信するための設定はこちらに記載があります。 今回はテスト目的のため、自身のメールアドレス同士でメールを送受信しました。 import smtplib smtp_host = 'smtp.gmail.com' smtp_port = 465 username = 'mouvyet4kagmak@gmail.com' password = '********' from_address = 'mouvyet4kagmak@gmail.com' to_address = 'mouvyet4kagmak@gmail.com' subject = 'test subject' body = 'test body' message = ("From: %srnTo: %srnSubject: %srnrn%s" % (from_address, to_address, subject, body)) smtp = smtplib.SMTP_SSL(smtp_host, smtp_port) smtp.login(username, password) result = smtp.sendmail(from_address, to_address, message) print(result)   実行結果 以下のように自身の受信トレイにメールが配送されました。 解説 1行目でsmtplibモジュールをインポートしました。 3-6行目がGoogleのSMTPサーバにログインするための情報です。パスワードはマスクしてあります。 7-10行目が送信するメールの情報です。送信元アドレス、送信先アドレス、件名、メール本文です。 11行目でメールの仕様(RFC)にあわせてメッセージを整形しました。 13行目でSMTPサーバに接続しました。 14行目でSMTPサーバにログインしました。 15行目でメールを送信し、16行目でその結果を表示しました。 監修してくれたメンター 橋本紘希 システムインテグレータ企業勤務のシステムエンジニア。 開発実績: Javaプログラムを用いた業務用Webアプリケーションや、基幹システム用バッチアプリケーションなどの設計構築試験。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

誰でも実装できる！PHPでメール送信を行う方法【初心者向け】現役エンジニアが解説

PHPでメールを送信する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 mail関数、mb_send_mail関数を使って簡単にメールを送信できます。 フォームに入力されたメールアドレスに簡単にメール送信できるので、ぜひ覚えておきましょう。   目次おさらい：メール送受信の仕組み事前準備XAMPPでのメール送信設定メールの送信テストおわりに   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！PHPでメールを送信することはできますか？ 田島悠介 ちょっと問題があるけど、関数を書くだけで送信できるんだ。 大石ゆかり そんなに簡単に送信できるんですか？ 田島悠介 そうなんだ。mail関数とmb_send_mail関数について見ていこう！   mail関数、mb_send_mail関数とは mailとmb_send_mailは、どちらもメールを送信する際に使用される関数です。 mailとmb_send_mailの違いとして、mb_send_mailは日本語などのマルチバイト文字を扱ってメールの送信を行うことができます。   メール送信の書き方 mailの場合 mailは以下のように記述します。 mail(送信先,タイトル,本文,追加ヘッダー,追加コマンドラインパラメータ) 送信先には、送信先のメールアドレスを指定します。 タイトルには、メールのタイトルを指定します。 本文には、メールの本文を指定します。 追加ヘッダーには、メールの追加ヘッダー情報を指定します。 追加ヘッダーとは、From、Cc、Bccなどの送信先情報です。 追加ヘッダーは省略可能です。 追加コマンドラインパラメータには、 追加のフラグをコマンドラインオプションとして、メール送信プログラムに渡す際に使用可能です。 追加コマンドラインパラメータは、省略可能です。   mb_send_mailの場合 mb_send_mailは以下のように記述します。 mb_send_mail(送信先,タイトル,本文,追加ヘッダー,追加コマンドラインパラメータ) 送信先には、送信先のメールアドレスを指定します。 タイトルには、メールのタイトルを指定します。 本文には、メールの本文を指定します。 追加ヘッダーには、メールの追加ヘッダー情報を指定します。 追加ヘッダーとは、From、Cc、Bccなどの送信先情報です。 追加ヘッダーは省略可能です。 追加コマンドラインパラメータには、 追加のフラグをコマンドラインオプションとして、メール送信プログラムに渡す際に使用可能です。 追加コマンドラインパラメータは、省略可能です。   日本語で送信する場合 mb_send_mailで日本語のメールを送る場合は、最初に以下の2行を挿入します。 mb_language("Japanese"); mb_internal_encoding("UTF-8"); mb_language(“Japanese”);と指定することで日本語指定が可能です。 mb_languageは言語を設定する関数です。 mb_internal_encoding(“UTF-8”);と指定することで、文字コードをUTF-8に指定します。 mb_internal_encodingでは文字のエンコードを指定します。     大石ゆかり mail関数とmb_send_mail関数は、それぞれ別ですか？ 田島悠介 mb_send_mail関数は、内部でmail関数を呼んでいるんだ。こういう形をラッパー関数っていうんだ。 大石ゆかり ラッパー関数？ 田島悠介 mail関数をラップするように包んで、何か機能を付け加えた物って考えるといいよ。   [PR] PHPプログラミングで挫折しない学習方法を動画で公開中実際に書いてみよう 簡単な入力フォームを作成し、そこからメールを送信して結果を画面に表示させます。   mailform.htmlの作成 まず送信先、メールのタイトル、本文を入力するフォームを設置したmailform.htmlを作成します。 mailform.htmlサンプルコード <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" charset="UTF-8"></script> </head> <body> <p> <h2>メール送信フォーム</h2> </p> <form action="./confirm.php" method="post"> <p>
PHP

PHPでフォームからデータを受け取る方法（GETとPOST）

プログラミング初心者向けに、PHPの基礎を紹介する記事です。 今回は、フォームからデータを受け取る方法について解説します。 最初にフォームの送信方法とPHPでの受け取り方に関しての説明をします。 その後、実際に動くコードを作成してデータの送受信を試していきます。 フォームでのデータのやりとりはWebサイトなどでは基本なので、ぜひ覚えておきましょう。   目次 GETとPOSTとは HTMLのフォーム 送信されるデータ フォームデータの受け取り方 受信データのバリデーション 実際にコードを書いてみよう 開発環境はXAMPPを使っています。   GETとPOSTとは PHPにおけるデータの受け取り方には、GETリクエスト と POSTリクエスト を使う2通りの方法があります。 POSTリクエストはフォームからHTTP通信により送信され、送信データはリクエストの本体に含まれます。 GETリクエストはフォームやリンクからHTTP通信により同じように送信されますが、送信データはURLの最後に？に続いて　パラメータ名=値という形式で付加されます。     大石ゆかり フォームを使ってデータを送信できるんですね。 田島悠介 そうなんだ。フォームから送ったデータを、PHPで取得できるんだよ。 大石ゆかり いろいろなところで使われてそうですね。 田島悠介 そうだね。後、フォームじゃないんだけどURLの最後に?p=2とか/p2/もGETでデータを送ってることになるんだ。 多くは何ページ目とかに使われるね。HTMLでフォームを作って送信してみよう！ [PR] PHPプログラミングで挫折しない学習方法を動画で公開中HTMLのフォーム サーバにデータを送信するためには、HTMLのフォームを使います。 GETリクエストのフォーム フォームの構造は次のようなコードです。 <form action = “index.php” method = “GET”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> formタグのaction属性に送信先のURLを指定します。 送信方法はデフォルトでGETリクエストですが、method属性で POSTかGETに指定できます。 formタグ内の inputタグの値が送信するデータです。 この時、name属性がリクエストパラメータ名になり、value属性の値やテキストボックスに入力された値がそのパラメータの値です。 上のコードでは、フォームのデータは、commentというパラメータ名で入力値とのペアで送られ、送信方法はGETリクエストになり、送り先は index.php です。 POSTリクエストのフォーム POSTリクエストにしたい場合は、次のようにform要素のmethod属性をPOSTに変更するだけです。 <form action = “index.php” method = “POST”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> 送信されるデータ ここでは、例としてcommentという名前属性のinput要素に hogehogeという文字を入力して送信するとしましょう。 GETリクエストのデータ データがURLの一部として含まれてサーバに送られます。 送信先は index.phpとすると、URL全体は次のようになります。 http://index.php?comment=hogehoge ここで注目していただきたいのは、後に付けた?comment=hogehogeの部分です。 GETリクエストのデータは基本的には、 ? の後に パラメータ名=値のペアの形式で送られます。 複数のデータの場合は、間を & でつなげます。 http://index.php?comment=hogehoge&title=hello このURLで送られるのは、 comment=hogehogeとtitle=helloという２つのデータ（パラメータ名=値のペア）です。     フォームデータの受け取り方 GETリクエストで送信したデータを受け取る GETリクエストで送信したデータは、グローバル変数である $_GET に連想配列という形で入っています。 そこで、PHPでデータを受け取るときは、この　$_GET を使います。 先ほどの例では、comment=hogehogeというデータが送られましたが、$_GETには、[‘comment’ => ‘hogehoge’] という連想配列で保存されます。 $_GETからデータを受け取るには、受け取りたいinput要素の name属性
PHP

WordPressでメール投稿を使う方法【初心者向け】

WordPressの投稿をメールでも行えることはご存知でしょうか？出先から、旅行先から、パソコンがなくても簡単に投稿ができるのがメール投稿機能です。 そんな便利なメール投稿機能の設定方法をまとめました。   なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター！！メール投稿ってなんですか？ 田島悠介 メール投稿っていうのはね、メールで記事を投稿できるようになるんだ。旅行先で気軽に記事を書きたいときにWordPressを開くのが大変なときもあるだろうから、そういうときにメール投稿を使えると便利だよ！ 大石ゆかり そうですね♪   投稿用のメールアドレスを取得する 投稿専用のメールアドレスを準備しましょう。Gmailなどで取得するのがオススメです。 このアドレスに投稿したメールが、全て投稿されてしまうので、メールアドレスは人に知られないようにしましょう。 メールアドレスが準備できたら、そのメールアドレスとWordPressを連携させていきます。 今回はGmailを例として使います。     GmailでPOP設定 取得したGmailの設定画面を開き、「メール転送とPOP/IMAP」タブで「今後受信するメールでPOPを有効にする」にチェックを入れます。     [PR] PHPプログラミングで挫折しない学習方法を動画で公開中メール投稿用のユーザーを作成 投稿できるメールアドレスはWordPressのユーザーで登録されているユーザーのメールアドレスのみです。 ダッシュボード＞ユーザー＞新規追加からメール投稿用のユーザーを設定しましょう。 その際、メールアドレスは先ほど取得したものにしてください。     WordPressでメールアドレスを設定 作成したメールアドレスを、WordPressと連携させます。 WordPressのダッシュボード＞設定＞投稿設定　を開きます。   メールでの投稿の項目を編集します。 デフォルトでは、下記のようになっていると思います。   まず、メールサーバを「ssl://pop.gmail.com」に、ポートを「995」に設定します。 ログイン名・パスワードについては、先ほど取得したGmailのユーザー名、パスワードを入力してください。 投稿した記事をデフォルトで反映させたいカテゴリがある場合はここで選択しましょう。 これでWordPressとメールの設定ができました。     投稿を反映するためのプラグインを設定 送信したメールを、WordPressに反映させるためのプラグインを設定しましょう。 今回は、Ktai Entryというプラグインをインストールしてください。 有効化すると、ダッシュボード＞設定＞メール投稿が選択できるので、読み込み間隔などを設定します。 これで、メール投稿が利用できるようになりました。 ぜひ自分で試してみてください。   大石ゆかり 普段も簡単な記事だったらメール投稿の方が便利なときもあるかもしれませんね♪ 田島悠介 そうだね。ただメールアドレスをバレてしまうと不正に投稿されてしまうかもしれないから、十分に気をつけてね！ 大石ゆかり はい！   さらにWordPressを使いこなしたい場合は、WordPressでスマートフォンサイトに対応させる方法も合わせてご覧ください。 [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
WordPress

jQueryのAjaxでPOST送信してPHPで受け取る方法【初心者向け】現役エンジニアが解説

今回は、jQueryのAjaxでPOST送信してPHPで受け取る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 jQueryのAjaxでPOST送信してPHPで受け取る方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Ajaxとは AjaxでPOST送信する jQuery（送信側）の記述方法 PHP（受信側）の記述方法 まとめ   Ajaxとは AjaxとはHTTPプロトコル通信で、HTMLやPHPファイルからリクエスト送信をHTTPサーバに送信して、レスポンスをブラウザ側で受信する動作を非同期通信で受け取ることができる技術です。 Ajaxを使うとHTMLファイルの中の一部だけ表示更新するなどの操作を行うことができます。 例えば、ブラウザ上に表示した一覧表の内容を更新して、データベースに登録した内容をまた一覧表に反映させる時、HTMLファイルの表部分の表示だけ更新する、ということができるようになります。   [PR] PHPプログラミングで挫折しない学習方法を動画で公開中AjaxでPOST送信する Ajaxを使ってPOST送信するには、jQuery側でPOST送信するデータの定義を記述して、PHP側で受け取り側の記述をします。 （POST送信とはブラウザの入力フォームなどの内容をサーバ（PHP）に送る送信方法の一つです。）   表示結果   index.htmlのコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title> </head> <body> <p>IDを入力 : <input type="text" id="main" /><button id="send">送信</button></p> <div id="return"></div> <script src="./main.js"></script> </body> </html>   解説 1行目の<!DOCTYPE html>では、HTML5で作成することを宣言しています。 2行目の<html>では、HTML文書の実装を開始することを意味しています。 3行目の<head>では、head要素の開始を意味しています。 4行目の<meta charset=”UTF-8″>では、UTF-8という文字コードで実装することを意味しています。   5行目の<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>では、jQueryのコードを読み込んでいます。 今回、Googleが用意したCDNを利用しています。 jQueryファウンデーションが用意しているCDNの方が、最新バージョンをいち早く確実に利用することができるメリットがありますが、CDNによってはサーバが一時的に停止していることがあるので、GoogleのCDNを利用するようにしています。   6行目の<title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title>では、検索結果やブラウザのタブに表示されるタイトルを指定しています。 7行目の</head>ではhead要素が終了することを意味しています。 8行目の<body>では、body要素が開始することを意味しています。   9行目の<p>IDを入力 : <input type=”text” id=”main” /><button id=”send”>送信</button></p>では、IDを入力するための入力フォームを用意しています。 id=”main”とid=”send”は、それぞれJavaScriptが実装されたmain.jsで利用されるため、要素名を覚えておいていただくと理解しやすいです。   10行目の<div id=”return”></div>も、main.jsで利用される要素です。 最終的にこの位置に、main.jsで用意されたHTMLが追加表示されます。   11行目の<script src=”./main.js”></script>では、JavaScriptのコードを用意しているファイルを読み込んでいます。 必ず5行目にあるように、jQueryファイルを先に読み込んで、そのあとJavaScriptファイルを読み込んでいただくとスムーズです。   12行目の</body>では、body要素が終了することを意味しています。 13行目の</html>では、HTML文章が終了することを意味しています。   jQuery（送信側）の記述方法 jQuery ではPHPにPOSTするデータの定義と、送信結果を受け取ったあとのアクションを記述します。 記述の仕方は$.ajaxで記述する場合と、$.postメソッドを使用して記述する場合の2通りで紹介します。   $.ajaxで記述する方法 $.ajaxを利用して実装するコードを見ていきましょう。 サンプルコード（main.js）   $(function(){ $("#send").on("click", function(event){ let id = $("#main").val();
PHP

JavaScriptでPOST送信する方法を現役エンジニアが解説【初心者向け】

JavaScriptでPOST送信する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでPOST送信することで、Webページのデータをサーバに送信できます。 実務でもサーバとデータ連携することが多いので、ぜひ学習してみてくださいね。 目次おさらい：メール送受信の仕組み事前準備XAMPPでのメール送信設定メールの送信テストおわりに そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでPOST送信する方法について詳しく説明していくね！ 大石ゆかり お願いします！   POSTとは POSTとは、通信規格であるHTTP通信内で、Webページの中でサーバ(Webサーバ)とクライアント(ブラウザなど)とのやりとりに利用する1つの機能です。 ブラウザの表示方法として、GETという機能を使ってブラウザが「このURLのページを送って！」とリクエストを出し、Webサーバが指定されたURLのページをクライアントに送信し、ブラウザ上で目的のページが表示されます。 GETは主にサーバへWebページなどのデータをリクエストする際に利用するものであり、POSTは逆にデータを送信する際に使います。 POSTは、Webの掲示板などで文章を投稿する際などに利用されています。   JavaScriptでPOST送信する方法 POST送信を行うには、HTMLのフォームを利用するなど様々な方法があるものの、JavaScriptでPOST送信したい場合もあります。 例えば、Webアプリケーションの中には、ボタンを押した際に画面の遷移は行わないけど、画面の一部を書き換えたい場合などは、JavaScriptを使ってPOST送信をすることが可能です。 今回は簡単な数値計算アプリケーションを使って、JavaScriptによるPOST送信の方法を見ていきましょう。 今回作成する数値計算アプリケーションでは、入力欄が3つあり、1つ目と2つ目に数値を入れましょう。 計算ボタンを押すと、3つ目の入力欄に2つの値を足した計算結果が表示されます。 画面は以下の通りです。   [PR] PHPプログラミングで挫折しない学習方法を動画で公開中実際に書いてみよう それでは実際に、JavaScriptでPOST送信する方法を実装してみます。 送信されたデータはサーバ側でPHPのプログラムにより処理されます。   数値計算アプリケーションの例 今回作成した数値計算アプリケーションのソースコードは、HTMLファイルとJavaScriptファイル、サーバ側のPHPファイルです。 サーバ側PHPサンプルコード <?php $arg1 = $_POST['arg1']; $arg2 = $_POST['arg2']; $answer = $arg1 + $arg2; echo $answer; HTMLサンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>計算機アプリ</title> <script src="script.js"></script> </head> <body> <input id="arg1" type="number"> + <input id="arg2" type="number"> = <input id="answer" type="number"> <br/> <button id="calc_button">計算</button> </body> </html> JavaScriptサンプルコード window.onload = function() { // 計算ボタンを押した際の動作を設定 document.getElementById('calc_button').onclick = function()
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） プログラミング PHP XAMPPのローカル環境からメールを送信できるように設定する方法【初心者向け】