常連

注目の的

社会貢献

### 質問
繰り返す場合になぜ `createDocumentFragment` は早くなりがちなのでしょうか？

### 経緯
JavaScript を使ってのHTML挿入において、以下4つの速度比較をしていたところ、妙な現象を発見しました。

- `insertAdjacentHTML`
- `createDocumentFragment`
- `createElement`
- `cloneNode`

1回だけ実行する場合は `createDocumentFragment` が遅くなりがちなのですが、繰り返す場合に早くなりがちなのです。

この違いが何によってもたらされるのか知りたいです。

### 比較

#### 1回だけ実行する場合

以下は1回だけ実行するコードです。このコードを何度実行しても `createDocumentFragment` は大体 9.00ms 前後と遅くなりがちです。`insertAdjacentHTML` より遅くなるのはほぼ確実です。

###### 実行例
insertAdjacentHTML: 4.50 ms
createDocumentFragment: 19.90 ms
createElement: 5.70 ms
cloneNode: 7.20 ms

###### ソースコード
https://jsfiddle.net/mvyq2d7r/
```JavaScript
// テスト用のコンテナを初期化
const container = document.createElement('ul');
document.body.appendChild(container);

// 10000件のアイテムを生成するためのテスト
const totalItems = 10000;

function resetContainer() {
  container.innerHTML = '';
}

// insertAdjacentHTML
function testInsertAdjacentHTML() {
  resetContainer();
  const start = performance.now();

  let html = '';
  for (let i = 0; i < totalItems; i++) {
    html += `<li>Item ${i}</li>`;
  }

  container.insertAdjacentHTML('beforeend', html);
  const end = performance.now();
  console.log('insertAdjacentHTML:', (end - start).toFixed(2), 'ms');
}

// createDocumentFragment
function testCreateDocumentFragment() {
  resetContainer();
  const start = performance.now();

  const fragment = document.createDocumentFragment();
  for (let i = 0; i < totalItems; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
  }

  container.appendChild(fragment);
  const end = performance.now();
  console.log('createDocumentFragment:', (end - start).toFixed(2), 'ms');
}

// createElement
function testCreateElement() {
  resetContainer();
  const start = performance.now();

  for (let i = 0; i < totalItems; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    container.appendChild(li);
  }

  const end = performance.now();
  console.log('createElement:', (end - start).toFixed(2), 'ms');
}

// cloneNode
function testCloneNode() {
  resetContainer();
  const start = performance.now();

  const templateLi = document.createElement('li');
  const fragment = document.createDocumentFragment();

  for (let i = 0; i < totalItems; i++) {
    const clonedLi = templateLi.cloneNode(true);
    clonedLi.textContent = `Item ${i}`;
    fragment.appendChild(clonedLi);
  }

  container.appendChild(fragment);
  const end = performance.now();
  console.log('cloneNode:', (end - start).toFixed(2), 'ms');
}

// 実行
testInsertAdjacentHTML();
testCreateDocumentFragment();
testCreateElement();
testCloneNode();
```

#### 繰り返す場合

以下は繰り返すコードです。このコードを実行すると、 `createDocumentFragment` は大体 2.00ms 前後となり、どういうわけか`insertAdjacentHTML` より速くなる勢いなのです。

###### 実行例
| (index) | insertAdjacentHTML | createDocumentFragment | createElement | cloneNode |
|--------|---------------------|-------------------------|----------------|------------|
| Run 1  | 3.40 ms             | 2.70 ms                 | 20.00 ms       | 10.60 ms   |
| Run 2  | 3.40 ms             | 2.80 ms                 | 9.70 ms        | 12.30 ms   |
| Run 3  | 5.40 ms             | 1.90 ms                 | 12.10 ms       | 11.40 ms   |
| Run 4  | 4.60 ms             | 1.60 ms                 | 19.30 ms       | 17.80 ms   |
| Run 5  | 3.60 ms             | 1.90 ms                 | 13.40 ms       | 15.80 ms   |
| **Average** | **4.08 ms**     | **2.18 ms**             | **14.90 ms**   | **13.58 ms** |

###### ソースコード
https://jsfiddle.net/bn23t8mq/
```JavaScript
const container = document.createElement('ul');
document.body.appendChild(container);

const totalItems = 10000;
const repeats = 5;

const results = {
  insertAdjacentHTML: [],
  createDocumentFragment: [],
  createElement: [],
  cloneNode: [],
};

function resetContainer() {
  container.innerHTML = '';
}

function logStep(method, index, duration) {
  console.log(`✅ ${method} の ${index + 1}/${repeats} 回目完了 (${duration.toFixed(2)} ms)`);
}

async function testInsertAdjacentHTML() {
  console.groupCollapsed('▶ insertAdjacentHTML を実行中...');
  for (let r = 0; r < repeats; r++) {
    resetContainer();
    let html = '';
    for (let i = 0; i < totalItems; i++) {
      html += `<li>Item ${i}</li>`;
    }

    const start = performance.now();
    container.insertAdjacentHTML('beforeend', html);
    const end = performance.now();
    const duration = end - start;

    results.insertAdjacentHTML.push(duration);
    logStep('insertAdjacentHTML', r, duration);

    await new Promise(r => setTimeout(r, 50));
  }
  console.groupEnd();
}

async function testCreateDocumentFragment() {
  console.groupCollapsed('▶ createDocumentFragment を実行中...');
  for (let r = 0; r < repeats; r++) {
    resetContainer();
    const fragment = document.createDocumentFragment();

    for (let i = 0; i < totalItems; i++) {
      const li = document.createElement('li');
      li.textContent = `Item ${i}`;
      fragment.appendChild(li);
    }

    const start = performance.now();
    container.appendChild(fragment);
    const end = performance.now();
    const duration = end - start;

    results.createDocumentFragment.push(duration);
    logStep('createDocumentFragment', r, duration);

    await new Promise(r => setTimeout(r, 50));
  }
  console.groupEnd();
}

async function testCreateElement() {
  console.groupCollapsed('▶ createElement を実行中...');
  for (let r = 0; r < repeats; r++) {
    resetContainer();
    const start = performance.now();

    for (let i = 0; i < totalItems; i++) {
      const li = document.createElement('li');
      li.textContent = `Item ${i}`;
      container.appendChild(li);
    }

    const end = performance.now();
    const duration = end - start;

    results.createElement.push(duration);
    logStep('createElement', r, duration);

    await new Promise(r => setTimeout(r, 50));
  }
  console.groupEnd();
}

async function testCloneNode() {
  console.groupCollapsed('▶ cloneNode を実行中...');
  for (let r = 0; r < repeats; r++) {
    resetContainer();
    const templateLi = document.createElement('li');
    const fragment = document.createDocumentFragment();

    const start = performance.now();
    for (let i = 0; i < totalItems; i++) {
      const clonedLi = templateLi.cloneNode(true);
      clonedLi.textContent = `Item ${i}`;
      fragment.appendChild(clonedLi);
    }
    container.appendChild(fragment);
    const end = performance.now();
    const duration = end - start;

    results.cloneNode.push(duration);
    logStep('cloneNode', r, duration);

    await new Promise(r => setTimeout(r, 50));
  }
  console.groupEnd();
}

// 表形式でまとめて出力
function printResultsTable() {
  const table = {};

  for (let i = 0; i < repeats; i++) {
    table[`Run ${i + 1}`] = {
      insertAdjacentHTML: `${results.insertAdjacentHTML[i].toFixed(2)} ms`,
      createDocumentFragment: `${results.createDocumentFragment[i].toFixed(2)} ms`,
      createElement: `${results.createElement[i].toFixed(2)} ms`,
      cloneNode: `${results.cloneNode[i].toFixed(2)} ms`,
    };
  }

  table['Average'] = {
    insertAdjacentHTML: `${avg(results.insertAdjacentHTML).toFixed(2)} ms`,
    createDocumentFragment: `${avg(results.createDocumentFragment).toFixed(2)} ms`,
    createElement: `${avg(results.createElement).toFixed(2)} ms`,
    cloneNode: `${avg(results.cloneNode).toFixed(2)} ms`,
  };

  console.group('📊 実行結果サマリー');
  console.table(table);
  console.groupEnd();
}

function avg(arr) {
  return arr.reduce((a, b) => a + b, 0) / arr.length;
}

async function runAllTests() {
  console.group('🧪 10000件生成テストを開始します');
  await testInsertAdjacentHTML();
  await testCreateDocumentFragment();
  await testCreateElement();
  await testCloneNode();
  console.groupEnd();
  printResultsTable();
}

runAllTests();
```

createDocumentFragment が、繰り返す場合に早くなる理由

### 実現したいこと
【質問】年収1000万円を目指すための最適な選択とは？Webデザイン or コーディング？ 

こちらで質問するべき内容では無いことは承知しておりますが、
ヤフー知恵袋よりどうしても実体験や経験者のご意見を頂戴したくご質問させて頂きます。
※ヤフー知恵袋にも質問は出しています。

はじめまして、藤本と申します。
現在、私は年収1000万円を目標にWebデザイン・Web制作のスキルを磨いています。短期目標として、2025年3月の売上7.2万円を設定していますが、現状未達成です。

これまでの取り組みとしては、
1月～：バナー制作に特化（CANVA→クラウドワークスで案件受注）
2月～：Photoshop・Illustrator学習
3月～：HTML/CSS・JavaScript・WordPress学習（コーディングの習得）
現在はクラウドワークスで案件応募を外注しつつ、自分で学習を進めています。
しかし、案件受注には至っておらず（テスト制作のお試しはある）、先月の収益は8000円、今月は0円の状況です。

悩んでいる点
このままデザインを伸ばすべきか、コーディングにシフトするべきか、あるいは両方学ぶべきか、方向性に迷っています。
また、2025年10月にはWeb系の会社に転職し、実務経験を積みたいと考えています。

質問
現状のまま案件獲得に注力すべきか、それとも学習を優先すべきか？

デザイン特化とコーディング習得、どちらが年収1000万円に近づく可能性が高いか？

フリーランスと就職、どちらがキャリア戦略として合理的か？

経験者の皆さまから、実体験やアドバイスをいただけると非常にありがたいです！
どうぞよろしくお願いいたします。



### 発生している問題・分からないこと
「実現したいことを教えてください」の通りです。



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

```
「実現したいことを教えてください」の通りです。
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
「実現したいことを教えてください」の通りです。

### 補足
Yahoo知恵袋にも、複数の回答を得て広い視野で物事を理解したかった為、質問を投稿しました。下記、Yahoo知恵袋のリンク先です。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10313115360

【質問】年収1000万円を目指すための最適な選択とは？Webデザイン or コーディング？ 

### 実現したいこと
App routerを用いたnext.jsプロジェクトのRootlayout(サーバサイド)で用いる値(session, pathname)を、ページの遷移毎に更新したい。

### 発生している問題・分からないこと
page.tsxを読み込んでもlayout.tsxはリロードしないので、値は自動的に更新されません。
RootlayoutではgetServerPropsが使えず、サーバサイドなのでフックも使えないので、それ以外の方法を探しているのですが見つかりません。
(getServerSessionもheadersもプロジェクトの開始時かリロード時に実行されるので、流石に毎回リロードするのはUX的にNGかなと思います。)



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

```layout.tsx
import './globals.css';

import { Metadata } from 'next';
// googleのフォントの一種であるInconsolataをインポートしている
import { Inconsolata } from 'next/font/google';

import { headers } from 'next/headers';

import SignOutMenu from '@/components/SignOutMenu';

import Link from 'next/link';
import Image from 'next/image';

import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/authOptions';

const fnt = Inconsolata({ subsets: ['latin']});

export default async function RootLayout({children,}: Readonly<{
  children: React.ReactNode;
}>) {
  const session = await getServerSession(authOptions);
  const pathname = (await headers()).get("x-url") || '';

  return (
    <html lang="ja">
      <body className={fnt.className}>
      <h1 className="text-4xl text-indigo-800 font-bold my-2">Earthlete</h1>
        <ul className="flex bg-blue-600 mb-4 pl-2">
          <li className={`block px-4 py-2 my-1 hover:bg-gray-100 rounded ${pathname === '/' ? "bg-fuchsia-600" : ""}`}>
              <Link className="no-underline text-blue-300" href="/">
              ホーム</Link></li>
          <li className={`block text-blue-300 px-4 py-2 my-1 hover:bg-gray-100 rounded ${pathname === '/threads' ? "bg-fuchsia-600" : ""}`}>
              <Link className="no-underline text-blue-300" href="/threads">
              掲示板</Link></li>
        </ul>
        <ul className="flex fixed top-3 right-2 z-20">
          {pathname !== '/logIn' && !session &&
          <li className="block px-3 py-1 my-1 hover:bg-gray-100 rounded">
              <Link className="no-underline text-blue-600" href="/signIn">
              サインイン</Link></li>
          }
          <SignOutMenu pathname={pathname} login={session ? true : false}/>
          {pathname !== '/addAccount' && !session &&
          <li className="block px-3 py-1 my-1 hover:bg-gray-100 rounded">
              <Link className="no-underline text-orange-400" href="/addAccount">
              新規登録</Link></li>
          }
          {pathname !== '/editProfile' && session &&
          <li className="px-1 py-1 mx-2 rounded-full border">
              <Link className="text-blue-300" href="/editProfile">
              <Image src='/defaultIcon.png' alt="" width={32} height={32}/>
              </Link></li>
          }
        </ul>
        <div className="mx-2">
          {children}
        </div>
      </body>
    </html>
  );
}
```

```SignOutMenu.tsx
'use client';

import Link from 'next/link';

import { useState } from 'react';

import { signOut } from 'next-auth/react';
import { redirect } from 'next/navigation'

export default function SignOutMenu({ pathname, login } : { pathname: string | null, login: boolean }) {
    const [showLogoutMenu, setShowLogoutMenu] = useState<boolean>(false);
    
    const handleLogout = () => {
      signOut();
      setShowLogoutMenu(false);
      redirect('/');
    };
  
    return (
        <>
        {showLogoutMenu &&
            <div className="fixed top-0 left-0 bg-gray-300 opacity-50 h-full w-full z-21"></div>
        }
        {pathname !== '/logOut' && login &&
        <li className="block px-3 py-1 my-1 hover:bg-gray-100 rounded">
            <button className="text-blue-600" onClick={() => setShowLogoutMenu(!showLogoutMenu)}>
                サインアウト</button></li>
        }
        {showLogoutMenu && login && 
        <div className="fixed flex top-0 left-0 justify-center items-center text-center w-full h-screen z-22">
            <div className=" border-black border-2 w-3/5 md:w-2/5 lg:w-1/5 h-1/5">
                <p className="my-6">ログアウトしますか？</p>
                <ul className="flex justify-around">
                <li><Link className="no-underline text-white bg-blue-600 p-4 rounded" onClick={ () => setShowLogoutMenu(false) } href={pathname || "/"}>
                キャンセル</Link></li>
                <li><Link className="no-underline text-white bg-red-600 p-4 rounded" onClick={handleLogout} href="/">
                サインアウト</Link></li>
                </ul>
            </div>
        </div>
        }
        </>
    );
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
上述の通り、getServerPropsを使おうとしても、これはpage.tsxにしか使えないので問題は解決しませんでした。(page.tsxにコンポーネントは配置したくないです。)

補足で、getServerSessionに関してはsignOutした時は再レンダリングされてサインアウト後の状況が反映されているのですが、signInの時はなぜか再レンダリングされずサインイン後の状況が反映されないことが確認できました。

更に補足で、signInのオプションであるredirect: falseを消去したら再レンダリングされてgetServerSessionが反映されるようになりました!!

あとはheaders()の方だけ解決できたらOKです!!
### 補足
signOutMenuコンポーネントとlayout.tsx内のコンポーネントの背景色や表示/非表示を現在のurl(pathname)とログイン状況(session)で制御しています。

![](https://ddjkaamml8q8x.cloudfront.net/questions/2025-04-01/ac4e4b4a-5433-47ce-bbd9-b3e8f5326493.png)

あと、rootlayoutをサーバサイドにすることにこだわっているのは、app routerのメリットを活かすためです。もし、この点を気にしなくても良いと分かれば、rootlayoutはクライアントサイドにしようと思います(https://zenn.dev/h_tatsuru/articles/app_router_pros_and_cons)。

Rootlayoutにてページの遷移毎に値(session, pathname)を更新できるようにしたい

## 🖊️テーマ
teratailに持っている意見はありますか？
具体的なものでも、こんなものがあればという願望でも、幅広い意見を募集します！📮

## 👤運営メンバーの回答
運営メンバーのFさんは「ユーザーへのメンション機能」とのことでした。
質問にコメントしてくれた人へ追加で聞きたいことがあった際や、個人で仲良くしたい人に使えたら良いと思った、というそうです。
質問内容でしか関わらないからこそ、個人につながる何かがあればまた違う使い方ができるかもしれませんね！

## 〜teratailトーク!とは？〜
詳細を公式ブログで公開しています。ぜひお読みください。
[「teratailトーク!」スタート🎉　気軽に意見交換しよう！](https://blog.teratail.com/entry/teratail-talk)

teratailに追加して欲しい機能はありますか？

### アプリの概要

指定された時間（過去でも未来でも）から選択されたメディアの再生を開始するアプリです。


### 発生している問題

- ★「サーバー時刻: 取得中...」から変わらない問題
- 再生開始時刻入力フォームに最初に入力される内容がJSTにならない問題

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

[CodePen：「サーバー時刻: 取得中...」から変わらない問題が発生しているコード](https://codepen.io/pknthmju-the-bashful/pen/mydzzqQ)
[CodePen：他の問題の修正前だがサーバー時刻を表示できるコード](https://codepen.io/pknthmju-the-bashful/pen/mydzzXa)
```PHP
<?php
header("Content-Type: application/json");
echo json_encode(time());
?>
```

これらの問題を解決したいのですが、うまくいきませんでした。どうすればよいでしょうか。
よろしくお願いいたします。

JavaScriptで指定した時間からメディアの再生を開始するアプリ

### 実現したいこと
マルチプラットフォームアプリを作成する際に関数型UIというXMLとは違う方法でUIを作ると思いますが、従来の方法と異なっており良いやり方がわからずにいます。
自分はkotlinのjetpackを使用していますが、flutter/dartに影響を受けているようなので、一般的な考え方で大丈夫なのでよい方法があれば教えていただきたいと思っています。
Reactなどもバインディングを扱うと思いますが、それらの開発経験がないので助言をいただけると幸いです。

### 考え方について
オブジェクト指向と関数型プログラミング双方とも完璧にできるわけではないのと、
従来のネイティブアプリやHTMLではnameのようなidが各入力要素に紐づけられておりそこから値をとるという方式をとっていて、私はこれにもメリットを感じていましたが、関数型UIは完全に入力要素とレイアウト要素が埋め込まれており更新ロジックをUI側に書かなければならない状態にある種困惑しています。(入力要素って関数じゃなくてオブジェクトじゃないの。。。と)
ただ、関数型のメリットとしてもわかっているつもりで、引数に取った値から常に同じ状況を再現できるということでこの長所を生かした設計にしたいです。(例えば状態をログに書き込み再現しやすくするなど)
また、レイアウトと入力要素を分離するのが当面の目標になっています。

### 前提
まず、初めに入力要素を定義し従来のnameのようなアクセス方法に近いやり方でやりたいと思いまして、下記のようなコードを作りました。

ベースクラス
```kt
// 共通のベースクラス
open class InputState {

    private var _inputValue = mutableStateOf("")
    val inputValue: State<String> = _inputValue

    // 値を更新する共通のメソッド
    open fun updateInputValue(value: String) {
        _inputValue.value = value
    }
}
```

入力要素の紐づけ
```kt
// バリデーションが必要であれば継承とインタフェースを用いて拡張してください
class LoginIdState : InputState() {
    // ここに特別なロジックが必要な場合は追加できますが、現状はそのままです
}

// 引数の型を強要する
@Composable
fun LoginIdTextField(state: LoginIdState ) {
    Column(modifier = Modifier.padding(16.dp)) {
        TextField(
            value = state.inputValue.value,
            onValueChange = { state.updateInputValue(it) },
            label = { Text("Login ID") }
        )
    }
}

class LoginPasswordState : InputState() {
}

@Composable
fun PasswordTextField(state: LoginPasswordState) {
    Column(modifier = Modifier.padding(16.dp)) {
        TextField(
            value = state.inputValue.value,
            onValueChange = { state.updateInputValue(it) },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation()  // パスワードを隠す
        )
    }
}
```

uiのパーツとしては一旦としてログイン画面として、ログインIDとログインパスワードがあると仮定しています。
また質問にさしあたりコメントにて拡張方法を補足しています。

それぞれのパーツは様々な画面で様々な方法で扱われると思うので、画面事にグループ化し管理しやすくしたいと思っており、最終的には以下のような構成要素を定義しています。

そのほかの構成要素

グループ化
```kt
// TODO: この画面特有の処理を実装する
// info: あるパーツが別の画面で意味としては同じでも機能としては違うケースを考慮してください
class Screen1State(){
    val loginIdState = LoginIdState()
    val loginPasswordTextField = LoginPasswordState()
}
```

UI
```kt
@Composable
fun TestScreen1(
    screenState: Screen1State = viewModel<MyViewModel>().screen1State
) {
    Column(modifier = Modifier.padding(16.dp)) {
        LoginIdTextField(screenState.loginIdState)
        PasswordTextField(screenState.loginPasswordTextField)
    }
}
```

ViewModel
```kt
class MyViewModel : ViewModel() {
    val screen1State = Screen1State()
}
```

### 発生している問題
単刀直入に言って、皆さまはこの関数型UIという制約の中でどのように開発を進めているのでしょうか？
また、私のやり方だと致命的な弱点があったりしますか？
パフォーマンスの影響や拡張性の観点から言って、どのようにコーディングしていくのが正しいのでしょうか。

また、具体的な質問としてもう一つ
これらのUI要素は
TestScreen1とあるように実際にはUIとクラスの紐づけだけをして
別のスクリーンで定義されているであろうレイアウトに単に埋め込む方法として使いたいです。
その場合、コンポーザブルな要素(TestScreen1)はmapなどを返すようにするしかないのでしょうか？

また、各要素は
UIの拡張性などを考えるとそれぞれの具体的な実装は書かずにカリー化すべきなのでしょうか？
(オブジェクト指向の考えに強く引っ張られている。。。)

カリー化の例
```kt
// 引数の型を強要する
@Composable
fun LoginIdTextField(
    state: LoginIdState
): @Composable (callback:  @Composable (LoginIdState) -> Unit) -> Unit {

    return { callback ->
        callback(state) 
    }
}

@Composable
fun TestScreen1(
    screenState: Screen1State = viewModel<MyViewModel>().screen1State
) {

    val loginIdTextField = LoginIdTextField(screenState.loginIdState)

    Column(modifier = Modifier.padding(16.dp)) {
        loginIdTextField{ state ->
            // 分けたことで柔軟にパディング調整などをできる
            Column(modifier = Modifier.padding(16.dp)) {
                TextField(
                    value = state.inputValue.value,
                    onValueChange = { state.updateInputValue(it) },
                    label = { Text("Login ID") },
                )
            }
        }
    }
}

```

すみません。それともう一つなのですが、
Stateの公開方法についても皆様がどうしているのかを伺いたいです。
現状のソース例であれば先に挙げたようにしてあり、カプセル化の観点からmutableStateofが別のstateに指し変わっても公開可能なようにStatenにしていますが、正直に言うとmutableState一択で問題ないのではないかと思っています。

```kt
// 共通のベースクラス
open class InputState {

    private var inputValue by mutableStateOf("")
        private set

    // 値を更新する共通のメソッド
    open fun updateInputValue(value: String) {
        inputValue = value
    }
}
```

最終的にはInputState以外にもCheckBoxStateやButtonState(Command?Action?)も適宜追加する必要はあると思っています。


### 試したこと
時間をかけて解決することもありますので、かれこれずっと考えています。(調べてもピンとくるものが正直ない気がします。。。)
その中でファイルごとにパーツを管理してクラス定義とUI要素をその中に固めて書いて、バリデーションように継承したクラスなどをそこに記述していけば整理がつくのでは？という発想が出てきたのでこれが問題なさそうか知識の共有をしたいと思い至りました。

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

Kotlin 
jetpack compose for multplatform

# 最後に質問を整理します

1. 今までのXMLやHTML、ネイティブアプリではnameのような一つの要素に紐づいたキーワードを使って、値の取得やセットを行っていました。ボタンであればクリックイベントの処理などもそこで行っていました。そのような感覚に近いやり方として、皆さまはどのように開発しているのでしょうか。

2. 各入力要素は変数との紐づけをする処理と、レイアウトに埋め込む処理の二つのことをしなければなりません。これらを分離する方法はあるのでしょうか。mapを使うのであれば、直接レイアウトに埋め込むほうがマシだと思っています。

3. UIの各要素をパーツ化すると、TextFieldのようなコンポーザブル関数が自由に引数をとれるとしてもそこにアクセスする手段がありません。これはカリー化などで状態を変更できるようにすべきなのでしょうか。(オブジェクトの考えに引っ張られているのでよくなさそう)

4. 入力の管理に使うStateに関して、StateやMutableStateの基本挙動とベストな設計が正直にいうとよくわかりません。いったんはStateとして公開しておいたほうが安全そうではありますが、これは本当に必要なのでしょうか。皆さんはどうしているのでしょうか。


質問が複雑になっており大変申し訳ございませんが、情報交換お力添えいただけると幸いです。
内容が不足していましたら、追記等致しますのでよろしくお願いいたします。

---
情報の追記

junerさんよりコメントをいただきました。
以下、ツールの詳細に記載した内容の補足及びやり取りとなります

> 関数型UI はどこ由来の用語でしょうか……？

すみません。コメント意図が今分かりました。用語の由来というか、要は私の開発体制が何から発せられているのかという話を聞きたいという意図ですね。
以下にルーツとなるリンクを貼ります。

Androidデベロッパー
(最も役に立たない、今回コメント返信に差し当たり参照)
https://developer.android.com/kotlin/multiplatform?hl=ja

Jet Brains ブログ
(次に役に立たない、今回コメント返信に差し当たり参照)
https://blog.jetbrains.com/ja/kotlin/2023/11/kotlin-multiplatform-stable/

Compose For Multiplatform
(最も有益だが、Web上のコミュニティの動向(ナレッジシェア)が追えない)
https://www.jetbrains.com/ja-jp/compose-multiplatform/

もっと詳細
https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-multiplatform-explore-composables.html


宣言的UIの入力要素の考え方について知りたい

### 知りたいこと

JavaScript でモジュール化に取り組んでいます。

`.main-area` と `.side-area` に共通処理があるため `.main-and-side-area` として共通化を目論んでいるのですが、その際の JavaScript ファイルを、以下➀➁のどちらの方針にすべきか・・

妥当な理由が思いつかず、決めかねています。

### 以前のディレクトリ構成
まず以前は下記の様になっていたのですが、「`.side-area` での入力によって、 `.side-area` と `.main-area` のいずれのHTMLも更新される」という処理が必要になり、共通化しようと思い至りました。

```
js/
└── assets/
    └── components/
        ├── main-area/
        │   ├── html-templates.js
        │   └── dom-handler.js
        ├── side-area/
        │   ├── html-templates.js
        │   └── dom-handler.js
```

### 悩んでいるディレクトリ構成

##### ➀：親ディレクトリ直下に置く方針
親ディレクトリである `main-and-side-area/` 直下に、`.main-area` と `.side-area` の共通処理を持つファイルを置く方針です。

```
js/
└── assets/
    └── components/
        └── main-and-side-area/
            ├── dom-handler.js 👈 共通処理
            ├── main-area/
            │   ├── html-templates.js
            │   ├── dom-handler.js
            ├── side-area/
            │   ├── html-templates.js
            │   └── dom-handler.js

```

##### ➁：親ディレクトリ/common/ に置く方針
親ディレクトリである `main-and-side-area/` に共通処理を意味する `common/` ディレクトリを挟む方針です。
```
js/
└── assets/
    └── components/
        └── main-and-side-area/
            ├── common/
            │   ├── dom-handler.js 👈 共通処理
            ├── main-area/
            │   ├── html-templates.js
            │   └── dom-handler.js
            └── side-area/
                ├── html-templates.js
                └── dom-handler.js
```

「普通はこうする」とか「こういうときはこうする」といったパターンを教えて頂けましたら幸いです。
もちろん、➀でも➁でもないより良い方針などがございましたら大歓迎です。
よろしくお願い致します。

### 補足
React などのライブラリは一切使わず、VanillaJS のみでの実装です。

共通処理は `親ディレクトリ/file.js` に置くか？ `親ディレクトリ/common/file.js` に置くか？

### 質問内容

teratailヘルプには「非推奨」や「推奨していません」のキーワードが含まれる説明が散見されます。

- Q1. 質問者/回答者、どちらの立場で回答するかを教えてください
- Q2. 「非推奨」は「禁止ではない」ので「やってもよい」と思いますか(※1、※2)
- Q3. あなた自身は、「非推奨」は「禁止ではない」ので、非推奨事項に反する質問をしますか。

(※1)
「teratail運営に質問して下さい」という回答が予想されますが、私は実際に質問/回答している方の意見が重要と考えています。
teratail運営はルールを守らせることに熱心ではなく、**現場がルール**と化している風潮があると認識しています。
私は個人的意見を求めています。

(※2)
ここで聞いているのは「言語上の意味」に留まらず、「回答される方の価値観/判断基準でどう判断するか」が質問の意図となります。
「道徳上は～」や「一般には～、しかしながら、teratailでは～」等、様々な考えがあると思います。

### 質問の動機

1. 質問者に非推奨事項を指摘
2. 質問者から「禁止ではないので守らなくても良いですよね」の返答

という場面を複数回見たことから、皆さんの認識を確認したいと思いました。

### 私の回答

他人の意見を聞いて、自分の考えを述べないのは不公平なので、自己回答します。
ただし、初めから自分の回答があるとバイアスがかかってしまうことが予想される為、しばらく待ってから回答します、

### teratailの非推奨事項一覧

- [他のサービスにも質問投稿をしたい(してしまった)- ヘルプ｜teratail（テラテイル）](https://teratail.com/help#posted-otherservice)

> ##### 他のサービスにも質問投稿をしたい（してしまった）
> teratailでは、**マルチポスト※の推奨はしていません**。
> やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。
> 
> また、teratail上で誤って同じ質問を複数投稿してしまった場合は、質問の削除リクエストを送ってください。
> 
> ※「マルチポスト」とは、同じ内容の文章を複数のQ&Aサイトや掲示板などへ投稿することです。

---

- [推奨していない質問｜teratail（テラテイル）](https://teratail.com/help/avoid-asking)

> ##### プログラミングに関係のない質問
> プログラミングに関して困っていることがないと思われる質問は、トピック外とみなし**推奨していません**。
> 開発仲間を募集する目的の投稿、知人同士でのクローズドなディスカッション、人生の悩み相談などがこれに当たると考えています。
> 具体的に何か困っている理由があり、解決したい問題がある場合は、その理由や何に対して解を得たいのかを明確に記入してください。

> ##### コードをください・デバッグしてください等の丸投げの質問
> 何かを作りたいのでコードを書いてほしい、学校の課題を解いてほしい等の質問は、具体的にプログラミングで困っている質問ではないと考え、**推奨していません**。
> 問題や質問は実際に調査や作業に取り組み、具体的なところで生まれると考えるためです。
> まずは実際に作業に取り組み、つまづいたところで投稿をしてみてください。
> 
> × 悪い例：「雪のアニメーションを表現するコードをください」
> ○ 良い例：「jQueryプラグインで表現した雪のアニメーション速度を調整したい」

> ##### 問題・課題が含まれていない質問
> teratailは困っている人の質問を解決するサービスです。そのため、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は**推奨していません**。
> 何か困っている理由があり、最適解を見つける為の知見を得たい場合は、その理由や何が知りたいのかを明確に記述してください。
> 
> × 悪い例：「オススメの開発環境構築方法を教えてください」
> ○ 良い例：「Dockerで開発環境を構築していて、ファイルの書き込みができません」

> ##### 意図的に内容が抹消された質問
> 解決後に編集機能を用いて、質問内容を改変し、関係のない内容にしたり、内容を削除する行為は**禁止しています**。
> 皆さんにしていただいた質問・回答は、後に他の誰かが困ったときに助けになる情報資産になると考えるからです。

> ##### 過去に投稿した質問と同じ内容の質問
> 閲覧数を増やす目的などにより、過去に投稿した質問と同じ内容の質問を新たに投稿することは**推奨していません**。
> 他に同じ問題を抱える人のヒントとなる情報が分散してしまうためです。
> 質問について新たにわかったことや試したことがあれば、すでにある質問を編集してください。

> ##### 広告と受け取られるような質問
> 個人のサービスやプロダクトなどの広告を目的とした投稿は、質問ではないため**お控えください**。
> このような投稿は問題解決の場にふさわしくないと考えますので、削除の対応をさせていただいています。

---

- [質問するときのヒント｜teratail（テラテイル）](https://teratail.com/help/question-tips)

> ##### 質問するときのヒント
> ...(中略)...
> 少しでも多くの方に問題を解決していただく為に、質問をする時のヒントをまとめました。
> **ただし、これは決してここに書かれていることを守っていない質問者を責めるためのものではありません**。
> このヒントは、質問の仕方のコツがまだ掴めていない方に対して「このポイントを押さえた質問にすればもっと良いコミュニケーションになる」というアドバイスをするためのものです。

### RFC2119

仕様書でよく参照される**RFC2119**では次のように定めています。

- [RFC 2119(対訳)必要条件レベルを示すRFCの中の使用のためのキーワード - RFCの部屋](http://www.t-net.ne.jp/~cyfis/rfc/format/rfc2119_ja.html)

> ##### 2. MUST NOT
> 「MUST NOT(してはなりません)」という単語群、「SHALL NOT(しないこと)」フレーズは、定義が**仕様の絶対の禁止令**であることを意味していてください。

> ##### 4. SHOULD NOT
> 「SHOULD NOT(するべきでありません)」または「NOT RECOMMENDED(勧められません)」という言葉は、**特定の行動が受入れ可能な、または有益でさえある時に、正当な理由が特定の状況において存在するかもしれない**ことを意味していてください、しかし、**完全な含意は、理解されていてこのラベルで説明されたどんな振舞いも実行する前に慎重に熟慮されたケースであるべき**です。

teratailヘルプの「非推奨」は「禁止ではない」ので「やってもよい」と思いますか

### 実現したいこと
お世話になります。
30個のタスクを同時に開始させたいと考えております。
(30はあくまでも例です。最低は10個程度かな？)

### 前提
OS:Win10
　Visual Studio 2015 (古いです(TT)) 
言語など：C#,デスクトップアプリ

[下記コードの概要]
①ボタン1をクリックすると、「_重い処理」が0～29の30個の(List化された)タスクとして実行されます。
③「_重い処理」では、3秒待って、値を戻します。
②29回目のタスクの戻り値に"OK"が含まれているので、処理としては完了しますが…

### 発生している問題・エラーメッセージ
下記コードでエラーは発生していません。
[問題点]
30個のタスクがバラバラと始まって、最初と最後のタスク開始の時間差が6秒近くかかります。(下記デバッグデータ参照願います)
だいたい0～7回目はほぼ同時に始まるのですが、その後は1秒間隔ぐらいでテキトーに始まります。
30個がドーンと一斉に始まる設定はあるのでしょうか？
それとも、リアルタイムOSではないのでこんな感じなのでしょうか？

ID: 0回目 ⇒ 開始 14:26:14.788
ID: 1回目 ⇒ 開始 14:26:14.788
ID: 2回目 ⇒ 開始 14:26:14.788
ID: 3回目 ⇒ 開始 14:26:14.788
ID: 4回目 ⇒ 開始 14:26:14.788
ID: 5回目 ⇒ 開始 14:26:14.788
ID: 6回目 ⇒ 開始 14:26:14.788
ID: 7回目 ⇒ 開始 14:26:14.789
ID: 8回目 ⇒ 開始 14:26:15.761
ID: 9回目 ⇒ 開始 14:26:16.760
ID: 10回目 ⇒ 開始 14:26:17.761
ID: 11回目 ⇒ 開始 14:26:17.798
ID: 12回目 ⇒ 開始 14:26:17.798
ID: 13回目 ⇒ 開始 14:26:17.799
ID: 14回目 ⇒ 開始 14:26:17.799
ID: 15回目 ⇒ 開始 14:26:17.799
ID: 16回目 ⇒ 開始 14:26:17.799
ID: 17回目 ⇒ 開始 14:26:17.799
ID: 18回目 ⇒ 開始 14:26:17.799
ID: 19回目 ⇒ 開始 14:26:18.761
ID: 20回目 ⇒ 開始 14:26:18.763
ID: 21回目 ⇒ 開始 14:26:19.760
ID: 22回目 ⇒ 開始 14:26:19.762
ID: 23回目 ⇒ 開始 14:26:20.762
ID: 24回目 ⇒ 開始 14:26:20.763
ID: 25回目 ⇒ 開始 14:26:20.802
ID: 26回目 ⇒ 開始 14:26:20.802
ID: 27回目 ⇒ 開始 14:26:20.802
ID: 28回目 ⇒ 開始 14:26:20.802
ID: 29回目 ⇒ 開始 14:26:20.802


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

```C#
        private void button1_Click(object sender, EventArgs e)
        {
            非同期処理Async();
        }

        private async void 非同期処理Async()
        {
            var cts = new CancellationTokenSource();
            var token = cts.Token;

            //タスクをList化する。
            var tasks = new List<Task<string>>();
            for (var i = 0; i < 30; i++)
            {
                var val = i;　　//【ポイント】iをそのまま使うと正しくiを認識できないので一旦valに移す。
                tasks.Add(Task.Run(() => _重い処理(3, val.ToString() + "回目", token), token));
            }

            //OKが戻ってくるまで待つ
            while (0 < tasks.Count)
            {
                var task = await Task.WhenAny(tasks);
                var s = await task;
                if (s.Contains("OK"))　　//OKが戻ってきたのでbrake!
                {
                    DateTime now = DateTime.Now;
                    Console.WriteLine($"=========>OK発見!!!: {task.Result} / 終了{now:HH:mm:ss.fff}");
                    break;
                };
                tasks.Remove(task);     //OKが含まれていないタスクなのでRemove!
            }

            //処理途中のタスクはCancel!
            cts.Cancel();
        }

        static string _重い処理(int count, string ID, CancellationToken token)
        {
            //タスク開始時刻
            DateTime now = DateTime.Now;
            Console.WriteLine($"ID: {ID} ⇒ 開始 {now:HH:mm:ss.fff}");

            //長大処理
            for (int i = 0; i < count; i++)
            {
                if (token.IsCancellationRequested)
                {
                    return $"{ID} / キャンセルされました";
                }
                Thread.Sleep(1000); //1秒停止
            }

            string ans = "";

            if (ID == "29回目")        //29回目だけOK
            {
                ans = ID + "/OK";
            }
            else 
            {
                ans = ID + "/NG";
            }

            return ans;
        }
```

### 補足情報
[一体何をしたいのか？]
実は、画像マッチングしてまして…
モニタ画面をビットマップにして取込み、画像の左上から右方向に走査、1ピクセル下がって同じ操作…という処理をしています。
目的の画像が右下の方にあると発見までに10秒近く掛かります。
そこで、ビットマップを横方向に帯状に区切って、各タスクに探してもらっては？と考えています。


C# 非同期処理(並行処理)の大量タスクの開始タイミングについて

### 実現したいこと
barba.jsでページ遷移しても<audio>タグで、音楽を途切れる事なく流し続けたいが、
PCのクロームだとうまくいきますが、iPhoneだとページB.htmlやページC.htmlに遷移した時に
自動再生され、どんどん音楽が流れ重複してしまう。ので、iPhoneでもクロームのように通常にしたい。

### 発生している問題・分からないこと
自動再生（auto）を使わないとPCのクロームでは遷移して再生し続ける事はできないみたいですが、
iPhoneのsafariだと勝手に再生されてしまうみたいです。



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

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページA</title>
  <script src="https://unpkg.com/@barba/core"></script>
</head>
<body data-barba="wrapper">
  
  
  <audio id="fixed" data-barba-prevent controls autoplay loop>
    <source src="music.mp3" type="audio/mpeg">
    お使いのブラウザは audio 要素をサポートしていません。
  </audio>

  <div data-barba="container">
    <h1>ページA</h1>
    <p><a href="pageB.html">ページBへ</a></p>
    <p><a href="pageC.html">ページCへ</a></p>
  </div>

  <script>
    barba.init(); 
  </script>
</body>
</html>

```

```pageB.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページB</title>
  <script src="https://unpkg.com/@barba/core"></script>
</head>
<body data-barba="wrapper">
  
  
  <audio id="fixed" data-barba-prevent controls autoplay loop>
    <source src="music.mp3" type="audio/mpeg">
    お使いのブラウザは audio 要素をサポートしていません。
  </audio>

  <div data-barba="container">
    <h1>ページB</h1>
    <p><a href="index.html">ページAへ</a></p>
    <p><a href="pageC.html">ページCへ</a></p>
  </div>

  <script>
    barba.init(); 
  </script>
</body>
</html>

```

```pageC.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページC</title>
  <script src="https://unpkg.com/@barba/core"></script>
</head>
<body data-barba="wrapper">
  
  
  <audio id="fixed" data-barba-prevent controls autoplay loop>
    <source src="music.mp3" type="audio/mpeg">
    お使いのブラウザは audio 要素をサポートしていません。
  </audio>

  <div data-barba="container">
    <h1>ページC</h1>
    <p><a href="pageB.html">ページBへ</a></p>
    <p><a href="index.html">ページAへ</a></p>
  </div>

  <script>
    barba.init(); 
  </script>
</body>
</html>

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
ChatGPTで聞き、出したコードでもうまくいきませんでした。

### 補足
参考にしたいサイトです。
https://yusannouekiya.com/

barba.jsでページ遷移しても音楽を途切れず流したいがiPhoneだとできない

### 実現したいこと
クラウド上（Renderを使用予定）から、指定したYoutube動画の字幕を取得したいです。
Ruby On RailsからPythonで作成したスクリプトを呼びだすことで実現しようとしています。

現在はCodespaces上でRailsの環境を作成し、そこで作成をしています。

### 発生している問題・分からないこと
字幕取得部分でエラーが発生します。
エラー文を読む限り、Youtubeはクラウドからのリクエストをブロックしているため、処理ができないのではないかと思っています。

### エラーメッセージ
```error
Started POST "/translate" for 10.240.2.99 at 2025-03-11 22:08:10 +0000
Cannot render console from 10.240.2.99! Allowed networks: 127.0.0.0/127.255.255.255, ::1
Processing by HomeController#translate as HTML
  Parameters: {"youtube_url"=>"https://www.youtube.com/watch?v=xUMlxinV-MA"}
Traceback (most recent call last):
  File "/workspaces/translation-youtube/translation_youtube/lib/python_scripts/python_scripts.py", line 51, in <module>
    print(getSubtitlesWithApi())
          ^^^^^^^^^^^^^^^^^^^^^
  File "/workspaces/translation-youtube/translation_youtube/lib/python_scripts/python_scripts.py", line 36, in getSubtitlesWithApi
    transcript = YouTubeTranscriptApi.get_transcript(video_id, languages=['ja'])
                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_api.py", line 300, in get_transcript
    cls.list_transcripts(video_id, proxies, cookies)
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_api.py", line 201, in list_transcripts
    return ytt_api.list(video_id)
           ^^^^^^^^^^^^^^^^^^^^^^
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_api.py", line 129, in list
    return self._fetcher.fetch(video_id)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_transcripts.py", line 349, in fetch
    self._extract_captions_json(self._fetch_video_html(video_id), video_id),
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_transcripts.py", line 363, in _extract_captions_json
    self._assert_playability(video_data.get("playabilityStatus"), video_id)
  File "/home/codespace/.python/current/lib/python3.12/site-packages/youtube_transcript_api/_transcripts.py", line 382, in _assert_playability
    raise RequestBlocked(video_id)
youtube_transcript_api._errors.RequestBlocked: 
Could not retrieve a transcript for the video https://www.youtube.com/watch?v=BzJHh5IZV2o! This is most likely caused by:

YouTube is blocking requests from your IP. This usually is due to one of the following reasons:
- You have done too many requests and your IP has been blocked by YouTube
- You are doing requests from an IP belonging to a cloud provider (like AWS, Google Cloud Platform, Azure, etc.). Unfortunately, most IPs from cloud providers are blocked by YouTube.

There are two things you can do to work around this:
1. Use proxies to hide your IP address, as explained in the "Working around IP bans" section of the README (https://github.com/jdepoix/youtube-transcript-api?tab=readme-ov-file#working-around-ip-bans-requestblocked-or-ipblocked-exception).
2. (NOT RECOMMENDED) If you authenticate your requests using cookies, you will be able to continue doing requests for a while. However, YouTube will eventually permanently ban the account that you have used to authenticate with! So only do this if you don't mind your account being banned!

If you are sure that the described cause is not responsible for this error and that a transcript should be retrievable, please create an issue at https://github.com/jdepoix/youtube-transcript-api/issues. Please add which version of youtube_transcript_api you are using and provide the information needed to replicate the error. Also make sure that there are no open issues which already describe your problem!
  Rendering text template
  Rendered text template (Duration: 0.0ms | Allocations: 10)
Completed 200 OK in 1099ms (Views: 1.1ms | ActiveRecord: 0.0ms | Allocations: 584)
```

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

```Python
def getSubtitlesWithApi():
    # 対象のYouTube動画のIDを指定
    video_id = 'BzJHh5IZV2o'

    # 日本語の字幕を取得
    transcript = YouTubeTranscriptApi.get_transcript(video_id, languages=['ja'])

    # 字幕データを表示
    print(transcript)

    # 字幕テキストを結合して一つの文字列にする
    transcript_text = ' '.join([item['text'] for item in transcript])

    # 加工後のテキストを表示
    return "Subtitles" + transcript_text
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
特に有用は結果は得られませんでした。

### 補足
特になし

クラウド上からyoutube-transcript-apiを実行したい

### 実現したいこと
例えば日曜日と月曜日がが18時-26時で営業時間だった場合、日曜の24時までは正しく出るが24時を超えると、営業時間外が出てしまう。これを深夜2時までは営業中と表示させたいです。

### 前提
TypeScriptでお店の営業時間をまとめるシステムを作っています。
営業時間を判定する機能を実装しているのですが、24時を超えた営業時間に対してどうしても営業時間外と出てしまいます。（24時までは正しく”営業中”とでます）


### ソースコード
```
const checkIfOpen = (opening_hours: string) => {
    const now = dayjs().locale("ja");
    let today = now.format("dddd").replace("曜日", "").trim();
    let tomorrow = now.add(1, "day").format("dddd").replace("曜日", "").trim();
    let yesterday = now.subtract(1, "day").format("dddd").replace("曜日", "").trim();
    const currentTime = now.format("HH:mm");

    console.log(`📆 現在の曜日: ${today}, 時刻: ${currentTime}`);

    // ✅ 営業時間マップを作成
    const hoursMap: { [key: string]: { open: string; close: string } } = {};
    opening_hours.split("\n").forEach((line) => {
        const match = line.match(/^(.+?曜)\s*(\d{1,2}:\d{2})〜(\d{1,2}:\d{2})$/);
        if (match) {
            const day = match[1].trim();
            let openTime = match[2].trim();
            let closeTime = match[3].trim();

            // `closeTime` をそのまま27:30などの表記で保持
            hoursMap[day] = { open: openTime, close: closeTime };
        }
    });

    console.log("🗺 営業時間マップ:", hoursMap);

    // ✅ 深夜（00:00〜05:59）は `昨日` のデータを探す
    if (now.hour() < 6) {
        console.log(`⚠️ 深夜時間 (${currentTime}) のため、前日(${yesterday})の営業時間を適用`);
        today = yesterday;
    }

    console.log("🔍 検索対象:", today);

    let foundKey = Object.keys(hoursMap).find((key) => key.startsWith(today));

    if (!foundKey) {
        console.error(`⚠️ '${today}' のデータが見つかりません`);
        return { isOpen: false, nextOpening: "情報なし" };
    }

    const todayHours = hoursMap[foundKey] || { open: "情報なし", close: "情報なし" };
    console.log(`📆 今日(${today}) の営業時間:`, todayHours);

    if (!todayHours.open || todayHours.open === "情報なし") {
        return { isOpen: false, nextOpening: "情報なし" };
    }

    if (todayHours.open.includes("休み")) {
        return { isOpen: false, nextOpening: "本日休業" };
    }

    // ✅ 営業時間の判定
    let nextOpening = "";
    let isOpen = false;

    let open = dayjs(`${now.format("YYYY-MM-DD")} ${todayHours.open}`, "YYYY-MM-DD HH:mm");
    let closeHour = parseInt(todayHours.close.split(":")[0], 10);
    let closeMinute = parseInt(todayHours.close.split(":")[1], 10);

    let close = dayjs(now)
        .set("hour", closeHour >= 24 ? closeHour - 24 : closeHour)
        .set("minute", closeMinute);

    console.log(`🕒 営業時間: ${open.format("HH:mm")} 〜 ${close.format("HH:mm")}`);

    if (now.isBetween(open, close, null, "[)")) {
        isOpen = true;
        nextOpening = `本日 ${close.format("HH:mm")} まで営業`;
    }

    // **営業時間終了後に、翌日の営業時間を取得**
    if (!isOpen) {
        const nextDayKey = Object.keys(hoursMap).find((key) => key.startsWith(tomorrow));
        if (nextDayKey) {
            nextOpening = `次の営業: ${nextDayKey} ${hoursMap[nextDayKey]?.open} から`;
        }
    }

    return { isOpen, nextOpening };
};

```
### 言語名
TypeScript

### 試したこと
Supabaseを利用しているのですが、営業時間を深夜2時にしたり、26時にしたりとしましたが、日付が変わったタイミングでどうしても営業時間外になってしまい翌日の営業時間を参照してしまいます。



TypeScriptで営業時間を正しく表示できないです、、、

### 実現したいこと
スクロールすると右側の目次が追従し、sectionごとに目次部分が切り替わるような仕様を作りたいです。
section1にいる場合は目次「①」に背景色が加わり、そのsectionの見出し文が表示されるような感じです。
section2以降にスクロールした場合は、目次「①」の背景色と見出し文がなくなり、「②」の背景色と見出し文が表示されるような仕様です。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-06/99c1864e-5e9a-458c-8dc8-5cef23cfdd71.png)


### 発生している問題・分からないこと
https://www.bring-flower.com/blog/fixed-and-highlighted-toc/
BringFlowerさんのコードを参考にしました。

olタグの幅を縮めて無理やり縦書きにして、上記のようなものを実現しようと試みましたが、上手くいきません。
JavaScriptにまだまだ乏しく、どのように書けば再現できますでしょうか？
どうかよろしくお願いします。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-06/f70979c5-c6ae-4971-880b-82bcb3512c1e.png)

※追加しました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-03-06/7750e11f-f5e4-4710-9427-25cfef3329c1.png)

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

```html、css、JavaScript
<meta name="robots" content="noindex,nofollow" />
<!doctype html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://plot-hub.com/code_example/lib/css/reset.css">

  <style media="screen">
    section.toc-demo{
      margin: 0 auto;
    }
    h2{
      font-size: 20px;
      background-color: #f3f3f3;
      border-bottom: 3px solid #333;
      padding: 5px 0 5px 10px;
    }
    p{
      padding-left: 10px;
    }
    ol{
      width: 43px;
      position: fixed;
      top: 4vh;
      right: 25px;
    }
    li{
      list-style-type:none;
    }
    a{
      display: block;
      width: 100%;
      color: #fff;
      margin-bottom: 1px;
      text-decoration: none;
      padding: 3px 5px 3px 10px;
    }
    a.current{
      background-color: #dd5eb3;
      color: #000;
      writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      -moz-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      -ms-writing-mode: vertical-rl;
    }
    .top{
      width: 100%;
      height: 70vh;
      background-color: #fbb03b;
    }
    .writing-mode{
      writing-mode: vertical-rl;
      -webkit-writing-mode: vertical-rl;
      -moz-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      -ms-writing-mode: vertical-rl;
    }

    .content{
      width: 100%;
      height: 100vh;
    }
    .toc-demo .content:nth-child(2){
      background: #8cc63f;
    }
    .toc-demo .content:nth-child(3){
      background: #0092ff;
    }
  </style>
</head>

<body>
  <section class="top">TOP</section>
  <section class="toc-demo">
    <div class="content">
      <h2 class="h2test">見出し１</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し２</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し３</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し４</h2>
    </div>
    <div class="content">
      <h2 class="h2test">見出し５</h2>
    </div>
</section>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript">
    const headings = document.querySelectorAll('.h2test');
let toc = '<ol id="fixed-toc">';

headings.forEach( function(heading, index) {
  heading.id = 'heading-0' + (index+1);
  let id = heading.id;
  toc = toc + '<li><a href="#' + id + '">' + heading.textContent + '</a></li>';
});

toc = toc + '</ol>';
document.querySelector('.toc-demo').insertAdjacentHTML('afterbegin', toc);

window.addEventListener('scroll', function() {
    let scroll = window.scrollY;//スクロール量を取得
    let hight = window.innerHeight;//画面の高さを取得
    let offset = 400;//どの時点で現在表示されている見出しとするかの調整値
    const toc_completed = document.getElementById('fixed-toc');

    headings.forEach( function( heading , index) {
        let i = index + 1;
        let target = document.querySelector('#fixed-toc li:nth-of-type(' + i + ') > a');
        let pos = heading.getBoundingClientRect().top + scroll;//見出しの位置

        if ( scroll > pos - hight + offset ) {//スクロール量が見出しを超えた

            if (headings[index + 1] !== undefined){// 次の見出しがある＝最後の見出しではない

                let next_pos = headings[index + 1].getBoundingClientRect().top + scroll;//次の見出しの位置
                if ( scroll > next_pos - hight + offset ) { // スクロール量が次の見出しも超えている
                    target.classList.remove('current');
                } else if (target.classList.contains('current') == true) { // すでにcurrentがついている
                    return;
                } else if ( i == 1 && toc_completed.classList.contains('active') == false ){// 1つ目
                    target.classList.add('current')
                    toc_completed.classList.add('active')
                } else { // 次の見出しは見えてない
                    target.classList.add('current');
                }

            } else { //最後の見出しの時
                target.classList.add('current');
            }
        } else { //スクロール量が見出しを超えてない
            target.classList.remove('current');
            if ( i == 1 && toc_completed.classList.contains('active')){ //１つ目に到達していない場合
                toc_completed.classList.remove('active')
            }
        }
    });
});
  </script>



</body>

</html>

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
JavaScript内のheading.textContentが見出し文だと思うのですが、だけ表示するには新たにif文を加えていけばいいのでしょうか？
目次の数字は見出しには書かないようにしたいのですが、いまいちやり方がわかりません...。

### 補足
特になし

【HTML】目次の作成について

### 実現したいこと

※テキストテキスト
↑このような箇条書き文（インデントあり）を入れる


### 前提

htmlで作成するふつうの静的ページです。

※テキストテキスト

↑このような箇条書き文（インデントあり）にて、
行頭の「※」記号が、PCでは全角なのですが、スマホで見ると半角になってしまいます（それゆえ、スマホではインデント（1em頭出し）が揃わない）。

charsetはUTF-8
font-familyは"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
です。

仕方ないので、「※」をCSV画像とし、疑似要素で入れています。
対処できるのでいいっちゃいいんですが、めんどくさいです。
ググってみましたが、案外情報が無く…
同じような現象を経験した方いらっしゃるでしょうか。
どのように解決されていますか？


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

```ここに言語を入力
<ul class="indent">
<li>※テキストテキスト</li>
</ul>

.indent li {
text-indent:-1em;
margin-left: 1em;
}
```


html内の「※」などの記号がスマホ表示で半角になってしまう

コードの質にもよると思いますが、
一人で1MBのコードを書きあげた場合、
この業界ではどんな評価がされるのでしょうか？
1MBのコードを書きあげることは普通と評価されるのか？
教えてください

もし普通であれば何MBを一人で書きあげたら異常者だと思うレベルかも教えてください

プログラマーの業界において1MBのコードを一人で書いた場合

### 実現したいこと
SQLServerに、DB内の各種テーブルから　データ抽出してクラウド環境向けにデータ連携する定刻処理を構築しました。
SQLServerのジョブの機能を活用した定刻処理の確立でしたが、実行する曜日を前もって指定できても、国民の祝祭日を非動作にする設定ができない　悩ましい問題に直面しています。

ちなみに、当社の営業日は　同SQLServer内のあるテーブルに格納されています。
つまり、このテーブルには　国民の祝祭日のレコードは　登録されていない状況です。


### 発生している問題・分からないこと
先に記載した　営業日のみが蓄積されたテーブルを参照して、連携データ作成・所定ファルダへの配置を達成する本質処理へ遷移する・しない　みたいな挙動を達成したいのですが
どういった手はずで　対処すればよいのか　私　わからくて．．．。

単純に今回言及した処理内先頭で、当該テーブルに対し　実行日を指定した　SELECT発行を行い、レコード結果を得られない場合は　当該一連処理を終えてしまうようにすればよいのでしょうが　その手立てがわかりません（現在ジョブから起動している当該の処理は　SSIS：SQL Server Integration Services　の技術です）

実行日を指定して、当該テーブルを参照しレコード検知できたか否かの戻り値を返す　これ用途の別プログラムを用意しなければならない、ということでしょうか？？

当該テーブルから実行日のレコードを得られた場合に限り、あるテキストファイルを作るようにしてこのファイルの存在・不存在で　本質処理の進行を判断できる・できないようにすることもできるかな、とか考えしたが、レコード得られずとも空ファイルが仕上がっていまうかな　とか思い出していて．．．　



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

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
自分の調べ方がわるいのか　参考になる記事をみつけることができませんでした。


### 補足
特になし

DB内の稼働日カレンダ情報（テーブル）を参照して、データ連携処理の起動・非起動を見極めたい

### 実現したいこと
DockerをMac( チップ Apple M1)にダウンロードしたいです。
初心者で分からないことが多いので、詳細に説明していただけたら嬉しいです。

### 発生している問題・分からないこと
「マルチウェアがブロックされました。」と表示され、できません。完了を押しても何度も警告が出ます。
4.38.0と4.37.2を試しましたが同じ結果でした。
システム設定のセキュリティで開いた後にこのメッセージが出ます。

### エラーメッセージ
```error
マルチウェアがブロックされました。
"com.docker.vmnetd"にはマルウェアが含まれているため開けませんでした。この操作によるMacへの損害はありませんでした。
```

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

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
データを削除しながら何度もサイトごとの方法を試しましたが、「マルチウェアがブロックされました。」と出ていまいました。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-02-26/28aea795-7c0a-47b8-87d4-02fbd55c3d67.png)

### 補足
特になし

Dockerをダウンロードしたいです。

### 実現したいこと
このサイト(teratail)の質問を作成する時、写真が上手く反映しないです。。。
したのようになります。↓
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-02-25/f167d30c-3078-442e-a3a1-46f3b414dc5f.png)

クリックして見ると、
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
</Error>

とでます。

### 発生している問題・分からないこと
画像を前みたいに出せるようにしたいです。



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

```
特になし
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
</Error>
をcopilotに聞いてみたのですが、
「アクセス拒否」エラーが表示される場合、これは通常、ファイルやリソースにアクセスするための適切な権限がないことが原因です。

以下の手順を試してみてください：

権限の確認: ファイルやサーバーにアクセスするための適切な権限があるか確認してください。必要ならば、管理者に問い合わせてアクセス権を取得してください。

ファイルの場所確認: パスが正確であり、現在のネットワークやデバイスからファイルにアクセスできるかどうかを確認してください。

別のデバイスやネットワークを試す: ウェブサイトであれば、別のデバイスやネットワークからアクセスを試みてください。

と返されました。

### 補足
特になし

このサイト(teratail)の質問を作成する時、写真が上手く反映しない

### 実現したいこと
以下のようなテーブルがあります。

```SQL
DROP TABLE IF EXISTS `logs`;
CREATE TABLE `logs` (
  `task_id` int(11) NOT NULL,
  `mac` varchar(17) NOT NULL,
  `collection_time` timestamp NOT NULL DEFAULT current_timestamp(),
  `mv` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL CHECK (json_valid(`mv`)),
  `response` int(11) NOT NULL DEFAULT 0,
  PRIMARY KEY (`task_id`,`mac`,`collection_time`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;

```
```SQL
INSERT INTO `logs` VALUES
(1,'a','2025-02-20 00:00:00','{"20":1}',1),
(1,'b','2025-02-20 00:00:00','{"20":2,  "25":3}',  1),
(1,'c','2025-02-20 00:00:00','{"20":4,  "25":5,    "30":6}',  1),
(1,'d','2025-02-20 00:00:00','{"20":7,  "25":8,    "30":9,    "35":10}', 1),
(1,'a','2025-02-20 00:01:00','{"20":11}',1),
(1,'b','2025-02-20 00:01:00','{"20":12, "25":13}', 1),
(1,'c','2025-02-20 00:01:00','{"20":14, "25":15,   "30":16}', 1),
(1,'d','2025-02-20 00:01:00','{"20":17, "25":18,   "30":19,   "35":20}', 1);

```
```SQL
SELECT collection_time, mac, mv FROM logs ORDER BY collection_time, mac;
```
+---------------------+-----+------------------------------------------+
| collection_time     | mac | mv                                       |
+---------------------+-----+------------------------------------------+
| 2025-02-20 00:00:00 | a   | {"20":1}                                 |
| 2025-02-20 00:00:00 | b   | {"20":2,  "25":3}                        |
| 2025-02-20 00:00:00 | c   | {"20":4,  "25":5,    "30":6}             |
| 2025-02-20 00:00:00 | d   | {"20":7,  "25":8,    "30":9,    "35":10} |
| 2025-02-20 00:01:00 | a   | {"20":11}                                |
| 2025-02-20 00:01:00 | b   | {"20":12, "25":13}                       |
| 2025-02-20 00:01:00 | c   | {"20":14, "25":15,   "30":16}            |
| 2025-02-20 00:01:00 | d   | {"20":17, "25":18,   "30":19,   "35":20} |
+---------------------+-----+------------------------------------------+

このテーブルに対してクエリーを行い、以下のような結果を得たいと思います。

```SQL
SELECT 
    collection_time,
    LEAST(
    MIN(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."20"') = 0 THEN 99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."20"')) AS DECIMAL(10, 2)) END)
,   MIN(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."25"') = 0 THEN 99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."25"')) AS DECIMAL(10, 2)) END)
,   MIN(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."30"') = 0 THEN 99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."30"')) AS DECIMAL(10, 2)) END)
,   MIN(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."35"') = 0 THEN 99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."35"')) AS DECIMAL(10, 2)) END)
    ) as min,
    GREATEST(
    MAX(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."20"') = 0 THEN -99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."20"')) AS DECIMAL(10, 2)) END)
,   MAX(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."25"') = 0 THEN -99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."25"')) AS DECIMAL(10, 2)) END)
,   MAX(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."30"') = 0 THEN -99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."30"')) AS DECIMAL(10, 2)) END)
,   MAX(CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$."35"') = 0 THEN -99999
        ELSE CAST(JSON_UNQUOTE(JSON_EXTRACT(mv, '$."35"')) AS DECIMAL(10, 2)) END)
    ) AS max,
    '???' AS avg
FROM logs
GROUP BY collection_time;
```
+---------------------+-------+-------+-----+
| collection_time     | min   | max   | avg |
+---------------------+-------+-------+-----+
| 2025-02-20 00:00:00 |  1.00 | 10.00 | ??? |
| 2025-02-20 00:01:00 | 11.00 | 20.00 | ??? |
+---------------------+-------+-------+-----+

この、avg の取得方法についてご教示ください。
avg の計算方法は以下の通りです。

```SQL
SELECT 
    collection_time, mac, 
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.20') = 1
         THEN JSON_EXTRACT(mv, '$.20') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.25') = 1
         THEN JSON_EXTRACT(mv, '$.25') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.30') = 1
         THEN JSON_EXTRACT(mv, '$.30') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.35') = 1
         THEN JSON_EXTRACT(mv, '$.35') ELSE '' END  AS sum,
    (JSON_CONTAINS_PATH(mv, 'one', '$.20')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.25')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.30')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.35'))         AS count,
    (
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.20') = 1
         THEN JSON_EXTRACT(mv, '$.20') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.25') = 1
         THEN JSON_EXTRACT(mv, '$.25') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.30') = 1
         THEN JSON_EXTRACT(mv, '$.30') ELSE '' END +
    CASE WHEN JSON_CONTAINS_PATH(mv, 'one', '$.35') = 1
         THEN JSON_EXTRACT(mv, '$.35') ELSE '' END
    ) / (
    (JSON_CONTAINS_PATH(mv, 'one', '$.20')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.25')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.30')) +
    (JSON_CONTAINS_PATH(mv, 'one', '$.35'))
    )  AS avg
FROM logs
ORDER BY collection_time, mac
;
```
+---------------------+-----+------+-------+------+
| collection_time     | mac | sum  | count | avg  |
+---------------------+-----+------+-------+------+
| 2025-02-20 00:00:00 | a   |    1 |     1 |    1 |
| 2025-02-20 00:00:00 | b   |    5 |     2 |  2.5 |
| 2025-02-20 00:00:00 | c   |   15 |     3 |    5 |
| 2025-02-20 00:00:00 | d   |   34 |     4 |  8.5 |
| 2025-02-20 00:01:00 | a   |   11 |     1 |   11 |
| 2025-02-20 00:01:00 | b   |   25 |     2 | 12.5 |
| 2025-02-20 00:01:00 | c   |   45 |     3 |   15 |
| 2025-02-20 00:01:00 | d   |   74 |     4 | 18.5 |
+---------------------+-----+------+-------+------+

１つの collection_time に対して、avg が mac の個数分作られています。
で、最終的に求めたい avg は、 (1 + 2.5 + 5 + 8.5 ) / 4 = 4.25 と (11 + 12.5 + 15 + 17.5) / 4 = 14 となります。

以上、よろしくお願いします。


### 発生している問題・分からないこと
平均の平均を求める方法を知りたい。



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

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
同様の質問を見つけることができなかった。

### 補足
テーブルはかなり省略して書いてありますが、実際にはJSONフィールドにキーが200以上あります。
レコード数が非常に多いため（JSONにしても、論理的には1億行オーバー）、このような構成になっています。データベースはMariaDB-10.11.9です。

平均の平均を求めたい。

### 実現したいこと
Webシステムでパスワード入力時にパスワードマネージャーを起動させたい

### 発生している問題・分からないこと
パスワード入力時にパスワードマネージャーが起動しない




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

```HTML
<form method="post" name="default_form" id="default_form"> </form>
<input form="default_form" size="15" autocomplete="username" name="user_id" id="default_form_user_id" type="text">
<input form="default_form" size="15" autocomplete="on" name="password" id="default_form_password" placeholder="Password" type="password" class="PASSWORD_INPUT">
```

```Javacsript
function onDownPasswordButton( x_id ) {
	let p_inputBox = $(x_id);
	let p_button = $(x_id + "_button");
	p_inputBox.type = "text";
	p_button.src = "Image\\openPass.png"
}

function onUpPasswordButton( x_id ) {
	let p_inputBox = $(x_id);
	let p_button = $(x_id + "_button");
	p_inputBox.type = "password";
	p_button.src = "Image\\closePass.png"
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
autocompleteを変更することで実装できると記載があったので、new-password,current-password,onを試しているが実装できなかった
また、httpではなくhttpsだと実現するとあったのでhttpsでも試しているができていない
ChatGPTでJava側でリダイレクトが必要であるや、クッキーの保存をしていることも影響するなどあったので試しているができていない

### 補足
特になし