• ベストアンサー

WordPressの質問(q10297398)の続

another_que_answer.php 393行目の divUserIcon.appendChild(usericonImg); の usericonImg はどのように定義すべきでしょうか? 質問画面ではアップロードファイルの後にアイコン画像のコードが書かれており2つの処理をまとめておくことが出来たのですが、回答画面では順番が逆になっているため悩んでおります。 先に var usericonImg; のみ宣言してしてみたのですがエラーが表示されておりどのように書けばよいかアドバイスお願い致します。 ※エラー文 TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at 質問回答画面/:462:21 ※最新コード 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/

質問者が選んだベストアンサー

  • ベストアンサー
  • dell_OK
  • ベストアンサー率13% (776/5747)
回答No.48

こんな感じでしょうか。 ---- /* アップロードファイルサイズ制限事項要素作成 */ const divFilesizeRestrictionArea = document.createElement("div"); // div (子)を生成 divFilesizeRestrictionArea.classList.add("filesize-restriction-area"); // classの追加 divFilesizeRestrictionArea.textContent = "動画・画像をアップロード(Upload video・image)"; const spanFilesizeRestrictionArea = document.createElement("span"); spanFilesizeRestrictionArea.classList.add("required"); spanFilesizeRestrictionArea.textContent = "※ファイルサイズ15MB以内、JPG/GIF/PNG/MP4"; divFilesizeRestrictionArea.appendChild(spanFilesizeRestrictionArea); ----

php_learn
質問者

お礼

回答が遅くなり申し訳ありません。 質問画面の確認画面のCSS をチェックしているのですが、確認画面の title-partial-parts にのみ margin-top: 25px; を適応させる方法が分かりません。 質問画面は div id="input_area" 回答画面は div id="confirm_area" を親クラスとして CSS を分けたい場合、どのように書けばよいか分かりますでしょうか? 下記コードで試してみたのですが効かず悩んでおります… div#confirm_area.text-partial-parts { margin - top: 25px; } ※ 質問画面 http://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

php_learn
質問者

補足

回答ありがとうございます、textContent で表示して ※ファイルサイズ15MB以内、JPG/GIF/PNG/MP4 は span で別途クラスを作る形になるんですね勉強になりました。 css を作成して画像を並べてみます。 ※ 最新コード https://github.com/i6Grja3R/sample_theme.git

その他の回答 (47)

  • dell_OK
  • ベストアンサー率13% (776/5747)
回答No.47

・一番先にしてもアップロードファイルより後になってしまいます。 確認画面の一番外側の配置はこの処理ですので、 この順番を変えてみてください。 ---- confirm_area.appendChild(image_area); confirm_area.appendChild(comment_area); ----

php_learn
質問者

お礼

こちらが最新の回答になります。 質問の期限が切れてしまっていたことに気が付かず申し訳ありません、下記のページから引き続きアドバイスお願い致します。 https://okwave.jp/qa/q10315144.html

php_learn
質問者

補足

回答ありがとうござます、修正したところアイコン画像を先に表示できました。

  • dell_OK
  • ベストアンサー率13% (776/5747)
回答No.46

・アップロードファイルサイズ制限事項を確認画面でも表示したい場合どうすれば良いでしょうか…? そうですね。 他と同じように要素を生成して confirm_area に追加するといいと思います。

php_learn
質問者

補足

回答ありがとうございます。 スタンプ画像を参考にコードを書こうと思ったのですが、セッションを functions.php にまとめる必要がないためどのように表示させればよいか分からず悩んでおります。 アドバイスお願い致します。 ※ 最新コード https://github.com/i6Grja3R/sample_theme.git

  • dell_OK
  • ベストアンサー率13% (776/5747)
回答No.45

関数式を代入するようにしてみましょう。 var はバグのもとになり。 ---- <script> var func = function () { console.log("1"); }; var func = function () { console.log("2"); }; func(); </script> ---- let はエラーになるけど、 ---- <script> let func = function () { console.log("1"); }; let func = function () { console.log("2"); }; func(); </script> ---- エラーにならないようにも書けてバグのもとになる。 ---- <script> let func = function () { console.log("1"); }; func = function () { console.log("2"); }; func(); </script> ---- そこで const になります。 まずは値を入れてみます。 ---- <script> const v = 1; const v = 2; console.log(v); </script> ---- 実行すると「すでに宣言されている」エラーになります。 let の時のように let をなくしてみましょう。 ---- <script> const v = 1; v = 2; console.log(v); </script> ---- 「定数変数へ代入しています」エラーになります。 const で宣言したものは再代入もできません。 関数式にしてもエラーになります。 ---- <script> const func = function () { console.log("1"); }; func = function () { console.log("2"); }; func(); </script> ---- 外部ファイルスクリプトになっても同様にエラーになります。 ----response.js const func = function () { console.log("1"); }; ---- ----bbs_quest_input.php <script> func = function () { console.log("2"); }; func(); </script> ---- response.js に引っ越した関数が、 bbs_quest_input.php や bbs_que_answer.php に残ったままだとエラーになるので、 きちんと削除しておかないといけなくなります。 これで、 安全性を高めるために const で変数宣言することで、 重複していればエラーにしたい、 と言う私の理由がわかっていただけるでしょうか。

php_learn
質問者

補足

A.解説ありがとうございます、理解出来ました。 var は再宣言も再代入も可能で、let は再代入が可能なので、どちらも不可能な const を使った方がエラーを確認する上では良いということですね。 回答画面の確認画面の表示コードについてお聞きしたいのですが、bbs_que_answer.php でアイコン画像要素配置(divUserArea.appendChild(divUserIcon);)を一番先にしてもアップロードファイルより後になってしまいます。 下記のように入れ替えたい場合どうすればよいでしょうか? 1、アイコン画像 2、名前 3、回答 4、ファイルアップロード 5、アップロードファイルサイズ制限事項 6、ボタン もう1点お聞きしたいのですが、アップロードファイルサイズ制限事項を確認画面でも表示したい場合どうすれば良いでしょうか…? 動画・画像をアップロード(Upload video・image)<span class="required">※ファイルサイズ15MB以内、JPG/GIF/PNG/MP4</span>

  • dell_OK
  • ベストアンサー率13% (776/5747)
回答No.44

・何故関数を変数を宣言して、関数を代入する方法にされたのでしょうか?理由が分からず教えて頂きたいです。 理由が分からない時は実装前に聞いてくださいね。 納得できなければ実装しなくてもよくなります。 理由は回答No.39の通りで「すでに宣言されている」エラーを発生させるためです。 ではなぜこのエラーを発生させる必要があるのかについて説明します。 私なりの JavaScript 言語の解釈なので正しくはないかも知れませんので、 質問者さまに体験していただき自分なりに解釈していただければよろしいです。 このコードを実行してコンソールに何が表示されるか確認してください。 ---- <script> function func() { console.log("1"); } function func() { console.log("2"); } func(); </script> ---- 2 が表示されると思います。 ひとつめの関数宣言 func() は 1 を表示する処理で、 ふたつめの関数宣言 func() は 2 を表示する処理です。 疑問にしていただきたいのは関数名が同じことです。 この関数を実行した時にどちらの関数が実行されるのか。 JavaScript は迷わないのかと言う疑問です。 表示結果が 2 だったのでふたつめの関数が実行されたことになります。 JavaScript は迷わず後者を実行しました。 ではひとつめの関数はどうなったのか、と言うと、 ふたつめの関数が同じ名前で宣言したので上書きされたなくなった、ようです。 どのような方法をもちいてもひとつめを実行することはできないと思います。 このことから、 どうやら JavaScript は関数宣言において、 すでに宣言された名前の関数があった場合は、 それを上書きしてしまう、ことと、 そのためエラーにならない、ことがわかりました。 これは外部ファイルのスクリプトがあった場合も同じ現象になります。 いまだとこんな感じの場合ですね。 これは試さなくてもいいです。 ----response.js function func() { console.log("1"); } ---- ----bbs_quest_input.php <script> function func() { console.log("2"); } func(); </script> ---- この状態で response.js のコードを修正したとします。 例えば 3 を表示したくなって 1 を 3 に変えても、 表示されるのは 2 です。 おかしいなと、いくら response.js を修正しても変わりません。 これまでは、このおかげで、 質問者さまが質問画面と回答画面から共通化で関数宣言を移動させても、 それぞれを修正するタイミングがずれていても、 重複関数宣言エラーのようなものにはならず、それなりに動作していました。 それは質問画面と回答画面に残ったままの関数宣言が実行されていたからです。 共通化の関数のため同じ処理をしているので、 実際にどちらが実行されていたかというのはわからなかったと思います。 次は、同じようなことを変数宣言で確認してみましょう。 こちらを実行してみてください。 ---- <script> var v = 1; var v = 2; console.log(v); </script> ---- 2 が表示されたと思います。 エラーにはなりません。 これもふたつめの変数宣言が優先されたようです。 var 変数宣言と function 関数宣言は上書きされると言う意味では似ていますね。 var は再宣言も再代入もできる便利かつ危険なものです。 なぜ危険かというと、 これが「1 を表示したいプログラム」だったとします。 なので最初に 1 を代入しているのに、 2 が表示されるというバグになるからです。 上記のコードでは何を言っているのかわからないかも知れませんね。 例えば最初はこんなコードでした。 ---- <script> /* 表示したい 1 を代入 */ var v = 1; /* ここで 1 を表示したい */ console.log(v); </script> ---- ところがいろいろ修正があって途中に他の処理を追加しました。 どこで宣言しているのか、どこで代入しているのか、 どこで表示しているのか、わかりづらいコードになったとします。 ---- <script> /* 表示したい 1 を代入 */ var v = 1; /* 他の処理が100行ぐらいある */ /* 変数 v を 2 で使いたいのここで宣言と代入 */ var v = 2; /* 他の処理が100行ぐらいある */ /* ここで 1 を表示したい */ console.log(v); </script> ---- これで 1 を表示したいのに 2 が表示されるバグプログラムになります。 ちなみに var は省略できます。 ---- <script> v = 1; v = 2; console.log(v); </script> ---- JavaScript はこのように変数を宣言しなくても、 いきなり変数に代入できる言語です。 これは言語としてはとても便利なものですが、 先に話したようなバグのもとになりやすい言語だとも言えます。 JavaScript の歴史については詳しくありませんが、 そのような問題を解決するために、 var let const と言った変数宣言が用意されたのではないでしょうか。 話しを戻して、 次は let で宣言してみます。 ---- <script> let v = 1; let v = 2; console.log(v); </script> ---- 実行するとエラーになります。 Uncaught SyntaxError: Identifier 'v' has already been declared 「すでに宣言されている」エラーですね。 実行しなくても VS Code が v に赤い下線を引いてエラーを表示してくれると思います。 でも、こうするとエラーは解消されます。 ---- <script> let v = 1; v = 2; console.log(v); </script> ---- これは宣言は1回で、代入を2回書いています。 便利とか宣言とか代入とか言っていますが、 理解を深めるために説明しておきます。 宣言と代入の構文としては以下のような別々のものです。 ---- /* 宣言 */ let v; /* 代入 */ v = 1; ---- 古いコンパイル言語には、このように宣言と代入を別々に書く必要のものがあります。 let v = 1; のように1行で宣言と代入を書けるのは便利なのことなのです。 JavaScript から始めたと言う人には当たり前のことですが、古い人にとっては便利だったりします。 それで構文的に分けるとこうなります。 ---- <script> let v; v = 1; v = 2; console.log(v); </script> ---- let は宣言は1回しかできず、代入は何回でもできます。 この宣言が1回しかできないことを利用して、 先ほどのバグプログラムを let にしてみます。 ---- <script> /* 表示したい 1 を代入 */ let v = 1; /* 他の処理が100行ぐらいある */ /* 変数 v を 2 で使いたいのここで宣言と代入 */ let v = 2; /* 他の処理が100行ぐらいある */ /* ここで 1 を表示したい */ console.log(v); </script> ---- 「変数 v を 2 で使いたい」と思って宣言すると、 それは「すでに宣言されている」エラーで、 「何か間違っていないですか」、 「他の変数名にした方がよくないですか」、 と教えてくれるわけです。 でも、2回目の代入をこう書くことができます。 ---- <script> /* 表示したい 1 を代入 */ let v = 1; /* 他の処理が100行ぐらいある */ /* 変数 v を 2 で使いたいのここで代入 */ v = 2; /* 他の処理が100行ぐらいある */ /* ここで 1 を表示したい */ console.log(v); </script> ---- すると、やっぱりバグになります。 これは変数への代入なので、 一概に let のせいとは言えませんが、 let もまだ安全とも言えません。 ここまでで分かったことは、 var や let は再宣言や再代入ができてしまう言うことです。 続く。

php_learn
質問者

補足

A.解説ありがとうございます、実装前に聞くように致します。 重複関数宣言エラーを表示させる意図があったんですね、勉強になりました。

  • dell_OK
  • ベストアンサー率13% (776/5747)
回答No.43

私の説明がよくなくてすみません。 回答No.42 は response.js の話しなので、 update61 で bbs_que_answer.php に追加された const はすべて削除して戻してください。 例えばこちらの関数宣言ですが、 function create_button_parts(formType) { 変数宣言の関数式に変更するとこうなります。 const create_button_parts = function (formType) {

php_learn
質問者

補足

修正ありがとうございます、dell_ok さんが何故関数を変数を宣言して、関数を代入する方法にされたのでしょうか?理由が分からず教えて頂きたいです。 ※ 最新コード https://github.com/i6Grja3R/sample_theme.git

  • dell_OK
  • ベストアンサー率13% (776/5747)
回答No.42

・関数定義をすべて const で宣言するように変更してみたところ function を const に変更されただけのようですね。 set_attach_event の宣言を参考に変更してみてください。 ---- const set_attach_event = function (fileAreaSelector, usericonIndex) { ---- これを関数宣言するとこうです。 ---- function set_attach_event(fileAreaSelector, usericonIndex) { ---- これは単純に書き方が違うのではありません。 前者は変数 set_attach_event を宣言していて、関数を代入しています。 後者は関数 set_attach_event() を宣言しています。 実は種類の違うものを宣言しているのです。

php_learn
質問者

補足

Q.前者は変数 set_attach_event を宣言していて、関数を代入しています。 後者は関数 set_attach_event() を宣言しています。 実は種類の違うものを宣言しているのです。 A.解説ありがとうございます、bbs_que_answer.php で引数を使い Response.js で変数宣言をすると後から見直した際に分かりにくいという事でしょうか? 後者のように関数宣言する場合 Response.js でまとめたコードを bbs_que_answer.php に表示する際は const が必要になるのでしょうか? bbs_que_answer.php で要素生成処理、要素配置処理となるように処理をまとめてみました。 Uncaught SyntaxError: Missing initializer in const declaration というエラーが発生しており、dell_ok さんにアドバイス頂きたいです。 ※ 最新コード https://github.com/i6Grja3R/sample_theme.git

  • dell_OK
  • ベストアンサー率13% (776/5747)
回答No.41

・.appendChild(); のみ羅列した際に HTML クラスが分かりにくくなるという事はありますでしょうか? どうでしょうね。 コードの比較以外にも、HTMLの構成は分かりやすくなると思っています。 クラスについてはなんとも言えません。

php_learn
質問者

補足

回答ありがとうございます。 回答画面のみ名前とコメントを入れ替えて表示した場合、要素生成処理はそのまま要素配置処理のみ変更することになり分かりずらくなりそうなので修正してみます。

  • dell_OK
  • ベストアンサー率13% (776/5747)
回答No.40

・順番を下記のように変更してみたところエラーが発生しており ここですね。 ---- /* 名前要素作成 */ const divNamePartialParts = create_name_parts("answer-name-area", name_value, usericonImg); ---- 質問者さまがお気づきのように usericonImg はファイルアップロード関連で宣言や代入されています。 そのためファイルアップロードの生成は名前生成に干渉しているので順番が重要になってきます。 生成においては「アップロード-名前」の順である必要がありますのでもとに戻してください。 「生成した要素を同じ関数に追加する場合、配置順を変更しても基本的には問題ないという認識で良いでしょうか?」 この質問の意図を私が理解せずに安易な回答をしたのがよくなかったですね。 要素の生成を先にまとめて書く話しをしたので、 それをされるのでしたらその他のコードとの関係もあるので慎重にお願いしたつもりでした。 私としては、 要素生成処理(順番は要素の関係次第) 要素配置処理(順番はデザイン次第) となるように処理をまとめた方が質問画面と回答画面のコードを見比べやすいので説明したのですが、 混乱させてしまったようですみません。

php_learn
質問者

補足

解説ありがとうございます。 要素生成処理、要素配置処理となるように処理をまとめた方が質問画面と回答画面のコードを見比べやすくなるということで理解出来ました。 1つ懸念点があるのですが、.appendChild(); のみ羅列した際に HTML クラスが分かりにくくなるという事はありますでしょうか?

  • dell_OK
  • ベストアンサー率13% (776/5747)
回答No.39

・Uncaught SyntaxError: Identifier 'set_attach_event' has already been declared というエラーが回答画面で表示されたので、response.js の const を削除致しました。 回答画面に set_attach_event() の宣言が残っているため「すでに宣言されている」エラーになっているので回答画面のコードを削除してください。 response.js の const は戻しておいてください。 このようなことを考えると response.js に引っ越した関数定義はすべて const で宣言する方がいいような気もします。

php_learn
質問者

補足

Q.回答画面に set_attach_event() の宣言が残っているため「すでに宣言されている」エラーになっているので回答画面のコードを削除してください。 response.js の const は戻しておいてください。 このようなことを考えると response.js に引っ越した関数定義はすべて const で宣言する方がいいような気もします。 A.回答ありがとうございます、確認不足でした申し訳ありません。 関数定義をすべて const で宣言するように変更してみたところ、下記のようなエラーが発生しております。 変数名や関数名が定義されていないと言われているようなのですが… どうすれば良いでしょうか? ※ エラー文 ➀ Uncaught SyntaxError: Missing initializer in const declaration ➁ Uncaught ReferenceError: set_attach_event is not defined at init(質問回答画面 /: 221: 9) ※ 最新コード https://github.com/i6Grja3R/sample_theme.git

  • dell_OK
  • ベストアンサー率13% (776/5747)
回答No.38

・HTML のクラスの見直しを行います。 それはそれとして。 回答画面の divUserArea を divImagePartial にすると、 質問画面と同じような並びになると思います。 ・生成した要素を同じ関数に追加する場合、配置順を変更しても基本的には問題ないという認識で良いでしょうか? そうですね。 たぶん、その認識でいいと思います。 ・if (formType == 1) と if (i == usericonIndex) で前述と同じ引数を使用しているのですが、問題ないでしょうか? そうですね。 同じ引数名を使用するのは問題ありません。 でも、少し難しいまとめ方をされたようですね。 共通化する際には非共通の処理のための分岐処理や専用処理はなるべくさけるようにしましょう。 引数の値だけで対応できるのであればなるべく引数に任せると言うことです。 なぜなら非共通の対象が増えた時に共通関数の分岐処理などを修正する必要がでてくるからです。 現在は質問画面と回答画面だけですが、 例えば、第3の画面として非共通なものが増えたとします。 ---- if (formType == 1) { //質問画面 document.querySelectorAll('.image-camera-icon,.usericon-uploads'); } else if (formType == 2) { //回答画面 const fileArea = document.querySelectorAll('.uploadfile-camera-icon,.user-icon'); } ---- const fileArea = の有無が違う問題もありますが、今はなかったことにして。 分岐処理を増やさなくてはいけなくなります。 ---- } else if (formType == 3) { //第3画面 document.querySelectorAll('.dai3-camera-icon,.dai3-icon'); ---- 今回の場合はそこまでしなくても対応できるので、 改めて共通化の手順を説明してみます。 まず、コードを比較します。 比較した結果、違いは2行です。 ----質問画面 const fileArea = document.querySelectorAll('.image-camera-icon,.usericon-uploads'); if (i == 3) { ----回答画面 const fileArea = document.querySelectorAll('.uploadfile-camera-icon,.user-icon'); if (i == 0) { ---- 違う部分だけを見ると、これだけです。 ----質問画面 '.image-camera-icon,.usericon-uploads' 3 ----回答画面 '.uploadfile-camera-icon,.user-icon' 0 ---- 違いは値のみで、処理(命令や構文)は同じです。 処理が違う場合は分岐処理が必要になってくるかも知れませんが、 値のみが違う場合は引数にするだけです。 ----共通化 const fileArea = document.querySelectorAll(引数1); if (i == 引数2) { ---- これで元のコードと同じになります。 引数1は fileAreaSelector 、 引数2は usericonIndex 、の名前にしましょうかね。 引っ越しで関数名を choose_file_management に変えられたみたいですが、 元の関数名で、なおかつ、const 定義のままでも大丈夫です。 ----response.js const set_attach_event = function (fileAreaSelector, usericonIndex) { /* カメラ画像をファイルアップロード時に非表示にする */ /* 省略 */ /* カメラ画像をファイルアップロード時に非表示にする */ const attach = document.querySelectorAll('.attach'); const clear = document.querySelectorAll('.attachclear'); const viewer = document.querySelectorAll('.viewer'); const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像 const fileArea = document.querySelectorAll(fileAreaSelector); const set_attach_image = function (i) { //HTML要素の中身を変更するときに使われるプロパティ if (i == usericonIndex) { maxsize = 5; height = "85px"; width = "85px"; ---- 共通関数は固定値のところを引数に変えるだけでよくなりました。 次は呼ぶ側です。 ----変更前 set_attach_event(); ----質問画面 変更後 set_attach_event('.image-camera-icon,.usericon-uploads', 3); ----回答画面 変更後 set_attach_event('.uploadfile-camera-icon,.user-icon', 0); ---- 元のコードにあった固定値を引数として渡します。 説明はわかりづらいかもしれませんが、 コードの差分を見ていただくと難しいことはしていないと思います。 これで第3画面が増えたとしても、 呼ぶ側の引数値を調整するだけなので、 共通関数まで変更しなくても対応しやすくなります。

php_learn
質問者

補足

Q.それはそれとして。 回答画面の divUserArea を divImagePartial にすると、 質問画面と同じような並びになると思います。 A.回答ありがとうございます。SEO を考えて回答画面の HTML クラスの見直しを行うという意味だったのですが、説明が上手くできず申し訳ありません。 Q.生成した要素を同じ関数に追加する場合、配置順を変更しても基本的には問題ないという認識で良いでしょうか? A.回答ありがとうございます。順番を下記のように変更してみたところエラーが発生しておりそのコードの修正方法について dell_ok さんにアドバイス頂きたいです。 エラー内容を見ると usericonImg が名前のところで定義されておらず後文のファイルアップロードで関数宣言されているという事だと思い、const usericonImg = document.createElement("img"); を移動することも考えたのですが、名前の HTML クラスに img を配置するのは不自然なので、div に変更を考えております。 img クラスをファイルアップロード要素に配置したいだけなので、response.js で if 構文を使い分岐させる必要はないと判断したのですが、どのような方法が良いと思われますでしょうか? ※ 質問画面 ファイルアップロード→回答→タイトル→スタンプ→アイコン画像→名前→ボタン ※ 回答画面 アイコン画像→名前→回答→ファイルアップロード→アップロードファイルサイズ制限事項→ボタン ※ エラー文 ReferenceError: Cannot access 'usericonImg' before initialization at 質問回答画面/:413:95 ※ 修正コード /* 名前要素作成(回答画面) */ const usericonImg = document.createElement("div"); const divNamePartialParts = create_name_parts("answer-name-area", name_value, usericonImg); comment_area.appendChild(divNamePartialParts); // comment_area (親要素) の末尾に div を追加 /* ファイルアップロード要素作成(回答画面) */ // const usericonImg = document.createElement("img"); const divUserArea = document.createElement("img"); const divImagePartial = create_image_parts("uploadfile-area", 0, usericonImg); const image_area = document.createElement("div"); image_area.appendChild(divImagePartial); /* 名前要素作成(質問画面) */ const divNamePartialParts = create_name_parts("name-partial-parts", name_value, usericonImg); comment_area.appendChild(divNamePartialParts); // comment_area (親要素) の末尾に div を追加 /* ファイルアップロード要素作成(質問画面) */ const usericonImg = document.createElement("img"); const divImagePartial = create_image_parts("image-partial", 3, usericonImg); const image_area = document.createElement("div"); image_area.appendChild(divImagePartial); Q.共通化する際には非共通の処理のための分岐処理や専用処理はなるべくさけるようにしましょう。 引数の値だけで対応できるのであればなるべく引数に任せると言うことです。 なぜなら非共通の対象が増えた時に共通関数の分岐処理などを修正する必要がでてくるからです。 A.アドバイスありがとうございます、関数が複数の場合でも同時に引数に出来るんですね勉強になりました。 非共通の対象が増えた時に共通関数の分岐処理を追加する必要があるという事を聞くと、それぞれのファイルで完結させた方が良さそうです。 Q.違いは値のみで、処理(命令や構文)は同じです。 処理が違う場合は分岐処理が必要になってくるかも知れませんが、 値のみが違う場合は引数にするだけです。 ----共通化 const fileArea = document.querySelectorAll(引数1); if (i == 引数2) { ---- これで元のコードと同じになります。 A.解説ありがとうございます。 処理が違う場合は分岐処理が必要な可能性もあるが、値のみが違う場合は引数にするだけと覚えておきます。 Uncaught SyntaxError: Identifier 'set_attach_event' has already been declared というエラーが回答画面で表示されたので、response.js の const を削除致しました。 ※ 最新コード https://github.com/i6Grja3R/sample_theme.git

関連するQ&A