第10回デモ追加（微調整）

cyokodog · cyokodog · commit 30d1484a0930 · 2026-02-10T14:59:02.000+09:00
diff --git a/10/03_focus_control/public/dist/index.js b/10/03_focus_control/public/dist/index.js
@@ -20,16 +20,14 @@ globalThis['__css-content-808794906c4839b82ed240e38daf1f1c__']=".App-module__gPM
     return el;
   };
 
-  // src/getFocusHandler.ts
-  var getFocusHandler = (node) => {
-    return (selector, cursorPosition = 0) => {
-      const target = node.querySelector(selector) || node.parentElement?.querySelector(selector);
-      if (!target) return;
-      target?.focus();
-      if (cursorPosition) {
-        target?.setSelectionRange(cursorPosition, cursorPosition);
-      }
-    };
+  // src/setFocus.ts
+  var setFocus = (node, selector, cursorPosition = 0) => {
+    const target = node.querySelector(selector) || node.parentElement?.querySelector(selector);
+    if (!target) return;
+    target?.focus();
+    if (cursorPosition) {
+      target?.setSelectionRange(cursorPosition, cursorPosition);
+    }
   };
 
   // src/domReplacer.ts
@@ -42,11 +40,10 @@ globalThis['__css-content-808794906c4839b82ed240e38daf1f1c__']=".App-module__gPM
     }
     function render() {
       const id = document.activeElement?.id;
-      const selectionStart = document.activeElement?.selectionStart;
+      const selectionStart = document.activeElement?.selectionStart || 0;
       const newDom = replaceDom();
-      const focus = getFocusHandler(newDom);
-      if (id && focus) {
-        focus(`#${id}`, selectionStart);
+      if (id) {
+        setFocus(newDom, `#${id}`, selectionStart);
       }
     }
     return {
@@ -103,7 +100,7 @@ globalThis['__css-content-808794906c4839b82ed240e38daf1f1c__']=".App-module__gPM
       const inputDom = /* @__PURE__ */ h(
         "input",
         {
-          id: "name-input",
+          id: "value-input",
           class: App_default._Input,
           value: name,
           onKeyup: (e) => {
diff --git a/10/03_focus_control/src/App.tsx b/10/03_focus_control/src/App.tsx
@@ -8,7 +8,7 @@ export const App = () => {
   const appReplacer = domReplacer(() => {
     const inputDom = (
       <input
-        id="name-input"
+        id="value-input"
         class={styles._Input}
         value={name}
         onKeyup={(e: KeyboardEvent) => {
diff --git a/10/03_focus_control/src/domReplacer.ts b/10/03_focus_control/src/domReplacer.ts
@@ -1,4 +1,4 @@
-import { getFocusHandler } from './getFocusHandler.js';
+import { setFocus } from './setFocus.js';
 
 export const domReplacer = (domFactory: () => HTMLElement) => {
   let dom = domFactory();
@@ -12,13 +12,12 @@ export const domReplacer = (domFactory: () => HTMLElement) => {
   function render() {
     // DOMを書き換える前にフォーカスしていた要素のidとselectionStartを記録
     const id = document.activeElement?.id;
-    const selectionStart = (document.activeElement as any)?.selectionStart;
+    const selectionStart = (document.activeElement as any)?.selectionStart || 0;
     const newDom = replaceDom();
 
     // 新しいDOM内に記録したidを持つ要素があればフォーカスする
-    const focus = getFocusHandler(newDom);
-    if (id && focus) {
-      focus(`#${id}`, selectionStart);
+    if (id) {
+      setFocus(newDom, `#${id}`, selectionStart);
     }
   }
 
diff --git a/10/03_focus_control/src/getFocusHandler.ts b/10/03_focus_control/src/getFocusHandler.ts
diff --git a/10/03_focus_control/src/setFocus.ts b/10/03_focus_control/src/setFocus.ts
@@ -0,0 +1,15 @@
+export const setFocus = (
+  node: HTMLElement,
+  selector: string,
+  cursorPosition: number = 0
+) => {
+  const target =
+    node.querySelector(selector) ||
+    node.parentElement?.querySelector(selector);
+  if (!target) return;
+
+  (target as any)?.focus();
+  if (cursorPosition) {
+    (target as any)?.setSelectionRange(cursorPosition, cursorPosition);
+  }
+};
diff --git a/10/04_focus_animation_problem/public/dist/index.js b/10/04_focus_animation_problem/public/dist/index.js
@@ -20,16 +20,14 @@ globalThis['__css-content-e51d94e970ab9519dc972e19df36829d__']=".App-module__gPM
     return el;
   };
 
-  // src/getFocusHandler.ts
-  var getFocusHandler = (node) => {
-    return (selector, cursorPosition = 0) => {
-      const target = node.querySelector(selector) || node.parentElement?.querySelector(selector);
-      if (!target) return;
-      target?.focus();
-      if (cursorPosition) {
-        target?.setSelectionRange(cursorPosition, cursorPosition);
-      }
-    };
+  // src/setFocus.ts
+  var setFocus = (node, selector, cursorPosition = 0) => {
+    const target = node.querySelector(selector) || node.parentElement?.querySelector(selector);
+    if (!target) return;
+    target?.focus();
+    if (cursorPosition) {
+      target?.setSelectionRange(cursorPosition, cursorPosition);
+    }
   };
 
   // src/domReplacer.ts
@@ -42,11 +40,10 @@ globalThis['__css-content-e51d94e970ab9519dc972e19df36829d__']=".App-module__gPM
     }
     function render() {
       const id = document.activeElement?.id;
-      const selectionStart = document.activeElement?.selectionStart;
+      const selectionStart = document.activeElement?.selectionStart || 0;
       const newDom = replaceDom();
-      const focus = getFocusHandler(newDom);
-      if (id && focus) {
-        focus(`#${id}`, selectionStart);
+      if (id) {
+        setFocus(newDom, `#${id}`, selectionStart);
       }
     }
     return {
@@ -104,7 +101,7 @@ globalThis['__css-content-e51d94e970ab9519dc972e19df36829d__']=".App-module__gPM
       const inputDom = /* @__PURE__ */ h(
         "input",
         {
-          id: "name-input",
+          id: "value-input",
           class: App_default._Input,
           value: name,
           onKeyup: (e) => {
diff --git a/10/04_focus_animation_problem/src/App.tsx b/10/04_focus_animation_problem/src/App.tsx
@@ -8,7 +8,7 @@ export const App = () => {
   const appReplacer = domReplacer(() => {
     const inputDom = (
       <input
-        id="name-input"
+        id="value-input"
         class={styles._Input}
         value={name}
         onKeyup={(e: KeyboardEvent) => {
diff --git a/10/04_focus_animation_problem/src/domReplacer.ts b/10/04_focus_animation_problem/src/domReplacer.ts
@@ -1,4 +1,4 @@
-import { getFocusHandler } from './getFocusHandler.js';
+import { setFocus } from './setFocus.js';
 
 export const domReplacer = (domFactory: () => HTMLElement) => {
   let dom = domFactory();
@@ -12,13 +12,12 @@ export const domReplacer = (domFactory: () => HTMLElement) => {
   function render() {
     // DOMを書き換える前にフォーカスしていた要素のidとselectionStartを記録
     const id = document.activeElement?.id;
-    const selectionStart = (document.activeElement as any)?.selectionStart;
+    const selectionStart = (document.activeElement as any)?.selectionStart || 0;
     const newDom = replaceDom();
 
     // 新しいDOM内に記録したidを持つ要素があればフォーカスする
-    const focus = getFocusHandler(newDom);
-    if (id && focus) {
-      focus(`#${id}`, selectionStart);
+    if (id) {
+      setFocus(newDom, `#${id}`, selectionStart);
     }
   }
 
diff --git a/10/04_focus_animation_problem/src/getFocusHandler.ts b/10/04_focus_animation_problem/src/getFocusHandler.ts
diff --git a/10/04_focus_animation_problem/src/setFocus.ts b/10/04_focus_animation_problem/src/setFocus.ts
@@ -0,0 +1,15 @@
+export const setFocus = (
+  node: HTMLElement,
+  selector: string,
+  cursorPosition: number = 0
+) => {
+  const target =
+    node.querySelector(selector) ||
+    node.parentElement?.querySelector(selector);
+  if (!target) return;
+
+  (target as any)?.focus();
+  if (cursorPosition) {
+    (target as any)?.setSelectionRange(cursorPosition, cursorPosition);
+  }
+};
diff --git a/10/05_partial_render_fixed/public/dist/index.css b/10/05_partial_render_fixed/public/dist/index.css
@@ -8,6 +8,26 @@
   width: 320px;
   padding: 10px 14px;
   font-size: 16px;
+  transition: none;
+}
+.App-module__gPMrEW___Input:focus {
+  border-color: #4a90e2;
+  outline: none;
+  animation: .3s ease-in-out App-module__gPMrEW__focusGlow;
+}
+@keyframes App-module__gPMrEW__focusGlow {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 #4a90e266;
+  }
+  50% {
+    transform: scale(1.02);
+    box-shadow: 0 0 0 4px #4a90e233;
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 #4a90e200;
+  }
 }
 .App-module__gPMrEW___Output {
   color: #333;
diff --git a/10/05_partial_render_fixed/public/dist/index.js b/10/05_partial_render_fixed/public/dist/index.js
@@ -1,4 +1,4 @@
-globalThis['__css-content-ff58f6977723202dd0cff6936cddefa0__']=".App-module__gPMrEW__App{padding:20px}.App-module__gPMrEW___Input{border:2px solid #e0e0e0;border-radius:8px;width:320px;padding:10px 14px;font-size:16px}.App-module__gPMrEW___Output{color:#333;background:#f8f9fa;border-left:3px solid #4a90e2;border-radius:4px;margin-top:16px;padding:12px 16px;font-size:16px}\n";globalThis['__css-digest-ff58f6977723202dd0cff6936cddefa0__']="ff58f6977723202dd0cff6936cddefa0";
+globalThis['__css-content-ff58f6977723202dd0cff6936cddefa0__']=".App-module__gPMrEW__App{padding:20px}.App-module__gPMrEW___Input{border:2px solid #e0e0e0;border-radius:8px;width:320px;padding:10px 14px;font-size:16px;transition:none}.App-module__gPMrEW___Input:focus{border-color:#4a90e2;outline:none;animation:.3s ease-in-out App-module__gPMrEW__focusGlow}@keyframes App-module__gPMrEW__focusGlow{0%{transform:scale(1);box-shadow:0 0 #4a90e266}50%{transform:scale(1.02);box-shadow:0 0 0 4px #4a90e233}to{transform:scale(1);box-shadow:0 0 #4a90e200}}.App-module__gPMrEW___Output{color:#333;background:#f8f9fa;border-left:3px solid #4a90e2;border-radius:4px;margin-top:16px;padding:12px 16px;font-size:16px}\n";globalThis['__css-digest-ff58f6977723202dd0cff6936cddefa0__']="ff58f6977723202dd0cff6936cddefa0";
 "use strict";
 (() => {
   // src/h.ts
@@ -20,16 +20,14 @@ globalThis['__css-content-ff58f6977723202dd0cff6936cddefa0__']=".App-module__gPM
     return el;
   };
 
-  // src/getFocusHandler.ts
-  var getFocusHandler = (node) => {
-    return (selector, cursorPosition = 0) => {
-      const target = node.querySelector(selector) || node.parentElement?.querySelector(selector);
-      if (!target) return;
-      target?.focus();
-      if (cursorPosition) {
-        target?.setSelectionRange(cursorPosition, cursorPosition);
-      }
-    };
+  // src/setFocus.ts
+  var setFocus = (node, selector, cursorPosition = 0) => {
+    const target = node.querySelector(selector) || node.parentElement?.querySelector(selector);
+    if (!target) return;
+    target?.focus();
+    if (cursorPosition) {
+      target?.setSelectionRange(cursorPosition, cursorPosition);
+    }
   };
 
   // src/domReplacer.ts
@@ -44,9 +42,8 @@ globalThis['__css-content-ff58f6977723202dd0cff6936cddefa0__']=".App-module__gPM
       const id = document.activeElement?.id;
       const selectionStart = document.activeElement?.selectionStart;
       const newDom = replaceDom();
-      const focus = getFocusHandler(newDom);
-      if (id && focus) {
-        focus(`#${id}`, selectionStart);
+      if (id) {
+        setFocus(newDom, `#${id}`, selectionStart);
       }
     }
     return {
@@ -86,6 +83,7 @@ globalThis['__css-content-ff58f6977723202dd0cff6936cddefa0__']=".App-module__gPM
     "app": "App-module__gPMrEW__App",
     "input": "App-module__gPMrEW___Input",
     "output": "App-module__gPMrEW___Output",
+    "focusGlow": "App-module__gPMrEW__focusGlow",
     "App": "App-module__gPMrEW__App",
     "_Input": "App-module__gPMrEW___Input",
     "_Output": "App-module__gPMrEW___Output"
diff --git a/10/05_partial_render_fixed/src/App.module.css b/10/05_partial_render_fixed/src/App.module.css
@@ -8,6 +8,28 @@
   width: 320px;
   border: 2px solid #e0e0e0;
   border-radius: 8px;
+  transition: none;
+}
+
+._Input:focus {
+  outline: none;
+  border-color: #4a90e2;
+  animation: focusGlow 0.3s ease-in-out;
+}
+
+@keyframes focusGlow {
+  0% {
+    box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.4);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
+    transform: scale(1.02);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
+    transform: scale(1);
+  }
 }
 
 ._Output {
diff --git a/10/05_partial_render_fixed/src/domReplacer.ts b/10/05_partial_render_fixed/src/domReplacer.ts
@@ -1,4 +1,4 @@
-import { getFocusHandler } from './getFocusHandler.js';
+import { setFocus } from './setFocus.js';
 
 export const domReplacer = (domFactory: () => HTMLElement) => {
   let dom = domFactory();
@@ -16,9 +16,8 @@ export const domReplacer = (domFactory: () => HTMLElement) => {
     const newDom = replaceDom();
 
     // 新しいDOM内に記録したidを持つ要素があればフォーカスする
-    const focus = getFocusHandler(newDom);
-    if (id && focus) {
-      focus(`#${id}`, selectionStart);
+    if (id) {
+      setFocus(newDom, `#${id}`, selectionStart);
     }
   }
 
diff --git a/10/05_partial_render_fixed/src/getFocusHandler.ts b/10/05_partial_render_fixed/src/getFocusHandler.ts
diff --git a/10/05_partial_render_fixed/src/setFocus.ts b/10/05_partial_render_fixed/src/setFocus.ts
@@ -0,0 +1,15 @@
+export const setFocus = (
+  node: HTMLElement,
+  selector: string,
+  cursorPosition: number = 0
+) => {
+  const target =
+    node.querySelector(selector) ||
+    node.parentElement?.querySelector(selector);
+  if (!target) return;
+
+  (target as any)?.focus();
+  if (cursorPosition) {
+    (target as any)?.setSelectionRange(cursorPosition, cursorPosition);
+  }
+};
