開発環境の修正

appleple · Sep 26, 2024 · 2755ad7 · 2755ad7
1 parent 35ca441
commit 2755ad7
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 43 deletions.
diff --git a/src/components/genelator/base/Validator.jsx b/src/components/genelator/base/Validator.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactTooltip from 'react-tooltip';
 
 export function Validator(props) {
@@ -7,6 +7,14 @@ export function Validator(props) {
     field: { type, validator, openValidator, converter, noSearch },
     setField,
   } = props;
+  const [isConverter, setIsConverter] = useState(false);
+
+  useEffect(() => {
+    const possibleConverter = ['text', 'textarea', 'checkbox', 'selectbox', 'radioButton'];
+    if (possibleConverter.includes(type)) {
+      setIsConverter(true);
+    }
+  }, [type, setIsConverter]);
 
   const noSearchCheck = () => {
     return (
@@ -100,41 +108,46 @@ export function Validator(props) {
       </div>
       {openValidator && (
         <div className="customFieldValidatorArea">
-          {/text|textarea|radio|select/.exec(type) && noSearchCheck()}
-          <div className="customFieldBold">
-            テキストの変換
-            <i className="acms-admin-icon-tooltip" data-tip data-for="convert-tip" />
-            <ReactTooltip
-              id="convert-tip"
-              place="top"
-              type="dark"
-              effect="solid"
-              className="acms-admin-tooltip acms-tooltip customFieldTooltip"
-            >
-              <span>
-                テキストフィールドに入力された値を別の値に変換します。詳しくは参照ボタンを押すと表示されるモーダルウィンドウに情報が記載されています。
-              </span>
-            </ReactTooltip>
-          </div>
-          <p>
-            <input
-              type="text"
-              defaultValue={converter}
-              onInput={(e) => {
-                const value = e.target.value;
-                if (!value) return;
-                setField((prevState) => ({ ...prevState, converter: value }));
-              }}
-              className="acms-admin-form-width-quarter acms-admin-margin-right-small"
-              placeholder="例）rs"
-            />
-            <button
-              className="acms-admin-btn"
-              onClick={() => setField((prevState) => ({ ...prevState, openConverter: true }))}
-            >
-              コンバーター参照
-            </button>
-          </p>
+          {isConverter && (
+            <div>
+              {/text|textarea|radio|select/.exec(type) && noSearchCheck()}
+              <div className="customFieldBold">
+                テキストの変換
+                <i className="acms-admin-icon-tooltip" data-tip data-for="convert-tip" />
+                <ReactTooltip
+                  id="convert-tip"
+                  place="top"
+                  type="dark"
+                  effect="solid"
+                  className="acms-admin-tooltip acms-tooltip customFieldTooltip"
+                >
+                  <span>
+                    テキストフィールドに入力された値を別の値に変換します。詳しくは参照ボタンを押すと表示されるモーダルウィンドウに情報が記載されています。
+                  </span>
+                </ReactTooltip>
+              </div>
+              <p>
+                <input
+                  type="text"
+                  defaultValue={converter}
+                  onInput={(e) => {
+                    const value = e.target.value;
+                    if (!value) return;
+                    setField((prevState) => ({ ...prevState, converter: value }));
+                  }}
+                  className="acms-admin-form-width-quarter acms-admin-margin-right-small"
+                  placeholder="例）rs"
+                />
+                <button
+                  className="acms-admin-btn"
+                  onClick={() => setField((prevState) => ({ ...prevState, openConverter: true }))}
+                >
+                  コンバーター参照
+                </button>
+              </p>
+            </div>
+          )}
+
           {showValidator && (
             <table className="acms-admin-table customFieldOptionTable">
               <tbody>

diff --git a/webpack.dev.js b/webpack.dev.js
@@ -8,6 +8,9 @@ module.exports = merge(prodConfig, {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
+    client: {
+      overlay: false,
+    },
     static: {
       directory: path.resolve(__dirname, ''),
     },

diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,16 +1,15 @@
-// webpack.prod.js
 const path = require('path');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   mode: 'production',
   cache: {
-    type: 'filesystem', // Webpack 5では推奨される方法
+    type: 'filesystem',
   },
   performance: {
     hints: 'warning',
-    maxAssetSize: 600000, // 600 KiBに設定
+    maxAssetSize: 600000,
     maxEntrypointSize: 600000,
   },
 
@@ -25,9 +24,9 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js',
     chunkFilename: `bundle.chunk.js?date=${new Date().getTime()}`,
-    assetModuleFilename: 'assets/[name][ext]', // アセットの出力先を指定
+    assetModuleFilename: 'assets/[name][ext]',
     publicPath: '/',
-    clean: true, // ビルド時に dist フォルダをクリーンアップ
+    clean: true,
   },
   resolve: {
     modules: ['node_modules'],
@@ -40,6 +39,9 @@ module.exports = {
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+          },
         },
       },
       {
@@ -48,9 +50,14 @@ module.exports = {
       },
       {
         test: /\.(jpg|png|svg)$/,
-        type: 'asset/resource', // Webpack 5 の Asset Modules を使用
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 8 * 1024,
+          },
+        },
         generator: {
-          filename: 'assets/[name][ext]', // アセットの出力パターンを指定
+          filename: 'assets/[name].[hash][ext]',
         },
       },
     ],