Add language selection functionality

src/app/(withAuth)/courses/[courseId]/page.tsx

@@ -15,15 +15,22 @@ import {
 } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 import NextLink from 'next/link';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { courseIdToProgramIdLists, languageIds, programIdToName } from '../../../../problems/problemData';
+import { getLanguageIdFromSessionStorage, setLanguageIdToSessionStorage } from '../../../lib/SessionStorage';
 
 const CoursePage: NextPage<{ params: { courseId: string } }> = ({ params }) => {
-  const [selectedLanguageId, setSelectedLanguageId] = useState('java');
+  const [selectedLanguageId, setSelectedLanguageId] = useState('');
+
+  useEffect(() => {
+    setSelectedLanguageId(getLanguageIdFromSessionStorage());
+  }, []);
 
   const handleSelectLanguage = (event: React.ChangeEvent<HTMLSelectElement>): void => {
-    setSelectedLanguageId(event.target.value);
+    const inputValue = event.target.value;
+    setLanguageIdToSessionStorage(inputValue);
+    setSelectedLanguageId(inputValue);
   };
 
   return (

src/app/(withAuth)/problems/[problemId]/page.tsx

@@ -2,18 +2,23 @@
 
 import { Box, Button, Flex, HStack, Heading, VStack } from '@chakra-ui/react';
 import type { NextPage } from 'next';
+import { useEffect, useState } from 'react';
 
 import { SyntaxHighlighter } from '../../../../components/organisms/SyntaxHighlighter';
 import { TurtleGraphics } from '../../../../components/organisms/TurtleGraphics';
 import { programIdToName, generateProgram, getDescription } from '../../../../problems/problemData';
+import { getLanguageIdFromSessionStorage } from '../../../lib/SessionStorage';
 
 const GRID_COLUMNS = 12;
 const GRID_ROWS = 8;
 const GRID_SIZE = 40;
 
 const ProblemPage: NextPage<{ params: { problemId: string } }> = ({ params }) => {
-  // TODO: 一旦Java固定 言語選択機能実装時に変更する
-  const programmingLanguageId = 'java';
+  const [selectedLanguageId, setSelectedLanguageId] = useState('');
+
+  useEffect(() => {
+    setSelectedLanguageId(getLanguageIdFromSessionStorage());
+  }, []);
 
   return (
     <main>
@@ -31,8 +36,8 @@ const ProblemPage: NextPage<{ params: { problemId: string } }> = ({ params }) =>
             {/* 画面に収まる高さに設定 */}
             <Box h="calc(100vh - 370px)" w="100%">
               <SyntaxHighlighter
-                code={generateProgram(params.problemId, programmingLanguageId)}
-                programmingLanguageId={programmingLanguageId}
+                code={generateProgram(params.problemId, selectedLanguageId)}
+                programmingLanguageId={selectedLanguageId}
               />
             </Box>
             <HStack>

src/app/lib/SessionStorage.ts

@@ -0,0 +1,10 @@
+const selectedLanguageIdKey = 'selectedLanguageId';
+
+export const setLanguageIdToSessionStorage = (value: string): void => {
+  sessionStorage.setItem(selectedLanguageIdKey, value);
+};
+
+export const getLanguageIdFromSessionStorage = (): string => {
+  // デフォルトはJava
+  return sessionStorage.getItem(selectedLanguageIdKey) || 'java';
+};

src/problems/problemData.ts

@@ -31,10 +31,7 @@ export const courseIdToProgramIdLists: Record<CourseId, ProgramId[][]> = {
 
 export function generateProgram(programId: ProgramId, languageId: LanguageId): string {
   // TODO(exKAZUu): 問題IDに紐づくプログラム（テンプレート）を取得して、乱数を使って具体的なプログラムを生成する。
-  return (
-    `const turtle = new Turtle();
-turtle.moveForward(5);` || programIdToLanguageIdToProgram[programId][languageId]
-  );
+  return programIdToLanguageIdToProgram[programId][languageId];
 }
 
 export function getDescription(programId: ProgramId): string {