diff --git a/app/terminal/repl.tsx b/app/terminal/repl.tsx
index ef4ae6c..7ac11f8 100644
--- a/app/terminal/repl.tsx
+++ b/app/terminal/repl.tsx
@@ -4,11 +4,19 @@ import { useCallback, useEffect, useRef } from "react";
import { highlightCodeToAnsi } from "./highlight";
import chalk from "chalk";
import { MutexInterface } from "async-mutex";
-import { clearTerminal, getRows, hideCursor, showCursor, useTerminal } from "./terminal";
+import {
+ clearTerminal,
+ getRows,
+ hideCursor,
+ showCursor,
+ systemMessageColor,
+ useTerminal,
+} from "./terminal";
import { useSectionCode } from "../[docs_id]/section";
+import { Terminal } from "@xterm/xterm";
export interface ReplOutput {
- type: "stdout" | "stderr" | "error" | "return"; // 出力の種類
+ type: "stdout" | "stderr" | "error" | "return" | "system"; // 出力の種類
message: string; // 出力メッセージ
}
export interface ReplCommand {
@@ -17,6 +25,35 @@ export interface ReplCommand {
}
export type SyntaxStatus = "complete" | "incomplete" | "invalid"; // 構文チェックの結果
+export function writeOutput(
+ term: Terminal,
+ outputs: ReplOutput[],
+ endNewLine: boolean
+) {
+ for (let i = 0; i < outputs.length; i++) {
+ const output = outputs[i];
+ if (i > 0) {
+ term.writeln("");
+ }
+ // 出力内容に応じて色を変える
+ const message = String(output.message).replace(/\n/g, "\r\n");
+ switch (output.type) {
+ case "error":
+ term.write(chalk.red(message));
+ break;
+ case "system":
+ term.write(systemMessageColor(message));
+ break;
+ default:
+ term.write(message);
+ break;
+ }
+ }
+ if (endNewLine && outputs.length > 0) {
+ term.writeln("");
+ }
+}
+
interface ReplComponentProps {
initRuntime: () => void;
runtimeInitializing: boolean;
@@ -125,18 +162,7 @@ export function ReplTerminal(props: ReplComponentProps) {
const onOutput = useCallback(
(outputs: ReplOutput[]) => {
if (terminalInstanceRef.current) {
- for (const output of outputs) {
- // 出力内容に応じて色を変える
- const message = String(output.message).replace(/\n/g, "\r\n");
- switch (output.type) {
- case "error":
- terminalInstanceRef.current.writeln(chalk.red(message));
- break;
- default:
- terminalInstanceRef.current.writeln(message);
- break;
- }
- }
+ writeOutput(terminalInstanceRef.current, outputs, true);
// 出力が終わったらプロンプトを表示
updateBuffer(() => [""]);
}
@@ -296,7 +322,7 @@ export function ReplTerminal(props: ReplComponentProps) {
initRuntime();
hideCursor(terminalInstanceRef.current);
terminalInstanceRef.current.write(
- chalk.dim.bold.italic(
+ systemMessageColor(
"(初期化しています...しばらくお待ちください)"
)
);
diff --git a/app/terminal/terminal.tsx b/app/terminal/terminal.tsx
index fc533c5..0c019de 100644
--- a/app/terminal/terminal.tsx
+++ b/app/terminal/terminal.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
import { Terminal } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";
import "@xterm/xterm/css/xterm.css";
+import chalk from "chalk";
/**
* 文字列の幅を計算する。
@@ -49,6 +50,8 @@ export function showCursor(term: Terminal) {
term.write("\x1b[?25h");
}
+export const systemMessageColor = chalk.blue.bold.italic;
+
interface TerminalProps {
getRows?: (cols: number) => number;
onReady?: () => void;
diff --git a/app/terminal/wandbox/wandbox.tsx b/app/terminal/wandbox/wandbox.tsx
index f513258..70fbe76 100644
--- a/app/terminal/wandbox/wandbox.tsx
+++ b/app/terminal/wandbox/wandbox.tsx
@@ -251,20 +251,49 @@ export function WandboxProvider({ children }: { children: ReactNode }) {
}
).then((res) => res.json());
- return [
- ...(result.compiler_output
- ? [{ type: "stdout" as const, message: result.compiler_output }]
- : []),
- ...(result.compiler_error
- ? [{ type: "error" as const, message: result.compiler_error }]
- : []),
- ...(result.program_output
- ? [{ type: "stdout" as const, message: result.program_output }]
- : []),
- ...(result.program_error
- ? [{ type: "error" as const, message: result.program_error }]
- : []),
- ] satisfies ReplOutput[];
+ let outputs: ReplOutput[] = [];
+ if (result.compiler_output) {
+ outputs = outputs.concat(
+ result.compiler_output
+ .trim()
+ .split("\n")
+ .map((line) => ({ type: "stdout" as const, message: line }))
+ );
+ }
+ if (result.compiler_error) {
+ outputs = outputs.concat(
+ result.compiler_error
+ .trim()
+ .split("\n")
+ .map((line) => ({ type: "error" as const, message: line }))
+ );
+ }
+ if (result.program_output) {
+ outputs = outputs.concat(
+ result.program_output
+ .trim()
+ .split("\n")
+ .map((line) => ({ type: "stdout" as const, message: line }))
+ );
+ }
+ if (result.program_error) {
+ outputs = outputs.concat(
+ result.program_error
+ .trim()
+ .split("\n")
+ .map((line) => ({ type: "error" as const, message: line }))
+ );
+ }
+ if (result.status !== "0") {
+ outputs.push({
+ type: "system" as const,
+ message: `ステータス ${result.status} で異常終了しました`,
+ });
+ }
+ // TODO: result.signal はいつ使われるのか？
+
+ console.log(outputs);
+ return outputs;
},
[files, cppOptions]
);
From b5b27cb7cdf59abea6fc35d5bb9d4449649de64b Mon Sep 17 00:00:00 2001
From: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>
Date: Sun, 31 Aug 2025 18:36:22 +0900
Subject: [PATCH 5/8] =?UTF-8?q?cpp-3=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/docs/cpp-3.md | 334 +++++++++++++++++++++++++++++++++++++++++++
1 file changed, 334 insertions(+)
create mode 100644 public/docs/cpp-3.md
diff --git a/public/docs/cpp-3.md b/public/docs/cpp-3.md
new file mode 100644
index 0000000..637f33c
--- /dev/null
+++ b/public/docs/cpp-3.md
@@ -0,0 +1,334 @@
+# 第3章: 関数と参照
+
+プログラムを構成する基本的な部品である「関数」について、C++ならではの引数の渡し方や便利な機能を学びます。他の言語で関数に慣れている方も、C++特有の概念である「参照」は特に重要なので、しっかり理解していきましょう。
+
+## 関数の基本: 宣言と定義の分離
+
+プログラム内の特定のタスクを実行するコードのまとまりを「**関数**」と呼びます。C++では、この関数を利用する前に、コンパイラがその関数の存在と使い方を知っている必要があります。そのため、「**宣言 (declaration)**」と「**定義 (definition)**」という2つの概念が重要になります。
+
+ * **宣言 (Declaration)**: 関数の使い方（名前、引数、戻り値）をコンパイラに教える。本体の処理はない。
+ * **定義 (Definition)**: 関数の具体的な処理内容を記述する。
+
+### 関数の宣言
+
+宣言の基本的な文法は以下の通りです。
+
+```
+戻り値の型 関数名(引数の型1 引数名1, 引数の型2 引数名2, ...);
+```
+
+ * **戻り値の型 (Return Type)**: 関数が処理を終えた後に返す値の型です。例えば、`int`型なら整数値を返します。
+ * **関数名 (Function Name)**: 関数を呼び出すときに使う名前です。
+ * **引数リスト (Parameter List)**: 関数が処理のために受け取る値です。`()`の中に、`型名 変数名`のペアをコンマで区切って記述します。引数が必要ない場合は `()` の中を空にします。
+ * **セミコロン (`;`)**: 宣言の最後には必ずセミコロンを付けます。
+
+### 戻り値がない場合: `void`型
+
+関数が何も値を返す必要がない場合もあります。例えば、「画面にメッセージを表示するだけ」といった関数です。その場合、戻り値の型として `void` という特別なキーワードを使います。
+
+```cpp
+void printMessage(std::string message);
+```
+
+第2章で学んだように、`int`や`double`などの型は変数を定義するために使えましたが、`void`は「型がない」ことを示す特殊な型なので、`void my_variable;` のように変数を定義することはできません。あくまで関数の戻り値の型としてのみ使います。
+
+### コンパイラは上から順に読む
+
+C++のコンパイラはソースコードを上から下へと順番に読み込んでいきます。そのため、`main`関数のような場所で別の関数を呼び出すコードに出会ったとき、コンパイラはその時点ですでに関数の「宣言」または「定義」を読み込んでいる必要があります。
+
+つまり、**`main`関数よりも上（前）に、呼び出す関数の定義か宣言のどちらかが書かれていなければコンパイルエラー**になります。
+
+コードを整理するため、一般的には`main`関数の前に関数の「宣言」だけを記述し、`main`関数の後（または別のファイル）に具体的な処理内容である「定義」を記述するスタイルがよく使われます。
+
+以下の例で確認してみましょう。
+
+```cpp:declaration_definition.cpp
+#include
+#include
+
+// 1. 関数の「宣言」(プロトタイプ宣言)
+// これにより、main関数の中で greet や add を使ってもコンパイラはエラーを出さない。
+void greet(std::string name); // 戻り値がない関数の宣言
+int add(int a, int b); // int型の値を返す関数の宣言
+
+// main関数: プログラムの開始点
+int main() {
+ // 宣言があるので、これらの関数を呼び出すことができる
+ greet("Taro");
+
+ int result = add(5, 3);
+ std::cout << "5 + 3 = " << result << std::endl;
+
+ return 0;
+}
+
+// 2. 関数の「定義」(本体の実装)
+// 実際の処理はここに書く。
+void greet(std::string name) {
+ std::cout << "Hello, " << name << "!" << std::endl;
+}
+
+int add(int a, int b) {
+ return a + b;
+}
+```
+
+```cpp-exec:declaration_definition.cpp
+Hello, Taro!
+5 + 3 = 8
+```
+
+この例では、`main`関数が始まる前に`greet`関数と`add`関数の宣言をしています。これにより、`main`関数内でこれらの関数を自由な順序で呼び出すことができ、コードの可読性が向上します。関数の具体的な実装は`main`関数の後にまとめて記述することで、「プログラムの全体的な流れ（`main`）」と「各部分の具体的な処理（関数の定義）」を分離して考えることができます。
+
+## 引数の渡し方
+
+C++の関数の引数の渡し方には、主に **「値渡し」「ポインタ渡し」「参照渡し」** の3つがあります。ここでは特にC++特有の「参照渡し」に注目します。
+
+### 値渡し (Pass by Value)
+
+引数に渡された値が**コピー**されて、関数内のローカル変数として扱われます。関数内でその値を変更しても、呼び出し元の変数は影響を受けません。これは多くの言語で標準的な引数の渡し方です。
+
+```cpp:pass_by_value.cpp
+#include
+
+void tryToChange(int x) {
+ x = 100; // 関数内のコピーが変更されるだけ
+ std::cout << "Inside function: x = " << x << std::endl;
+}
+
+int main() {
+ int my_number = 10;
+ std::cout << "Before function call: my_number = " << my_number << std::endl;
+ tryToChange(my_number);
+ std::cout << "After function call: my_number = " << my_number << std::endl; // 10のまま変わらない
+ return 0;
+}
+```
+
+```cpp-exec:pass_by_value.cpp
+Before function call: my_number = 10
+Inside function: x = 100
+After function call: my_number = 10
+```
+
+ * **長所**: 呼び出し元の変数が不用意に書き換えられることがなく、安全です。
+ * **短所**: 大きなオブジェクト（例えば、たくさんの要素を持つ `std::vector` など）を渡すと、コピーのコストが無視できなくなり、パフォーマンスが低下する可能性があります。
+
+### ポインタ渡し (Pass by Pointer)
+
+これはC言語から引き継がれた伝統的な方法で、変数のメモリアドレスを渡します。ポインタ（アドレスを指し示す変数）を介して、呼び出し元の変数を直接変更できます。詳細は第4章で詳しく学びますが、ここでは簡単に紹介します。
+
+```cpp:pass_by_pointer.cpp
+#include
+
+// ポインタを受け取るには、型名の後にアスタリスク * を付ける
+void changeWithPointer(int* ptr) {
+ *ptr = 100; // アスタリスク * でポインタが指す先の値にアクセス
+}
+
+int main() {
+ int my_number = 10;
+ // 変数のアドレスを渡すには、アンパサンド & を付ける
+ changeWithPointer(&my_number);
+ std::cout << "After function call: my_number = " << my_number << std::endl; // 100に変わる
+ return 0;
+}
+```
+
+```cpp-exec:pass_by_pointer.cpp
+After function call: my_number = 100
+```
+
+ポインタは強力ですが、`nullptr`（どこも指していないポインタ）の可能性を考慮する必要があるなど、扱いが少し複雑です。
+
+### 参照渡し (Pass by Reference)
+
+C++の大きな特徴の一つが**参照 (Reference)** です。参照は、既存の変数に**別名**を付ける機能と考えることができます。。
+
+関数に参照を渡すと、値のコピーは発生せず、関数内の引数は呼び出し元の変数の「別名」として振る舞います。そのため、関数内での操作が呼び出し元の変数に直接反映されます。構文もポインタよりずっとシンプルです。
+
+```cpp:pass_by_reference.cpp
+#include
+
+// 参照を受け取るには、型名の後にアンパサンド & を付ける
+void changeWithReference(int& ref) {
+ ref = 100; // 通常の変数と同じように扱うだけ
+}
+
+int main() {
+ int my_number = 10;
+ changeWithReference(my_number); // 呼び出し側は特別な記号は不要
+ std::cout << "After function call: my_number = " << my_number << std::endl; // 100に変わる
+ return 0;
+}
+```
+
+```cpp-exec:pass_by_reference.cpp
+After function call: my_number = 100
+```
+
+
+ * **長所**: コピーが発生しないため効率的です。また、構文がシンプルで、呼び出し元の変数を変更する意図が明確になります。
+ * **注意点**: 関数内で値を変更できるため、意図しない書き換えに注意が必要です。
+
+#### `const`参照: 効率と安全性の両立
+
+「大きなオブジェクトを渡したいけど、コピーは避けたい。でも関数内で値を変更されたくはない」という場合に最適なのが **`const`参照** です。
+
+```cpp:const_reference.cpp
+#include
+#include
+
+// const参照で受け取ることで、コピーを防ぎつつ、
+// messageが関数内で変更されないことを保証する
+void printMessage(const std::string& message) {
+ // message = "changed!"; // この行はコンパイルエラーになる！
+ std::cout << message << std::endl;
+}
+
+int main() {
+ std::string greeting = "Hello, C++ world! This is a long string.";
+ printMessage(greeting);
+ return 0;
+}
+```
+
+```cpp-exec:const_reference.cpp
+Hello, C++ world! This is a long string.
+```
+
+**C++のベストプラクティス**:
+
+ * `int`や`double`などの小さな基本型は**値渡し**。
+ * 関数内で引数を**変更する必要がある**場合は**参照渡し (`&`)**。
+ * 大きなオブジェクトを渡すが**変更はしない**場合は **`const`参照 (`const &`)** を使う。
+
+## 関数のオーバーロード
+
+C++では、**同じ名前で引数の型や個数が異なる関数を複数定義**できます。これを**オーバーロード (Overload)** と呼びます。コンパイラは、関数呼び出し時の引数の型や個数を見て、どの関数を呼び出すべきかを自動的に判断してくれます。
+
+```cpp:overloading.cpp
+#include
+#include
+
+// int型の引数を1つ取るprint関数
+void print(int value) {
+ std::cout << "Integer: " << value << std::endl;
+}
+
+// string型の引数を1つ取るprint関数
+void print(const std::string& value) {
+ std::cout << "String: " << value << std::endl;
+}
+
+// double型とint型の引数を取るprint関数
+void print(double d_val, int i_val) {
+ std::cout << "Double: " << d_val << ", Integer: " << i_val << std::endl;
+}
+
+int main() {
+ print(123);
+ print("hello");
+ print(3.14, 42);
+ return 0;
+}
+```
+
+```cpp-exec:overloading.cpp
+Integer: 123
+String: hello
+Double: 3.14, Integer: 42
+```
+
+これにより、`printInt`, `printDouble` のように別々の名前を付ける必要がなくなり、コードが直感的で読みやすくなります。
+
+注意点として、戻り値の型が違うだけではオーバーロードはできません。あくまで引数のリストが異なる必要があります。
+
+## デフォルト引数
+
+関数の引数に、あらかじめ**デフォルト値**を設定しておくことができます。これにより、関数を呼び出す際に該当する引数を省略できるようになります。
+
+デフォルト引数は、引数リストの**右側**から設定する必要があります。一度デフォルト引数を設定したら、それより右側にある引数もすべてデフォルト引数を持たなければなりません。
+
+```cpp:default_arguments.cpp
+#include
+#include
+
+// 第2引数 greeting にデフォルト値を設定
+void greet(const std::string& name, const std::string& greeting = "Hello") {
+ std::cout << greeting << ", " << name << "!" << std::endl;
+}
+
+int main() {
+ // 第2引数を省略。デフォルト値 "Hello" が使われる
+ greet("Alice");
+
+ // 第2引数を指定。指定した値 "Hi" が使われる
+ greet("Bob", "Hi");
+
+ return 0;
+}
+```
+
+```cpp-exec:default_arguments.cpp
+Hello, Alice!
+Hi, Bob!
+```
+
+## この章のまとめ
+
+この章では、C++の関数に関する基本的ながらも重要な機能を学びました。
+
+ * **関数の宣言と定義の分離**: プログラムの構造を整理し、分割コンパイルを可能にするための基本です。
+ * **引数の渡し方**:
+ * **値渡し**: 引数のコピーを作成し、元の変数を保護します。
+ * **参照渡し (`&`)**: 変数の「別名」を渡し、コピーのコストをなくします。呼び出し元の変数を変更するため、または効率化のために使います。
+ * **`const`参照渡し (`const&`)**: 効率的でありながら、意図しない変更を防ぐためのC++の定石です。
+ * **関数のオーバーロード**: 同じ名前で引数リストの異なる関数を定義でき、文脈に応じた適切な関数が自動で選ばれます。
+ * **デフォルト引数**: 関数の引数を省略可能にし、柔軟な関数呼び出しを実現します。
+
+特に「参照」は、この先のC++プログラミングで頻繁に登場する極めて重要な概念です。値渡しとの違い、そして`const`参照との使い分けをしっかりマスターしましょう。
+
+### 練習問題1: 値の交換
+
+2つの`int`型変数の値を交換する関数 `swap` を作成してください。この関数は、呼び出し元の変数の値を直接変更できるように、**参照渡し**を使って実装してください。
+
+```cpp:practice3_1.cpp
+#include
+
+// ここにswap関数を実装してください
+
+
+// main関数
+int main() {
+ int a = 10;
+ int b = 20;
+ std::cout << "Before: a = " << a << ", b = " << b << std::endl;
+ swap(a, b);
+ std::cout << "After: a = " << a << ", b = " << b << std::endl;
+ return 0;
+}
+```
+
+```cpp-exec:practice3_1.cpp
+(期待される実行結果)
+Before: a = 10, b = 20
+After: a = 20, b = 10
+```
+
+### 問題2: 図形の面積
+
+**関数のオーバーロード**を使い、正方形と長方形の面積を計算する `calculate_area` という名前の関数を実装してください。
+
+1. 引数が1つ (`int side`) の場合は、正方形の面積 (side✕side) を計算して返す。
+2. 引数が2つ (`int width`, `int height`) の場合は、長方形の面積 (width✕height) を計算して返す。
+
+作成した関数を`main`関数から呼び出し、結果が正しく表示されることを確認してください。
+
+```cpp:practice3_2.cpp
+#include
+
+```
+
+```cpp-exec:practice3_2.cpp
+```
From 4c53200ca6c6947ed31307307a9a8cc981fe8e4d Mon Sep 17 00:00:00 2001
From: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>
Date: Sun, 31 Aug 2025 18:57:02 +0900
Subject: [PATCH 6/8] =?UTF-8?q?=E3=82=B5=E3=82=A4=E3=83=89=E3=83=90?=
=?UTF-8?q?=E3=83=BC=E3=82=92=E8=A4=87=E6=95=B0=E8=A8=80=E8=AA=9E=E3=81=AB?=
=?UTF-8?q?=E5=AF=BE=E5=BF=9C=E3=80=81=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC?=
=?UTF-8?q?=E3=83=AB=E6=99=82=E3=81=AE=E6=8C=99=E5=8B=95=E3=82=92=E4=BF=AE?=
=?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
app/sidebar.tsx | 103 +++++++++++++++++++++++++++++-------------------
1 file changed, 63 insertions(+), 40 deletions(-)
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
index 21b7730..0a2cf7e 100644
--- a/app/sidebar.tsx
+++ b/app/sidebar.tsx
@@ -1,65 +1,88 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
-import useSWR, { Fetcher } from 'swr'
+import useSWR, { Fetcher } from "swr";
import { splitMarkdown } from "./[docs_id]/splitMarkdown";
-const fetcher: Fetcher = (url) => fetch(url).then((r) => r.text())
+const fetcher: Fetcher = (url) =>
+ fetch(url).then((r) => r.text());
export function Sidebar() {
const pathname = usePathname();
const docs_id = pathname.replace(/^\//, "");
- const { data, error, isLoading } = useSWR(
- `/docs/${docs_id}.md`,
- fetcher
- )
+ const { data, error, isLoading } = useSWR(`/docs/${docs_id}.md`, fetcher);
const pages = [
- { id: "python-1", title: "1. 環境構築と基本思想" },
- { id: "python-2", title: "2. 基本構文とデータ型" },
- { id: "python-3", title: "3. リスト、タプル、辞書、セット" },
- { id: "python-4", title: "4. 制御構文と関数" },
- { id: "python-5", title: "5. モジュールとパッケージ" },
- { id: "python-6", title: "6. オブジェクト指向プログラミング" },
- { id: "python-7", title: "7. ファイルの入出力とコンテキストマネージャ" },
- { id: "python-8", title: "8. 例外処理" },
- { id: "python-9", title: "9. ジェネレータとデコレータ" },
+ {
+ id: "python",
+ lang: "Python",
+ pages: [
+ { id: 1, title: "環境構築と基本思想" },
+ { id: 2, title: "基本構文とデータ型" },
+ { id: 3, title: "リスト、タプル、辞書、セット" },
+ { id: 4, title: "制御構文と関数" },
+ { id: 5, title: "モジュールとパッケージ" },
+ { id: 6, title: "オブジェクト指向プログラミング" },
+ {
+ id: 7,
+ title: "ファイルの入出力とコンテキストマネージャ",
+ },
+ { id: 8, title: "例外処理" },
+ { id: 9, title: "ジェネレータとデコレータ" },
+ ],
+ },
+ {
+ id: "cpp",
+ lang: "C++",
+ pages: [
+ { id: 2, title: "型システムとメモリ" },
+ { id: 3, title: "関数と参照" },
+ ],
+ },
];
- if (error) console.error("Sidebar fetch error:", error)
-
+ if (error) console.error("Sidebar fetch error:", error);
-
-
- const splitmdcontent = splitMarkdown(data ?? "")
+ const splitmdcontent = splitMarkdown(data ?? "");
return (
-
+
{/* todo: 背景色ほんとにこれでいい？ */}
-
+
{/* サイドバーが常時表示されている場合のみ */}
Navbar Title
-
-
- {pages.map((page) => (
- -
- {page.title}
- {page.id === docs_id && !isLoading &&(
-
- {splitmdcontent
- .slice(1)
- .map((section, idx) => (
- -
- {section.title}
-
- ))}
-
- )}
+
+ {pages.map((group) => (
+ -
+
+ {group.lang}
+
+ {group.pages.map((page) => (
+ -
+
+ {page.id}.
+ {page.title}
+
+ {`${group.id}-${page.id}` === docs_id && !isLoading && (
+
+ {splitmdcontent.slice(1).map((section, idx) => (
+ -
+ {section.title}
+
+ ))}
+
+ )}
+
+ ))}
+
+
))}
-
+
);
}
-
From 86f216c40be81838b6aff7a7abe7229756c7a5dc Mon Sep 17 00:00:00 2001
From: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>
Date: Sun, 31 Aug 2025 19:01:11 +0900
Subject: [PATCH 7/8] =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=83=AA?=
=?UTF-8?q?=E3=82=B9=E3=83=88=E3=82=92=E5=88=A5=E3=83=95=E3=82=A1=E3=82=A4?=
=?UTF-8?q?=E3=83=AB=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
app/pagesList.ts | 29 +++++++++++++++++++++++++++++
app/sidebar.tsx | 32 ++------------------------------
2 files changed, 31 insertions(+), 30 deletions(-)
create mode 100644 app/pagesList.ts
diff --git a/app/pagesList.ts b/app/pagesList.ts
new file mode 100644
index 0000000..a7ca85f
--- /dev/null
+++ b/app/pagesList.ts
@@ -0,0 +1,29 @@
+// docs_id = `${group.id}-${page.id}`
+export const pagesList = [
+ {
+ id: "python",
+ lang: "Python",
+ pages: [
+ { id: 1, title: "環境構築と基本思想" },
+ { id: 2, title: "基本構文とデータ型" },
+ { id: 3, title: "リスト、タプル、辞書、セット" },
+ { id: 4, title: "制御構文と関数" },
+ { id: 5, title: "モジュールとパッケージ" },
+ { id: 6, title: "オブジェクト指向プログラミング" },
+ {
+ id: 7,
+ title: "ファイルの入出力とコンテキストマネージャ",
+ },
+ { id: 8, title: "例外処理" },
+ { id: 9, title: "ジェネレータとデコレータ" },
+ ],
+ },
+ {
+ id: "cpp",
+ lang: "C++",
+ pages: [
+ { id: 2, title: "型システムとメモリ" },
+ { id: 3, title: "関数と参照" },
+ ],
+ },
+] as const;
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
index 0a2cf7e..3d2d81d 100644
--- a/app/sidebar.tsx
+++ b/app/sidebar.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
import { usePathname } from "next/navigation";
import useSWR, { Fetcher } from "swr";
import { splitMarkdown } from "./[docs_id]/splitMarkdown";
+import { pagesList } from "./pagesList";
const fetcher: Fetcher
= (url) =>
fetch(url).then((r) => r.text());
@@ -12,35 +13,6 @@ export function Sidebar() {
const docs_id = pathname.replace(/^\//, "");
const { data, error, isLoading } = useSWR(`/docs/${docs_id}.md`, fetcher);
- const pages = [
- {
- id: "python",
- lang: "Python",
- pages: [
- { id: 1, title: "環境構築と基本思想" },
- { id: 2, title: "基本構文とデータ型" },
- { id: 3, title: "リスト、タプル、辞書、セット" },
- { id: 4, title: "制御構文と関数" },
- { id: 5, title: "モジュールとパッケージ" },
- { id: 6, title: "オブジェクト指向プログラミング" },
- {
- id: 7,
- title: "ファイルの入出力とコンテキストマネージャ",
- },
- { id: 8, title: "例外処理" },
- { id: 9, title: "ジェネレータとデコレータ" },
- ],
- },
- {
- id: "cpp",
- lang: "C++",
- pages: [
- { id: 2, title: "型システムとメモリ" },
- { id: 3, title: "関数と参照" },
- ],
- },
- ];
-
if (error) console.error("Sidebar fetch error:", error);
const splitmdcontent = splitMarkdown(data ?? "");
@@ -53,7 +25,7 @@ export function Sidebar() {
- {pages.map((group) => (
+ {pagesList.map((group) => (
-
{group.lang}
From 6a582f989f71971b4828880f2b7ca451777a08d8 Mon Sep 17 00:00:00 2001
From: na-trium-144 <100704180+na-trium-144@users.noreply.github.com>
Date: Sun, 31 Aug 2025 19:29:07 +0900
Subject: [PATCH 8/8] =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=88=E3=83=AB?=
=?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=82=92=E9=81=A9=E5=BD=93=E3=81=AB?=
=?UTF-8?q?=E6=95=B4=E5=82=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
app/page.tsx | 80 ++++++++++++++++++++++++++++++++++++++++++++++--
app/pagesList.ts | 3 ++
2 files changed, 80 insertions(+), 3 deletions(-)
diff --git a/app/page.tsx b/app/page.tsx
index c69f396..5166a77 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,79 @@
+import Link from "next/link";
+import { pagesList } from "./pagesList";
+
export default function Home() {
- return
- This is root page
-
;
+ return (
+
+
my.code(); へようこそ
+
+ my.code();
+ はプログラミング言語のチュートリアルを提供するウェブサイトです。
+
+
+ {pagesList.map((group) => {
+ return (
+
+
+
{group.lang}
+
{group.description}
+
+
+ はじめる
+
+
+
+
+ );
+ })}
+
+
主な特徴
+ {/* TODO: デザインがダサい */}
+
+ -
+ 豊富なチュートリアル
+
+ my.code();
+ ではさまざまなプログラミング言語やフレームワークのチュートリアルを提供しています。
+ 初心者向けの基礎から上級者向けの応用まで、幅広いレベルに対応したチュートリアルが揃っています。
+ {/* ほんまか？ */}
+
+
+ -
+ すぐに動かせる実行環境
+
+ my.code();
+ ではブラウザ上でコードを実行できる環境を整備しており、環境構築の手間なくすぐにコードを実行することができます。
+ チュートリアル内のサンプルコードはそのまま実行するだけでなく、自由に編集して試すことも可能です。
+
+
+ -
+ AIアシスタントによるサポート
+
+ my.code(); ではAIアシスタントが学習をサポートします。
+ チュートリアルを読んでいてわからないことがあれば、AIアシスタントに質問してみてください。
+ さらに、実行したサンプルコードの解説やエラーの原因調査、改善提案まで、AIアシスタントがあなたの学習を強力に支援します。
+
+
+ -
+ 実践的な練習問題
+
+ 各チュートリアルには練習問題が含まれており、学んだ内容を実際に試すことができます。
+ 練習問題は段階的に難易度が上がるように設計されており、理解度を深めるのに役立ちます。
+ 書いたコードはその場ですぐにAIアシスタントがレビューし、フィードバックを提供します。
+
+
+
+