このサイトのしくみ

「漢字(かんじ)を知(し)ろう」は、小学校(しょうがっこう)で習(なら)う全(ぜん)1,006字(じ)の漢字(かんじ)を、熟語(じゅくご)や関連(かんれん)する漢字(かんじ)のつながりの中(なか)でたのしく学(まな)べるサイトです。

このページでは、サイトがどんな技術(ぎじゅつ)で動(うご)いているかを紹介(しょうかい)します。将来(しょうらい)エンジニアを目指(めざ)したいと思(おも)っている人(ひと)は、ぜひのぞいてみてね。

技術(ぎじゅつ)スタック

このサイトは、いろいろな技術(ぎじゅつ)を組(く)み合(あ)わせて作(つく)られています。

フロントエンド

みんなが見(み)る画面(がめん)

Next.js—Reactベースのフレームワーク
TypeScript—型(かた)のあるJavaScript
Tailwind CSS—すばやくデザインできるCSSツール

バックエンド

裏側(うらがわ)のしくみ

Hono—軽量(けいりょう)なAPIフレームワーク
Cloudflare Workers—世界中(せかいじゅう)のサーバーで動(うご)くしくみ

データベース

データを保存(ほぞん)する場所(ばしょ)

PostgreSQL / Supabase—漢字(かんじ)や熟語(じゅくご)のデータを管理(かんり)

データソース

もとになるデータ

KANJIDIC2—漢字(かんじ)の読(よ)みや意味(いみ)
KanjiVG—書(か)き順(じゅん)データ（SVG）
Claude API—AIが熟語(じゅくご)や例文(れいぶん)を生成(せいせい)

ホスティング

サイトを配信(はいしん)するサービス

Vercel — フロントエンドCloudflare Workers — API

なぜこの技術(ぎじゅつ)を選(えら)んだの？

Next.js: ページをすばやく表示(ひょうじ)できて、たくさんのページがあるサイトでも整理(せいり)しやすいしくみです。
Hono + Cloudflare Workers: 世界中(せかいじゅう)にあるコンピュータの中(なか)から、あなたに一番(いちばん)近(ちか)いものを届(とど)けてくれるので、表示(ひょうじ)がとても速(はや)いです。
Supabase: たくさんのデータをしっかりしまっておけて、かんたんに使(つか)いはじめられるしくみです。
Tailwind CSS: サイトをかんたんにオシャレにできるデザインのどうぐです。
KanjiVG / KANJIDIC2: だれでも自由(じゆう)に使(つか)える漢字(かんじ)のデータで、読(よ)みや書(か)き順(じゅん)などの正(ただ)しい情報(じょうほう)がそろっています。
Claude API: AIが、わかりやすい例文(れいぶん)や熟語(じゅくご)の説明(せつめい)を作(つく)ってくれます。

データの流(なが)れ

あなたが漢字(かんじ)を調(しら)べるとき、データはこのように流(なが)れています。

あなた（ブラウザ）

↓

フロントエンド

Next.js — React

画面(がめん)の表示(ひょうじ)とページ移動(いどう)

TypeScript

型(かた)のあるJavaScript

Tailwind CSS

デザイン・スタイリング

Vercel でホスティング

↓

バックエンド

API — Hono

Cloudflare Workers でホスティング

↓

データベース — Supabase

PostgreSQL

↑

データソース

KanjiVG

書(か)き順(じゅん)データ

KANJIDIC2

漢字(かんじ)の基本(きほん)データ

Claude API

熟語(じゅくご)・例文(れいぶん)の生成(せいせい)

ライセンス

KANJIDIC2 — Electronic Dictionary Research and Development Group. Creative Commons Attribution-Share Alike 4.0 で公開(こうかい)されています。

開発(かいはつ)・技術的(ぎじゅつてき)なご相談(そうだん)

開発(かいはつ)や技術的(ぎじゅつてき)なご相談(そうだん)もお気軽(きがる)にお問(と)い合(あ)わせください。

お問(と)い合(あ)わせページへ