開発環境

application/client/babel.config.js

@@ -4,16 +4,14 @@ module.exports = {
     [
       "@babel/preset-env",
       {
-        targets: "ie 11",
-        corejs: "3",
-        modules: "commonjs",
+        targets: "defaults, not ie 11",
+        modules: false,
         useBuiltIns: false,
       },
     ],
     [
       "@babel/preset-react",
       {
-        development: true,
         runtime: "automatic",
       },
     ],

application/client/package.json

@@ -5,13 +5,10 @@
   "license": "MPL-2.0",
   "author": "CyberAgent, Inc.",
   "scripts": {
-    "build": "NODE_ENV=development webpack",
+    "build": "NODE_ENV=production webpack",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@ffmpeg/core": "0.12.10",
-    "@ffmpeg/ffmpeg": "0.12.15",
-    "@imagemagick/magick-wasm": "0.0.37",
     "@mlc-ai/web-llm": "0.2.80",
     "@web-speed-hackathon-2026/client": "workspace:*",
     "bayesian-bm25": "0.4.0",
@@ -20,23 +17,19 @@
     "classnames": "2.5.1",
     "common-tags": "1.8.2",
     "core-js": "3.45.1",
+    "dayjs": "1.11.20",
     "encoding-japanese": "2.2.0",
     "fast-average-color": "9.5.0",
-    "gifler": "github:themadcreator/gifler#v0.3.0",
-    "image-size": "2.0.2",
     "jquery": "3.7.1",
     "jquery-binarytransport": "1.0.0",
     "json-repair-js": "1.0.0",
     "katex": "0.16.25",
     "kuromoji": "0.1.2",
     "langs": "2.0.0",
     "lodash": "4.17.21",
-    "moment": "2.30.1",
     "negaposi-analyzer-ja": "1.0.1",
     "normalize.css": "8.0.1",
-    "omggif": "1.0.10",
     "pako": "2.1.0",
-    "piexifjs": "1.0.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-helmet": "npm:@dr.pogodin/react-helmet@3.0.4",
@@ -57,6 +50,8 @@
     "@babel/preset-env": "7.28.3",
     "@babel/preset-react": "7.27.1",
     "@babel/preset-typescript": "7.27.1",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/vite": "^4.2.2",
     "@tsconfig/strictest": "2.0.8",
     "@types/bluebird": "3.5.42",
     "@types/common-tags": "1.8.4",
@@ -74,6 +69,7 @@
     "@types/react-syntax-highlighter": "15.5.13",
     "@types/redux-form": "^8.3.11",
     "babel-loader": "10.0.0",
+    "compression-webpack-plugin": "12.0.0",
     "copy-webpack-plugin": "13.0.1",
     "css-loader": "7.1.2",
     "html-webpack-plugin": "5.6.4",
@@ -83,6 +79,7 @@
     "postcss-loader": "8.2.0",
     "postcss-preset-env": "10.4.0",
     "react-markdown": "10.1.0",
+    "tailwindcss": "^4.2.2",
     "typescript": "5.9.3",
     "webpack": "5.102.1",
     "webpack-cli": "6.0.1",

application/client/postcss.config.js

@@ -1,9 +1,11 @@
+const tailwindcss = require("@tailwindcss/postcss");
 const postcssImport = require("postcss-import");
 const postcssPresetEnv = require("postcss-preset-env");
 
 module.exports = {
   plugins: [
     postcssImport(),
+    tailwindcss(),
     postcssPresetEnv({
       stage: 3,
     }),

application/client/src/components/application/SearchPage.tsx

@@ -1,14 +1,11 @@
-import { useEffect, useMemo, useState } from "react";
+import { ChangeEvent, FormEvent, useEffect, useMemo, useState, useCallback } from "react";
 import { useNavigate } from "react-router";
-import { Field, InjectedFormProps, reduxForm, WrappedFieldProps } from "redux-form";
 
 import { Timeline } from "@web-speed-hackathon-2026/client/src/components/timeline/Timeline";
 import {
   parseSearchQuery,
   sanitizeSearchText,
 } from "@web-speed-hackathon-2026/client/src/search/services";
-import { SearchFormData } from "@web-speed-hackathon-2026/client/src/search/types";
-import { validate } from "@web-speed-hackathon-2026/client/src/search/validation";
 import { analyzeSentiment } from "@web-speed-hackathon-2026/client/src/utils/negaposi_analyzer";
 
 import { Button } from "../foundation/Button";
@@ -18,33 +15,17 @@ interface Props {
   results: Models.Post[];
 }
 
-const SearchInput = ({ input, meta }: WrappedFieldProps) => (
-  <div className="flex flex-1 flex-col">
-    <input
-      {...input}
-      className={`flex-1 rounded border px-4 py-2 focus:outline-none ${
-        meta.touched && meta.error
-          ? "border-cax-danger focus:border-cax-danger"
-          : "border-cax-border focus:border-cax-brand-strong"
-      }`}
-      placeholder="検索 (例: キーワード since:2025-01-01 until:2025-12-31)"
-      type="text"
-    />
-    {meta.touched && meta.error && (
-      <span className="text-cax-danger mt-1 text-xs">{meta.error}</span>
-    )}
-  </div>
-);
-
-const SearchPageComponent = ({
-  query,
-  results,
-  handleSubmit,
-}: Props & InjectedFormProps<SearchFormData, Props>) => {
+export const SearchPage = ({ query, results }: Props) => {
   const navigate = useNavigate();
   const [isNegative, setIsNegative] = useState(false);
+  const [searchText, setSearchText] = useState(query);
 
-  const parsed = parseSearchQuery(query);
+  // URLのクエリが変わったら入力欄を同期
+  useEffect(() => {
+    setSearchText(query);
+  }, [query]);
+
+  const parsed = useMemo(() => parseSearchQuery(query), [query]);
 
   useEffect(() => {
     if (!parsed.keywords) {
@@ -53,48 +34,56 @@ const SearchPageComponent = ({
     }
 
     let isMounted = true;
-    analyzeSentiment(parsed.keywords)
-      .then((result) => {
-        if (isMounted) {
-          setIsNegative(result.label === "negative");
-        }
-      })
-      .catch(() => {
-        if (isMounted) {
-          setIsNegative(false);
-        }
-      });
+    const timer = setTimeout(() => {
+      analyzeSentiment(parsed.keywords)
+        .then((score) => {
+          if (isMounted) {
+            setIsNegative(score < -0.1);
+          }
+        })
+        .catch(() => {
+          if (isMounted) setIsNegative(false);
+        });
+    }, 100);
 
     return () => {
       isMounted = false;
+      clearTimeout(timer);
     };
   }, [parsed.keywords]);
 
   const searchConditionText = useMemo(() => {
     const parts: string[] = [];
-    if (parsed.keywords) {
-      parts.push(`「${parsed.keywords}」`);
-    }
-    if (parsed.sinceDate) {
-      parts.push(`${parsed.sinceDate} 以降`);
-    }
-    if (parsed.untilDate) {
-      parts.push(`${parsed.untilDate} 以前`);
-    }
+    if (parsed.keywords) parts.push(`「${parsed.keywords}」`);
+    if (parsed.sinceDate) parts.push(`${parsed.sinceDate} 以降`);
+    if (parsed.untilDate) parts.push(`${parsed.untilDate} 以前`);
     return parts.join(" ");
   }, [parsed]);
 
-  const onSubmit = (values: SearchFormData) => {
-    const sanitizedText = sanitizeSearchText(values.searchText.trim());
-    navigate(`/search?q=${encodeURIComponent(sanitizedText)}`);
+  const handleSubmit = useCallback((e: FormEvent) => {
+    e.preventDefault();
+    const sanitizedText = sanitizeSearchText(searchText.trim());
+    if (sanitizedText) {
+      navigate(`/search?q=${encodeURIComponent(sanitizedText)}`);
+    }
+  }, [navigate, searchText]);
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchText(e.target.value);
   };
 
   return (
     <div className="flex flex-col gap-4">
       <div className="bg-cax-surface p-4 shadow">
-        <form onSubmit={handleSubmit(onSubmit)}>
+        <form onSubmit={handleSubmit}>
           <div className="flex gap-2">
-            <Field name="searchText" component={SearchInput} />
+            <input
+              className="border-cax-border focus:border-cax-brand-strong flex-1 rounded border px-4 py-2 focus:outline-none"
+              placeholder="検索 (例: キーワード since:2025-01-01 until:2025-12-31)"
+              type="text"
+              value={searchText}
+              onChange={handleInputChange}
+            />
             <Button variant="primary" type="submit">
               検索
             </Button>
@@ -134,9 +123,3 @@ const SearchPageComponent = ({
     </div>
   );
 };
-
-export const SearchPage = reduxForm<SearchFormData, Props>({
-  form: "search",
-  enableReinitialize: true,
-  validate,
-})(SearchPageComponent);