refactor: replace an usage of direct DOM APIs with function components in checkSelect.ts

src/SelectCourses.tsx

@@ -0,0 +1,173 @@
+import Course from "./Course";
+import CourseGroup from "./CourseGroup";
+import SelectSubjectRequirement from "./SelectSubjectRequirement";
+import { checkSelect, countUnitFromCode } from "./checkSelect";
+import { GradRequirement } from "./data/gradRequirement";
+
+const Select = ({
+  courseList,
+  includeCourseYear,
+  gradRequirement,
+}: {
+  courseList: Course[];
+  includeCourseYear: boolean;
+  gradRequirement: GradRequirement;
+}) => {
+  const { selectList, sumUnit, courseGroupList, courseIDList, groupUnitList } =
+    checkSelect(courseList, gradRequirement);
+
+  return (
+    <div id="select">
+      <h2>選択科目の条件一覧</h2>
+      <SelectGroups
+        selectList={selectList}
+        courseIDList={courseIDList}
+        courseList={courseList}
+        includeCourseYear={includeCourseYear}
+      />
+      <CourseGroups
+        courseGroupList={courseGroupList}
+        groupUnitList={groupUnitList}
+      />
+      <SelectCourseTotal
+        sumUnit={sumUnit}
+        selectMinimumUnit={gradRequirement.courses.selectMinimumUnit}
+      />
+    </div>
+  );
+};
+
+const SelectGroups = ({
+  selectList,
+  courseIDList,
+  courseList,
+  includeCourseYear,
+}: {
+  selectList: SelectSubjectRequirement[];
+  courseIDList: string[];
+  courseList: Course[];
+  includeCourseYear: boolean;
+}) => (
+  <>
+    {selectList.map((selectSubject) => (
+      <SelectGroup
+        selectSubject={selectSubject}
+        courseIDList={courseIDList}
+        courseList={courseList}
+        includeCourseYear={includeCourseYear}
+      />
+    ))}
+  </>
+);
+
+const SelectGroup = ({
+  selectSubject,
+  courseIDList,
+  courseList,
+  includeCourseYear,
+}: {
+  selectSubject: SelectSubjectRequirement;
+  courseIDList: string[];
+  courseList: Course[];
+  includeCourseYear: boolean;
+}) => {
+  const { excludeCourseList, unitCount } = countUnitFromCode(
+    selectSubject,
+    courseIDList,
+    courseList
+  );
+
+  return (
+    <details>
+      <summary>
+        {selectSubject.message}{" "}
+        {unitCount >= selectSubject.minimum ? <span>〇</span> : <span>✖</span>}{" "}
+        {unitCount}({selectSubject.minimum}-{selectSubject.maximum}){" "}
+        {unitCount > selectSubject.maximum && <span>(上限を超えています)</span>}
+      </summary>
+      <DetailContent
+        courses={excludeCourseList}
+        includeCourseYear={includeCourseYear}
+      />
+    </details>
+  );
+};
+
+const DetailContent = ({
+  courses,
+  includeCourseYear,
+}: {
+  courses: Course[];
+  includeCourseYear: boolean;
+}) => (
+  <>
+    {courses.map((course) => {
+      const year = includeCourseYear ? `(${course.year}年度)` : "";
+      return (
+        <li>
+          {course.id} {course.name} {year}: {course.grade}
+        </li>
+      );
+    })}
+  </>
+);
+
+const CourseGroups = ({
+  courseGroupList,
+  groupUnitList,
+}: {
+  courseGroupList: CourseGroup[];
+  groupUnitList: { [key: number]: number };
+}) => (
+  <>
+    {courseGroupList.map((courseGroup, index) => (
+      <CourseGroupFC
+        courseGroup={courseGroup}
+        groupUnitList={groupUnitList}
+        index={index}
+      />
+    ))}
+  </>
+);
+
+const CourseGroupFC = ({
+  courseGroup,
+  groupUnitList,
+  index,
+}: {
+  courseGroup: CourseGroup;
+  groupUnitList: { [key: number]: number };
+  index: number;
+}) => {
+  const courseGroupUnit = groupUnitList[courseGroup.id];
+  const marubatsu =
+    courseGroupUnit >= courseGroup.minUnit ? <span>〇</span> : <span>✖</span>;
+  const exceedMessage =
+    courseGroupUnit > courseGroup.maxUnit ? (
+      <span>(単位上限を超えています)</span>
+    ) : (
+      ""
+    );
+  return (
+    <>
+      <h4>{courseGroup.name}</h4>
+      {groupUnitList[index]}/({courseGroup.minUnit}~{courseGroup.maxUnit})
+      {marubatsu}
+      {exceedMessage}
+    </>
+  );
+};
+
+const SelectCourseTotal = ({
+  sumUnit,
+  selectMinimumUnit,
+}: {
+  sumUnit: number;
+  selectMinimumUnit: number;
+}) => (
+  <h3>
+    合計{sumUnit}/{selectMinimumUnit}単位
+  </h3>
+);
+
+export { Select };

src/SelectSubjectRequirement.ts

@@ -5,7 +5,7 @@ class SelectSubjectRequirement {
     public maximum: number,
     public isExcludeRequirement: boolean,
     public message: string,
-    public group: number
+    public group: 0 | 1 | 2 | 3
   ) {}
 }
 

src/checkCompulsory.ts

@@ -93,8 +93,8 @@ const checkCourseCertificate = (courseList: Course[]): Course[] => {
     "English Presentation Skills II": "31L",
   };
 
-  courseList.map((c) => {
-    if (c.grade == "認" && compulsoryEnglishDict[c.name] != undefined) {
+  courseList.forEach((c) => {
+    if (c.grade === "認" && compulsoryEnglishDict[c.name] !== undefined) {
       c.id = compulsoryEnglishDict[c.name];
     }
   });
@@ -133,7 +133,7 @@ const checkCompulsory = (
   let courseExists: boolean;
   let alternativeExists: boolean;
 
-  compulsoryList.map((compulsory) => {
+  compulsoryList.forEach((compulsory) => {
     //初期化
     detectedCourses = [];
     courseName = compulsory;
@@ -160,7 +160,7 @@ const checkCompulsory = (
           (courseID) =>
             beginWithMatch(courseID, codes) && !beginWithMatch(courseID, except)
         )
-        .map((courseID) => {
+        .forEach((courseID) => {
           const unit = getCourseUnitFromID(courseID, courseList);
           detectedCourses.push(searchCourseFromID(courseID, courseList));
           excludeCourseList.push(searchCourseFromID(courseID, courseList));