diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..f0b02ae --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,35 @@ +name: CI + +on: + push: + branches: [main] + pull_request: + +jobs: + lint: + runs-on: ubuntu-24.04 + steps: + - uses: actions/checkout@v7 + + - uses: actions/setup-node@v7 + with: + node-version: 24 + cache: npm + + - run: npm ci + + - run: npm run lint + + format: + runs-on: ubuntu-24.04 + steps: + - uses: actions/checkout@v7 + + - uses: actions/setup-node@v7 + with: + node-version: 24 + cache: npm + + - run: npm ci + + - run: npm run format:check diff --git a/.oxfmtrc.json b/.oxfmtrc.json new file mode 100644 index 0000000..55c15df --- /dev/null +++ b/.oxfmtrc.json @@ -0,0 +1,4 @@ +{ + "$schema": "./node_modules/oxfmt/configuration_schema.json", + "ignorePatterns": [] +} diff --git a/AGENTS.md b/AGENTS.md index 8bd0e39..caeace2 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,4 +1,5 @@ + # This is NOT the Next.js you know This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices. diff --git a/README.md b/README.md index 5c1856c..3151d74 100644 --- a/README.md +++ b/README.md @@ -5,42 +5,57 @@ ```bash npm run dev # 開発モードでプロジェクトを実行（これで動作等を確認する） ``` + 基本的に、localhost:3000 が開くはず + ```bash npm ci # ciとはclean installの略, package-lock.jsonの内容を基にパッケージ（再利用可能なプログラムのまとまりのこと）をインストール ``` + （なお、インストール内容について、もし手動編集をする場合、package.jsonの方を編集し、package-lock.jsonは編集しないこと） + ```bash cp .env.example .env # .env.exampleの内容をコピーして自分用の.envを作成する ``` + （`.env`ファイルは秘密情報を含みうるため`.gitignore`でGit管理から除外されている。`.env.example`はGit管理されているのでcloneすれば手元にあるはずだが、無ければ手動で作成すること） + ```bash npx prisma migrate dev # マイグレーション履歴（prisma/migrations）を基に、自分のローカル環境にDB（prisma/dev.db）を作成・更新する ``` + （`prisma/dev.db`はSQLiteのDB実体ファイルで、複数人が同じファイルをGit管理すると変更が衝突して壊れるため`.gitignore`で除外されている。そのため各自が上記コマンドでローカルに作成する。他の人がスキーマ（`prisma/schema.prisma`）を変更してマイグレーションファイルを追加した場合、`git pull`した後に再度このコマンドを実行して自分のDBにも変更を反映すること） + ```bash git clone git@github.com:アカウント名/リポジトリ名.git # リモートリポジトリの内容を、自身のローカルリポジトリにクローンする ``` + ```bash git pull origin main # 自分のリポジトリにリモートリポジトリのmainブランチの変更（他の人が施したものなど）を取り込む # git fetch（最新情報の取得）とgit merge（手元のデータへの統合）の2つの処理を同時に実行している ``` + ```bash -git branch # 現在いるブランチを確認 +git branch # 現在いるブランチを確認 ``` + ```bash git switch ブランチ名 # ブランチを切り替える ``` + ```bash git switch -c ブランチ名 # ブランチを新たに作成する ``` + ```bash rm -rf リポジトリ名 # リポジトリを強制削除する # どうしてもうまくいかなかったときは、一旦ローカルリポジトリを削除して再びクローンしてもよい（多分正攻法ではない） ``` + ## プロジェクト構成の大枠 + - layout.tsx - 共通するレイアウトのレンダリングを担っている - {children}の中に各コンポーネントのレンダリングが集約されているイメージ @@ -66,12 +81,16 @@ rm -rf リポジトリ名 - prismaディレクトリ - Node.jsおよびTypeScript向けORMツールであるprismaを管理するディレクトリ - ORM（オブジェクト関係マッピング）: SQLを書かずにデータを操作する技術 + ## Next.jsについて + Next.jsとは、reactベースのWebアプリケーションフレームワークで、主に以下の2つの特徴がある。 + - App Router： ディレクトリを使って画面の切り替えを行い、アプリを設計する機能 - Server Side Rendering（SSR）: サーバー側でHTMLを作ってから表示する機能 ### App Routerルーティング規則 + App Routerのルーティングは、次の2つの軸で成り立っている。 - **フォルダ** … 階層がそのまま URL のパスになる @@ -98,26 +117,28 @@ App Routerのルーティングは、次の2つの軸で成り立っている。 フォルダの階層がそのままURLになる。ただし中に`page`ファイルが必要 -| フォルダ構造 | 対応するURL | -|---|---| -| `app/page.tsx` | `/` | -| `app/learn/page.tsx` | `/learn` | -| `app/learn/[language]/page.tsx` | `/learn/english` など | +| フォルダ構造 | 対応するURL | +| ----------------------------------------- | ----------------------------- | +| `app/page.tsx` | `/` | +| `app/learn/page.tsx` | `/learn` | +| `app/learn/[language]/page.tsx` | `/learn/english` など | | `app/learn/[language]/[section]/page.tsx` | `/learn/english/grammar` など | #### 2. 特殊ファイル（予約名） + ファイル名によってApp Routerにおける役割が変わる 拡張子`.tsx`/`.jsx`/`.js`（`page`は`.mdx`も可）は選べる -| ファイル名 | 役割 | -|---|---| -| `page` | そのルートの UI 本体。**これがないとアクセス不可** | -| `layout` | その階層以下で共有される枠。上位から入れ子に継承される | -| `loading` | ロード中の UI（内部でReact Suspense利用） | -| `error` | エラー時の UI（Error Boundary） | -| `not-found` | 404 の UI | -| `route` | API エンドポイント。`page`とは同じ階層に共存できない | -| `template` | 再マウントされる点以外は`layout`に近い | -それ以外のファイル（.tsなど）は「非公開ファイル（Colocation）」になり、そのフォルダ専用のコンポーネントやデータ処理関数を配置するのが一般的 + +| ファイル名 | 役割 | +| ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | +| `page` | そのルートの UI 本体。**これがないとアクセス不可** | +| `layout` | その階層以下で共有される枠。上位から入れ子に継承される | +| `loading` | ロード中の UI（内部でReact Suspense利用） | +| `error` | エラー時の UI（Error Boundary） | +| `not-found` | 404 の UI | +| `route` | API エンドポイント。`page`とは同じ階層に共存できない | +| `template` | 再マウントされる点以外は`layout`に近い | +| それ以外のファイル（.tsなど）は「非公開ファイル（Colocation）」になり、そのフォルダ専用のコンポーネントやデータ処理関数を配置するのが一般的 | ##### layoutについて @@ -128,22 +149,23 @@ App Routerのルーティングは、次の2つの軸で成り立っている。 #### 3. 動的ルート（角括弧の記法） URL の一部が可変になる部分は角括弧 -| 記法 | 名称 | マッチ例 | params の中身 | -|---|---|---|---| -| `[folder]` | 動的セグメント | `/learn/english` | `{ language: "english" }` | -| `[...folder]` | catch-all | `/shop/a/b` | `{ slug: ["a", "b"] }`（配列） | -| `[[...folder]]` | optional catch-all | `/shop` も含む | セグメント無しにもマッチ | + +| 記法 | 名称 | マッチ例 | params の中身 | +| --------------- | ------------------ | ---------------- | ------------------------------ | +| `[folder]` | 動的セグメント | `/learn/english` | `{ language: "english" }` | +| `[...folder]` | catch-all | `/shop/a/b` | `{ slug: ["a", "b"] }`（配列） | +| `[[...folder]]` | optional catch-all | `/shop` も含む | セグメント無しにもマッチ | #### 4. page.tsxのコンポーネントが受け取る引数 `page.tsx`のデフォルトエクスポート関数は Next.js から**`params`と`searchParams`を自動的に受け取る。 -| 引数 | 中身 | 例 | -|---|---|---| -| `params` | 動的セグメント `[...]` | `/learn/english` → `{ language: "english" }` | -| `searchParams` | クエリ文字列 `?...` | `?level=beginner` → `{ level: "beginner" }` | +| 引数 | 中身 | 例 | +| -------------- | ---------------------- | -------------------------------------------- | +| `params` | 動的セグメント `[...]` | `/learn/english` → `{ language: "english" }` | +| `searchParams` | クエリ文字列 `?...` | `?level=beginner` → `{ level: "beginner" }` | ### サーバーサイドレンダリング + - 原則、ルーティング規則に含まれるものはデフォルトでSSRが適用される - 'use client'は、「クライアントコンポーネント」を宣言するディレクティブであり、ファイルの一番上にこれを記述すると、useStateやuseEffectなどのReactフックが使えるようになる（この場合でもSSR自体は適用されるので、誤解しないよう注意） - diff --git a/app/globals.css b/app/globals.css index 5842cc4..3ea409e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -226,7 +226,6 @@ body { } } - @keyframes vb-scroll-left { from { transform: translateX(0); @@ -255,4 +254,4 @@ body { .vb-flow-row { animation: none; } -} \ No newline at end of file +} diff --git a/app/layout.tsx b/app/layout.tsx index 1697d61..acb868e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -16,8 +16,7 @@ const geistMono = Geist_Mono({ export const metadata: Metadata = { title: "Vocabook | 多次元単語帳アプリ", - description: - "自分だけの多次元単語帳を作って共有できる、多言語対応の暗記学習アプリ。", + description: "自分だけの多次元単語帳を作って共有できる、多言語対応の暗記学習アプリ。", }; // ルートレイアウト @@ -27,10 +26,7 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - +
{children}
diff --git a/app/learn/chinese/01/page.mdx b/app/learn/chinese/01/page.mdx index 264b23e..f01e9cb 100644 --- a/app/learn/chinese/01/page.mdx +++ b/app/learn/chinese/01/page.mdx @@ -2,11 +2,11 @@ export const title = "名詞の性の語尾による判別"; # 名詞の性の語尾による判別 -*第1章 品詞と文型より* +_第1章 品詞と文型より_ ものの名詞は男性・女性を直観的に判断できないため、語尾によってある程度判別する。（例外もある） -| 語尾 | 性 | -|---|---| -| -age、-ment、-eau、-teur | 男性名詞 | +| 語尾 | 性 | +| ------------------------------- | -------- | +| -age、-ment、-eau、-teur | 男性名詞 | | -tion、-sion、-té、-esse、-ette | 女性名詞 | diff --git a/app/learn/chinese/layout.tsx b/app/learn/chinese/layout.tsx index 01510ca..98e8952 100644 --- a/app/learn/chinese/layout.tsx +++ b/app/learn/chinese/layout.tsx @@ -3,16 +3,10 @@ import { getLanguage } from "@/app/learn/languages"; const language = getLanguage("chinese"); // 中国語セクション専用レイアウト（各言語ディレクトリの layout.tsx はファイル自体が必須） -export default function ChineseSectionLayout({ - children, -}: { - children: React.ReactNode; -}) { +export default function ChineseSectionLayout({ children }: { children: React.ReactNode }) { return (
-

- {language?.label} -

+

{language?.label}

{children}
); diff --git a/app/learn/content.ts b/app/learn/content.ts index b302916..1747b8d 100644 --- a/app/learn/content.ts +++ b/app/learn/content.ts @@ -33,19 +33,21 @@ async function listSlugs(languageSlug: string): Promise { return []; } - return entries - // filterによって、entries配列の中から、ディレクトリであり、かつ名前が数字のみで構成されているものを抽出する（layout.tsxを省くため） - .filter((entry) => entry.isDirectory() && /^\d+$/.test(entry.name)) - // mapによって、抽出されたディレクトリの名前を配列として返す - .map((entry) => entry.name) - // sortによって、数字順に並び替える - .sort(); + return ( + entries + // filterによって、entries配列の中から、ディレクトリであり、かつ名前が数字のみで構成されているものを抽出する（layout.tsxを省くため） + .filter((entry) => entry.isDirectory() && /^\d+$/.test(entry.name)) + // mapによって、抽出されたディレクトリの名前を配列として返す + .map((entry) => entry.name) + // sortによって、数字順に並び替える + .sort() + ); } // 任意の言語について、セクションの番号配列を返す関数 export async function getSections(languageSlug: string): Promise { const sectionSlugs = await listSlugs(languageSlug); - + //　Promise.all()は、複数のPromiseをまとめて"並列"で待ち、すべて完了したら結果を1つの配列で返す return Promise.all( sectionSlugs.map(async (sectionSlug) => { diff --git a/app/learn/french/01/page.mdx b/app/learn/french/01/page.mdx index 3fd8e17..8c8b82e 100644 --- a/app/learn/french/01/page.mdx +++ b/app/learn/french/01/page.mdx @@ -2,18 +2,18 @@ export const title = "冠詞の一覧と縮約形"; # 冠詞の一覧と縮約形 -*第1章 品詞と文型より* +_第1章 品詞と文型より_ ## 冠詞の種類 -| | | | 男性形 | 女性形 | -|---|---|---|---|---| -| 可算 | 不定冠詞 | 単数形 | un | une | -| 可算 | 不定冠詞 | 複数形 | des | des | -| 可算 | 定冠詞 | 単数形 | le (l') | la (l') | -| 可算 | 定冠詞 | 複数形 | les | les | -| 不可算 | 部分冠詞 | - | du (de l') | de la (de l') | -| 不可算 | 定冠詞 | - | le (l') | la (l') | +| | | | 男性形 | 女性形 | +| ------ | -------- | ------ | ---------- | ------------- | +| 可算 | 不定冠詞 | 単数形 | un | une | +| 可算 | 不定冠詞 | 複数形 | des | des | +| 可算 | 定冠詞 | 単数形 | le (l') | la (l') | +| 可算 | 定冠詞 | 複数形 | les | les | +| 不可算 | 部分冠詞 | - | du (de l') | de la (de l') | +| 不可算 | 定冠詞 | - | le (l') | la (l') | - 括弧内は直後の名詞が母音始まりの時に用いる。 - 「du」は「de le」の短縮版であり、部分冠詞は「de＋定冠詞」で作られると考えてよい。 diff --git a/app/learn/french/02/page.mdx b/app/learn/french/02/page.mdx index 8cf2c6d..a3dfbb8 100644 --- a/app/learn/french/02/page.mdx +++ b/app/learn/french/02/page.mdx @@ -2,65 +2,65 @@ export const title = "基本動詞の直説法現在活用"; # 基本動詞の直説法現在活用 -*第1章 品詞と文型より* +_第1章 品詞と文型より_ ## être（be動詞） -| 人称 | 活用形 | 人称 | 活用形 | -|---|---|---|---| -| 一人称単数 | suis | 一人称複数 | sommes | -| 二人称単数 | es | 二人称複数 | êtes | -| 三人称単数 | est | 三人称複数 | sont | +| 人称 | 活用形 | 人称 | 活用形 | +| ---------- | ------ | ---------- | ------ | +| 一人称単数 | suis | 一人称複数 | sommes | +| 二人称単数 | es | 二人称複数 | êtes | +| 三人称単数 | est | 三人称複数 | sont | ## avoir（have） -| 人称 | 活用形 | 人称 | 活用形 | -|---|---|---|---| -| 一人称単数 | ai | 一人称複数 | avons | -| 二人称単数 | as | 二人称複数 | avez | -| 三人称単数 | a | 三人称複数 | ont | +| 人称 | 活用形 | 人称 | 活用形 | +| ---------- | ------ | ---------- | ------ | +| 一人称単数 | ai | 一人称複数 | avons | +| 二人称単数 | as | 二人称複数 | avez | +| 三人称単数 | a | 三人称複数 | ont | ## faire（make, do） -| 人称 | 活用形 | 人称 | 活用形 | -|---|---|---|---| -| 一人称単数 | fais | 一人称複数 | faisons | -| 二人称単数 | fais | 二人称複数 | faites | -| 三人称単数 | fait | 三人称複数 | font | +| 人称 | 活用形 | 人称 | 活用形 | +| ---------- | ------ | ---------- | ------- | +| 一人称単数 | fais | 一人称複数 | faisons | +| 二人称単数 | fais | 二人称複数 | faites | +| 三人称単数 | fait | 三人称複数 | font | ## aller（go） -| 人称 | 活用形 | 人称 | 活用形 | -|---|---|---|---| -| 一人称単数 | vais | 一人称複数 | allons | -| 二人称単数 | vas | 二人称複数 | allez | -| 三人称単数 | va | 三人称複数 | vont | +| 人称 | 活用形 | 人称 | 活用形 | +| ---------- | ------ | ---------- | ------ | +| 一人称単数 | vais | 一人称複数 | allons | +| 二人称単数 | vas | 二人称複数 | allez | +| 三人称単数 | va | 三人称複数 | vont | ## venir（come） -| 人称 | 活用形 | 人称 | 活用形 | -|---|---|---|---| -| 一人称単数 | viens | 一人称複数 | venons | -| 二人称単数 | viens | 二人称複数 | venez | -| 三人称単数 | vient | 三人称複数 | viennent | +| 人称 | 活用形 | 人称 | 活用形 | +| ---------- | ------ | ---------- | -------- | +| 一人称単数 | viens | 一人称複数 | venons | +| 二人称単数 | viens | 二人称複数 | venez | +| 三人称単数 | vient | 三人称複数 | viennent | ## -er動詞 -| 人称 | 語尾 | 人称 | 語尾 | -|---|---|---|---| -| 一人称単数 | -e | 一人称複数 | -ons | -| 二人称単数 | -es | 二人称複数 | -ez | -| 三人称単数 | -e | 三人称複数 | -ent | +| 人称 | 語尾 | 人称 | 語尾 | +| ---------- | ---- | ---------- | ---- | +| 一人称単数 | -e | 一人称複数 | -ons | +| 二人称単数 | -es | 二人称複数 | -ez | +| 三人称単数 | -e | 三人称複数 | -ent | - -gerで終わる動詞（manger等）の一人称複数形は -geons - -cerで終わる動詞（commencer等）の一人称複数形は -çons ## -ir動詞 -| 人称 | 語尾 | 人称 | 語尾 | -|---|---|---|---| -| 一人称単数 | -is | 一人称複数 | -issons | -| 二人称単数 | -is | 二人称複数 | -issez | -| 三人称単数 | -it | 三人称複数 | -issent | +| 人称 | 語尾 | 人称 | 語尾 | +| ---------- | ---- | ---------- | ------- | +| 一人称単数 | -is | 一人称複数 | -issons | +| 二人称単数 | -is | 二人称複数 | -issez | +| 三人称単数 | -it | 三人称複数 | -issent | - 複数形の活用は「-iss＋er動詞の活用形」の形になっている。 diff --git a/app/learn/french/03/page.mdx b/app/learn/french/03/page.mdx index 699aaf9..3eef46d 100644 --- a/app/learn/french/03/page.mdx +++ b/app/learn/french/03/page.mdx @@ -2,31 +2,31 @@ export const title = "基数と序数と概数"; # 基数と序数と概数 -*第1章 品詞と文型より* +_第1章 品詞と文型より_ ## 基数（0〜19） -| 数 | 綴り | 数 | 綴り | -|---|---|---|---| -| 0 | zéro | 10 | dix | -| 1 | un（une） | 11 | onze | -| 2 | deux | 12 | douze | -| 3 | trois | 13 | treize | -| 4 | quatre | 14 | quatorze | -| 5 | cinq | 15 | quinze | -| 6 | six | 16 | seize | -| 7 | sept | 17 | dix-sept | -| 8 | huit | 18 | dix-huit | -| 9 | neuf | 19 | dix-neuf | +| 数 | 綴り | 数 | 綴り | +| --- | --------- | --- | -------- | +| 0 | zéro | 10 | dix | +| 1 | un（une） | 11 | onze | +| 2 | deux | 12 | douze | +| 3 | trois | 13 | treize | +| 4 | quatre | 14 | quatorze | +| 5 | cinq | 15 | quinze | +| 6 | six | 16 | seize | +| 7 | sept | 17 | dix-sept | +| 8 | huit | 18 | dix-huit | +| 9 | neuf | 19 | dix-neuf | ## 基数（20の倍数） -| 数 | 綴り | 数 | 綴り | -|---|---|---|---| -| 20 | vingt | 30 | trente | -| 40 | quarante | 50 | cinquante | -| 60 | soixante | - | - | -| 80 | quatre-vingts | - | - | +| 数 | 綴り | 数 | 綴り | +| --- | ------------- | --- | --------- | +| 20 | vingt | 30 | trente | +| 40 | quarante | 50 | cinquante | +| 60 | soixante | - | - | +| 80 | quatre-vingts | - | - | - 21〜99は上記の組み合わせで表現する：「｛"A"の数字と"B"の数字の和となる基数｝＝｛"B"の基数｝-｛"A"の基数｝」 - 22：vingt-deux（20+2） @@ -39,13 +39,13 @@ export const title = "基数と序数と概数"; ## 3桁以上の基数 -| 桁 | 数 | 綴り | -|---|---|---| -| 3桁 | 100 | cent | -| 4桁以上 | 1.000 | mille | -| 4桁以上 | 1.000.000 | million | -| 4桁以上 | 1.000.000.000 | milliard | -| 4桁以上 | 1.000.000.000.000 | billion | +| 桁 | 数 | 綴り | +| ------- | ----------------- | -------- | +| 3桁 | 100 | cent | +| 4桁以上 | 1.000 | mille | +| 4桁以上 | 1.000.000 | million | +| 4桁以上 | 1.000.000.000 | milliard | +| 4桁以上 | 1.000.000.000.000 | billion | ## 序数 diff --git a/app/learn/french/04/page.mdx b/app/learn/french/04/page.mdx index d4267a5..311db40 100644 --- a/app/learn/french/04/page.mdx +++ b/app/learn/french/04/page.mdx @@ -2,7 +2,7 @@ export const title = "時刻表現"; # 時刻表現 -*第1章 品詞と文型より* +_第1章 品詞と文型より_ 「〜時（〜分）」は「〜heures（〜）」で表現する。 diff --git a/app/learn/french/05/page.mdx b/app/learn/french/05/page.mdx index 79d34b4..e2df8af 100644 --- a/app/learn/french/05/page.mdx +++ b/app/learn/french/05/page.mdx @@ -2,7 +2,7 @@ export const title = "日程表現"; # 日程表現 -*第1章 品詞と文型より* +_第1章 品詞と文型より_ 事細かに表す場合は「le＋曜日＋日＋月＋年」で表現する。日程を単に述べる場合、その主語は「nous」または「on」になり、動詞には「être」を用いる。 diff --git a/app/learn/french/06/page.mdx b/app/learn/french/06/page.mdx index 7457fe0..13452e0 100644 --- a/app/learn/french/06/page.mdx +++ b/app/learn/french/06/page.mdx @@ -2,18 +2,18 @@ export const title = "人称代名詞"; # 人称代名詞 -*第3章 人称詞と指示詞より* +_第3章 人称詞と指示詞より_ -| | | 主語 | 直接目的語 | 間接目的語 | 強勢形 | -|---|---|---|---|---|---| -| 一人称単数 | | je | me | me | moi | -| 二人称単数 | | tu | te | te | toi | -| 三人称単数 | 男 | il | le | lui | lui | -| 三人称単数 | 女 | elle | la | lui | elle | -| 一人称複数 | | nous | nous | nous | nous | -| 二人称複数 | | vous | vous | vous | vous | -| 三人称複数 | 男 | ils | les | leur | eux | -| 三人称複数 | 女 | elles | les | leur | elles | +| | | 主語 | 直接目的語 | 間接目的語 | 強勢形 | +| ---------- | --- | ----- | ---------- | ---------- | ------ | +| 一人称単数 | | je | me | me | moi | +| 二人称単数 | | tu | te | te | toi | +| 三人称単数 | 男 | il | le | lui | lui | +| 三人称単数 | 女 | elle | la | lui | elle | +| 一人称複数 | | nous | nous | nous | nous | +| 二人称複数 | | vous | vous | vous | vous | +| 三人称複数 | 男 | ils | les | leur | eux | +| 三人称複数 | 女 | elles | les | leur | elles | - 強勢形は、前置詞の目的語や対比・強調などに用いられる。 - 三人称の人称代名詞は非人称的な使い方で用いられることがある。 diff --git a/app/learn/french/07/page.mdx b/app/learn/french/07/page.mdx index 3e1424c..c29b720 100644 --- a/app/learn/french/07/page.mdx +++ b/app/learn/french/07/page.mdx @@ -2,16 +2,16 @@ export const title = "所有形容詞"; # 所有形容詞 -*第3章 人称詞と指示詞より* +_第3章 人称詞と指示詞より_ -| | 単数（男） | 単数（女） | 複数 | -|---|---|---|---| -| 一人称単数 | mon | ma (mon) | mes | -| 二人称単数 | ton | ta (ton) | tes | -| 三人称単数 | son | sa (son) | ses | -| 一人称複数 | notre | notre | nos | -| 二人称複数 | votre | votre | vos | -| 三人称複数 | leur | leur | leurs | +| | 単数（男） | 単数（女） | 複数 | +| ---------- | ---------- | ---------- | ----- | +| 一人称単数 | mon | ma (mon) | mes | +| 二人称単数 | ton | ta (ton) | tes | +| 三人称単数 | son | sa (son) | ses | +| 一人称複数 | notre | notre | nos | +| 二人称複数 | votre | votre | vos | +| 三人称複数 | leur | leur | leurs | - 所有形容詞は、修飾する名詞によって形が変化する。 - 修飾する語の先頭が母音時や無音のhの時、一部の女性形は括弧内のように変化する。 diff --git a/app/learn/french/08/page.mdx b/app/learn/french/08/page.mdx index 769cae1..38022bd 100644 --- a/app/learn/french/08/page.mdx +++ b/app/learn/french/08/page.mdx @@ -2,15 +2,15 @@ export const title = "所有代名詞"; # 所有代名詞 -*第3章 人称詞と指示詞より* +_第3章 人称詞と指示詞より_ 英語のmineなどにあたり、「〜のもの」と訳される。常に定冠詞とセットで、置き換える「もの」の性数によって形が変化する。 -| | 男性単数 | 女性単数 | 男性複数 | 女性複数 | -|---|---|---|---|---| -| 一人称単数 | le mien | la mienne | les miens | les miennes | -| 二人称単数 | le tien | la tienne | les tiens | les tiennes | -| 三人称単数 | le sien | la sienne | les siens | les siennes | -| 一人称複数 | le nôtre | la nôtre | les nôtres | les nôtres | -| 二人称複数 | le vôtre | la vôtre | les vôtres | les vôtres | -| 三人称複数 | le leur | la leur | les leurs | les leurs | +| | 男性単数 | 女性単数 | 男性複数 | 女性複数 | +| ---------- | -------- | --------- | ---------- | ----------- | +| 一人称単数 | le mien | la mienne | les miens | les miennes | +| 二人称単数 | le tien | la tienne | les tiens | les tiennes | +| 三人称単数 | le sien | la sienne | les siens | les siennes | +| 一人称複数 | le nôtre | la nôtre | les nôtres | les nôtres | +| 二人称複数 | le vôtre | la vôtre | les vôtres | les vôtres | +| 三人称複数 | le leur | la leur | les leurs | les leurs | diff --git a/app/learn/french/09/page.mdx b/app/learn/french/09/page.mdx index 29425d9..8945c51 100644 --- a/app/learn/french/09/page.mdx +++ b/app/learn/french/09/page.mdx @@ -2,14 +2,14 @@ export const title = "指示形容詞"; # 指示形容詞 -*第3章 人称詞と指示詞より* +_第3章 人称詞と指示詞より_ 「この」「その」「あの」に相当し、フランス語ではこれらすべてが同じ単語で表される。 -| | 男性 | 女性 | -|---|---|---| +| | 男性 | 女性 | +| ---- | -------- | ----- | | 単数 | ce (cet) | cette | -| 複数 | ces | ces | +| 複数 | ces | ces | - 修飾する名詞が母音始まりの男性単数形の時、発音の都合上cetを用いる。 - 近称と遠称を区別したいときは、修飾する名詞の後ろに-ci（近称）や-là（遠称）をつける。 diff --git a/app/learn/french/10/page.mdx b/app/learn/french/10/page.mdx index 1bfef46..b8e1d98 100644 --- a/app/learn/french/10/page.mdx +++ b/app/learn/french/10/page.mdx @@ -2,20 +2,20 @@ export const title = "指示代名詞"; # 指示代名詞 -*第3章 人称詞と指示詞より* +_第3章 人称詞と指示詞より_ ## パターン1 -| | これ | それ | -|---|---|---| -| 無強勢形 | ce | ce | -| 強勢形 | ceci | cela(ça) | +| | これ | それ | +| -------- | ---- | -------- | +| 無強勢形 | ce | ce | +| 強勢形 | ceci | cela(ça) | ## パターン2 -| | 男性 | 女性 | -|---|---|---| -| 単数 | celui | celle | -| 複数 | ceux | celles | +| | 男性 | 女性 | +| ---- | ----- | ------ | +| 単数 | celui | celle | +| 複数 | ceux | celles | - 近称と遠称を区別したいときには、それぞれの後ろに-ci（近称）や-là（遠称）をつける。 diff --git a/app/learn/french/11/page.mdx b/app/learn/french/11/page.mdx index df701b8..fbfd347 100644 --- a/app/learn/french/11/page.mdx +++ b/app/learn/french/11/page.mdx @@ -2,14 +2,14 @@ export const title = "主な否定表現"; # 主な否定表現 -*第4章 否定文と疑問文より* +_第4章 否定文と疑問文より_ -| 表現 | 意味 | 例文 | -|---|---|---| -| ne～plus | もう〜ない | Je n'habite plus à Lyon. | -| ne～jamais | 決して〜ない | Je ne travaille jamais le samedi. | -| ne～rien | 何も〜ない | Ce n'est rien. | -| ne～personne | 誰も〜ない | Il n'y a personne. | +| 表現 | 意味 | 例文 | +| ------------- | ------------ | ---------------------------------------- | +| ne～plus | もう〜ない | Je n'habite plus à Lyon. | +| ne～jamais | 決して〜ない | Je ne travaille jamais le samedi. | +| ne～rien | 何も〜ない | Ce n'est rien. | +| ne～personne | 誰も〜ない | Il n'y a personne. | | ne～ni A ni B | AもBも〜ない | Je ne parle ni l'anglais ni le japonais. | ## 疑問詞のない疑問文への答え方 diff --git a/app/learn/french/12/page.mdx b/app/learn/french/12/page.mdx index e9f98b2..8b54b0c 100644 --- a/app/learn/french/12/page.mdx +++ b/app/learn/french/12/page.mdx @@ -2,20 +2,20 @@ export const title = "疑問詞一覧"; # 疑問詞一覧 -*第4章 否定文と疑問文より* +_第4章 否定文と疑問文より_ -| 疑問詞 | 意味 | 例文 | -|---|---|---| -| qui | 誰 | Qui est là ? | -| que | 何 | Qu'est-ce que c'est ? | -| quand | いつ | Quand allez-vous au Japon ? | -| où | どこ | Où habites-tu ? | -| combien | いくつ | Combien d'enfants avez-vous ? | -| pourquoi | なぜ | Pourquoi pleures-tu ? | -| comment | どう | Comment allez-vous ? | -| quel | どの | Quelle voiture avez-vous achetée ? | -| lequel | どれ | Laquelle de ces voitures préférez-vous ? | -| quoi | 何 | Avec quoi mangez-vous ce plat ? | +| 疑問詞 | 意味 | 例文 | +| -------- | ------ | ---------------------------------------- | +| qui | 誰 | Qui est là ? | +| que | 何 | Qu'est-ce que c'est ? | +| quand | いつ | Quand allez-vous au Japon ? | +| où | どこ | Où habites-tu ? | +| combien | いくつ | Combien d'enfants avez-vous ? | +| pourquoi | なぜ | Pourquoi pleures-tu ? | +| comment | どう | Comment allez-vous ? | +| quel | どの | Quelle voiture avez-vous achetée ? | +| lequel | どれ | Laquelle de ces voitures préférez-vous ? | +| quoi | 何 | Avec quoi mangez-vous ce plat ? | - quelとlequelは性数変化する。 - quoiは前置詞の目的語部分を質問するときに使う。 diff --git a/app/learn/french/13/page.mdx b/app/learn/french/13/page.mdx index 524622a..26b7df1 100644 --- a/app/learn/french/13/page.mdx +++ b/app/learn/french/13/page.mdx @@ -2,16 +2,16 @@ export const title = "命令形の不規則活用"; # 命令形の不規則活用 -*第5章 命令文より* +_第5章 命令文より_ 大半の動詞は直説法現在形と同型で命令形を作るが、以下の動詞は接続法の語形を元に命令形を作る。 -| | 二人称単数命令形 | 二人称複数命令形 | 一人称複数命令形 | -|---|---|---|---| -| être | sois | soyez | soyons | -| avoir | aie | ayez | ayons | -| savoir | sache | sachez | sachons | -| vouloir | veuille | veuillez | veuillons | +| | 二人称単数命令形 | 二人称複数命令形 | 一人称複数命令形 | +| ------- | ---------------- | ---------------- | ---------------- | +| être | sois | soyez | soyons | +| avoir | aie | ayez | ayons | +| savoir | sache | sachez | sachons | +| vouloir | veuille | veuillez | veuillons | - veuilleとveuillonsについてはほとんど使用されない。 - Ayez du courage ! （元気を出してください。） diff --git a/app/learn/french/14/page.mdx b/app/learn/french/14/page.mdx index 256c14e..6fed985 100644 --- a/app/learn/french/14/page.mdx +++ b/app/learn/french/14/page.mdx @@ -2,15 +2,15 @@ export const title = "直説法半過去形の活用"; # 直説法半過去形の活用 -*第6章 時制より* +_第6章 時制より_ 語幹は直説法現在形の一人称複数形の語幹と同じ（êtreだけ例外でét-）。 -| 人称 | 語尾 | 例（donner） | -|---|---|---| -| 一人称単数 | -ais | donnais | -| 二人称単数 | -ais | donnais | -| 三人称単数 | -ait | donnait | -| 一人称複数 | -ions | donnions | -| 二人称複数 | -iez | donniez | -| 三人称複数 | -aient | donnaient | +| 人称 | 語尾 | 例（donner） | +| ---------- | ------ | ------------ | +| 一人称単数 | -ais | donnais | +| 二人称単数 | -ais | donnais | +| 三人称単数 | -ait | donnait | +| 一人称複数 | -ions | donnions | +| 二人称複数 | -iez | donniez | +| 三人称複数 | -aient | donnaient | diff --git a/app/learn/french/15/page.mdx b/app/learn/french/15/page.mdx index f1a2cd6..1416eba 100644 --- a/app/learn/french/15/page.mdx +++ b/app/learn/french/15/page.mdx @@ -2,7 +2,7 @@ export const title = "直説法単純未来形の活用"; # 直説法単純未来形の活用 -*第6章 時制より* +_第6章 時制より_ 語幹の作り方： @@ -10,11 +10,11 @@ export const title = "直説法単純未来形の活用"; - -ir動詞：原型からrをとったものを語幹にする - reで終わる動詞：原型からreを取り除いたものを語幹にする -| 人称 | 語尾 | 例（donner） | 例（finir） | 例（être） | 例（avoir） | -|---|---|---|---|---|---| -| 一人称単数 | -(e)rai | donnerai | finirai | serai | aurai | -| 二人称単数 | -(e)ras | donneras | finiras | seras | auras | -| 三人称単数 | -(e)ra | donnera | finira | sera | aura | -| 一人称複数 | -(e)rons | donnerons | finirons | serons | aurons | -| 二人称複数 | -(e)rez | donnerez | finirez | serez | aurez | -| 三人称複数 | -(e)ront | donneront | finiront | seront | auront | +| 人称 | 語尾 | 例（donner） | 例（finir） | 例（être） | 例（avoir） | +| ---------- | -------- | ------------ | ----------- | ---------- | ----------- | +| 一人称単数 | -(e)rai | donnerai | finirai | serai | aurai | +| 二人称単数 | -(e)ras | donneras | finiras | seras | auras | +| 三人称単数 | -(e)ra | donnera | finira | sera | aura | +| 一人称複数 | -(e)rons | donnerons | finirons | serons | aurons | +| 二人称複数 | -(e)rez | donnerez | finirez | serez | aurez | +| 三人称複数 | -(e)ront | donneront | finiront | seront | auront | diff --git a/app/learn/french/16/page.mdx b/app/learn/french/16/page.mdx index 299acd9..8a9d7cb 100644 --- a/app/learn/french/16/page.mdx +++ b/app/learn/french/16/page.mdx @@ -2,7 +2,7 @@ export const title = "比較級で特殊な変化をする形容詞・副詞"; # 比較級で特殊な変化をする形容詞・副詞 -*第8章 比較より* +_第8章 比較より_ - bonの優等比較級：meilleur（×plus bon） - bienの優等比較級：mieux（×plus bien） diff --git a/app/learn/french/17/page.mdx b/app/learn/french/17/page.mdx index 939630a..8821a82 100644 --- a/app/learn/french/17/page.mdx +++ b/app/learn/french/17/page.mdx @@ -2,7 +2,7 @@ export const title = "現在分詞・過去分詞の作り方"; # 現在分詞・過去分詞の作り方 -*第10章 分詞より* +_第10章 分詞より_ ## 現在分詞 diff --git a/app/learn/french/18/page.mdx b/app/learn/french/18/page.mdx index 5ca8eba..a342929 100644 --- a/app/learn/french/18/page.mdx +++ b/app/learn/french/18/page.mdx @@ -2,17 +2,17 @@ export const title = "条件法現在形の活用"; # 条件法現在形の活用 -*第11章 条件法より* +_第11章 条件法より_ 作り方：「単純未来形の前半部分（rまで）＋半過去形の語尾」 -| 人称 | 例（donner） | 例（finir） | 例（être） | 例（avoir） | 例（faire） | -|---|---|---|---|---|---| -| 一人称単数 | donnerais | finirais | serais | aurais | ferais | -| 二人称単数 | donnerais | finirais | serais | aurais | ferais | -| 三人称単数 | donnerait | finirait | serait | aurait | ferait | -| 一人称複数 | donnerions | finirions | serions | aurions | ferions | -| 二人称複数 | donneriez | finiriez | seriez | auriez | feriez | -| 三人称複数 | donneraient | finiraient | seraient | auraient | feraient | +| 人称 | 例（donner） | 例（finir） | 例（être） | 例（avoir） | 例（faire） | +| ---------- | ------------ | ----------- | ---------- | ----------- | ----------- | +| 一人称単数 | donnerais | finirais | serais | aurais | ferais | +| 二人称単数 | donnerais | finirais | serais | aurais | ferais | +| 三人称単数 | donnerait | finirait | serait | aurait | ferait | +| 一人称複数 | donnerions | finirions | serions | aurions | ferions | +| 二人称複数 | donneriez | finiriez | seriez | auriez | feriez | +| 三人称複数 | donneraient | finiraient | seraient | auraient | feraient | - 条件法過去形は「avoir(être)の条件法現在形＋動詞の過去分詞形」で作成可能。 diff --git a/app/learn/french/19/page.mdx b/app/learn/french/19/page.mdx index 60e1820..e017fd7 100644 --- a/app/learn/french/19/page.mdx +++ b/app/learn/french/19/page.mdx @@ -2,16 +2,16 @@ export const title = "接続法現在形の活用"; # 接続法現在形の活用 -*第12章 接続法より* +_第12章 接続法より_ -| 人称 | 語幹 | 語尾 | 特殊形（être） | 特殊形（avoir） | -|---|---|---|---|---| -| 一人称単数 | 直説法現在形３人称複数形の語幹と同様 | -e | sois | aie | -| 二人称単数 | 直説法現在形３人称複数形の語幹と同様 | -es | sois | aies | -| 三人称単数 | 直説法現在形３人称複数形の語幹と同様 | -e | soit | ait | -| 一人称複数 | 直説法現在形１人称複数形の語幹と同様 | -ions | soyons | ayons | -| 二人称複数 | 直説法現在形１人称複数形の語幹と同様 | -iez | soyez | ayez | -| 三人称複数 | 直説法現在形３人称複数形の語幹と同様 | -ent | soient | aient | +| 人称 | 語幹 | 語尾 | 特殊形（être） | 特殊形（avoir） | +| ---------- | ------------------------------------ | ----- | -------------- | --------------- | +| 一人称単数 | 直説法現在形３人称複数形の語幹と同様 | -e | sois | aie | +| 二人称単数 | 直説法現在形３人称複数形の語幹と同様 | -es | sois | aies | +| 三人称単数 | 直説法現在形３人称複数形の語幹と同様 | -e | soit | ait | +| 一人称複数 | 直説法現在形１人称複数形の語幹と同様 | -ions | soyons | ayons | +| 二人称複数 | 直説法現在形１人称複数形の語幹と同様 | -iez | soyez | ayez | +| 三人称複数 | 直説法現在形３人称複数形の語幹と同様 | -ent | soient | aient | - 語幹は不規則でこの通りにならないものもあるが、語尾は規則的である。 - 単数形と三人称複数形の語尾は直説法現在形と同じで、一人称複数、二人称複数の語尾は半過去形と同じである。 diff --git a/app/learn/french/20/page.mdx b/app/learn/french/20/page.mdx index 3893cfc..3471559 100644 --- a/app/learn/french/20/page.mdx +++ b/app/learn/french/20/page.mdx @@ -2,16 +2,16 @@ export const title = "不定表現一覧"; # 不定表現一覧 -*第13章 不定表現より* +_第13章 不定表現より_ -| 不定表現 | 意味 | 補足 | -|---|---|---| -| aucun | いかなる（〜ない） | 否定文で用いられる／原則単数名詞を修飾する／pasと共には使えない | -| quelque | いくつかの、いくらかの／ある | 前者は可算複数形または不可算名詞、後者は可算単数形または不可算名詞を伴う | -| n'importe | 〜でも（よい） | 後ろには疑問詞が続く | -| chaque | それぞれの | 不定形容詞であり、複数形は存在しない | -| chacun | それぞれの | 不定代名詞であり、複数形は存在しない | -| tout | すべての | 後ろに定冠詞付きの名詞を伴ってそれを修飾する | +| 不定表現 | 意味 | 補足 | +| --------- | ---------------------------- | ------------------------------------------------------------------------ | +| aucun | いかなる（〜ない） | 否定文で用いられる／原則単数名詞を修飾する／pasと共には使えない | +| quelque | いくつかの、いくらかの／ある | 前者は可算複数形または不可算名詞、後者は可算単数形または不可算名詞を伴う | +| n'importe | 〜でも（よい） | 後ろには疑問詞が続く | +| chaque | それぞれの | 不定形容詞であり、複数形は存在しない | +| chacun | それぞれの | 不定代名詞であり、複数形は存在しない | +| tout | すべての | 後ろに定冠詞付きの名詞を伴ってそれを修飾する | - Il n'y a aucune solution à ce problème. - J'ai encore quelques questions à vous poser. diff --git a/app/learn/french/21/page.mdx b/app/learn/french/21/page.mdx index 8d5b3d4..eab63d7 100644 --- a/app/learn/french/21/page.mdx +++ b/app/learn/french/21/page.mdx @@ -2,16 +2,16 @@ export const title = "中性代名詞一覧"; # 中性代名詞一覧 -*第16章 中性代名詞より* +_第16章 中性代名詞より_ 中性代名詞は「性数一致しない代名詞」のこと。 -| 中性代名詞 | 指示対象 | 例文 | -|---|---|---| -| en | 前置詞「de」＋定名詞（句） | J'en viens.（私はそこから来ました。） | -| en | 同類を表す不定名詞（句） | Avez-vous des amis ? -Oui, j'en ai.（あなたは友達がいますか。-はい、います。） | -| y | 前置詞「à」＋定名詞（句） | On y compare la vie.（人生はそれにたとえられる。） | -| le | 文脈全体 | Je lui ai téléphoné. -Je l'ai fait par précaution.（私は彼に電話をした。-私は念のためそうした。） | -| le | 形容詞 | Êtes-vous fatigué ? -Oui, je le suis.（あなたは疲れていますか。-はい、疲れています。） | +| 中性代名詞 | 指示対象 | 例文 | +| ---------- | -------------------------- | ------------------------------------------------------------------------------------------------- | +| en | 前置詞「de」＋定名詞（句） | J'en viens.（私はそこから来ました。） | +| en | 同類を表す不定名詞（句） | Avez-vous des amis ? -Oui, j'en ai.（あなたは友達がいますか。-はい、います。） | +| y | 前置詞「à」＋定名詞（句） | On y compare la vie.（人生はそれにたとえられる。） | +| le | 文脈全体 | Je lui ai téléphoné. -Je l'ai fait par précaution.（私は彼に電話をした。-私は念のためそうした。） | +| le | 形容詞 | Êtes-vous fatigué ? -Oui, je le suis.（あなたは疲れていますか。-はい、疲れています。） | - enが同類を表す不定名詞（句）を置き換える場合で、後ろに形容詞が付いている場合は、形容詞は「de＋形容詞」の形で残る。 diff --git a/app/learn/french/layout.tsx b/app/learn/french/layout.tsx index 4467384..c2a986c 100644 --- a/app/learn/french/layout.tsx +++ b/app/learn/french/layout.tsx @@ -5,16 +5,10 @@ const language = getLanguage("french"); // フランス語セクション専用レイアウト // カード型コンテナで囲み、globals.css の .french-content で見出し・表・リストを装飾する // （他言語は components/SectionLayout.tsx の共通レイアウトのまま） -export default function FrenchSectionLayout({ - children, -}: { - children: React.ReactNode; -}) { +export default function FrenchSectionLayout({ children }: { children: React.ReactNode }) { return (
-

- {language?.label} -

+

{language?.label}

{children}
diff --git a/app/learn/german/01/page.mdx b/app/learn/german/01/page.mdx index 264b23e..f01e9cb 100644 --- a/app/learn/german/01/page.mdx +++ b/app/learn/german/01/page.mdx @@ -2,11 +2,11 @@ export const title = "名詞の性の語尾による判別"; # 名詞の性の語尾による判別 -*第1章 品詞と文型より* +_第1章 品詞と文型より_ ものの名詞は男性・女性を直観的に判断できないため、語尾によってある程度判別する。（例外もある） -| 語尾 | 性 | -|---|---| -| -age、-ment、-eau、-teur | 男性名詞 | +| 語尾 | 性 | +| ------------------------------- | -------- | +| -age、-ment、-eau、-teur | 男性名詞 | | -tion、-sion、-té、-esse、-ette | 女性名詞 | diff --git a/app/learn/german/layout.tsx b/app/learn/german/layout.tsx index 372edd3..afc346c 100644 --- a/app/learn/german/layout.tsx +++ b/app/learn/german/layout.tsx @@ -3,16 +3,10 @@ import { getLanguage } from "@/app/learn/languages"; const language = getLanguage("german"); // ドイツ語セクション専用レイアウト（各言語ディレクトリの layout.tsx はファイル自体が必須） -export default function GermanSectionLayout({ - children, -}: { - children: React.ReactNode; -}) { +export default function GermanSectionLayout({ children }: { children: React.ReactNode }) { return (
-

- {language?.label} -

+

{language?.label}

{children}
); diff --git a/app/learn/page.tsx b/app/learn/page.tsx index 4c18de8..5c7a0ac 100644 --- a/app/learn/page.tsx +++ b/app/learn/page.tsx @@ -13,7 +13,11 @@ export default function LearnPage() {

    {LANGUAGES.map((language) => ( - + {language.label} ))} diff --git a/app/learn/spanish/01/page.mdx b/app/learn/spanish/01/page.mdx index 264b23e..f01e9cb 100644 --- a/app/learn/spanish/01/page.mdx +++ b/app/learn/spanish/01/page.mdx @@ -2,11 +2,11 @@ export const title = "名詞の性の語尾による判別"; # 名詞の性の語尾による判別 -*第1章 品詞と文型より* +_第1章 品詞と文型より_ ものの名詞は男性・女性を直観的に判断できないため、語尾によってある程度判別する。（例外もある） -| 語尾 | 性 | -|---|---| -| -age、-ment、-eau、-teur | 男性名詞 | +| 語尾 | 性 | +| ------------------------------- | -------- | +| -age、-ment、-eau、-teur | 男性名詞 | | -tion、-sion、-té、-esse、-ette | 女性名詞 | diff --git a/app/learn/spanish/layout.tsx b/app/learn/spanish/layout.tsx index d4f2a61..2cf4186 100644 --- a/app/learn/spanish/layout.tsx +++ b/app/learn/spanish/layout.tsx @@ -3,16 +3,10 @@ import { getLanguage } from "@/app/learn/languages"; const language = getLanguage("spanish"); // スペイン語セクション専用レイアウト（各言語ディレクトリの layout.tsx はファイル自体が必須） -export default function SpanishSectionLayout({ - children, -}: { - children: React.ReactNode; -}) { +export default function SpanishSectionLayout({ children }: { children: React.ReactNode }) { return (
    -

    - {language?.label} -

    +

    {language?.label}

    {children}
    ); diff --git a/app/my-notebooks/[notebookId]/CardRow.tsx b/app/my-notebooks/[notebookId]/CardRow.tsx index 68d630d..dd97f16 100644 --- a/app/my-notebooks/[notebookId]/CardRow.tsx +++ b/app/my-notebooks/[notebookId]/CardRow.tsx @@ -1,6 +1,6 @@ "use client"; -import { useActionState, useEffect, useRef, useState } from "react"; +import { useActionState, useState } from "react"; import { useFormStatus } from "react-dom"; import { deleteCard, updateCard, type FormState } from "../actions"; @@ -40,18 +40,15 @@ export default function CardRow({ updateCard.bind(null, card.id, notebookId), initialState, ); - // 初回マウント時のstate変化（=action未実行）で誤って閉じないようにする - const isFirstRender = useRef(true); - - useEffect(() => { - if (isFirstRender.current) { - isFirstRender.current = false; - return; - } + // stateが変化した（=action実行結果が返ってきた）タイミングだけ、成功時に編集モードを閉じる。 + // 初回マウント時はprevState === stateなので何もしない + const [prevState, setPrevState] = useState(state); + if (state !== prevState) { + setPrevState(state); if (!state.error) { setEditing(false); } - }, [state]); + } const senseColumns = columns.slice(1); diff --git a/app/my-notebooks/[notebookId]/CreateCardForm.tsx b/app/my-notebooks/[notebookId]/CreateCardForm.tsx index ccce4ea..e7b22b8 100644 --- a/app/my-notebooks/[notebookId]/CreateCardForm.tsx +++ b/app/my-notebooks/[notebookId]/CreateCardForm.tsx @@ -1,6 +1,6 @@ "use client"; -import { useActionState, useEffect, useRef, useState } from "react"; +import { useActionState, useState } from "react"; import { useFormStatus } from "react-dom"; import { createCard, type FormState } from "../actions"; @@ -34,20 +34,16 @@ export default function CreateCardForm({ // 「値をJSでクリアする」ことができない。そこで
    のkeyを変えることで // Reactにフォーム全体を作り直させ（アンマウント→再マウント）、入力欄を空に戻す const [formKey, setFormKey] = useState(0); - // useActionStateは初回マウント時にも初期state（{}）でこのuseEffectを走らせるため、 - // 「マウンド直後に誤ってフォームをリセットしてしまう」ことを防ぐためのフラグ - const isFirstRender = useRef(true); - - useEffect(() => { - if (isFirstRender.current) { - isFirstRender.current = false; - return; - } - // 追加が成功した（エラーが無い）時だけkeyをインクリメントしてフォームをリセットする + // stateが変化した（=action実行結果が返ってきた）タイミングだけ、 + // 成功時（エラーが無い時）にkeyをインクリメントしてフォームをリセットする。 + // 初回マウント時はprevState === stateなので何もしない + const [prevState, setPrevState] = useState(state); + if (state !== prevState) { + setPrevState(state); if (!state.error) { setFormKey((key) => key + 1); } - }, [state]); + } return ( <> diff --git a/app/my-notebooks/[notebookId]/page.tsx b/app/my-notebooks/[notebookId]/page.tsx index 946ceed..b7ff031 100644 --- a/app/my-notebooks/[notebookId]/page.tsx +++ b/app/my-notebooks/[notebookId]/page.tsx @@ -67,7 +67,7 @@ export default async function NotebookPage(props: PageProps<"/my-notebooks/[note {column} ))} - + diff --git a/app/page.tsx b/app/page.tsx index dc68008..8b06d73 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -35,9 +35,7 @@ export default function Home() { 仮画像

    FR → JA

    -

    - liberté -

    +

    liberté

    意味 @@ -49,15 +47,11 @@ export default function Home() { 例文
    -

    - 自由 -

    +

    自由

    -

    - My単語帳 -

    +

    My単語帳

    意味・発音・例文など複数の軸を持つ、自分だけの単語帳を作成。
    @@ -69,10 +63,42 @@ export default function Home() { 単語帳を作ってみる @@ -118,10 +144,42 @@ export default function Home() { 教材を見てみる @@ -129,4 +187,4 @@ export default function Home() {

); -} \ No newline at end of file +} diff --git a/components/Footer.tsx b/components/Footer.tsx index 2f574fa..a7b7086 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -4,10 +4,9 @@ import Link from "next/link"; const NAV_LINKS = [ { href: "https://forms.gle/HnspDy2kNqQxPCWA8", label: "ご意見" }, { href: "https://utcode.net/", label: "ut.code():" }, - { href: "https://x.com/utokyo_code", label: "公式X"}, + { href: "https://x.com/utokyo_code", label: "公式X" }, ]; - export default function Footer() { return (