Merge branch 'main' into refactor/preface-fix

Author: rurun418

docs/.vitepress/config.ts

@@ -11,9 +11,9 @@ import { head } from './ga-plugin';
 // https://vitepress.dev/reference/site-config
 
 export default withMermaid({
-    title: "pg-basic text",
+    title: "プログラミング基礎講習会",
     description: "プログラミング基礎講習会テキスト",
-    cleanUrls: false,
+    cleanUrls: true,
     markdown: {
 
         //        lineNumbers: true,
@@ -34,11 +34,14 @@ export default withMermaid({
         },
         nav: [
             { text: 'ホーム', link: '/' },
-            { text: 'テキスト', link: '/text/chapter-0/' }
         ],
 
         sidebar: {
             '/cpp/': [
+                {
+                    text: '2025年度版テキスト',
+                    link: '/text/chapter-0/',
+                },
                 {
                     text: 'はじめに',
                     link: '/cpp/preface/',
@@ -55,8 +58,29 @@ export default withMermaid({
                         { text: '1-B. Windowsの環境構築', link: '/cpp/chapter-1/1-B' },
                     ]
                 },
+                {
+                    text: '2. はじめてのプログラミング',
+                    link: '/cpp/chapter-2/',
+                    items: [
+                        { text: '2.1 プログラミングの基礎知識', link: '/cpp/chapter-2/1' },
+                        { text: '2.2 作業環境の構築', link: '/cpp/chapter-2/2' },
+                        { text: '2.3 はじめてのプログラミング', link: '/cpp/chapter-2/3' },
+                        {
+                            text: '練習問題',
+                            link: '/cpp/chapter-2/problems/',
+                            collapsed: true,
+                            items: [
+                                { text: '2-Q1. Hello, Shell!', link: '/cpp/chapter-2/problems/hello-shell' },
+                            ],
+                        },
+                    ]
+                },
             ],
             '/text/': [
+            {
+                text: '2026年度版テキスト [WIP]',
+                link: '/cpp/preface/',
+            },
             {
                 text: 'About',
                 items: [
@@ -238,6 +262,9 @@ export default withMermaid({
         ]
     },
     head: [
+        ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
+        ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
+        ['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap' }],
         [
             'script',
             {

docs/.vitepress/theme/ChapterTitle.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData, useRoute } from 'vitepress'
+import type { DefaultTheme } from 'vitepress'
+
+const { theme } = useData()
+const route = useRoute()
+
+function normalize(path: string): string {
+  return path.replace(/\/$/, '')
+}
+
+function findInItems(items: DefaultTheme.SidebarItem[], path: string): boolean {
+  return items.some(item => {
+    if (normalize(item.link ?? '') === path) return true
+    if (item.items) return findInItems(item.items, path)
+    return false
+  })
+}
+
+const chapterTitle = computed(() => {
+  const path = normalize(route.path)
+  const sidebar = theme.value.sidebar as Record<string, DefaultTheme.SidebarItem[]>
+
+  const sidebarKey = Object.keys(sidebar).find(key =>
+    path.startsWith(normalize(key))
+  )
+  if (!sidebarKey) return null
+
+  for (const section of sidebar[sidebarKey]) {
+    if (!section.items) continue
+    if (findInItems(section.items, path)) return section.text
+  }
+  return null
+})
+</script>
+
+<template>
+  <p v-if="chapterTitle" class="chapter-title">{{ chapterTitle }}</p>
+</template>
+
+<style scoped>
+.chapter-title {
+  font-size: 0.85em;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+  margin: 0 0 0.25rem;
+}
+</style>

docs/.vitepress/theme/custom.css

@@ -1,3 +1,9 @@
+@import "kiso.css";
+
+:root {
+    --vp-font-family-base: 'Noto Sans JP', 'Inter', ui-sans-serif, system-ui, sans-serif;
+}
+
 mjx-container.MathJax svg {
     display: inline;
 }

docs/.vitepress/theme/index.ts

@@ -1,5 +1,15 @@
+/// <reference types="vite/client" />
+import { h } from 'vue'
 import DefaultTheme from "vitepress/theme";
+import ChapterTitle from './ChapterTitle.vue'
 
 import './custom.css'
 
-export default DefaultTheme
+export default {
+  extends: DefaultTheme,
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      'doc-before': () => h(ChapterTitle),
+    })
+  },
+}

docs/cpp/chapter-2/1.md

@@ -2,6 +2,44 @@
 
 ## 2.1.1 プログラミングとは
 
-## 2.1.2 OSとは
+プログラミングとは「コンピューターにどのような動作をさせるかを予め指示する行為」である。ここでいうコンピューターは、我々が今使っているノートパソコンだけではなく、TSUBAME のようなサーバーなどや、電子レンジ等の中に入っている制御装置（残り何分かを表示したり、どのボタンを押したかで動作を変えたり）も指し示す。
+
+コンピューターは、私達よりもずっと速く、そして正確に計算することができるが、人間の言語を理解できない。人間の言語は思っているよりも曖昧であり、一方コンピューターはすべて0と1の2進数によって動作し厳密に指示を与えなければならない。
+そのコンピューターが理解できる形で指示するために、プログラミングをするのである。
+
+::: tip
+プログラミング"言語"というものは様々あって、「C++」はその中の一つである。他にも「Python」「JavaScript」「C#」など言語がある中で今回C\++を選んでいる理由は２つ。
+
+1. 大抵の言語はC++の（もっと言えばCの）派生だから。C\++で一通りプログラミングを勉強してしまえば、C#など他の言語にすぐに乗り換えられます。
+2. C++が比較的コンピュータ寄りだから。
+
+:::
+
+## 2.1.2 コンパイルとは
+
+先述した通り、コンピューターは2進数によって動作する。よって与える命令も2進数でできるだけコンピューターでの動作に特化した形式になっている（「機械語」の形になっている）のだが、これを人間が読むことは困難である。よって比較的わかりやすく、かつ機械語に変換できる言語としてプログラミング言語を用いる。
+
+プログラミング言語によって記述されたプログラムは、コンピューターが直接命令として理解できる形ではなく、よってコンピューターが読める形に変換しなければならない。
+この操作を「コンパイル」と呼び、コンパイルによって生成された01からなるデータ(バイナリ)をコンピューターは読み込む。
+
+```mermaid
+flowchart LR
+th("人間の考えていること") --> |"プログラミング"| pg("プログラミング言語")
+pg --> |"コンパイル"| mc("バイナリ(機械語)")
+mc --> |"命令"| cp("コンピューター")
+```
+
+## 2.1.3 OSとは
+
+OS は、Operating System の略。この講習会中では、上のグラフの「機械語」を読み取って、コンピューターを実際に動かす部分を担当している。他にも、ユーザーの様々な操作（画面上のポインタを動かす、キーボードの入力を受け付けて適切に情報を分配する、HDD/SDD を操作する、などなど…）とコンピューターをつなぐ役割を果たす。
+
+Windows / Mac (Macintosh) は主要な OS である。受講者の大半はこのどちらかのOSを使用しているだろう。
+
+他にも、開発においてよく使用される OS として **Linux** が存在し、いくつかの班では Linux を用いて作業する。
+
+Mac OS は Linux に「近い」（初学者である間は Linux の一種だと思っても良い）が、Windows は Linux とは大きく異なる OS
+なので、Windows ユーザーはよく **WSL** を使用する。
+WSL は **Windows Subsystem for Linux** の略。コンピューターの内部に、仮想的な Linux のコンピューターが入ってると考えると良い。
+
+Ubuntu は、Linux ディストリビューションの一つで、Linux のカスタマイズみたいなものである。
 
-## 2.1.3 コンパイルとは

docs/cpp/chapter-2/2.md

@@ -2,6 +2,77 @@
 
 ## 2.2.1 はじめてのターミナル
 
+まずはターミナルを開いてみよう。黒い画面に白い文字（Mac では白い画面に黒い文字）が出ていて、ここにコマンドを打ち込むことでコンピューターを直接操作することができる。
+試しに `echo "Hello"` と打ち込んで改行すると、`Hello`が出力される。 `echo` は、次に与えられた文字列をそのまま出力するコマンドである。
+
+Windows においては、 WSL のターミナルを用いて Linux を操作することができ、Mac においてはターミナルを用いてコンピューターを操作する事ができる。
+Windowsの環境構築で少し出てきた 「PowerShell」は Windows を操作するイメージ。
+
+::: tip
+`echo` は「こだま・反響」
+:::
+
+1. 「ターミナル」を起動する
+2. `echo "Hello"` と入力する
+3. `Hello` という行が表示されていればOK
+
+![](https://md.trap.jp/uploads/upload_8550a6882b611e212c99ef7b78187cb6.png)
+
+自分の画面とはおそらく違うだろうが、概ねこのような風に `Hello` が表示されれば問題ない。
+
 ## 2.2.2 ディレクトリとは
 
+ディレクトリは、エクスプローラー(Windows)/Finder (Mac)で「フォルダ」に相当するものである。ターミナルは常にどこかのディレクトリ上に居るものとして振る舞う。
+Finder/エクスプローラーと見比べながら、コマンドを打ち込んで理解しよう。
+
+### ターミナルでの操作
+
+1. ターミナルを開く
+2. `pwd` で、現在の自分の場所がわかる
+3. `ls` で、今居るディレクトリにあるファイル一覧が表示される（最初はほぼないはず！）
+
+#### エクスプローラー（Windows）
+
+エクスプローラーを起動すると、自分のコンピューターに保存されているファイルを一覧することができる。
+
+1. エクスプローラーの「表示」をタップ
+   ![](./fig-1.png)
+
+2. 「ファイル名拡張子」にチェックを入れる
+
+3. サイドバーに「Linux」があるので、それをダブルクリックする。
+   ![](./fig-2.png)
+4. 「Ubuntu」をクリック
+5. `pwd` コマンドの結果を見ながら、「home」→「（自分の名前）」でアクセスする。
+
+#### Finder （Mac）
+
+Finder を起動すると、自分のコンピューターに保存されているファイルを一覧することができる。
+
+1. ⌘ + `,` → 「すべてのファイル名拡張子を表示」をON
+2. Finder で⌘+Shift+G
+3. `pwd` で出てきたテキストをそのまま入力
+
 ## 2.2.3 作業環境の構築(仮)
+
+### コマンド紹介
+
+- `pwd` : 現在の自分の場所 (**P**rint **W**orking **D**irectory)
+- `ls` : 今いるディレクトリにあるファイル (**L**ist **S**egments)
+- `cd　<...>` : ディレクトリを移動する (**C**hange **D**irectory)
+- `cd ../` 一つ親のディレクトリに移動する (`/home/trap` なら `/home` に移動)
+- `mkdir <...>` : ディレクトリを作成する (**M**a**k**e **Dir**ectory)
+
+### 作業環境の作成
+
+1. `cd ~` と入力（ `~` は 0 の2つ右のキー `^` と Shift 同時押し）；最初の場所に戻る
+2. `mkdir pgbasic` と入力； `pgbasic` というディレクトリを作成する
+3. `cd pgbasic`； `pgbasic` に移動する
+4. `pwd`； 今いるディレクトリの場所を出力する
+
+### 作業環境を開く方法
+
+1. `cd pgbasic`； `pgbasic` に移動する
+2. `code main.cpp`； VSCode を開く。ここが講習中の作業場所。
+
+もしくは、VSCode を直接起動しても前回のファイル・ディレクトリを開けるようになる。

docs/cpp/chapter-2/3.md

@@ -2,4 +2,61 @@
 
 ## 2.3.1 Hello, traP!
 
+- VSCode を開く (`code main.cpp` コマンドで開く)
+
+```cpp:line-numbers
+#include <iostream>
+using namespace std;
+
+int main() {
+    cout << "Hello, traP!" << endl;
+    // Hello, traP! を出力する
+}
+```
+
+- 保存して、VSCode 上で 「Run Code」で実行できる。
+- `Hello, traP!` となっている部分を書き換えると出力が変わる。実際に試してみよう。
+
+::: tip I 章のまとめ
+
+- プログラミングとは、「コンピューターにどのような動作をさせるかを指示する行為」
+- プログラムは、コンパイルして実行される
+- Windows, Mac, そして Linux という OS がある
+- ディレクトリという概念が存在する
+:::
+
+ここまで読んだら、練習問題を解いてみましょう！
+
 ## 2.3.2 [発展] nanoを使ったプログラミング(仮)
+
+さきほどの操作はすべてターミナル上で完結させることもできる。ここでは少しだけそれを試してみよう。
+
+::: info
+ここで紹介するのは「できる」というだけでの紹介で、本講習中では VSCode を使うことを強くおすすめします！
+:::
+
+1. 「作業環境を開く方法」まで一緒
+2. `nano nano-test.cpp` でコードを開く
+3. キーを入力すると色々入力できる。
+4. ソースコードを入力する。
+5. `Ctrl + X`で終了
+6. `y`を入力したあと、`Enter`を押すと保存
+7. `ls`コマンドで`nano-test.cpp`があることを確認
+8. ターミナル上で、`clang++ nano-test.cpp` で「コンパイル」
+9. エラーが出なかったら、 `./a.out` で「実行」
+10. できた！
+
+この方法で、次のソースコードからなる `nano-test.cpp` を作成してみよう。
+
+```cpp:line-numbers
+#include <iostream>
+using namespace std;
+
+int main() {
+    cout << "Hello, nano!" << endl;
+}
+```
+
+::: tip
+わからなかったり、詰まったりしたらすぐに TA を呼びましょう！
+:::

docs/cpp/chapter-2/fig-1.png

@@ -1 +1,9 @@
 # 2. はじめてのプログラミング
+
+:::warning @講師, TA
+
+**この段階で環境構築にまだまだ時間が掛かりそうな受講者が居る場合は、GitHub Codespaces に移行させてください。**
+講習後に環境構築の続きをするようにお願いします。
+:::
+
+まずは「プログラミング」とはなにか、という半ばご高説を垂れるような話から始めよう。