create docs

docs/App.css

@@ -0,0 +1,49 @@
+.App {
+  text-align: center;
+  margin-top: 2rem;
+  font-family: sans-serif;
+}
+
+input[type='number'] {
+  padding: 0.5rem;
+  font-size: 1rem;
+  margin-right: 1rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+select {
+  padding: 0.5rem;
+  font-size: 1rem;
+  margin-right: 1rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+p {
+  margin-top: 1rem;
+  font-size: 1.2rem;
+}
+
+@media (max-width: 600px) {
+  input[type='number'],
+  select,
+  button {
+    margin-bottom: 0.5rem;
+  }
+}

docs/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

docs/App.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import './App.css';
+
+function App() {
+  const [inputValue, setInputValue] = useState<number>(0);
+  const [displayValue, setDisplayValue] = useState<number>(0);
+  const [unit, setUnit] = useState<string>('東京ドーム');
+  const [localUnit, setLocalUnit] = useState<string>('地元の図書館');
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseFloat(e.target.value);
+    setInputValue(value);
+  };
+
+  const handleUnitChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setUnit(e.target.value);
+  };
+
+  const handleLocalUnitChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setLocalUnit(e.target.value);
+  };
+
+  const handleButtonClick = () => {
+    let convertedValue = inputValue;
+    switch (unit) {
+      case '東京ドーム':
+        convertedValue = inputValue * 46755; // 東京ドームの面積を46755m^2に設定
+        break;
+      default:
+        break;
+    }
+
+    let localUnitValue = 0;
+    switch (localUnit) {
+      case '地元の図書館':
+        localUnitValue = 500; // 地元の図書館の面積を500m^2と仮定
+        break;
+      case '地元の公園':
+        localUnitValue = 10000; // 地元の公園の面積を10000m^2と仮定
+        break;
+      default:
+        break;
+    }
+
+    const result = convertedValue / localUnitValue;
+    setDisplayValue(result);
+  };
+
+  return (
+    <div className="App">
+      <h1>東京ドームから地元の建物への変換アプリ</h1>
+      <input type="number" value={inputValue || ''} onChange={handleInputChange} />
+      <select value={unit} onChange={handleUnitChange}>
+        <option value="東京ドーム">東京ドーム</option>
+      </select>
+      <select value={localUnit} onChange={handleLocalUnitChange}>
+        <option value="地元の図書館">地元の図書館</option>
+        <option value="地元の公園">地元の公園</option>
+      </select>
+      <button onClick={handleButtonClick}>変換する</button>
+      <p>入力値: {inputValue} {unit}</p>
+      <p>表示値: {displayValue.toFixed(2)} {localUnit}個分</p>
+    </div>
+  );
+}
+
+export default App;

docs/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

docs/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

docs/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

docs/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

docs/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';