Javascript で共通の処理をどこまでまとめるべきか分からないのでアドバイスお願い致します

掲示板を非同期通信で入力→確認→表示で作成しております。
確認画面を下記のように作成しているのですが、新たに任意で画像アイコンをアップロードする機能を加えたいと考えております。(アップロードされていない場合はダミー画像を表示)
画像アイコンの条件を3つほど想定していて、ファイルアップロードに関するコードと被る部分も出てくる為、どこまでまとめるべきか悩んでおります。
カメラ画像と別の画像を用意する場合の書き方についてのアドバイスもお願い致します。

➀カメラ画像ではなく別の画像を用意する、可能であれば画像サイズは5MBで制限したい
➁アイコンは画像のみアップロードを許可
➂clear ボタンのデザインはそのまま使う

※確認画面イメージ
Q質問する　　　　　　STEP1入力＞STEP2確認＞STEP3完了

タイトル　　　　　　　　　　　　　　　　　スタンプ画像

画像アイコン　名前

メッセージ

アップロードファイル1　　アップロードファイル2　　アップロードファイル3

修正するボタン　　　　　投稿するボタン

※ファイルアップロードに関するコード
<div class="image-partial">
<h2>動画・画像アップロード<span class="required">※ファイルサイズ15MB以内</span></h2>
<div class="image-selector-button">
<label>
<div class="image-camera-icon">
<img src="<?php echo $camera_url; ?>" class="changeImg">
</div>
<input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .pdf, .mp4" style="display: none;">
</label>
<div class="viewer"></div>
<button type="button" class="attachclear">clear</button>
</div>
</div>
<script>
const set_attach_event = function() {
const attach = document.querySelectorAll('.attach');
const clear = document.querySelectorAll('.attachclear');
const viewer = document.querySelectorAll('.viewer');
const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像
for (let i = 0; i < attach.length; i++) {
attach[i].addEventListener('change', () => {
if (attach[i].files[0].size > 15 * 1024 * 1024) {
alert('15MBバイト超えています');
return;
}
viewer[i].innerHTML = "";
blobType[i] = "";
blobUrl[i] = "";
if (attach[i].files.length !== 0) {
//オブジェクトのURL作成
blobUrl[i] = window.URL.createObjectURL(attach[i].files[0]);
//FileReaderオブジェクト 生成し、ファイルの内容を非同期で取得
const reader = new FileReader();
reader.onload = () => {
var child = null;
//result プロパティは、ファイルの内容
if (reader.result.indexOf("data:image/jpeg;base64,") === 0 ||
reader.result.indexOf("data:image/png;base64,") === 0) {
blobType[i] = "img";
child = document.createElement("img");
} else if (reader.result.indexOf("data:video/mp4;base64,") === 0) {
blobType[i] = "video";
child = document.createElement("video");
child.setAttribute("controls", null);
} else if (reader.result.indexOf("data:application/pdf;base64,") === 0) {
blobType[i] = "iframe";
child = document.createElement("iframe");
} else {
alert("対象外ファイル");
attach[i].value = "";
}
if (child !== null) {
child.src = blobUrl[i];
//戻り値は追加した子要素 viewer
viewer[i].appendChild(child);
changeImg[i].classList.add('hideItems'); // 元々の画像を消す
}
};
//Blob 又は File の内容を読み込む
reader.readAsDataURL(attach[i].files[0]);
}
});
clear[i].addEventListener('click', () => {
blobType[i] = "";
blobUrl[i] = "";
attach[i].value = "";
viewer[i].innerHTML = "";
changeImg[i].classList.remove('hideItems');
});
};
}
</script>

No.1 回答者： rera1016 回答日時： 2024/03/19 21:29

どのプログラミング言語にも言えますが、同じ処理を何度も行うのであれば、その部分を抜き出して、関数として独立させましょう。

https://qiita.com/matsuby/items/1010ae38ee6258fd …

この回答へのお礼

アドバイスありがとうございます、勉強になりました。

お礼日時：2024/03/27 21:49