Merge pull request #4 from reina314/dev

Dev

Author: reina314

app/lecture/src/components/Code.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="py-3">
+        <div class="container bg-black-800 border border-green-600 rounded my-3 px-3 py-3">
+            <p class="-mt-2 text-sm">bash</p>
+            <div id="text" class="relative px-3 rounded bg-white text-black">
+                user@Ri-one ~ $ <slot></slot>
+                <button data-copy-to-clipboard-target="npm-install-copy-button" data-tooltip-target="tooltip-copy-npm-install-copy-button" class="absolute end-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg p-2 inline-flex items-center justify-center">
+                    <span id="default-icon">
+                        <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+                            <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
+                        </svg>
+                    </span>
+                    <span id="success-icon" class="hidden inline-flex items-center">
+                        <svg class="w-3.5 h-3.5 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
+                        </svg>
+                    </span>
+                </button>
+                <div id="tooltip-copy-npm-install-copy-button" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                    <span id="default-tooltip-message">Copy to clipboard</span>
+                    <span id="success-tooltip-message" class="hidden">Copied!</span>
+                    <div class="tooltip-arrow" data-popper-arrow></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    #text {
+        font-family: monospace;
+        font-size: large;
+    }
+</style>

app/lecture/src/components/PyScript.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="container bg-black-800 border border-green-600 rounded my-3 px-3 py-3">
-        <p class="text-md">Python3.11</p>
+        <p class="-mt-1 text-sm">Python3.11</p>
         <div class="px-3 rounded bg-white text-black">
             <py-repl>
                 <slot></slot>

app/lecture/src/views/Lecture3.vue

@@ -31,7 +31,7 @@
 </script>
 
 <template>
-    <Title>第3講 Python: 配列・辞書</Title>
+    <Title>第3講 Python: 配列、辞書</Title>
 
     <div class="container w-3/6 mx-auto mb-10 text-start">
         <Header>1.配列</Header>
@@ -51,7 +51,7 @@
 
                 上の例では、1行目でstr型のデータを格納したlistを定義している。
                 listに格納されたデータは、food[0]のように、listの変数名の後ろにインデックス(<span class="text-yellow-400">index</span>)を指定することでアクセスできる。
-                ここで、indexが0オリジン(<span class="text-yellow-400">zero-based</span>)であることには十分注意してほしい。
+                ここで、indexが0オリジン(<span class="text-yellow-400">zero-based</span>)であることに十分注意してほしい。
             </Paragraph>
 
             <Paragraph>
@@ -69,7 +69,7 @@
             </Paragraph>
 
             <Paragraph>
-                補足: Pythonにおけるlistは、一般的なCやJavaの配列とは異なり、動的配列(<span class="text-yellow-400">dynamic array</span>)である。これは、list内のデータが増減するたびに、自動的にメモリ領域が再割り当てされるということである。従って、事前に定まったメモリ領域を確保し、管理するという手間は生じない。<br>
+                補足: Pythonにおけるlistは、一般的なCやJavaの配列とは異なり、動的配列(<span class="text-yellow-400">dynamic array</span>)である。これは、list内のデータが増減するたびに、自動的にメモリ領域が再割り当てされるということである。したがって、事前に定まったメモリ領域を確保し、管理するという手間は生じない。<br>
                 これは、C++におけるstd::vectorやJavaにおけるjava.util.ArrayListなどのライブラリが実装するものと同様の機能である。
             </Paragraph>
 
@@ -91,7 +91,7 @@
             </Paragraph>
 
             <Paragraph>
-                従って、配列の全ての要素を書き換えるためには次のようにすること。
+                したがって、配列の全ての要素を書き換えるためには次のようにすること。
 
                 <PyScript>
                     food = ['Apple', 'Banana', 'Cherry', 'Durian', 'Eggplant']
@@ -248,7 +248,7 @@
 
         <Header>2.辞書</Header>
         <Paragraph>
-            配列について理解できれば、辞書(<span class="text-yellow-400">dictionary</span>)を理解するのはそれほど難しいことではない。なぜなら、辞書は配列のindexの代わりに任意のキー(<span class="text-yellow-400">key</span>)を用いるに過ぎないからである。
+            配列について理解できれば、辞書(<span class="text-yellow-400">dictionary</span>)を理解するのはそれほど難しいことではない。なぜなら辞書は、配列のindexにスカラー値以外のデータ型も用いられるに過ぎないからである。また、辞書のindexをキー(<span class="text-yellow-400">key</span>)と呼ぶ。
 
             <SubHeader>辞書の基本</SubHeader>
             <Paragraph>
@@ -321,9 +321,36 @@
                 </PyScript>
             </Paragraph>
 
+            <Paragraph>
+                次に、要素を削除する方法を示す。
+
+                <PyScript>
+                    desktop = {"os": "Windows 11", "cpu": "Xeon", "gpu": "RTX 4090"}
+
+                    desktop.pop("cpu")
+                    print(desktop)
+                </PyScript>
+                
+                <PyScript>
+                    desktop = {"os": "Windows 11", "cpu": "Xeon", "gpu": "RTX 4090"}
+
+                    del desktop["cpu"]
+                    print(desktop)
+                </PyScript>
+
+                <PyScript>
+                    desktop = {"os": "Windows 11", "cpu": "Xeon", "gpu": "RTX 4090"}
+
+                    desktop = {k: v for k, v in desktop.items() if k != "cpu"}
+                    print(desktop)
+                </PyScript>
+
+                このように、配列とほぼ同様にして値を操作することができる。
+            </Paragraph>
+
             <SubHeader>配列と辞書</SubHeader>
             <Paragraph>
-                配列と辞書は、互いに入れ子になることが可能である。
+                配列と辞書は、互いに入れ子にすることが可能である。
                 具体例を見てみるとしよう。
 
                 <PyScript>
@@ -349,7 +376,72 @@
 
         <Header>3.練習問題</header>
         <Paragraph>
-            近日公開! 乞うご期待
+            作問者からのお願い: numpyを使わないで下さい。全問、一瞬で易化します。最後の問題のみ、あらかじめmathライブラリをインポートしておきました。
+        </Paragraph>
+        <Paragraph>
+            <SubHeader class="mb-3">[<span class="text-green-600 font-bold">Easy</span>] 次のデータを正規化せよ。</SubHeader>
+            <Hint level="easy">グレイスケール(8bit)ですね。</Hint>
+
+            <PyScript>
+                data = [
+                            [133, 254,   0, 233,  45],
+                            [230,  43, 198, 172,  85],
+                            [ 75, 189,  34, 210, 222],
+                            [ 43, 240,  65, 184, 202],
+                            [139,  14,  78, 255, 164]
+                        ]
+                # 続きを書いてね
+
+                print(normalized_data)
+            </PyScript>
+        </Paragraph>
+
+        <Paragraph>
+            <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] 次のデータを昇順(ascending order)に並べ替えよ。ただし、バブルソートを使うこと。</SubHeader>
+            <Hint level="med1">各データが泡のように浮かび上がってきます。</Hint>
+
+            <PyScript>
+                data = [5, 9, 3, 6, 2, 1, 3, 7, 8, 0]
+                # 続きを書いてね
+
+                print(sorted_data)
+            </PyScript>
+        </Paragraph>
+
+        <Paragraph>
+            <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] 行列Aと行列Bの積を求めよ。</SubHeader>
+            <Hint level="med2">定義通りに計算しよう。(※手計算しないでね)</Hint>
+
+            <PyScript>
+                A = [
+                        [1, 2, 3],
+                        [4, 5, 6],
+                        [7, 8, 9]
+                    ]
+                B = [
+                        [-1,  0,  1],
+                        [ 0,  1, -1],
+                        [ 1, -1, -1]
+                    ]
+                # 続きを書いてね
+
+                print(C)
+            </PyScript>
+        </Paragraph>
+
+        <Paragraph>
+            <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] データAとデータBの相関係数を求めよ。</SubHeader>
+            <Hint level="med3">平方根は、<span class="text-yellow-400">math.sqrt()</span>関数で計算できる。</Hint>
+
+            <PyScript>
+                import math
+
+                data_A = [ 0,  3,  5,  9, -2,  1,  2, -4,  7,  8]
+                data_B = [ 3, 12,  6,  5,  4, -2,  3, -1,  9,  7]
+                # 続きを書いてね
+
+                print(cor_AB)
+            </PyScript>
         </Paragraph>
 
         <ProgressFooter :progress="completion" class="mt-16" />