diff --git a/docs/6-exercise/1-basis-of-web/_samples/blackjack/index.html b/docs/6-exercise/1-basis-of-web/_samples/blackjack/index.html deleted file mode 100644 index df19d1882..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/blackjack/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Title - - - - - diff --git a/docs/6-exercise/1-basis-of-web/_samples/blackjack/script.js b/docs/6-exercise/1-basis-of-web/_samples/blackjack/script.js deleted file mode 100644 index ca890e6f3..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/blackjack/script.js +++ /dev/null @@ -1,14 +0,0 @@ -let tanakaHandTotal = 19; -let satoHandTotal = 22; - -// 21を超えていた場合は0(最弱)として扱う -if (tanakaHandTotal > 21) tanakaHandTotal = 0; -if (satoHandTotal > 21) satoHandTotal = 0; - -if (tanakaHandTotal > satoHandTotal) { - document.write("田中さんの勝ち"); -} else if (tanakaHandTotal < satoHandTotal) { - document.write("佐藤さんの勝ち"); -} else { - document.write("引き分け"); -} diff --git a/docs/6-exercise/1-basis-of-web/_samples/bubble-sort-pure/index.html b/docs/6-exercise/1-basis-of-web/_samples/bubble-sort-pure/index.html deleted file mode 100644 index f5e9fd303..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/bubble-sort-pure/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - バブルソート 解答例 (純粋関数) - - - - - diff --git a/docs/6-exercise/1-basis-of-web/_samples/bubble-sort-pure/script.js b/docs/6-exercise/1-basis-of-web/_samples/bubble-sort-pure/script.js deleted file mode 100644 index fb65a6d6b..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/bubble-sort-pure/script.js +++ /dev/null @@ -1,21 +0,0 @@ -function swapIndex(array, indexA, indexB) { - const temp = array[indexA]; - array[indexA] = array[indexB]; - array[indexB] = temp; -} -function bubbleSort(inputArray) { - const array = inputArray.slice(); - for (let i = array.length - 1; i > 0; i--) { - for (let j = 0; j < i; j++) { - if (array[j] > array[j + 1]) swapIndex(array, j, j + 1); - } - } - return array; -} - -unsorted_array = [ - 8, 2, 9, 14, 12, 1, 5, 13, 16, 3, 19, 17, 18, 10, 15, 7, 20, 11, 6, 4, -]; -sorted_array = bubbleSort(unsorted_array); -document.write(`

sorted array: [${sorted_array}]

`); -document.write(`unsorted array(shouldn't be sorted): [${unsorted_array}]`); diff --git a/docs/6-exercise/1-basis-of-web/_samples/bubble-sort/index.html b/docs/6-exercise/1-basis-of-web/_samples/bubble-sort/index.html deleted file mode 100644 index 5a882dc4e..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/bubble-sort/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - バブルソート 解答例 - - - - - diff --git a/docs/6-exercise/1-basis-of-web/_samples/bubble-sort/script.js b/docs/6-exercise/1-basis-of-web/_samples/bubble-sort/script.js deleted file mode 100644 index c2860e6b1..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/bubble-sort/script.js +++ /dev/null @@ -1,19 +0,0 @@ -function swapIndex(array, indexA, indexB) { - const temp = array[indexA]; - array[indexA] = array[indexB]; - array[indexB] = temp; -} -function bubbleSort(array) { - for (let i = array.length - 1; i > 0; i--) { - for (let j = 0; j < i; j++) { - if (array[j] > array[j + 1]) swapIndex(array, j, j + 1); - } - } - return array; -} - -unsorted_array = [ - 8, 2, 9, 14, 12, 1, 5, 13, 16, 3, 19, 17, 18, 10, 15, 7, 20, 11, 6, 4, -]; -sorted_array = bubbleSort(unsorted_array); -document.write(`sorted array: [${sorted_array}]`); diff --git a/docs/6-exercise/1-basis-of-web/_samples/fibonacci/array/index.html b/docs/6-exercise/1-basis-of-web/_samples/fibonacci/array/index.html deleted file mode 100644 index f798747d4..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/fibonacci/array/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Document - - - - - diff --git a/docs/6-exercise/1-basis-of-web/_samples/fibonacci/array/script.js b/docs/6-exercise/1-basis-of-web/_samples/fibonacci/array/script.js deleted file mode 100644 index 08341f0c4..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/fibonacci/array/script.js +++ /dev/null @@ -1,9 +0,0 @@ -function fibonacci(n) { - let sequence = [0, 1]; - for (let i = 2; i < n + 1; i += 1) { - sequence.push(sequence[i - 1] + sequence[i - 2]); - } - return sequence[n]; -} - -document.write(fibonacci(10)); diff --git a/docs/6-exercise/1-basis-of-web/_samples/fibonacci/recursion/index.html b/docs/6-exercise/1-basis-of-web/_samples/fibonacci/recursion/index.html deleted file mode 100644 index f798747d4..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/fibonacci/recursion/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Document - - - - - diff --git a/docs/6-exercise/1-basis-of-web/_samples/fibonacci/recursion/script.js b/docs/6-exercise/1-basis-of-web/_samples/fibonacci/recursion/script.js deleted file mode 100644 index bb22d7256..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/fibonacci/recursion/script.js +++ /dev/null @@ -1,9 +0,0 @@ -function fibonacci(n) { - if (n <= 2) { - return 1; - } - return fibonacci(n - 1) + fibonacci(n - 2); -} -// このように、関数が自分自身を呼び出すときその関数を再帰関数と呼びます。 - -document.write(fibonacci(10)); diff --git a/docs/6-exercise/1-basis-of-web/_samples/html/index.html b/docs/6-exercise/1-basis-of-web/_samples/html/index.html deleted file mode 100644 index 7927339af..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/html/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - ut.code(); のウェブサイト - - -

ut.code();

- ut.code(); のロゴ -

ut.code(); とは

-

- ut.code(); は、2019 - 年設立の東京大学のソフトウェアエンジニアリングコミュニティです。 -

-

主な活動

- - - diff --git a/docs/6-exercise/1-basis-of-web/_samples/html/logo.svg b/docs/6-exercise/1-basis-of-web/_samples/html/logo.svg deleted file mode 100644 index bfee0a6b4..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/html/logo.svg +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/6-exercise/1-basis-of-web/_samples/length-of-name/index.html b/docs/6-exercise/1-basis-of-web/_samples/length-of-name/index.html deleted file mode 100644 index df19d1882..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/length-of-name/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Title - - - - - diff --git a/docs/6-exercise/1-basis-of-web/_samples/length-of-name/script.js b/docs/6-exercise/1-basis-of-web/_samples/length-of-name/script.js deleted file mode 100644 index f2c72153f..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/length-of-name/script.js +++ /dev/null @@ -1,10 +0,0 @@ -let nameLength = 7; -if (4 <= nameLength && nameLength <= 10) { - // 比較演算子を2つ並べるのではなく、論理演算子&&を用います。 - document.write("登録できます"); -} else if (nameLength === 0) { - // else if の else が抜けていました。 - document.write("名前を入力してください"); -} else { - document.write("名前は4文字以上10文字以下で入力してください"); -} diff --git a/docs/6-exercise/1-basis-of-web/_samples/times-table/index.html b/docs/6-exercise/1-basis-of-web/_samples/times-table/index.html deleted file mode 100644 index 9448cf692..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/times-table/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - 九九の表 解答例 - - - - - diff --git a/docs/6-exercise/1-basis-of-web/_samples/times-table/script.js b/docs/6-exercise/1-basis-of-web/_samples/times-table/script.js deleted file mode 100644 index 9d408c9d9..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/times-table/script.js +++ /dev/null @@ -1,9 +0,0 @@ -document.write(""); -for (let i = 1; i <= 9; i++) { - document.write(""); - for (let j = 1; j <= 9; j++) { - document.write(``); - } - document.write(""); -} -document.write("
${i * j}
"); diff --git a/docs/6-exercise/1-basis-of-web/_samples/truck/index.html b/docs/6-exercise/1-basis-of-web/_samples/truck/index.html deleted file mode 100644 index 2371e6767..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/truck/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Document - - - - - diff --git a/docs/6-exercise/1-basis-of-web/_samples/truck/script.js b/docs/6-exercise/1-basis-of-web/_samples/truck/script.js deleted file mode 100644 index 2c9b0282f..000000000 --- a/docs/6-exercise/1-basis-of-web/_samples/truck/script.js +++ /dev/null @@ -1,12 +0,0 @@ -let box = 25; -let weight = 1000; - -if (box <= 30 && weight <= 2000) { - document.write('

出発できます

'); -} else if (box > 30 && weight <= 2000) { - document.write('

箱の数を減らしてください

'); -} else if (box <= 30 && weight > 2000) { - document.write('

重量を減らしてください

'); -} else { - document.write('

箱の数と重量を減らしてください

'); -} diff --git a/docs/6-exercise/1-basis-of-web/blue-hello-world.jpg b/docs/6-exercise/1-basis-of-web/blue-hello-world.jpg deleted file mode 100644 index f6956eb19..000000000 Binary files a/docs/6-exercise/1-basis-of-web/blue-hello-world.jpg and /dev/null differ diff --git a/docs/6-exercise/1-basis-of-web/bubble-sort-video.mp4 b/docs/6-exercise/1-basis-of-web/bubble-sort-video.mp4 deleted file mode 100644 index 1763264f2..000000000 Binary files a/docs/6-exercise/1-basis-of-web/bubble-sort-video.mp4 and /dev/null differ diff --git a/docs/6-exercise/1-basis-of-web/index.mdx b/docs/6-exercise/1-basis-of-web/index.mdx deleted file mode 100644 index 40bb76ce6..000000000 --- a/docs/6-exercise/1-basis-of-web/index.mdx +++ /dev/null @@ -1,392 +0,0 @@ ---- -title: Web プログラミングの初歩 -sidebar_position: 1 ---- - -import Term from "@site/src/components/Term"; -import Answer from "@site/src/components/Answer"; -import ViewSource from "@site/src/components/ViewSource"; -import BubbleSortVideo from "@site/docs/6-exercise/1-basis-of-web/bubble-sort-video.mp4"; - -この章では教材の「[初めてのウェブ開発](/docs/trial-session/get-started/)」から「[ウェブサイトの見た目を整える](/docs/trial-session/css/)」までの内容を扱っています。 - ---- - -## 1. HTML - -HTML を用いて次のようなウェブサイトを作ってみましょう。ut.code(); のロゴは[ここ](./_samples/html/logo.svg)からダウンロードして使用してください。 - -![ut.code(); のウェブサイト](website.png) - -### 解答例 - - - -```html - - - - - ut.code(); のウェブサイト - - -

ut.code();

- ut.code(); のロゴ -

ut.code(); とは

-

- ut.code(); は、2019 - 年設立の東京大学のソフトウェアエンジニアリングコミュニティです。 -

-

主な活動

- - - -``` - - - - - ---- - -## 2. 名前の長さ - -太郎くんは、名前を 4 文字以上 10 文字以下で入力して登録できるウェブサイトを作ろうとしています。そこで、名前の文字数を変数に入れておき、 - -- 文字数が 4 文字以上 10 文字以下なら `登録できます` -- 文字数が 0 文字なら `名前を入力してください` -- それ以外の文字数(1 文字〜3 文字または 11 文字以上)なら `名前は4文字以上10文字以下で入力してください` - -と表示されるプログラムを以下のように作成しました。 - -```javascript -const nameLength = 7; -if (4 <= nameLength <= 10) { - document.write("登録できます"); -} -if (nameLength === 0) { - document.write("名前を入力してください"); -} else { - document.write("名前は4文字以上10文字以下で入力してください"); -} -``` - -しかし、変数の値を色々変えて試してみたところ、思った通りに表示されないことがわかりました。このプログラムを、正しく動作するように修正してください。修正すべき箇所は 2 つあります。 - -### 解答例 - - - -```javascript -const nameLength = 7; -if (4 <= nameLength && nameLength <= 10) { - // 比較演算子を2つ並べるのではなく、論理演算子&&を用います。 - document.write("登録できます"); -} else if (nameLength === 0) { - // else if の else が抜けていました。 - document.write("名前を入力してください"); -} else { - document.write("名前は4文字以上10文字以下で入力してください"); -} -``` - - - - - ---- - -## 3. ブラックジャック - -田中さんと佐藤さんの 2 人が、トランプゲームのブラックジャックで遊んでいます。ブラックジャックのルールは次の通りとします。 - -- 2 人の手札の数字の合計を比べ、より大きい方が勝ちとなる。 -- ただし、どちらか 1 人の手札の数字の合計が 21 を超えていた場合、その人の負けとなる。 -- 2 人の手札の数字の合計が同じだった場合や、2 人とも 21 を超えていた場合は引き分けとなる。 - -田中さんと佐藤さんの手札の数字の合計をそれぞれ変数に入れておき、田中さんと佐藤さんのどちらが勝つか、あるいは引き分けかを表示するプログラムを作成してください。 - -### 解答例 - - - -```javascript -let tanakaHandTotal = 19; -let satoHandTotal = 22; - -// 21を超えていた場合は0(最弱)として扱う -if (tanakaHandTotal > 21) tanakaHandTotal = 0; -if (satoHandTotal > 21) satoHandTotal = 0; - -if (tanakaHandTotal > satoHandTotal) { - document.write("田中さんの勝ち"); -} else if (tanakaHandTotal < satoHandTotal) { - document.write("佐藤さんの勝ち"); -} else { - document.write("引き分け"); -} -``` - - - - - ---- - -## 4. トラック - -引っ越しトラックを考えます。 - -- 段ボール箱の数が 30 個以内 -- 合計の重量が 2000 kg 以内 - -の両方の条件を満たすときに、トラックは出発できます。 - -「箱の数」「合計の重量」の 2 つの変数の値によって、 - -- 出発できる場合には「出発できます」 -- 箱が多すぎる場合には「箱の数を減らしてください」 -- 重量が大きすぎる場合には「重量を減らしてください」 -- 箱が多すぎかつ重量も重すぎる場合には「箱の数と重量を減らしてください」 - -と表示されるプログラムを作ってみましょう。 - -また、出発できる場合には文字を緑色で、出発できない場合には文字を赤色で表示するようにしましょう。 - -:::tip - -`document.write()` は文字列だけでなく、HTML 要素を出力することができます。 - -```javascript title="script.js" -document.write('

Hello World!

'); -``` - -![青い Hello World](./blue-hello-world.jpg) - -::: - -### 解答例 - - - -```javascript title="script.js" -let box = 25; -let weight = 1000; - -if (box <= 30 && weight <= 2000) { - document.write('

出発できます

'); -} else if (box > 30 && weight <= 2000) { - document.write('

箱の数を減らしてください

'); -} else if (box <= 30 && weight > 2000) { - document.write('

重量を減らしてください

'); -} else { - document.write('

箱の数と重量を減らしてください

'); -} -``` - - - - - ---- - -## 5. 九九 - -[HTML の `table`, `tr`, `td` タグ](https://developer.mozilla.org/ja/docs/Web/HTML/Element/table) を用いて、九九の表を画面に表示させてみましょう。 - -:::tip - -開きタグと閉じタグをどのタイミングで出力すべきかに注意しましょう。 - -::: - -### 解答例 - - - -```javascript -document.write(""); -for (let i = 1; i <= 9; i++) { - document.write(""); - for (let j = 1; j <= 9; j++) { - document.write(``); - } - document.write(""); -} -document.write("
${i * j}
"); -``` - - - - - ---- - -## 6. フィボナッチ数列 - -1,1,2,3,5...というように、前 2 つの数を足すと次の数になるような数の並びをフィボナッチ数列と言います。引数 `n` に対してフィボナッチ数列の n 番目の数を返す関数を定義してください。ただし 1 番目と 2 番目の数は 1 とします。 - -### 解答例 - - - -```javascript -function fibonacci(n) { - if (n <= 2) { - return 1; - } - return fibonacci(n - 1) + fibonacci(n - 2); -} - -// このように、関数が自分自身を呼び出すときその関数を再帰関数と呼びます。 -``` - - - -### 別解 - -もし「配列」「繰り返し」という概念をすでに学習している場合、次のような書き方もできます。 - -```javascript -function fibonacci(n) { - let sequence = [1, 1]; - for (let i = 2; i < n; i += 1) { - sequence.push(sequence[i - 1] + sequence[i - 2]); - } - return sequence[n - 1]; -} -``` - - - - - ---- - -## 7. バブルソート - -引数に対して「バブルソート」という整列アルゴリズムを行い、整列済み配列を返す関数`bubbleSort()`を作成しましょう。
-そのアルゴリズムは次の通りです。 - -- ソート前配列のある要素を取り、その一つ後ろの要素と比較する - - もし一つ後ろの要素の方が小さければ、二項を入れ替える - - そうでなければ、何もしない -- その操作を一番前の要素から一番後ろにたどり着くまで繰り返す - - これで一番後ろの要素が一番大きいものであると確定する -- 上の操作を、全ての要素が後ろから大きい順に並ぶまで繰り返す - -:::note -テスト用に、以下のランダムに生成された配列を自由に使ってよいものとします。 - -```javascript -const array1 = [7, 1, 10, 4, 3, 5, 9, 2, 8, 6]; -const array2 = [8, 2, 9, 14, 12, 1, 5, 13, 16, 3]; -const array3 = [73, 39, 94, 57, 42, 78, 20, 55, 56, 77]; -const array4 = [247, 785, 73, 879, 515, 545, 423, 617, 19, 600]; -``` - -::: - -