🚀Perf: 画像の読み取り方法変更

- 参考
  - https://stackoverflow.com/questions/75126196/dynamically-import-all-images-from-a-folder-in-astro
  - https://zenn.dev/kinshist/scraps/1bad503486e8e2
  - https://zenn.dev/slm/scraps/bdfb9f04d50a9f

src/pages/profile.astro

@@ -3,9 +3,12 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 import ProfileCard from '../components/ProfileCard.astro';
 import members from '../data/members.json';
 import { Image } from 'astro:assets';
-import monitor from "../assets/profile/monitor.jpg"; // Image is 1600x941
-import github from "../assets/profile/github.png"; // Image is 1600x900
 const pageTitle = 'Profile';
+const files = await Astro.glob("../assets/profile/*");
+const images = files.reduce((acc, file) => {
+  acc[file.default.src.split('/').pop().split('.')[0]] = file.default;
+  return acc;
+}, {});
 ---
 
 <BaseLayout pageTitle={pageTitle}>
@@ -35,13 +38,13 @@ const pageTitle = 'Profile';
       </div>
 
       <div class="relative ms-4">
-        <Image class="w-full rounded-md" src={monitor} alt="monitor" />
+        <Image class="w-full rounded-md" src={images.monitor} alt="monitor" />
       </div>
     </div>
 
     <div class="grid mt-20 md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center">
       <div class="relative ms-4">
-        <Image class="w-full rounded-md border border-gray-200" src={github} alt="GitHub" />
+        <Image class="w-full rounded-md border border-gray-200" src={images.github} alt="GitHub" />
       </div>
 
       <div class="justify-center">

src/scripts/images.js

@@ -0,0 +1,9 @@
+async function getImages(files) {
+  const images = files.reduce((acc, file) => {
+    const image = file.default;
+    const fileName = image.src.split('/').pop().split('.')[0]; // ファイル名を抽出
+    acc[fileName] = image;
+    return acc;
+  }, {});
+  return images;
+}