常連

### 前提・実現したいこと

javascriptでconsole.logにquerySelectorAllで取得した要素を表示させたいのですが出来ません。

### 発生している問題・エラーメッセージ

```

```![イメージ説明](4c04e3eda00a9a83d513467d33e7da7d.png)

### 該当のソースコード

```JavaScript
(()=>{                                   

    const doc = document;
    const tab = doc.getElementById('js-tab');
    const nav = tab.querySelectorAll('[data-nav]');
    const content = tab.querySelectorAll('[data-content]');
    
    console.log('content',　content);
    })();
```
```HTML
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet"href="tab.css">
   
    <style>
      .tab {
width:500px;    
}
.tab-nav{
    display: flex;
}
.tab-nav-item {
    background: #ccc;
    color: #000;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px 5px 0 0;
} 
.tab-nav-item.is-active {
    background: #000;
    color: #FFF;
}    
.tab-contents{
    border: 1px　solid #ccc;
    padding: 20px;
}
  .tab-contents-item {
    display: none;
}
    </style>
    </head>
        <body>
       <div class="tab" id="js-tab">
           <a href="" class="tab-nav-item is-active" data-nav="0">Tab-0</a>
           <a href="" class="tab-nav-item" data-nav="1">Tab-1</a>
           <a href="" class="tab-nav-item" data-nav="2">Tab-2</a>
        </div>
   <div class="tab-contents">
　　<div class="tab-contents-item" data-content="0">
タブその0   
　　</div>
    <div class="tab-contents-item" data-content="1">
    タブその1
    </div>
    <div class="tab-contents-item" data-content="2">
    タブその2
    </div>
</div>
   </div>
  
   <script type ="text/javascript" src="tab.js"></script>
</body>
            

    </html>

```

### 試したこと

vscode確認、解決法の検索

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

指定したDOM要素が取得できない

これは、ただ単にボタンが押されたときにイベントが発生した要素をコンソールに書き出すコードです。
```html
<button id="btn">click me</button>
```
```JavaScript
document.getElementById("button").addEventLisner("click",
(e)=>{
      console.log(e.path[0]);
});
```
ところが、ここで使っている``e.path``が廃止されるそうです。調べてみると、代替として``e.composedPath``が用意されているそうですが、コンソールでe.pathとe.composedPathを見てみると、
e.path
![e.path](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-19/f8d0c654-67e6-4c5d-87fa-2bdfa8db5ed7.png)
e.composedPath
![e.composedPath](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-19/8f1f6d4f-2145-4f0a-a391-f09ad2a7afd0.png)
e.pathは配列の0番目に要素の内容が記述されているわかりやすいインターフェイスなのに対し、e.composedPathでは中身が見えません。e.pathが廃止された後にもクリックされた要素を取得する方法はありますか?(document.getElementByIdやdocument.querySelectorを使う方法は自分の目的に合っていないので投稿しないでください)

e.pathの代替　　　　　　　　　　　　　　　

### 前提
javascriptで「文字を表示する要素」と「テキストボックス」と「ボタン」を適当に１０個ほど表示して、テキストボックスに値を入力してボタンを押すと、おのおのの文字が変わって、"All"と入力したときだけ、他のすべての要素の文字も「All!!」となるようなテストプログラムを書いてみました。

### 実現したいこと

グローバルな配列を使わずに一つの関数かクラスのようなもので完結したプログラムにしたいです。

### 発生している問題・エラーメッセージ

このように、特定の条件の時に関連する他のオブジェクトにも影響を与えたい時に、オブジェクトを配列に入れといてループ処理でできることはわかったのですが、他のプログラムに組み込みたい時に、グローバル変数を使っていると、少し変数の名前が変わったりしただけで、中身のプログラムも書き換えなくてはならないのが不便だと思い、知恵をお借りしたいと思いました。

### 該当のソースコード

```javascript
<!DOCTYPE html>
<html lang="ja">

<head>
    <mata charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>test</title>
</head>

<body>
    <div></div>
    <script type="text/javascript">

        const elements = [];

        const generateInput = class {
            constructor() {
                const div = this.createInputForm();
                this.changeOperation(div);
                elements.push(div);
                return div;
            }
            createInputForm = () => {
                const div = document.createElement("div");
                const createHTwo = () => {
                    const hTwo = document.createElement("h2");
                    hTwo.textContent = "初期値！";
                    return hTwo;
                }
                const createInput = () => {
                    const input = document.createElement("input");
                    input.type = "text";
                    return input;
                }
                const createButton = () => {
                    const button = document.createElement("button");
                    button.type = "button";
                    button.textContent = "更新！"
                    return button;
                }
                div.append(createHTwo(), createInput(), createButton());
                return div;
            }
            changeOperation = (element) => {
                const hTwo = element.children[0];
                const input = element.children[1];
                const button = element.children[2];
                button.addEventListener('click', () => {
                    if (input.value === "All") {
                        elements.forEach((element, index) => {
                            elements[index].children[0].textContent = "All!!";
                        });
                    } else {
                        hTwo.textContent = input.value;
                    }
                }, false);
            }
        }

        const body = document.querySelector("body");
        for (i = 0; i < 10; i++) {
            const input = new generateInput();
            body.append(input);
        }

    </script>
</body>

</html>
```

### 試したこと

コード全体を関数でくくって、その関数内で配列を定義してグローバルからforループで呼び出してみても、関数が一回実行されるたびに、関数内の配列に一個だけエレメントが入って、処理から抜けての繰り返しになってしまいます。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


javascriptでグローバルな配列を使わずに、一つの要素のイベントが他の要素にも影響を与えるプログラムを書きたいです。

### 前提
Reactで実装したものをJavaScriptのみで書く場合どのくらいの記述量になるかのか知りたい

**実装内容→選択された要素のみ色を変える処理**
CSSはTailWindを使用
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-29/5da5f167-50b7-40cf-b425-1393ad631a46.png)
### 実現したいこと
以下Reactで実装したクラスの付け替えの処理をJavaScriptのみで書く場合どうすればいいでしょうか？

### 該当のソースコード

```
import React, { useState } from 'react'

export const Tab = () => {
  const [state, setState] = useState([
    { name: 'アイウエオ', active: true },
    { name: 'かきくけこ', active: false },
    { name: 'サシスセソ', active: false },
  ])

  const check = (value: React.MouseEvent<HTMLElement>) => {
    const selectState = state.map((data) => {
      return {
        name: data.name,
        active: value.currentTarget.dataset.id === data.name,
      }
    })
    setState(selectState)
  }

  // stateを更新する度にこの関数が呼ばれてclassを付け替える
  const chengeStyle = (value: boolean) => {
    return value ? 'bg-red-300' : 'bg-gray-200'
  }

  return (
    <ul>
      {state.map((data) => {
        return (
          <li
            key={data.name}
            onClick={check}
            className={chengeStyle(data.active)}
            data-id={data.name}
          >
            {data.name}
          </li>
        )
      })}
    </ul>
  )
}

```

### 疑問点
Reactの場合stateが更新される度にレンダリングが走るので定義した関数を再度呼び出すことが可能ですが、JavaScriptの場合どのようにして関数を任意のタイミングで複数回呼び出すのでしょうか？


ReactとJavaScriptの違いについて

input type=”file” で選択したファイルを、ブラウザ再立ち上げ時に、初期値としてセットすることはできないでしょうか？

検索してみますと、セキュリティ的な問題で、input type=”file”の書き換えができないように、制限されているとのことでしたが、なんとかして実現したいです。

一案としまして、Chrome拡張として作成し、chrome.storageに<input type="file">の要素ごと保存しておく方法を思いつきましたが、
chrome.storageに要素の保存はできないようです。
他に、IndexedDB等もあるようですが、今すぐに試すことはできないため、確認できない状態です。

どなたか、何らかの実現方法をご存じの方がいらっしゃいましたら、ご教授いただきたいです。
よろしくおねがいします。

input type=”file” の初期値をセットする方法は？

### 前提
ボタンをクリックした時にonClickで関数を呼び出しreact-router-domを使ってページ遷移させたいです。

### 発生している問題・エラーメッセージ
クリックしてもなにも起こりません。
コンソールにもエラーはありません。

### 該当のソースコード

App5.jsx
```
import { Link } from "react-router-dom";

function App5() {

// ここの関数でページ遷移を実行したい
const aaa=()=>{
<Link to={`/register/`}>こちら</Link>
}

    return(
        <>
        <h1>ホーム</h1>
<button onClick={aaa}>クリック</button>
        </>    
    )
}
```
register.jsx
```
import { Link } from "react-router-dom";

const Register = () => {
  return (
    <>
      <h1>新規登録ページ</h1>
      <div>
        <Link to={`/`}>ホームに戻る</Link>
      </div>
    </>
  );
};

export default Register;
```
main.jsx
```
import React from 'react'
import ReactDOM from 'react-dom'

import App5 from './router/App5'
import Register from './router/register'
import { BrowserRouter, Routes, Route } from "react-router-dom";

ReactDOM.render(

    <BrowserRouter>
    <Routes>
      <Route path={`/`} element={<App5 />} />
      <Route path={`/register/`} element={<Register />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
)
```

### 試したこと

関数の中で戻るボタンの実装方法はありましたが特定のページへ遷移させる方法が見つかりませんでした。

### 補足情報（FW/ツールのバージョンなど）

react ver.18


Reactでボタンをクリックしたときにページ遷移させたい

初めまして、プログラミング初心者です。
質問内容はタイトルの通りなのですが、JavaScriptでDOMを操作するときにinnerHTMLとappendChild、どちらを使っていいか分からないときがあります。

例えば、下記の場合にどうしてinnerHTMLが使えないのか分かりません。

```
const postsContainer = document.getElementById('posts-container');

const postEl = document.createElement('div');
    postEl.innerHTML = `
        <div class="number">${post.id}</div>
        <div class="post-info">
            <h2 class="post-title">${post.title}</h2>
            <p class="post-body">${post.body}</p>
        </div>
        `;

    //innerHTMLを使うとHTMLには [object HTMLDivElement] とのみ出力される
    postsContainer.innerHTML = postEl;

    //appendChildを使うとHTMLに正常に出力される
    postsContainer.appendChild(postEl);
```

自分でも色々検索してみたのですが、なかなか違いがしっくり来ないので、ぜひご回答いただければ幸いです。よろしくお願いしますm(_ _)m

JavaScript: innerHTML と appendChild()の違いについて。

### 実現したいこと

typescriptで、HTML要素を取得して操作したい

### 発生している問題・エラーメッセージ

```
代入式の左辺には、省略可能なプロパティ アクセスを指定できません。
```

### 該当のソースコード

```typescript
const pref = document.getElementById("prefectures");
pref?.textContent = "hello world";
```

### 試したこと

特になし

### 補足情報（FW/ツールのバージョンなど）

typescript:4.7.4
tsc:4.6.4
esnext
