タイトルどおりの内容です。フロント(Web側)でinputに入った値をバック(node側)で抜き出して、それをファイル書き出しして使おうと思ったらその際の処理にちょっと悩んだって話です。

Electronってそもそもなんぞや？って場合は、ChromiumとNode.js用いてWindows、macOS、Linuxで動くデスクトップアプリが作れるって認識で良いかなと。
詳しくは以下のElectron公式サイトで見てみてください。ここではこれ以上詳細には語りません。

Electron とは何ですか?

それではひとまず本題に入ります。

やりたかったこと

イメージとしては以下になります。

1.フロント側でinputに入力された値を基に配列データを作る
2.バックエンド側に持っていって、配列から抜き出したデータをTAB区切りにてファイルに書き込みたい
イメージ例：[データ1, データ2, データ3, データ4]→データ1　データ2　データ3　データ4
(TABってするとhtml側で消去されるので一旦全角で幅を空けてます。)

実施したこと(間違い)

※当時こんな感じでやってた覚えなんで、ちょっと状況違うかもですが大体のイメージは合ってるかと。
※記述はバック(node)側で行っています。

arr(フロントで作った配列データ)

const map = arr.map((value) => {
  return value;
});

ちなみ、これだとやりたいことを実現できません。というより、なんも変わらない。

map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
引用：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

配列から抜き出したいのに新しい配列を生成しようとしています。
凡ミスに感じますが、当時はElectron + Reactでプリロードやレンダラーの使い方で四苦八苦してたので、意外に個人的に嵌ったわけです。

実施したこと(実現)

// textDataはフロントから受け取った配列データが入っている
for (let i = 0; i < textData.length; i++) {
  if (i === textData.length - 1) {
    writeData += textData[i];
    break;
  }
  writeData += `${textData[i]}\t`;
}

困ったときのfor文でwriteDataって変数を事前に作って+=で順次writeDataに突っ込んでいきました。
iとtextData.lengthの値が一致したらTAB抜きでループを抜ける処理です。

月曜日に間に合わせたかったので、これ以上別の方法は試してませんがやり方は他にもあるかと思っています。具体的には以下のループ文

• 拡張for文
• while文
• do while文

などなど。ちなみにmap関数でもやり方を変えれば出来ます。その辺り例文作って試したので、その内容だけ最後に記述したいと思います。

mapを使って実現する方法

// テスト用配列変数の作成
const loopTest: string[] = [
  "ソマリ",
  "アビシニアン",
  "ノルウェージャンフォレストキャット",
  "ロシアンブルー",
  "ラグドール",
  "マンチカン",
  "メインクーン",
];

// map2
let loopTest_map2: Map = new Map();
loopTest.map((mapTest2: string, mapIdx2: number) => {
  console.log(`キー：${mapIdx2}, 値：${mapTest2}`);
  return loopTest_map2.set(mapIdx2, mapTest2);
});

// key, valueで抜き出したい場合
for (const [key, value] of loopTest_map2.entries()) {
  console.log(`キー：${key}、値：${value}`);
}

// 値のみ変数に詰め込みたい場合
let mapValue: string = "";
for (const value of loopTest_map2.values()) {
  console.log(`値：${value}`);
  mapValue += value + "\t";
}

console.log(`mapValueの値：${mapValue}`);

オブジェクトのMapに対してmap関数でkey, valueを代入。その後loopTest_map2.values()を使って事前に宣言しておいたmapValueに対して順次代入する。って形にすれば初めの考え方でも実現可能でした。

あとがき

mapやforEachとか普段はあまり使わなかっただけに、個人的にReact触ることになって触る機会が増えて雰囲気で使ってたきらいがありましたが、改めて雰囲気でやるのは良くないですね。

今後も気になったことは調べてインプット＆アウトプットしていこうと思います。