技術系約5分で読めます

ソース解説(1) 全体の地図と、境目の引き方

公開 2026年9月19日

このサイトの作りについては何度か書きましたが、中のコードそのものには触れていませんでした。

ここから何本かに分けて、実際のファイルを開きながら説明していきます。まずは全体の地図と、読むために知っておいたほうがいい前提からです。

この記事で扱うこと

フォルダの分け方、依存しているものの数、そして「サーバーで動く部品」と「ブラウザで動く部品」がどこで分かれているかです。次回以降、個別のファイルを1つずつ読んでいきます。

本番で必要な依存は5つしかない

package.json を開くと、公開後に動かすために必要なものはこれだけでした。

この他に、開発中だけ使うもの（型検査、書式の検査、CSSの生成、型の自動生成）があります。本番の動作に関わるのは上の5つだけです。

少ないほうが、後で困らない

部品を足すたびに、その部品の脆弱性を見張る相手が1つ増えます。入れていないものは、更新も監視も要りません。

目次も検索も日付の整形も、自分で書いてあります。どれも数十行で、外から持ってくるほどの分量ではありませんでした。

コードは src/ の下にあり、大きく3つです。

app/ は特別で、ファイルの置き場所がそのままURLになります。app/blog/page.tsx が /blog に、app/blog/[slug]/page.tsx が /blog/記事名 になります。角かっこは「ここは可変」という意味です。

ルーティングの設定ファイルはありません。フォルダを作ればURLが増えます。

ここがいちばん説明の要るところです。

いま作っているのは、ほとんどのコードがサーバー側で動く形です。ページはあらかじめ組み立てられ、訪問者にはHTMLとして届きます。ブラウザで動くコードは、必要な部品にだけ付けます。

その指定が、ファイルの1行目に書く "use client" です。

このサイトの部品を数えると、ちょうど半々でした。16個ずつです。

これとは別に、スクロールの位置や保存した設定を読むための小さな処理が3つ、src/lib/ にブラウザ用として置いてあります。部品ではないので上の数には入れていません。

書いてある側はどれも、ブラウザでしか手に入らないものを触っています。スクロールの位置、クリック、保存した設定、画面の幅。逆に言えば、それらが要らない部品には付けていません。

「とりあえず付ける」と、全部が重くなる

"use client" は、そのファイルから読み込んでいるものにも連鎖します。上のほうの部品に付けると、その下にぶら下がる部品まで一緒にブラウザへ送られます。

迷ったときに付けておくと動きはしますが、動く代わりに、送るものが静かに増えます。境目はできるだけ末端に置くほうがよく、このサイトでも「ボタン1つだけを別部品にして、そこにだけ付ける」という形がいくつかあります。

TypeScriptを使っている理由は、書き間違いを見つけるためだけではありません。

記事のデータはWordPressから届きます。項目の名前も、値が空になり得るかどうかも、決めているのはCMS側です。手で型を書き写すと、CMS側で項目を足した日から、少しずつずれていきます。

そこで、CMSが公開している仕様を読み取って型を自動生成しています。コマンドを1つ走らせると、実際に書いた問い合わせ文に合わせた型ができます。

「空かもしれない」を、こちらの都合で消せない

自動生成された型は、title や slug を「無いかもしれない」ものとして扱います。実際に下書きや移行中のデータでは空になり得るからです。

手書きなら、面倒なので「必ずある」と書いてしまうところです。生成された型は、こちらの願望ではなく相手の仕様を写しているので、そこで手が止まって「無かったらどうするか」を考えることになります。

次回以降、次の順で中身に入ります。