質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

MAMP

Mac 上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフト

Q&A

解決済

デバッグ時のアドレスがポート番号ではなくフォルダ名の場合のみphpが動作する

uda
uda

総合スコア1

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

MAMP

Mac 上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフト

1回答

0グッド

0クリップ

350閲覧

投稿2022/12/01 00:52

編集2022/12/01 07:42

前提

各種サイトにあるデバッグ方法のポート番号によるアドレスの記述だと、ページの表示とjava scriptの実行はされますがphpだけが実行されません。

Local host のポート番号の部分のみフォルダ名にするとPHPが動作します。
localhost:5500/dist/index.html →PHP動作しない
localhost/chari/dist/index.html →PHP動作する

どちらもmampは起動しています。
環境はmac, mamp, vscode(live server, php server)です。

phpがサーバ上でしか動作しないことは認識していますが、mamp(apache)を起動しているのでlocalhost:5500でも実行できると思っていました。

実現したいこと

  • デバッグ時のアドレスはポート番号ではなくフォルダ名でもよいのか知りたい。
  • ポート番号とフォルダ(vscodeではプロジェクト?)の関係を知りたい。

発生している問題・エラーメッセージ

イメージ説明

該当のソースコード

JavaScript

1 // @param {string} no リンク番号 2 // @param {object} prm {setType: string , cnctType: string, mkr: string, mdl: string, year: string} 3 4 5export async function getDataFromPHP(no, prm) { 6 let url; 7 if (prm["cnctType"] === "dev") { 8 url = "../dist/php/getGeo.php"; 9 } else { 10 url = "../php/getGeo.php"; 11 } 12 13 //URLSearchParamsは連想配列からクエリパラメータを作成してくれるAPI 14 // const qPrm = new URLSearchParams(prm); 15 16 //method:GETはパラメータを送らずにURLからデータを取得するだけ > パラメータがないのでbodyがない 17 //method:POSTはパラメータを送って処理を実施後にURLから処理後のデータを取得する > パラメータがあるのでbodyが必須 18 const params = {### ヘディングのテキスト 19 method: "POST", 20 headers: { 21 "Content-Type": "application/json", 22 }, 23 body: JSON.stringify(prm), 24 }; 25 26 //awaitでpromiseが返ってくるのを待つ 27 // const res = await fetch(`${url}?${qPrm}`).catch((err) => console.log(err)); 28 const res = await fetch(url, params).catch((err) => console.log(err)); 29 // console.log(res.text()); //Promisseの結果を表示、詳細なエラーが分かる 30 const values = await res.json().catch((err) => console.log(err)); //今回のエラー発生箇所 31 // console.log(values); 32 setDataToMakerModel(prm["setType"], no, values); 33 if (prm["setType"] === "geometry") { 34 setDataToSize($("#size-table > tr"), no, values); 35 } 36}

フォルダ構成

イメージ説明

ページ表示 localhost:5500

イメージ説明

ページ表示 localhost/chari

イメージ説明

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

mac, vscode, mamp

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

uda

2022/12/01 01:08

はい。どちらもページの表示とjava scriptの実行は問題ありません。 :5500だけphpが動作しません。
dodox86

2022/12/01 01:29

質問の件名が指す内容が反対ですね。ローカルでhtmlとJavaScriptのみ動いている様です。
m.ts10806

2022/12/01 01:55

フォルダ構成と各ファイルの配置、ファイルのコードも提示願います。 あと「実行されない」だけでは起きている現象分からないので、「何が起きているか」を記載してください。 エラー発生の有無、どういうURLでどういう風にアクセスして、何が起きているのか。
uda

2022/12/01 02:24

すいません。言葉足らずでした。 Local host のポート番号の部分のみフォルダ名にするとPHPが動作するという事です。 ローカルのc¥aaa/bbb/ccc/index.htmlで実行はしてはいません。
dodox86

2022/12/01 14:46 編集

> Local host のポート番号の部分のみフォルダ名にするとPHPが動作するという事です。 URLではポート番号のところはホストの待ち受けポートに相当するところです。フォルダ、ディレクトリのPATHとは意味が異なります。、m.ts10806さんがコメントされた > エラー発生の有無、どういうURLでどういう風にアクセスして、何が起きているのか。 に尽きますね。ローカルホストであろうとリモートであろうと例えばhttpなら既定でポート番号80です。 http://localhost:80/index.htmlhttp://localhost/index.html は同等です。 404 Not found のHTTPステータスのエラーでしょうかね。 [編集済] URLのポート番号区切りを";"と誤記していたので、";"に修正。
m.ts10806

2022/12/01 05:48 編集

「動作する」「動作しない」では他者には何も伝わらないという指摘です。 他者が再現できるくらい具体的な内容である必要があります。でないと応えようがない。 (赤の他人はどんなに技術力や経験があっても赤の他人でしかなく、エスパーやあなたの画面を隣で見ている人ではないから) 例えば、 -------------------------------- ブラウザから実行すると画面に「test」と表示するプログラムを作っている。 書いたのは以下のコード ``` <?php echo "test"; ``` これをプログラムを ポート999に設定したApacheのDocumentRootであるhtdocsディレクトリ配下にtest.phpというファイルで保存して、 http://example.com:999/test.php とChromeブラウザでアクセスするとブラウザに「test」と出力される。 http://example.com:8888/test.php でアクセスするとサーバー接続できなかった旨のエラー(画面キャプチャなど込み)が表示される。 -------------------------------- といった具合に。現状の投稿内容だと想定する動作も、それを実現しようとして書いたコードも、具体的な操作も、起きている現象も何もないのが分かるかと思います。 面倒で省略する人も多いですが、見ている人に伝わらなければ結局ヒアリング(逆質問)を強いることになり、 お互い労力がかかるわけです。 そのための「質問テンプレート」であったはずですが、デフォルトの項目結構削られたみたいで、伝わりにくくなっています。 言い方は厳しいですが、「ここは関係ない”だろう”」という素人判断は悪い癖となって、今後のスキル向上の大きな壁になります。 省いた場所に実は問題がありました、なんてこと日常茶飯事です。(業務でも見落としとしてよくある)
uda

2022/12/01 06:30 編集

m.ts10806さん 大変申し訳ありませんでした。おっしゃるとおり、自身の勝手な判断で「ここは関係ないだろう」と思う箇所について省略しておりました。 ご指摘を受け、質問に追加の情報を記載しましたのでご確認頂けると幸いです。
m.ts10806

2022/12/01 06:36

了解です。ただ、細かいですが、JavaとJavaScriptは全く別物なので、そこまで正確に記載いただけると。 また、PHPのコードが提示されてないのと、提示されたコードも手元のコードコピペではなく切り抜きに見受けられます。
hoshi-takanori

2022/12/01 07:38

MAMP よく知りませんが、apache のポート番号はひとつしか指定できないように見えます。ポート番号 80 と 5500 で動いてるのは同じものですか? https://pc-karuma.net/mamp-settings-mac/ あと、localhost はフォルダ名じゃなくてホスト名ですよね。
m.ts10806

2022/12/01 08:40

そういえば、MAMPってデフォルトポート8888だったような。 ポート番号省略でアクセスしている=ポート番号80です。そのような設定変更はしましたか? また、5500は何にどのように設定したポート番号ですか? もちろん、別ポートでのサーバ立ち上げは、MAMP(というかWebサーバ:Apache)を複数導入すれば可能ですが、質問者さんの段階でそのようなことをしているとは考え難いです。
m.ts10806

2022/12/01 08:42

あぁ、なんとなくわかった。
uda

2022/12/01 13:55

ご質問ありがとうございます。 アドレスのlocalhostはホスト名です。 mampはapache利用でポート番号は80に変更しています。 5500はvscodeの拡張機能のLiveServerで設定したものです。

回答1

4

ベストアンサー

調べた感じVisual Studio CodeのLive Serverプラグインを起動したときのデフォルトポートが5500のようですが、こちらはPHPなどWebサーバ上で動作する言語が実行できる環境ではないようです。
PHPを実行するためには、そのWebサーバにPHPインストールして紐づける必要があるからです。

調べてみるとPHP Serverというプラグインがあるようですが、.php拡張子のみPHPプログラムとして認識されるようで、使い勝手が良いとは言えないかもしれませんし(勉強段階くらいなら良いかもしれないけど、まとまったシステム開発には向かない疑似サーバーみたいなものかなと)、結局はWebサーバ上で動作させるので、MAMPに乗せている現状のままで良いのではないでしょうか。

結論としては、ポート5500で確認は現状ではできないし、無理に動作するように頑張る必要はないということです。
MAMPのポート番号を確認して、MAMPでのアクセスのみにしてください。

投稿2022/12/01 08:47

編集2022/12/01 08:48
m.ts10806

総合スコア80030

spoofy_dragon😄を押しています
KoichiSugiyama, uda👍を押しています
udaを押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/12/22 05:01

こちらの回答が他のユーザーから「説明が不足している回答」という指摘を受けました。

回答へのコメント

uda

2022/12/01 14:14

m.ts10806さま dodox86さま hoshi-takanoriさま たくさんのご指摘、ご回答ありがとうございました。 m.ts10806さまのご指摘どおりPHP Serverを利用しポート番号3000の"http://localhost:3000/dist/index.html"でphpの動作確認ができました。 また、試しにmampのapacheのポート番号を80から8080へ変更し"http://localhost:8080/chari/dist/index.html"でもphpの動作確認ができました。 ※「ポート番号省略でアクセスしている=ポート番号80」を知らず、なぜポート番号のないurl"http://localhost/chari/dist/index.html"でphpが動作するのか理解できていませんでした。 m.ts10806さまにはわざわざLive Serverのことまでお調べ頂き、本当にありがとうございました。
m.ts10806

2022/12/01 19:50

調べた・・・というより、たまたまteratailの質問でそのようなの(プラグインのポートが出てた)を見た記憶がありコメントしてるうちに思い出し、 VSCodeのプラグイン観点でGoogle検索してみたらすぐヒットしたので(自身はVSCode重用者ではないのでそこだけ調べた)、 そこかなという、ある種勘でした。 あまり詳しくない状態でわざわざ5500というポートを指定するとは思えませんでしたしね(それでも5%くらい複数MAMPの可能性を持ってました)

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

MAMP

Mac 上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフト