WordPressの質問（q10288298）の続

質問

VSCodeで作成したコードをGitHubにアップロードするにはコンテキストメニューを別途追加する方法以外にありますでしょうか？

回答No.23

dell_OK · ベストアンサー

・質問画面のアイコン画像に関するコードを見たのですがどこに存在しているのか見つけらませんでした。

先に言っておけばよかったのですが、共通化のことも考えると変数名は変更しない方がよかったです。
質問画面と回答画面ではスタイル（class）を変えたいのでしたら、
　.classList.add("～")
の ～ を変えるだけでよかったのです。

それと、せっかくコメント書くのでしたら、例えば、
/* ユーザーアイコン要素作成 */
/* ユーザーアイコン要素追加 */
のような行をそれぞれの処理の前に入れておくと見つけやすかったかと思います。

ユーザーアイコンを追加しているのはここです。
名前の処理のところにあるようです。
divAnswerNameArea.appendChild(usericonImg);

質問画面のコードではここですね。
divNamePartialParts.appendChild(usericonImg);

どちらも usericonImg を作成している処理はいまのところ同じようですが、他のアップロードファイルと順番が違っていたりするので、そのあたりを調整すれば動くかも知れません。

お礼

こちらが最新の質問になります。
dell_ok さんが言われたように .appendChild(child) に問題があったようです申し訳ありません。
child = document.createElement("p"); で定義していないからエラーが起きたんですね。
アイコン画像の HTML について再度考えたところ名前やコメントと違い文字を出力する必要がなく上記のコードはコメントアウトしております。

その下のコードについて質問があるのですが、divUserIcon.appendChild(usericonImg); の usericonImg はどのように定義すべきでしょうか？
質問画面ではアップロードファイルの後にアイコン画像のコードが書かれており2つの処理をまとめておくことが出来たのですが、回答画面では順番が逆になっているため悩んでおります。
先に var usericonImg; のみ宣言しておくということを思いついたのですが dell_ok さんにお聞きしておきたいです。

※最新コード
https://github.com/i6Grja3R/sample_theme.git

※質問回答画面
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e5%9b%9e%e7%ad%94%e7%94%bb%e9%9d%a2/

補足

Q.エラーの個所はここです。
const comment_area = document.createElement("div"); // const image_area の下から移動
const divUserArea = document.createElement("div"); // div (子)を生成
divUserArea.classList.add("user-area"); // classの追加
ここ divUserArea.appendChild(child); // div (子要素) の末尾に child を追加
comment_area.appendChild(divUserArea); // comment_area (親要素) の末尾に div を追加

この時点で child の準備がされていません。

A.回答ありがとうございます、回答No.22についての補足が1つずれてしまいました申し訳ありません。
.appendChild(child) についてエラー原因ではないかと少し考えていたのですが、上記のコードではなく別の箇所になります。

HTML の書き換えに関する .appendChild(child) では var child; と関数宣言を行っているため問題なさそうです。

appendChild() でコードを調べると HTML の書き換えに関するコード以外で viewer[i].appendChild(child); というコードがあり、こちらの child が空ということではないかと思うのですが、どうすればよいでしょうか？

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

dell_ok さんがおっしゃるように共通化のことを考えて変数名は変更しない形で another_que_answer.php に別途修正したコードを書いてみました。
確認よろしくお願い致します。

※最新コード
https://github.com/i6Grja3R/sample_theme.git

回答No.12

dell_OK

・フォルダはないのですがファイルがあります。

どう説明したらいいのかわかりませんが。
そのファイルのフォルダに .git フォルダがありますよね。
その config の url がリモートリポジトリの紐づけ先です。
紐づけと言う言葉が厳密でないので言いかえると、
.git フォルダのあるフォルダのファイルをコミットすれば、
そのファイルがソース管理の対象となります。
プッシュすることでリモートリポジトリにアップロードされます。
今はこの url が https://github.com/i6Grja3R/sample_theme になっていると思いますので、
過去に紐づけたと思われているファイルはその時のリモートリポジトリとは無縁になっていると思います。

・今後ファイルを作成していく場合、ディレクトリに設置しているファイルをコピーしてそれを github フォルダにコピー後、コミット＆プッシュするという認識で良いでしょうか？

そうですね。
そんな感じです。

・どこから試してみればよいでしょうか？

その前に回答画面は動作するのでしょうか。
動作しない状態で共通処理をまとめるのは難しいと思います。
共通にした部分は質問画面と回答画面のコードが混ざることになります。
共通にするたびに質問画面と回答画面の動作確認が必要です。
回答画面が動作しない状態でコードをまとめても動くか動かないかわからないのではまとめたことになりません。
それに回答画面のために共通コードを調整すると質問画面が動作しなくなることもあります。

補足

Q.git フォルダのあるフォルダのファイルをコミットすれば、
そのファイルがソース管理の対象となります。
プッシュすることでリモートリポジトリにアップロードされます。

A.解説ありがとうございます、理解出来ました。
.git フォルダにリモートリポジトリの情報が入っているということですね。

Q.その前に回答画面は動作するのでしょうか。
動作しない状態で共通処理をまとめるのは難しいと思います。

A.回答ありがとうございます。
アイコン画像とアップロードファイルが機能しておらず悩んでおります。
それとは別に質問一覧画面のように質問一覧と回答＆返信機能を div で囲って外枠を表示させたいのですが、質問一覧表示コードまでで PHP が切れているためどうすべきか分かりません。
アドバイスお願い致します。

※質問回答画面
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e5%9b%9e%e7%ad%94%e7%94%bb%e9%9d%a2/

※現在のコード
https://github.com/i6Grja3R/sample_theme.git

回答No.11

dell_OK

・他のリポジトリを削除するというのが分からないのですが、ローカルファイルを削除するのでしょうか？

まずは GitHub で以下のリポジトリを削除します。
https://github.com/i6Grja3R/bbs_que_answer.php
https://github.com/i6Grja3R/bbs_quest_input.php
https://github.com/i6Grja3R/bbs_que_answer.html
それぞれの「Setting」の一番下の「Delete this repository」から削除できます。

ローカルにはこれらのリポジトリそれぞれに紐づいたフォルダがありますか。
あるのでしたらそれらのフォルダを削除してください。
ないのでしたらローカルには、
https://github.com/i6Grja3R/sample_theme
に紐づいたフォルダのみだと思いますので削除しなくて大丈夫です。
紐づけに苦労されたようですので、ひとつのフォルダで次々と紐づけ先を変更されたのかなと思います。

ちなみに紐づけに使われた「git remote ～」のコマンドは、私が直接「config」ファイルの URL を変更していただいたのと同じことをしています。
最初はコマンドでお願いしようと思ったのですが、私はコマンドに詳しくなくてエラーになったら面倒だなと思って、直接書き換えていただいた次第です。

github フォルダにリポジトリを作成されたのですね。
質問者さまのローカルでも WordPress が動くように xampp で環境を作られていたと思いますが、そこでコーディングされていたのでしたら、そのテーマフォルダにリポジトリを作るのもよかったと思います。
それはそれで、先日の10000ではありませんが、質問には直接関係のないファイルもいくつか列挙されるので、少し目障りかも知れないですね。
テーマフォルダから github フォルダにコピーしていただいて、コミット＆プッシュしていただくことになり手数をおかけしますが、よろしくお願いします。

ちなみにですが GitHub にリポジトリを用意していただいたことで、そちらの Issue を使って、質問や回答を投稿しあうこともできます。
私はこのまま OKWAVE で続けても構いませんが、同じような問題で困っている人はあまりいないような部分もありますので、こちらに履歴を残さなくてもいいかなと思います。

補足

Q.まずは GitHub で以下のリポジトリを削除します。
https://github.com/i6Grja3R/bbs_que_answer.php
https://github.com/i6Grja3R/bbs_quest_input.php
https://github.com/i6Grja3R/bbs_que_answer.html
それぞれの「Setting」の一番下の「Delete this repository」から削除できます。

A.アドバイスありがとうございます、削除いたしました。

Q.ローカルにはこれらのリポジトリそれぞれに紐づいたフォルダがありますか。
あるのでしたらそれらのフォルダを削除してください。
ないのでしたらローカルには、
https://github.com/i6Grja3R/sample_theme
に紐づいたフォルダのみだと思いますので削除しなくて大丈夫です。
紐づけに苦労されたようですので、ひとつのフォルダで次々と紐づけ先を変更されたのかなと思います。

A.アドバイスありがとうございます、フォルダはないのですがファイルがあります。
紐づけの方法になるのですが、まずローカルにファイルを作成して、リモートリポジトリを Github で作成後にVscode でローカルに作成したファイルを選択後にプッシュを行って紐づけしております。

※ 現在のローカルファイル
https://imgur.com/DJodyU1.png

Q.ちなみに紐づけに使われた「git remote ～」のコマンドは、私が直接「config」ファイルの URL を変更していただいたのと同じことをしています。
最初はコマンドでお願いしようと思ったのですが、私はコマンドに詳しくなくてエラーになったら面倒だなと思って、直接書き換えていただいた次第です。

A.回答ありがとうございますそうだったんですね、勉強になりました。

Q.テーマフォルダから github フォルダにコピーしていただいて、コミット＆プッシュしていただくことになり手数をおかけしますが、よろしくお願いします。

ちなみにですが GitHub にリポジトリを用意していただいたことで、そちらの Issue を使って、質問や回答を投稿しあうこともできます。
私はこのまま OKWAVE で続けても構いませんが、同じような問題で困っている人はあまりいないような部分もありますので、こちらに履歴を残さなくてもいいかなと思います。

A.回答ありがとうございます。
テーマフォルダから github フォルダにコピーするという方法がよく分からないのですが、今後ファイルを作成していく場合、ディレクトリに設置しているファイルをコピーしてそれを github フォルダにコピー後、コミット＆プッシュするという認識で良いでしょうか？

共通にできそうなコードを抜き出してみる際に GitHub の Issue を使って質問を投稿してみたかったのですが、同じコードが多すぎてどこを抜き出してみようか悩んでおります。
どこから試してみればよいでしょうか？

※回答画面と質問画面を比べたもの
https://difff.jp/auupv.html

回答No.10

dell_OK

・フレームワークは一部のみを統一するのではなくボタンやブロックすべて統一される印象があったのですが違うのでしょうか？

フレームワークによると思います。
スタイルを部分ごとに変更することはどのフレームワークでもできそうな気はします。
汎用性のないフレームワークもあるかも知れないので、いろいろなフレームワークを試してみないとわかりません。

ですが、サイトは全体のデザインが統一されるべきであるのが一般的な考え方だと思います。
ページが切り替わると雰囲気が変わるのは見づらい使いづらいと思います。
それに、まるでよそのサイトに飛ばされたのかと思わされるほどデザインが違うページのサイトもあり、危険なページに飛んだのかと思ってセキュリティ的に不安な気持ちにさせられます。
よく見られるページだけ新しくデザインして、あまり見られないページは古いデザインのままだったりというのもあります。
統一されている方が安心して使えるような気がします。

・リポジトリをひとつにする方法を調べてみたのですがどの方法が適切か分からず悩んでおります。

今の段階では変更履歴はないので、ひとつにまとめるようなことはしなくても大丈夫です。

※ bbs_quest_input.html (質問掲示板)
https://github.com/i6Grja3R/bbs_quest_input.html
ここには４つのファイルが全部あるようなので、ここを使っていきましょう。

リポジトリ名がよくないので GitHub 上でリポジトリの Setting から名前を変更してみてください。
質問者さまが使われているテーマフォルダ名「sample_theme」がいいと思います。
変更するとＵＲＬが https://github.com/i6Grja3R/sample_theme になります。

次にローカル側の変更です。
ローカルにあるこのリポジトリの「.git」フォルダに「config」ファイルがあるのでメモ帳で開いて、ＵＲＬの記述があるので変更してください。
url = https://github.com/i6Grja3R/sample_theme

他のリポジトリはそのまま削除してください。

補足

Q.フレームワークによると思います。
スタイルを部分ごとに変更することはどのフレームワークでもできそうな気はします。
汎用性のないフレームワークもあるかも知れないので、いろいろなフレームワークを試してみないとわかりません。

A.回答ありがとうございます、フレームワークによるんですね。

Q.サイトは全体のデザインが統一されるべきであるのが一般的な考え方だと思います。
ページが切り替わると雰囲気が変わるのは見づらい使いづらいと思います。
それに、まるでよそのサイトに飛ばされたのかと思わされるほどデザインが違うページのサイトもあり、危険なページに飛んだのかと思ってセキュリティ的に不安な気持ちにさせられます。

A.回答ありがとうございます。
CSSが制限されるのではないかと不安でフレームワークは使わなかったのですが、考えすぎだったのかもしれません…

Q.リポジトリ名がよくないので GitHub 上でリポジトリの Setting から名前を変更してみてください。
質問者さまが使われているテーマフォルダ名「sample_theme」がいいと思います。
変更するとＵＲＬが https://github.com/i6Grja3R/sample_theme になります。

A.アドバイスありがとうございます変更してみました。

Q.リポジトリ名がよくないので GitHub 上でリポジトリの Setting から名前を変更してみてください。
変更するとＵＲＬが https://github.com/i6Grja3R/sample_theme になります。

ローカルにあるこのリポジトリの「.git」フォルダに「config」ファイルがあるのでメモ帳で開いて、ＵＲＬの記述があるので変更してください。
url = https://github.com/i6Grja3R/sample_theme

他のリポジトリはそのまま削除してください。

A.アドバイスありがとうございます、変更したところ ＵＲＬ はhttps://github.com/i6Grja3R/sample_theme になりました。

他のリポジトリを削除するというのが分からないのですが、ローカルファイルを削除するのでしょうか？

通常リポジトリごとにフォルダを作成して.git ファイルがそれぞれ作成されるのですが、同じ階層にまとめたかったので github というファイル内にローカルファイルをまとめております。

ローカルリポジトリとリモートリポジトリの紐づけ時に fatal: remote origin already exists.とエラーが表示されるため、下記の方法で紐づけしております。

➀ VSCode のターミナルから git remote rm origin というコマンドを入力後に originを削除する

➁ git remote add origin 【リモートリポジトリのURL】を貼り付けてローカルリポジトリとリモートリポジトリの紐づけを完了させる。

※ 現在のローカルファイル
https://imgur.com/DJodyU1.png

回答No.9

dell_OK

・入力画面と回答画面のコンテンツの違いになるのですが、タイトルとスタンプを回答画面では無しにしたいです。
どのようにまとめていけばよいでしょうか？

違いはタイトルとスタンプの有無だけかと思っていましたが、
コンテンツの並びも違うようなので、
コンテンツごとにまとめていくのがよさそうです。
質問者さまが見て、
どこが共通にできそうか、同じようなコードがあるか、
とりあえず、ひとコンテンツ分のコードを抜き出してみてください。
まずはまったく同じところがいいですね。

回答No.8

dell_OK

比較というのは、
質問掲示板と回答掲示板のコード比較のことでしたか。
ローカルで WinMerge で比較するため、
公開方法の影響はありません。
ダウンロードのしやすさで GitHub です。

補足

回答ありがとうございます、ソフトで比較するんですね。
GitHub にさせて頂きます。

回答No.7

dell_OK

・Symfony2 というのがよく分からないのですが、Atom や VSCode のことでしょうか？

Symfony2 はフレームワークと呼ばれるものです。
Atom や VSCode はテキストエディタですね。
フレームワークは WordPress に近いようなものです。
フレームワークをおおざっぱに説明すると、
データベースにアクセスする方法とか、
画面に表示する方法とか、
index.phpを呼び出す方法とか、
プログラムをいちからコーディングしなくてもいいように、
作成がより簡単になるようにしてくれた枠組みのことで、
たくさんの種類のフレームワークがあります。
Symfony2 はそのうちのひとつです。
WordPress は投稿と閲覧に特化したようなところがあるので、
フレームワークとは呼べないかも知れませんが、
ここまで便利な機能が用意されているので、
フレームワークのようなものだと考えることもできます。
「WordPress フレームワーク」で検索すると、
違いや、わかりやすい説明があると思います。

・コードを比較する場合 wandbox と Github どちらのほうが見やすいでしょうか？

それは断然 GitHub の方が見やすいです。
GitHub の画面でも差分を見れますし、
私の環境にフェッチ（ダウンロード）するのも簡単で、
フェッチしてから比較ツールを使って見ることができます。
Wandbox では直接ダウンロードする方法はなさそうで、
毎回テキストをコピー＆ペーストしていました。
それに質問者さまは </script> を変更しないといけないですし、
私はそれを戻さないといけないので、
お互いに手間がかかると思います。

ところで、
GitHub に公開していただいたのを見ると、
リポジトリが４個あるので、
ファイルごとにリポジトリを作られたようですね。
これはこれで面倒なので、
リポジトリをひとつにできますでしょうか。

補足

Q.Symfony2 はフレームワークと呼ばれるものです。
プログラムをいちからコーディングしなくてもいいように、
作成がより簡単になるようにしてくれた枠組みのことで、
たくさんの種類のフレームワークがあります。

A.回答ありがとうございます、フレームワークなんですね。
Bootstrap で作られたサイトを参考にしていたことがあり実装することも考えていたのですが、サイトのデザインに自由度がなくなるのではないかと考えて断念したことがあります。
フレームワークは一部のみを統一するのではなくボタンやブロックすべて統一される印象があったのですが違うのでしょうか？

Q.断然 GitHub の方が見やすいです。
GitHub の画面でも差分を見れますし、
私の環境にフェッチ（ダウンロード）するのも簡単で、
フェッチしてから比較ツールを使って見ることができます。
Wandbox では直接ダウンロードする方法はなさそうで、
毎回テキストをコピー＆ペーストしていました。

A.回答ありがとうございます、Github の方が差分を見る際に慣れていないからか少し見にくく感じたのですが、dell_ok さんがおっしゃられる通りコードをコピー＆ペーストして並べて見比べる方が難しそうですね。
このまま GitHub にコードを載せさせていただきます。

Q.GitHub に公開していただいたのを見ると、
リポジトリが４個あるので、
ファイルごとにリポジトリを作られたようですね。
これはこれで面倒なので、
リポジトリをひとつにできますでしょうか。

A.回答ありがとうございます。
リポジトリをひとつにする方法を調べてみたのですがどの方法が適切か分からず悩んでおります。
下記の2つを見つけたのですが、どちらが良さそうでしょうか？

※ Git で歴史ごと複数のリポジトリを1つのリポジトリにまとめたい
https://tech.natsuneko.blog/entry/2024/09/28/171748

※ 複数のgitリポジトリを一つのリポジトリにまとめる手順
https://qiita.com/hsylife/items/b6af9db4f6e8f287f501

回答No.6

dell_OK

「PHP Intelephense」を試してみました。
PHP、HTML、JavaScriptが混在していても整形してくれました。
例えば、以下のコードを拡張子 .php のファイルで整形してみてください。
－－－－
<?php
$a = 0;
if (true) {
$a = 1;
}
?>
<html>
<div>
<p>あいうえお</p>
</div>
<script>
function a() {
let a = "1";
}
</script>
<?php echo $a ?>
</html>
－－－－

整形できるとこうなります。
－－－－
<?php
$a = 0;
if (true) {
$a = 1;
}
?>
<html>
<div>
<p>あいうえお</p>
</div>
<script>
function a() {
let a = "1";
}
</script>
<?php echo $a ?>

</html>
－－－－

上記のコードが整形できた場合は、
質問者さまが整形を試された PHP のコードにエラーがあって整形されないことが考えられますので、
VSCode のメニューバーの「表示」「問題」を開いてみて、エラーがないか確認してみてください。
その際に「Undefined function」は無視してください。
この未定義関数エラーがあっても整形はされるようです。
整形されなくなるエラーとしては以下のようなものがあるようです。
「Unexpected '}'」
　} の数が合ってない
「Unexpected 'VariableName'. Expected ';'.」
　全角スペースがまぎれていて変数や関数や命令が解釈されていない

上記のコードでも整形できなかった場合は、
設定ファイルを一旦クリアしてみましょう。
VSCode を終了しておいて、
C:\Users\ユーザー名\AppData\Roaming\Code\User\settings.json
ファイル名を xsettings.json に変更します。
※ユーザー名は質問者さまのパソコンの使用中のユーザー名に置き換えてください。
VSCode を開いて整形してみてください。
整形できれば設定のどこかに不具合があることになりますので、
設定をひとつずつ見て確認する必要がありそうです。
VSCode を終了して、
変更したファイル名を元に戻しておいてください。
設定クリアでも整形できない場合は、
他の拡張機能が影響しているかも知れないので、
一度すべての拡張機能を無効にして試してみてください。
それからひとつずつ有効にして確認してみてください。

ちなみに私は「php cs fixer」を使って整形しています。
この名前で探すとたくさん出てきます。
どれも同じようなものだとは思いますが、
私が使っているのは作者「junstyle」のものです。
これはこれですんなり動作するとも限りませんので、
いまのところはおすすめもしないでおきます。

PHP 整形について補足です。
PHP をやられている人たちがそれぞれで決めたコーディング規約と言うものがあります。
https://qiita.com/hshimo/items/04be1f432240c58300f4
これらにならって整形してくれます。
「 PSR-2（日本語） に従っておけば、間違いない!」と言われるのもうなずけるように、
ドキュメントをちらっと見る限りでは、
「php cs fixer」は「@PSR12」
「PHP Intelephense」は「PSR-12」とあるので、
既定ではこのような規約に基づいて整形しているようです。
https://zenn.dev/aki_artisan/articles/psr12-translation-ja
私にはこの「PSR」の規約になじめなくて、他の規約をいろいろと試して、
「Symfony2」というフレームワークの規約が気に入ったので、
それを設定して使っています。
どの規約にしても一長一短はあると思いますので、
これが正解だと言うものではなく、好みでしょうね。

ところで、VSCodeでの整形を試みてくださって、
なんだかうれしい気がしています。
私の都合で、PHPファイル内に、
HTML、JavaScript、CSSを記述していただいたりもしましたが、
本来はそれぞれのファイルに分けるのが、整形の上ではいいと思っています。
HTMLは仕方がないところもありますし、
どの整形機能を使っても対応していると思いますので大丈夫ですが、
JavaScriptとCSSに関してはそれぞれのファイルに分けた方がいいのかもしれないですね。
もし混在整形がうまくいかない場合は、
JavaScriptとCSSの部分をなくして試してみてください。
それで整形できれば、別ファイルにして解決してもいいと思います。
分離と呼び出しには気をつけることがまた新たに発生しそうですが、
それはそれで考えていければいいと思います。

補足

Q.「PHP Intelephense」を試してみました。
PHP、HTML、JavaScriptが混在していても整形してくれました。

A.回答ありがとうございます。
調べたところエラーが出ておりコメントアウトに失敗していたのが原因でした。

<!-- ここから回答に返信する機能 -->

Q.ちなみに私は「php cs fixer」を使って整形しています。
私にはこの「PSR」の規約になじめなくて、他の規約をいろいろと試して、
「Symfony2」というフレームワークの規約が気に入ったので、
それを設定して使っています。

A.回答ありがとうございます、問題なく整形できているのでこのまま進めてみます。
Symfony2 というのがよく分からないのですが、Atom や VSCode のことでしょうか？
調べても記事があまり出てこずよく分かりませんでした…

Q.私の都合で、PHPファイル内に、
HTML、JavaScript、CSSを記述していただいたりもしましたが、
本来はそれぞれのファイルに分けるのが、整形の上ではいいと思っています。

A.アドバイスありがとうございます、ファイルを分けても良さそうですね。
____________________________________________________________

回答画面の回答機能について質問画面のコードとまとめられるように出来る限り維持したまま考えてみました。
質問掲示板との比較のために HTML もそれぞれ書いております。

入力画面と回答画面のコンテンツの違いになるのですが、タイトルとスタンプを回答画面では無しにしたいです。
どのようにまとめていけばよいでしょうか？アドバイスお願い致します。

dell_ok さんにコードをお伝えする際にどちらを選択すべきか迷っているのですが、コードを比較する場合 wandbox と Github どちらのほうが見やすいでしょうか？

※回答画面デザイン
https://marvelapp.com/whiteboard/urN35BK2SNIqAd9D5XwO

※ bbs_quest_input.html (質問掲示板)
https://github.com/i6Grja3R/bbs_quest_input.html.git

※ bbs_que_answer.html (回答掲示板)
https://github.com/i6Grja3R/bbs_que_answer.html.git

※ bbs_que_answer.php (回答掲示板)
https://github.com/i6Grja3R/bbs_que_answer.php.git

※ bbs_quest_input.php (質問掲示板)
https://github.com/i6Grja3R/bbs_quest_input.php.git

回答No.5

dell_OK

・質問画面と回答画面で共通の処理を書くことになるのですが、クラス名を変更したい場合処理をまとめる方が良いのでしょうか？

まとめられるのであればまとめた方がいい場合はありますが、まとめない方がいい場合もあったりします。
まとめられるかどうか、まとめるかどうか、はそれぞれができてから、それぞれのコードを見比べて判断するといいと思います。
共通ではない部分を変数や引数や分岐でうまく処理できるかどうかなどを判断してみてください。

補足

回答ありがとうございます。
Vscodeで自動整形が出来ず悩んでいるのですが、dell_ok さんは使われてますでしょうか？

VSCode の公式によると JavaScript, TypeScript, JSON, HTML はデフォルトのフォーマッターが入っているということで、PHPをフォーマットするために PHP Intelephense をインストールしたのですが、HTML と PHP と JavaScript が混在した場合に自動整形が実行されず困っております。

参考サイトのようにしてみたのですが変化がなく原因が分からない状態です…

※HTMLとPHPコードをどちらもフォーマットするための設定
https://snowantenna.com/vscode-format/

回答No.4

dell_OK

・※VSCODE のソース管理で変更数が10000と出てしまう。

こちらのＱ＆Ａは未解決のようですね。
スクリーンショットの右下のメッセージを見ると、
/Users/koyasujun　となっているので、
開いているフォルダおよびリポジトリを作成したフォルダの場所を間違えられているように見えます。

質問者さまの操作にもなにかしら手違いがあって、
１００００になっているように思います。
その前の参考サイトの手順では１００００になっていなかったのでしょうし。

・GitHub をプロ版にする必要がありそう

それは　GitHub Pages　というプッシュしたらデプロイしてくれるもののことのようですね。
デプロイは自分でアップロードすればいいだけのことなので、
無料の　GitHub　でソースコードのやりとりをすることには問題ありません。

とは言え。
Git　がどんなに便利だったとしても、手間をかけて嫌気がさしてくるとよくありません。
たくさんのファイルをやりとりするようになった場合に改めて試してみるのもいいと思います。
いまのところ、質問者さまからいただくファイルは１つか２つなので　wandbox　で続けてくださってかまいません。

お礼

こちらが最新の質問になります。
質問画面と回答画面で共通の処理を書くことになるのですが、クラス名を変更したい場合処理をまとめる方が良いのでしょうか？
回答画面ではタイトルとスタンプ以外すべて表示して同じような形になるため functions.php でまとめることも可能ではないかと考えております…

※回答画面デザイン
https://marvelapp.com/whiteboard/urN35BK2SNIqAd9D5XwO

補足

回答ありがとうございます、時間がかかってしまい申し訳ありませんでした。
下記のような手順で行ったところ VSCode と GitHub の連携をすることが出来ました。

質問、回答、返信テーブルの自己結合(再帰結合)のテーブルがどのような感じになるのか考えてみます。

※ アドバイス頂いた質問
https://teratail.com/questions/4j78wjhsmt41ka#reply-lrik4awjqjd14m

Visual Studio Code と GitHub 連携方法

➀ 公式ページより通常のインストール版をダウンロードする（zip版だと VSCode で開くをコンテキストメニューに追加する必要があるため）

➁ GitHub で Create Repository ボタンをクリックしてリポジトリを作成する。

➂ リモートリポジトリの URL をコピーして、VSCode 上部の「ターミナル」→「新しいターミナル」でローカルリポジトリに移動してから、 git remote add origin 【リモートリポジトリのURL】を貼り付けてローカルリポジトリとリモートリポジトリの紐づけを完了させる。

※ ターミナルでローカルリポジトリに移動
cd \Users\apple\Downloads\github

例　git remote add origin https://github.com/i6Grja3R/sample.git

➃ VSCode で作成したファイルを開いて画面左側のソース管理をクリックして、画面左側に表示されたファイル名にマウスポインタを合わせ、新しく表示された「＋」ボタンをクリックする。

※ 注意点
ローカルリポジトリ内で新しく変更されたファイル数が10000件表示されるが、.git ファイルが一番上の階層に入っていることがあるため削除する。
（.git は手で作るものではないので、レポジトリを作成するたびに.gitが作られる）

※ 参考サイト
https://qiita.com/sakuma-s-Qiita/items/bdbd13851e9d9af6f61f

⑤ 「メッセージ欄」へ変更履歴となるコメント（任意）を入力し、「コミット」アイコンをクリックする。

➅ ローカルリポジトリとリモートリポジトリの紐づけが完了したら、VSCode 管理画面で対象のリポジトリを開いた状態で、画面左上の「…」→「プッシュ」をクリックする。

⑦ "main"ブランチにリモートブランチはありません。このブランチを公開しますか？ というメッセージが表示されるので「OK」をクリックする。

⑧ プッシュした際に Microsoft Edge がデフォルトで開かれるが、ブラウザを Chrome にする場合、VSCode の拡張機能で Live Server をインストールする。

⑨ 歯車アイコンを押して設定をクリックし、Live Server > Settings: Custom Browser のプルダウンメニューから「Chrome」を選択する。

回答No.3

dell_OK

「①ローカルリポジトリを作成する」でフォルダを作成するようにありますが、新しいフォルダを作成して、VSCodeでそのフォルダを開いていますか。
ファイルが１００００個あると言うことは、作成した新しいフォルダではないところを開いているような気がします。

補足

回答ありがとうございます、チェックしてみたのですが変わりませんでした。
原因について調べてみたところ気になる記事を見つけたのですが、GitHub Pages サイトの公開元を設定するために GitHub をプロ版にする必要がありそうで、そこまでするのであれば wandbox で充分な気がしております…

※VSCODE のソース管理で変更数が10000と出てしまう。
https://terakoya.sejuku.net/question/detail/36993

※GitHub Pages サイトの公開元を設定する（ [ソースからのデプロイ] を選択するために Pro 版が必要）
https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site