tsconfigにリント系のオプションを追加

src/components/button/sp-button.ts

@@ -33,10 +33,14 @@ export class SpButton extends UbButton {
 
   constructor() {
     super();
-    this.shadowRoot.adoptedStyleSheets = [
-      ...this.shadowRoot.adoptedStyleSheets,
-      styles,
-    ];
+
+    if (this.shadowRoot) {
+      this.shadowRoot.adoptedStyleSheets = [
+        ...this.shadowRoot!.adoptedStyleSheets,
+        styles,
+      ];
+    }
+
     this.#iconElement.classList.add("base__icon");
     this.#iconElement.size = "small";
   }

src/components/checkbox/sp-checkbox-list.ts

@@ -12,10 +12,13 @@ styles.replaceSync(`${foundationStyle} ${checkmarkStyle} ${checkboxListStyle}`);
 export class SpCheckboxList extends UbCheckboxText {
   constructor() {
     super();
-    this.shadowRoot.adoptedStyleSheets = [
-      ...this.shadowRoot.adoptedStyleSheets,
-      styles,
-    ];
+
+    if (this.shadowRoot) {
+      this.shadowRoot.adoptedStyleSheets = [
+        ...this.shadowRoot.adoptedStyleSheets,
+        styles,
+      ];
+    }
   }
 }
 

src/components/checkbox/sp-checkbox-text.ts

@@ -12,10 +12,13 @@ styles.replaceSync(`${foundationStyle} ${checkmarkStyle} ${checkboxTextStyle}`);
 export class SpCheckboxText extends UbCheckboxText {
   constructor() {
     super();
-    this.shadowRoot.adoptedStyleSheets = [
-      ...this.shadowRoot.adoptedStyleSheets,
-      styles,
-    ];
+
+    if (this.shadowRoot) {
+      this.shadowRoot.adoptedStyleSheets = [
+        ...this.shadowRoot.adoptedStyleSheets,
+        styles,
+      ];
+    }
   }
 }
 

src/components/checkbox/sp-checkbox.ts

@@ -12,10 +12,13 @@ styles.replaceSync(`${foundationStyle} ${checkmarkStyle} ${checkboxStyle}`);
 export class SpCheckbox extends UbCheckbox {
   constructor() {
     super();
-    this.shadowRoot.adoptedStyleSheets = [
-      ...this.shadowRoot.adoptedStyleSheets,
-      styles,
-    ];
+
+    if (this.shadowRoot) {
+      this.shadowRoot.adoptedStyleSheets = [
+        ...this.shadowRoot.adoptedStyleSheets,
+        styles,
+      ];
+    }
   }
 }
 

src/components/icon/sp-icon.ts

@@ -16,10 +16,13 @@ export class SpIcon extends UbIcon {
 
   constructor() {
     super();
-    this.shadowRoot.adoptedStyleSheets = [
-      ...this.shadowRoot.adoptedStyleSheets,
-      styles,
-    ];
+
+    if (this.shadowRoot) {
+      this.shadowRoot.adoptedStyleSheets = [
+        ...this.shadowRoot.adoptedStyleSheets,
+        styles,
+      ];
+    }
   }
 
   set type(value: string) {

src/components/radio/sp-radio-button-text-group.ts

@@ -10,10 +10,13 @@ styles.replaceSync(`${foundationStyle} ${radioButtonTextGroupStyle}`);
 export class SpRadioButtonTextGroup extends UbRadioButtonTextGroup {
   constructor() {
     super();
-    this.shadowRoot.adoptedStyleSheets = [
-      ...this.shadowRoot.adoptedStyleSheets,
-      styles,
-    ];
+
+    if (this.shadowRoot) {
+      this.shadowRoot.adoptedStyleSheets = [
+        ...this.shadowRoot.adoptedStyleSheets,
+        styles,
+      ];
+    }
   }
 }
 

src/components/segmentedControl/sp-segmented-control.ts

@@ -10,10 +10,13 @@ styles.replaceSync(`${foundationStyle} ${segmentedControlStyle}`);
 export class SpSegmentedControl extends UbRadioButtonTextGroup {
   constructor() {
     super();
-    this.shadowRoot.adoptedStyleSheets = [
-      ...this.shadowRoot.adoptedStyleSheets,
-      styles,
-    ];
+
+    if (this.shadowRoot) {
+      this.shadowRoot.adoptedStyleSheets = [
+        ...this.shadowRoot.adoptedStyleSheets,
+        styles,
+      ];
+    }
   }
 }
 

stories/button/sp-button.story.ts

@@ -91,7 +91,7 @@ export const AttributeHTML: Story = {
 };
 
 export const OverflowWrap: Story = {
-  render: (args) => html`
+  render: () => html`
     <p style="overflow-wrap: break-word;">
       texttexttexttexttexttexttextttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttextexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
     </p>

stories/checkbox/sp-checkbox-list.story.ts

@@ -103,7 +103,7 @@ export const Form: Story = {
 };
 
 export const OverflowWrap: Story = {
-  render: (args) => html`
+  render: () => html`
     <sp-checkbox-list
       text="texttexttexttexttexttexttextttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttextexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext"
     ></sp-checkbox-list>
@@ -123,7 +123,7 @@ export const OverflowWrap: Story = {
 };
 
 export const ALL: Story = {
-  render: (args) => html`
+  render: () => html`
     <table>
       <thead>
         <tr>

stories/checkbox/sp-checkbox-text.story.ts

@@ -103,7 +103,7 @@ export const Form: Story = {
 };
 
 export const OverflowWrap: Story = {
-  render: (args) => html`
+  render: () => html`
     <sp-checkbox-text
       text="texttexttexttexttexttexttextttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttextexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext"
     ></sp-checkbox-text>
@@ -123,7 +123,7 @@ export const OverflowWrap: Story = {
 };
 
 export const ALL: Story = {
-  render: (args) => html`
+  render: () => html`
     <table>
       <thead>
         <tr>

stories/checkbox/sp-checkbox.story.ts

@@ -98,7 +98,7 @@ export const Form: Story = {
 };
 
 export const ALL: Story = {
-  render: (args) => html`
+  render: () => html`
     <table>
       <thead>
         <tr>

stories/radio/sp-radio-button-text-group.story.ts

@@ -113,7 +113,7 @@ export const OverflowWrap: Story = {
 };
 
 export const ALL: Story = {
-  render: (args) => html`
+  render: () => html`
     <table>
       <thead>
         <tr>

stories/segmentedControl/sp-segmented-control.story.ts

@@ -58,7 +58,7 @@ type Story = StoryObj;
 export const Basic: Story = {};
 
 export const ALL: Story = {
-  render: (args) => html`
+  render: () => html`
     <table>
       <thead>
         <tr>

tests/utils/icon.ts

@@ -5,5 +5,5 @@ export function isElementMatchingSpeedaIcon(
   iconName: keyof typeof speedaIconPaths,
 ) {
   const path = svg.querySelector("path");
-  return `<path d="${path.getAttribute("d")}"/>` === speedaIconPaths[iconName];
+  return `<path d="${path?.getAttribute("d")}"/>` === speedaIconPaths[iconName];
 }

tools/figma-icon.ts

@@ -2,6 +2,14 @@ import { promisify } from "util";
 import * as fs from "fs";
 import * as path from "path";
 
+if (!process.env.FIGMA_TOKEN) {
+  throw new Error("FIGMA_TOKENが設定されていません");
+}
+
+if (!process.env.FIGMA_DESIGN_FILE_KEY) {
+  throw new Error("FIGMA_DESIGN_FILE_KEYが設定されていません");
+}
+
 const TOKEN = process.env.FIGMA_TOKEN;
 const FIGMA_FILE_KEY = process.env.FIGMA_DESIGN_FILE_KEY;
 
@@ -45,6 +53,9 @@ async function fetchFigma(
 async function fetchImageAndExtractPath(url: string): Promise<string> {
   const response: any = await fetch(url).then((response) => response.text());
   const match = /<svg.*?>([\s\S]*?)<\/svg>/.exec(response);
+  if (!match) {
+    throw new Error("SVGが見つかりません");
+  }
   return match[1].replace(/\sfill=".*"/, "").replace(/\n|\r/g, "");
 }
 
@@ -81,7 +92,10 @@ const main = async () => {
   await Promise.all(
     Object.entries(images).map(async ([key, value]) => {
       const path = await fetchImageAndExtractPath(String(value)); // TODO:型がよくわからん
-      icons.find((icon) => icon.id === key).path = path;
+      const icon = icons.find((icon) => icon.id === key);
+      if (icon) {
+        icon.path = path;
+      }
     }),
   );
 

tsconfig-build.json

@@ -9,7 +9,11 @@
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
     "outDir": "dist",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "exclude": ["example", "stories", "dist", "tools"]
+  "exclude": ["example", "stories", "tests", "dist", "tools"]
 }

tsconfig.json

@@ -9,7 +9,11 @@
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
     "outDir": "dist",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
   "exclude": ["example", "dist"]
 }