ts-nodeを導入

next.config.js

@@ -1,8 +1,9 @@
-const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
+import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
+
 const withVanillaExtract = createVanillaExtractPlugin();
 
 const nextConfig = {
   reactStrictMode: true,
 };
 
-module.exports = withVanillaExtract(nextConfig);
+export default withVanillaExtract(nextConfig);

package.json

@@ -2,6 +2,7 @@
   "name": "official",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "yarn pathpida && next build && next export",
@@ -17,8 +18,8 @@
     "build-storybook": "storybook build",
     "pathpida": "pathpida --enableStatic --ignorePath .pathpidaignore --output src/utils/ && prettier --write 'src/utils/$path.ts'",
     "icons": "svgr -d src/components/base/Icons src/assets/icons",
-    "images": "node src/scripts/generateImages.js",
-    "lighthouse": "node src/scripts/lighthouse.js",
+    "images": "ts-node src/scripts/generateImages.ts",
+    "lighthouse": "ts-node src/scripts/lighthouse.ts",
     "husky": "husky install"
   },
   "dependencies": {
@@ -40,6 +41,7 @@
     "@storybook/nextjs": "^7.0.26",
     "@storybook/react": "^7.0.26",
     "@svgr/cli": "^6.5.1",
+    "@types/minimist": "^1.2.2",
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
@@ -63,6 +65,7 @@
     "prettier": "^2.8.3",
     "sharp": "^0.32.1",
     "storybook": "^7.0.26",
+    "ts-node": "^10.9.1",
     "typescript": "4.9.5",
     "webpack-merge": "^5.9.0"
   },

src/scripts/generateImages.js → src/scripts/generateImages.ts

@@ -1,17 +1,23 @@
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-const sharp = require('sharp');
+import sharp from 'sharp';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 /**
  * スマホ用の画像を生成する
- * @param {string} fullPath
- * @param {string} outputPath
  */
-const generateMobileImage = async (fullPath, outputPath) => {
+const generateMobileImage = async (fullPath: string, outputPath: string): Promise<void> => {
   if (fs.existsSync(outputPath)) return;
   const image = sharp(fullPath);
   const metadata = await image.metadata();
+
+  // 通常は発生しないフローだが型定義が`undefined`を許容しており、TSの警告を回避するために記述している
+  if (!metadata.width || !metadata.height) return;
+
   await image
     .resize({
       width: Math.round(metadata.width / 2),
@@ -22,20 +28,17 @@ const generateMobileImage = async (fullPath, outputPath) => {
 
 /**
  * デスクトップ用の画像を生成する
- * @param {string} fullPath
- * @param {string} outputPath
  */
-const generateDesktopImage = async (fullPath, outputPath) => {
+const generateDesktopImage = async (fullPath: string, outputPath: string): Promise<void> => {
   if (fs.existsSync(outputPath)) return;
   await sharp(fullPath).toFile(outputPath);
 };
 
 /**
  * /public/images 以下のディレクトリ内にある png または jpg(jpeg) ファイルを元に webp と avif ファイルを生成する
  * またそれぞれの拡張子に応じたスマホ用のファイルも生成する
- * @param {string} dirPath
  */
-const generateImages = async (dirPath) => {
+const generateImages = async (dirPath: string): Promise<void> => {
   const entries = fs.readdirSync(dirPath, { withFileTypes: true });
   const ignoreDirs = fs
     .readFileSync(path.join(__dirname, '../..', '.imagesignore'), 'utf-8')

src/scripts/lighthouse.js → src/scripts/lighthouse.ts

@@ -1,6 +1,6 @@
-const { execSync } = require('child_process');
+import { execSync } from 'child_process';
 
-const minimist = require('minimist');
+import minimist from 'minimist';
 
 const argv = minimist(process.argv.slice(2));
 const port = argv.p || 3000;

tsconfig.json

@@ -21,5 +21,9 @@
     "incremental": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
+  "ts-node": {
+    "esm": true,
+    "experimentalSpecifierResolution": "node"
+  }
 }