"list-container"->"student-list"

tsatohiro · tsatohiro · commit 0933a01da531 · 2023-09-26T22:23:59.000+09:00
diff --git a/docs/2-browser-apps/04-anonymous-function/_samples/map/index.html b/docs/2-browser-apps/04-anonymous-function/_samples/map/index.html
@@ -5,7 +5,7 @@
     <title>Title</title>
   </head>
   <body>
-    <ul id="list-container"></ul>
+    <ul id="student-list"></ul>
     <script src="./script.js"></script>
   </body>
-</html>
+</html>
diff --git a/docs/2-browser-apps/04-anonymous-function/_samples/map/script.js b/docs/2-browser-apps/04-anonymous-function/_samples/map/script.js
@@ -1,4 +1,6 @@
 const students = ["Scarlett", "Hazel", "Daisy", "Dorian"];
 
-const listContainer = document.getElementById("list-container");
-listContainer.innerHTML = students.map((student) => `<li>${student}</li>`).join("");
+const studentList = document.getElementById("student-list");
+studentList.innerHTML = students
+  .map((student) => `<li>${student}</li>`)
+  .join("");
diff --git a/docs/2-browser-apps/04-anonymous-function/anonymous-function.drawio.svg b/docs/2-browser-apps/04-anonymous-function/anonymous-function.drawio.svg
@@ -0,0 +1,82 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="402px" height="369px" viewBox="-0.5 -0.5 402 369" content="&lt;mxfile&gt;&lt;diagram id=&quot;_5NsIQiXU0RvCAx0PqMt&quot; name=&quot;Page-1&quot;&gt;1ZZLj5swEIB/ja8V4MDCMa+2l55SqWcXHLBqGGQmC9lf33EwSQjsKlWRql6imc/j14cxYXxbdl+MqItvkEnNAi/rGN+xIFhFCf1acO4Bjx3Ijcp65N/AQb1JBz1HTyqTzagQATSqegxTqCqZ4ogJY6Adlx1Bj2etRS4n4JAKPaU/VIZFT+PQu/GvUuXFMLPvuZZSDMUONIXIoL1DfM/41gBgH5XdVmrrbvDS9/v8Tut1YUZW+EyHoO/wKvTJ7Y3tQxZ7bL1yC8TzsGvqSYIp2bSFQnmoRWpbWnrExAosNWU+ha/SoCJba63yihiCLThChe5R+hHlbmaqld27q/evTugsSSglmjOVtDfrweC2uDc++BXuSefXvjcZFDgf8274jJuIJSHbeAtIEk3dH82j6mQ2Y61UWWZH/StRwxvndJzH6Z3GcMZiuIDE1bzEiMUvVuJ6x5JLEMc2+D9s+v4/0xlNdT46oyultmGjqlzLtb3unvBny4a7zPu0GpB7YXtiAAUqsDp5uIxK/qAySKYu4xmX0QIuXyYuv8sOJz7RwrEsd6ZS2qQ0Hx02Ixv1Jn5ehvIor0FVeFlyuGHhzo51QmjcrUhpgwZ+yS1ooHF3FVR2lKPS+gEtoJ6+VyP1SfjUKeZ/bp7S2xft0nb3t4DvfwM=&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <ellipse cx="100" cy="60" rx="100" ry="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 198px; height: 1px; padding-top: 7px; margin-left: 1px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 16px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                値
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="100" y="23" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="16px" text-anchor="middle">
+                    値
+                </text>
+            </switch>
+        </g>
+        <ellipse cx="65" cy="65" rx="25" ry="25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 65px; margin-left: 41px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                数値
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="65" y="69" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    数値
+                </text>
+            </switch>
+        </g>
+        <ellipse cx="135" cy="65" rx="25" ry="25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 65px; margin-left: 111px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                文字列
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="135" y="69" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    文字列
+                </text>
+            </switch>
+        </g>
+        <path d="M 310 308 L 358 308 L 358 290 L 390 320 L 358 350 L 358 332 L 310 332 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" transform="rotate(35,350,320)" pointer-events="all"/>
+        <rect x="285" y="95" width="50" height="30" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 110px; margin-left: 310px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
+                                Text
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="310" y="114" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Text
+                </text>
+            </switch>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>
diff --git a/docs/2-browser-apps/04-anonymous-function/index.md b/docs/2-browser-apps/04-anonymous-function/index.md
@@ -112,6 +112,7 @@ document.write(stars); // ★★★,★★★★★,★
 const stars = rates.map((rate) => "★".repeat(rate));
 ```
 
+![値の種類](./anonymous-function.drawio.svg)
 ![アロー関数の省略形](./arrow-function-abbreviation.png)
 
 ## 課題
@@ -136,7 +137,9 @@ const students = ["Hazel", "Dorian", "Scarlett", "Daisy"];
 ```javascript
 const students = ["Scarlett", "Hazel", "Daisy", "Dorian"];
 const listContainer = document.getElementById("list-container");
-listContainer.innerHTML = students.map((student) => `<li>${student}</li>`).join("");
+listContainer.innerHTML = students
+  .map((student) => `<li>${student}</li>`)
+  .join("");
 ```
 
 <ViewSource url={import.meta.url} path="_samples/map" />
