for demo

soto3 · soto3 · commit 8486acc9d2a5 · 2025-06-11T11:47:20.000+09:00
diff --git a/05/jsx_react__eventHandler_build/README.md b/05/jsx_react__eventHandler_build/README.md
@@ -0,0 +1 @@
+`npm run build`してから、`index.html`を live-server 等でブラウザで開くと動作確認できます。
diff --git a/05/jsx_react__eventHandler_build/index.html b/05/jsx_react__eventHandler_build/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <script type="module" src="dist/App.js"></script>
+  </body>
+</html>
diff --git a/05/jsx_react__eventHandler_build/jsx.d.ts b/05/jsx_react__eventHandler_build/jsx.d.ts
@@ -0,0 +1,5 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    [key: string]: any;
+  }
+}
diff --git a/05/jsx_react__eventHandler_build/package-lock.json b/05/jsx_react__eventHandler_build/package-lock.json
diff --git a/05/jsx_react__eventHandler_build/package.json b/05/jsx_react__eventHandler_build/package.json
@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "build": "node_modules/.bin/tsc"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.4"
+  }
+}
diff --git a/05/jsx_react__eventHandler_build/src/App.tsx b/05/jsx_react__eventHandler_build/src/App.tsx
@@ -0,0 +1,18 @@
+import { h } from './h.js';
+
+const App = () => {
+  let count = 0;
+  return (
+    <button
+      onClick={(event: Event) => {
+        count++;
+        (event.target! as HTMLButtonElement).textContent = count.toString();
+      }}
+    >
+      {count}
+    </button>
+  );
+};
+
+const dom = App();
+document.body.append(dom);
diff --git a/05/jsx_react__eventHandler_build/src/h.ts b/05/jsx_react__eventHandler_build/src/h.ts
@@ -0,0 +1,14 @@
+export const h = (element: any, attributes: any, ...children: any) => {
+  const el = document.createElement(element);
+  for (const attrName in attributes) {
+    const attrValue = attributes[attrName];
+    if (/^on[A-Z][a-z]/.test(attrName) && typeof attrValue === 'function') {
+      const eventName = attrName.slice(2).toLowerCase();
+      el.addEventListener(eventName, attrValue);
+    } else {
+      el.setAttribute(attrName, attrValue);
+    }
+  }
+  el.append(...children);
+  return el;
+};
diff --git a/05/jsx_react__eventHandler_build/tsconfig.json b/05/jsx_react__eventHandler_build/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "outDir": "dist"
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+`npm run build`してから、`index.html`を live-server 等でブラウザで開くと動作確認できます。
-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +<!DOCTYPE html>
 +<html>
 +  <body>
 +    <script type="module" src="dist/App.js"></script>
 +  </body>
 +</html>