webtools

commit c61b300b7b8469a8e9df6bd931d37a41996218b0
parent 2ce3996363e786cc3bd1b5d6f6e75ea37e27d53e
Author: Minerva_juppiter <94231606+minerva-jupiter@users.noreply.github.com>
Date:   Sun,  5 Jul 2026 19:00:25 +0900

feat(char-count): add character counter page (#79)

- Implemented a new page that calculates character counts with various formatting options (including/excluding whitespace and newlines) and word counts.
- Added a navigation link to the new tool on the home page.
Diffstat:
A
app/char-count/page.tsx
 | 
57
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
app/page.tsx
 | 
3
+++

2 files changed, 60 insertions(+), 0 deletions(-)
diff --git a/app/char-count/page.tsx b/app/char-count/page.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useState } from "react";
+
+export default function CharCountPage() {
+  const [text, setText] = useState("");
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setText(event.target.value);
+  };
+
+  const countCharsWithNewlines = (str: string): number => {
+    return str.length;
+  };
+
+  const countCharsWithoutNewlines = (str: string): number => {
+    return str.replace(/\n/g, "").length;
+  };
+
+  const countCharsWithoutWhitespace = (str: string): number => {
+    return str.replace(/\s/g, "").length;
+  };
+
+  const countCharsWithoutNewlinesWithWhitespace = (str: string): number => {
+    return str.replace(/\n/g, "").replace(/\s/g, "").length;
+  };
+  const countWords = (str: string): number => {
+    const words = str.trim().split(/\s+/);
+    return words[0] === "" ? 0 : words.length;
+  };
+
+  return (
+    <main>
+      <h1>Count Characters</h1>
+      <textarea
+        value={text}
+        onChange={handleChange}
+        placeholder="ここにテキストを入力してください..."
+        rows={10}
+        cols={50}
+      />
+      <div>
+        <h2>文字数カウント結果:</h2>
+        <ul>
+          <li>改行と空白を含む文字数: {countCharsWithNewlines(text)}</li>
+          <li>改行を含まない文字数: {countCharsWithoutNewlines(text)}</li>
+          <li>空白を含まない文字数: {countCharsWithoutWhitespace(text)}</li>
+          <li>
+            改行と空白を含まない文字数:
+            {countCharsWithoutNewlinesWithWhitespace(text)}
+          </li>
+          <li>単語数: {countWords(text)}</li>
+        </ul>
+      </div>
+    </main>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -16,6 +16,9 @@ export default function Home() {
         <li>
           <Link href="/audio-analysis">Audio Analysis</Link>
         </li>
+        <li>
+          <Link href="/char-count">Count Characters</Link>
+        </li>
       </ul>
     </main>
   );