Merge pull request #314 from ut-code/develop

chvmvd · web-flow · commit f4c4e54afca7 · 2023-05-10T17:21:26.000+09:00
`develop` を `master` にマージ
diff --git a/docs/2-browser-apps/08-css-arrangement/index.md b/docs/2-browser-apps/08-css-arrangement/index.md
@@ -500,9 +500,6 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 ### 参考: サンプルで使われている CSS プロパティの一覧
 
 - `display`
-- `flex-grow`
-- `flex-shrink`
-- `flex-basis`
 - `flex-direction`
 - `justify-content`
 - `align-self`
diff --git a/docs/2-browser-apps/09-project/_samples/addEventListener/script.js b/docs/2-browser-apps/09-project/_samples/addEventListener/script.js
@@ -1,5 +1,5 @@
 function pressed() {
-  console.log("キーを押しました");
+  document.write("キーを押しました");
 }
 
 window.addEventListener("keypress", pressed);
diff --git a/docs/2-browser-apps/09-project/_samples/calendar/index.html b/docs/2-browser-apps/09-project/_samples/calendar/index.html
@@ -2,11 +2,11 @@
 <html lang="ja">
   <head>
     <meta charset="UTF-8" />
-    <title>Calender</title>
+    <title>Calendar</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <table id="calender"></table>
+    <table id="calendar"></table>
     <button id="button">消去</button>
     <script src="script.js"></script>
   </body>
diff --git a/docs/2-browser-apps/09-project/_samples/calendar/script.js b/docs/2-browser-apps/09-project/_samples/calendar/script.js
@@ -4,7 +4,7 @@ const year = today.getFullYear();
 const month = today.getMonth();
 const startDate = new Date(year, month, 1);
 const endDate = new Date(year, month + 1, 0);
-const calender = document.getElementById("calender");
+const calendar = document.getElementById("calendar");
 const button = document.getElementById("button");
 
 // 編集中の予定を追うための変数
@@ -22,12 +22,12 @@ for (let i = 0; i < 7; i += 1) {
 }
 
 // 曜日の行を追加
-calender.appendChild(firstRow);
+calendar.appendChild(firstRow);
 
 // 日付の行を作成
 for (let x = 1; x <= 6; x += 1) {
   const tr = document.createElement("tr");
-  calender.appendChild(tr);
+  calendar.appendChild(tr);
   for (let y = 1; y <= 7; y += 1) {
     const td = document.createElement("td");
     const ul = document.createElement("ul");
diff --git a/docs/2-browser-apps/09-project/_samples/calendar/style.css b/docs/2-browser-apps/09-project/_samples/calendar/style.css
@@ -1,9 +1,9 @@
-#calender > td,
+#calendar > td,
 th {
   border: 1px solid black;
 }
 
-#calender {
+#calendar {
   border-collapse: collapse;
 }
 
diff --git a/docs/2-browser-apps/09-project/_samples/event-target/index.html b/docs/2-browser-apps/09-project/_samples/event-target/index.html
@@ -5,7 +5,7 @@
     <title>Document</title>
   </head>
   <body>
-    <div id="div">ここをクリック！</div>
+    <button id="button">ここをクリック！</button>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/docs/2-browser-apps/09-project/_samples/event-target/script.js b/docs/2-browser-apps/09-project/_samples/event-target/script.js
@@ -1,7 +1,7 @@
 function clicked(e) {
-  console.log(e.target.tagName);
+  document.write(e.target.tagName);
 }
 
-const div = document.getElementById("div");
+const div = document.getElementById("button");
 
 div.onclick = clicked;
diff --git a/docs/2-browser-apps/09-project/calendar.mp4 b/docs/2-browser-apps/09-project/calendar.mp4
diff --git a/docs/2-browser-apps/09-project/index.md b/docs/2-browser-apps/09-project/index.md
@@ -5,7 +5,7 @@ title: プロジェクト
 import Term from "@site/src/components/Term";
 import ViewSource from "@site/src/components/ViewSource";
 import ExternalVideoPlayer from "@site/src/components/ExternalVideoPlayer";
-import calenderVideo from "./calender.mp4";
+import calendarVideo from "./calendar.mp4";
 
 ここまでの知識を使って、今月分の予定管理アプリを作ってみましょう。
 
@@ -16,20 +16,22 @@ import calenderVideo from "./calender.mp4";
 - 編集中には消去ボタンが現れ、押すと予定を削除できる。
 - 編集中に別の場所を押したりエンターキーを押したりすると予定が確定する（何も入力していない状態だと消える）
 
-<video src={calenderVideo} controls loop autoPlay muted />
+<video src={calendarVideo} controls loop autoPlay muted />
 
 ## ヒント
 
-いきなり作るのが難しい場合はタスクを分解してみましょう。今回は大まかに<br/>
-① カレンダーを作る<br/>
-② カレンダーに機能をつける<br/>
-の２つの仕事があるので、まず ① からやっていきましょう。
+いきなり作るのが難しい場合はタスクを分解してみましょう。今回は大まかに
 
-### ① について
+1. カレンダーを作る
+2. カレンダーに機能をつける
 
-- HTML 要素の作成は`document.createElement`関数を使って行えます。また、`appendChild`メソッドを用いることで要素内に子要素を追加することができます。
+の２つの仕事があるので、まず 1 からやっていきましょう。
 
-- 表を作るわけなので`table`タグを使うのですが、日数を１から３０前後までいちいち html ファイルに書き込んでいくのは手間ですし応用が効かないので、JavaScript ファイル上で繰り返しを使ってコードを簡潔にしましょう。もちろん今月の日数はカレンダーを見ればわかりますが、[`Date` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)を用いて月初めの日と月終わりの日を取ってこれば、計算をしなくても始まりの曜日や月の日数が取ってこれそうですね。
+### 1 について
+
+- HTML 要素の作成は `document.createElement` 関数を使って行えます。また、`appendChild` メソッドを用いることで要素内に子要素を追加することができます。
+
+- 表を作るわけなので `table` タグを使うのですが、日数を１から３０前後までいちいち HTML ファイルに書き込んでいくのは手間ですし応用が効かないので、JavaScript ファイル上で繰り返しを使ってコードを簡潔にしましょう。もちろん今月の日数はカレンダーを見ればわかりますが、[`Date` クラス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)を用いて月初めの日と月終わりの日を取ってこれば、計算をしなくても始まりの曜日や月の日数が取ってこれそうですね。
 
 ```javascript
 const today = new Date();
@@ -42,40 +44,40 @@ const endDate = new Date(year, month + 1, 0);
 - 後で日付の下に予定を追加したり予定を編集したりしたいので、予定を書き込むための要素も作ったうえで、その要素を保存するオブジェクトを作っておきましょう。
 
 ```javascript
-//予定を書き込むための要素を格納するオブジェクト
+// 予定を書き込むための要素を格納するオブジェクト
 const container = {};
-//ここに予定を打ち込む要素を保存しておく
+// ここに予定を打ち込む要素を保存しておく
 ```
 
-### ② について
+### 2 について
 
-- 要素をクリックした時に実行される関数は要素の`onclick` <Term type="javascriptProperty">プロパティ</Term>から設定することができます。
+- 要素をクリックした時に実行される関数は要素の `onclick` <Term type="javascriptProperty">プロパティ</Term>から設定することができます。
 
-- イベントが発生して関数が呼び出されると、一番目の引数に発生したイベントの情報が格納された `Event` オブジェクトが渡されてきます。`Event`オブジェクトの`target`<Term type="javascriptProperty">プロパティ</Term>を用いることで、クリックした要素を取得することができます。取得した要素の種類によって関数を変えることで、予定の編集や追加の機能を実現できます。
+- イベントが発生して関数が呼び出されると、一番目の引数に発生したイベントの情報が格納された `Event` オブジェクトが渡されてきます。`Event` オブジェクトの `target` <Term type="javascriptProperty">プロパティ</Term>を用いることで、クリックした要素を取得することができます。取得した要素の種類によって関数を変えることで、予定の編集や追加の機能を実現できます。
 
 ```html title="index.html"
-<div id="div">ここをクリック！</div>
+<button id="button">ここをクリック！</button>
 ```
 
 ```javascript title="script.js"
 function clicked(e) {
-  console.log(e.target.tagName);
+  document.write(e.target.tagName);
 }
 
-const div = document.getElementById("div");
+const div = document.getElementById("button");
 
 div.onclick = clicked;
 ```
 
 <ViewSource url={import.meta.url} path="_samples/event-target" />
 
-- グローバル変数の[`window`](https://developer.mozilla.org/ja/docs/Web/API/Window)は、スクリプトを実行しているウィンドウそのものを表します。この変数も`onclick`要素を指定することができます。
+- グローバル変数の [`window`](https://developer.mozilla.org/ja/docs/Web/API/Window) は、スクリプトを実行しているウィンドウそのものを表します。この変数も `onclick` 要素を指定することができます。
 
-- [`addEventListener`メソッド](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)は、ターゲットに特定のイベントが行われるたびに呼び出される関数を設定します。
+- [`addEventListener` メソッド](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)は、ターゲットに特定のイベントが行われるたびに呼び出される関数を設定します。
 
 ```javascript title="script.js"
 function pressed() {
-  console.log("キーを押しました");
+  document.write("キーを押しました");
 }
 
 window.addEventListener("keypress", pressed);
@@ -87,4 +89,4 @@ window.addEventListener("keypress", pressed);
 
 解答例は次のリンクを参照してください。
 
-<ViewSource url={import.meta.url} path="_samples/calender" />
+<ViewSource url={import.meta.url} path="_samples/calendar" />
diff --git a/docs/3-web-servers/01-wsl-setup/index.md b/docs/3-web-servers/01-wsl-setup/index.md
@@ -52,7 +52,7 @@ VS Code の `WSL` 拡張機能を用いると、VS Code を WSL 上で動かす
 
 ![WSL 拡張機能のインストール](./install-wsl-extension.png)
 
-拡張機能をインストールすると、左下に緑色のボタンが出現します。クリックすると画面上部からメニューが出現するので、`New WSL Window` を選択しましょう。
+拡張機能をインストールすると、左下に緑色のボタンが出現します。クリックすると画面上部からメニューが出現するので、`Connect to WSL` を選択しましょう。
 
 ![WSLに接続](./connect-to-wsl.png)
 
diff --git a/docs/4-advanced/02-bundler/index.md b/docs/4-advanced/02-bundler/index.md
@@ -81,12 +81,13 @@ $ npm run build
 > vite@0.0.0 build
 > vite build
 
-vite v4.1.1 building for production...
-✓ 6 modules transformed.
-dist/index.html                      0.45 kB
-dist/assets/javascript-8dac5379.svg  1.00 kB
+vite v4.3.5 building for production...
+✓ 7 modules transformed.
+dist/index.html                      0.45 kB │ gzip: 0.30 kB
+dist/assets/javascript-8dac5379.svg  1.00 kB │ gzip: 0.60 kB
 dist/assets/index-48a8825f.css       1.24 kB │ gzip: 0.65 kB
-dist/assets/index-36cd5a33.js        1.44 kB │ gzip: 0.75 kB
+dist/assets/index-44b5bae5.js        1.45 kB │ gzip: 0.75 kB
+✓ built in 64ms
 ```
 
 これにより、カレントディレクトリに `dist` ディレクトリが作成され、<Term type="transpile">トランスパイル</Term>と<Term type="moduleBundler">バンドル</Term>の結果が格納されます。
diff --git a/docs/4-advanced/04-react/index.md b/docs/4-advanced/04-react/index.md
@@ -113,12 +113,12 @@ React を新規プロジェクトではなく、既存のウェブプロジェ
 ```json title="package.json (抜粋)"
 {
   "dependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0"
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11"
   }
 }
 ```

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`function pressed() {`
`2`		`- console.log("キーを押しました");`
	`2`	`+ document.write("キーを押しました");`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`window.addEventListener("keypress", pressed);`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,9 @@`
`1`		`-#calender > td,`
	`1`	`+#calendar > td,`
`2`	`2`	`th {`
`3`	`3`	`border: 1px solid black;`
`4`	`4`	`}`
`5`	`5`
`6`		`-#calender {`
	`6`	`+#calendar {`
`7`	`7`	`border-collapse: collapse;`
`8`	`8`	`}`
`9`	`9`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`function clicked(e) {`
`2`		`- console.log(e.target.tagName);`
	`2`	`+ document.write(e.target.tagName);`
`3`	`3`	`}`
`4`	`4`
`5`		`-const div = document.getElementById("div");`
	`5`	`+const div = document.getElementById("button");`
`6`	`6`
`7`	`7`	`div.onclick = clicked;`