Q&A
Webブラウザから
http://localhost:5500/dist/index.html
http://localhost/chari/dist/index.html
をそれぞれアクセスして、どちらでもindex.htmlページが表示されているということでしょうか。
前提
各種サイトにあるデバッグ方法のポート番号によるアドレスの記述だと、ページの表示と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
はい。どちらもページの表示とjava scriptの実行は問題ありません。
:5500だけphpが動作しません。
質問の件名が指す内容が反対ですね。ローカルでhtmlとJavaScriptのみ動いている様です。
フォルダ構成と各ファイルの配置、ファイルのコードも提示願います。
あと「実行されない」だけでは起きている現象分からないので、「何が起きているか」を記載してください。
エラー発生の有無、どういうURLでどういう風にアクセスして、何が起きているのか。
すいません。言葉足らずでした。
Local host のポート番号の部分のみフォルダ名にするとPHPが動作するという事です。
ローカルのc¥aaa/bbb/ccc/index.htmlで実行はしてはいません。
> Local host のポート番号の部分のみフォルダ名にするとPHPが動作するという事です。
URLではポート番号のところはホストの待ち受けポートに相当するところです。フォルダ、ディレクトリのPATHとは意味が異なります。、m.ts10806さんがコメントされた
> エラー発生の有無、どういうURLでどういう風にアクセスして、何が起きているのか。
に尽きますね。ローカルホストであろうとリモートであろうと例えばhttpなら既定でポート番号80です。
http://localhost:80/index.html と http://localhost/index.html は同等です。
404 Not found のHTTPステータスのエラーでしょうかね。
[編集済] URLのポート番号区切りを";"と誤記していたので、";"に修正。
「動作する」「動作しない」では他者には何も伝わらないという指摘です。
他者が再現できるくらい具体的な内容である必要があります。でないと応えようがない。
（赤の他人はどんなに技術力や経験があっても赤の他人でしかなく、エスパーやあなたの画面を隣で見ている人ではないから）
例えば、
--------------------------------
ブラウザから実行すると画面に「test」と表示するプログラムを作っている。
書いたのは以下のコード
```
<?php
echo "test";
```
これをプログラムを ポート999に設定したApacheのDocumentRootであるhtdocsディレクトリ配下にtest.phpというファイルで保存して、
http://example.com:999/test.php
とChromeブラウザでアクセスするとブラウザに「test」と出力される。
http://example.com:8888/test.php
でアクセスするとサーバー接続できなかった旨のエラー（画面キャプチャなど込み）が表示される。
--------------------------------
といった具合に。現状の投稿内容だと想定する動作も、それを実現しようとして書いたコードも、具体的な操作も、起きている現象も何もないのが分かるかと思います。
面倒で省略する人も多いですが、見ている人に伝わらなければ結局ヒアリング（逆質問）を強いることになり、
お互い労力がかかるわけです。
そのための「質問テンプレート」であったはずですが、デフォルトの項目結構削られたみたいで、伝わりにくくなっています。
言い方は厳しいですが、「ここは関係ない”だろう”」という素人判断は悪い癖となって、今後のスキル向上の大きな壁になります。
省いた場所に実は問題がありました、なんてこと日常茶飯事です。（業務でも見落としとしてよくある）
m.ts10806さん
大変申し訳ありませんでした。おっしゃるとおり、自身の勝手な判断で「ここは関係ないだろう」と思う箇所について省略しておりました。
ご指摘を受け、質問に追加の情報を記載しましたのでご確認頂けると幸いです。
了解です。ただ、細かいですが、JavaとJavaScriptは全く別物なので、そこまで正確に記載いただけると。
また、PHPのコードが提示されてないのと、提示されたコードも手元のコードコピペではなく切り抜きに見受けられます。
MAMP よく知りませんが、apache のポート番号はひとつしか指定できないように見えます。ポート番号 80 と 5500 で動いてるのは同じものですか？
https://pc-karuma.net/mamp-settings-mac/
あと、localhost はフォルダ名じゃなくてホスト名ですよね。
そういえば、MAMPってデフォルトポート8888だったような。
ポート番号省略でアクセスしている＝ポート番号80です。そのような設定変更はしましたか？
また、5500は何にどのように設定したポート番号ですか？
もちろん、別ポートでのサーバ立ち上げは、MAMP（というかWebサーバ：Apache）を複数導入すれば可能ですが、質問者さんの段階でそのようなことをしているとは考え難いです。
あぁ、なんとなくわかった。
ご質問ありがとうございます。
アドレスのlocalhostはホスト名です。
mampはapache利用でポート番号は80に変更しています。
5500はvscodeの拡張機能のLiveServerで設定したものです。
回答1件
0
ベストアンサー
調べた感じ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総合スコア80892
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のことまでお調べ頂き、本当にありがとうございました。
調べた・・・というより、たまたまteratailの質問でそのようなの（プラグインのポートが出てた）を見た記憶がありコメントしてるうちに思い出し、
VSCodeのプラグイン観点でGoogle検索してみたらすぐヒットしたので（自身はVSCode重用者ではないのでそこだけ調べた）、
そこかなという、ある種勘でした。
あまり詳しくない状態でわざわざ5500というポートを指定するとは思えませんでしたしね（それでも5％くらい複数MAMPの可能性を持ってました）
あなたの回答
tips
プレビュー
