いいですか、あなたを 1 日で「個人開発できる人」にします。（怪しい）対象者 - 1 日で個人開発学びたい人 - アプリケーション開発を学びたい人 - ポートフォリオ、ブログ、会員機能を実装したい人 - 暇人、金がない人無料で完結できる。やらない理由はない。 ### 休日の 1 日でやることこれを休日の 1 日でやりきってくれ！AI でやるなよ、約束だぞ 1. 公式ドキュメントを参照しながら、Markdown でブログを作る 2. Clerk で認証機能を 5 分で実装 3. Supabase でデータベースを構築 4. Vercel にデプロイする **もう一度言うよ？「数日でやらずに 1 日でやりなはれ」** :::info 「1 日でこれだけやった！」という経験（自信）と即アプリをリリースしていく MVP 的な考え方が今後は必須なの！ ::: **そして、この一連の流れを限られた時間で実践することで、個人開発するための力が身につく！** この方法は、Git の使い方も自然と学べるという利点もあるよ。完璧やろこれ。この記事ガンガン、アップデートしていくから、 You ブクマ OK？それでは、今週の休日 1 日で以下をやってみましょうー！！ ### Next.js インストール GO!! おはようございます！今日は休日ですね「Next.js を活用した個人開発は、ウェブ開発を学ぶ上で最適な方法の一つ」っていうのは聞いたことあるよね？そんなこと、ワイは聞いたことないんやが、Next.js は個人開発に最適だと思うのよ。Yo, Yo :::discovery ついに始める Next.js、立ちはだかる環境構築、こいつら処して 5 分で着手 ♪ チェケラッチョー ::: create-next-app でプロジェクト作って、TypeScript、ESLint、Tailwind CSS など導入つっても意味分からんよな Next.js 15 のインストール方法はこれに詳しく書いてある。基本全部 YES 連打で OK。 https://izanami.dev/post/aaaaf24e-df0f-40ef-a6d6-3219cff2ea83 30 分くらいでできたやろ？あ、TypeScript は、必須にしておけよ。理由はつよつよエンジニアに聞きなさい。特に Tailwind CSS は、レスポンシブデザインの実装が簡単になるし、開発効率を大幅に向上させるので「素直に入れろ」です。え？まだメリットが分からない？ Tailwind CSS のメリットはこれね。**CSS に時間かけてる場合じゃないから黙って入れなさい** - CSS ファイルを開かなくていいので効率的 - CSS のクラス名を考えなくて済む - 配色パターン用意されてる → 配色選定が楽また、tsconfig.json の設定を適切に行うことで、パスエイリアスを使用した効率的な開発が可能になるよ。 https://tailwindcss.com/docs/installation https://nextjs.org/docs ### Markdown でブログを作成 Next.js インストール終わったかな？次に進むよヘッドレス CMS（ブラウザで記事書くやつ）って方法もあるけど、無料枠ちょっとやし、ランニングコストかかるやん？それだと俺達の財布じゃ 😭😭😭 なわけよ。まぁ、投稿画面必要ならヘッドレス CMS でもいいけどね。でもね、**Markdown で記事作れば無料で済む**のよ。もぅ、作りたい放題！投稿するための管理画面はないけどね。自分専用ならこれで十分よね？仕組みとしては、ディレクトリに md ファイルを作って、読み込ませるだけ。分からない？ほんじゃ、ちょっと説明すっか。 #### インストールまず Markdown を出力するために必要なパッケージをインストールする。 ```bash npm install gray-matter remark remark-html ``` インストールしたかな？この３つのパッケージは、それぞれ次のような機能を提供してるのよ。 fs: Node.js のファイルシステムモジュール。Markdown ファイルを読み込んで、その内容を処理する path: ファイルやディレクトリのパスを扱うための Node.js のモジュール。ファイルパスの生成やディレクトリへのパス操作を簡単にする matter (gray-matter): Markdown ファイルのメタデータ（フロントマター）を解析するために使う。Markdown の冒頭にある `---` で囲まれた部分から情報を取得できる。次に `data/news` ディレクトリを作成し、その中に `sample.md` ファイルを作成。このファイルは Markdown 形式で記述すべし。 `data/news/sample.md` の内容はこんな感じ。これマークダウンファイル。フロントマターだったかな？記事の最初にこれを書くのよ。 ```md --- title: "記事タイトル a1" date: "2024-12-05" tags: - Next.js - Markdown --- ``` で、この後に、Markdown 記法で記事を書く。すると記事のできあがり。 https://izanami.dev/docs/markdown-guide 何ページか作ったかな？うし！次に、早速コード実装しよう。以下は `src/app/news/page.tsx` のコード。ニュースディレクトリに置いたパターンな。コピペじゃなくて、自分で書けよ。つまり、精緻化（細部まで見ろ）しろってこと。 ```tsx // src/app/news/page.tsx import fs from "fs"; import path from "path"; import matter from "gray-matter"; import Link from "next/link"; // 記事の場所を指定 const postsDirectory = path.join(process.cwd(), "data/news"); // 投稿数 const PAGE_SIZE = 5; // ページ数を計算する関数 const range = (start: number, end: number, length = end - start + 1) => Array.from({ length }, (_, i) => start + i); // 記事データの型定義 type PostData = { slug: string; title: string; date: string; isPublished?: boolean; }; // 記事一覧データを取得する関数 export async function getNewsData(page: number = 1) { const fileNames = fs.readdirSync(postsDirectory); const allPostsData: PostData[] = fileNames .map((fileName) => { const slug = fileName.replace(/\.md$/, ""); // ファイル名から.mdを削除 const fullPath = path.join(postsDirectory, fileName); // ファイルの場所を取得 const fileContents = fs.readFileSync(fullPath, "utf-8"); // ファイルの内容を取得 const matterResult = matter(fileContents); // ファイルの内容を解析 return { slug, // ファイル名 ...(matterResult.data as Omit), // メタデータ }; }) .filter((post) => post.isPublished !== false); // 公開された記事のみ // 投稿を日付でソート const sortedPosts = allPostsData.sort((postA, postB) => new Date(postA.date) > new Date(postB.date) ? -1 : 1 ); // ページネーション処理 const pages = range(1, Math.ceil(allPostsData.length / PAGE_SIZE)); const posts = sortedPosts.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE); return { posts, pages, }; } type NewsProps = { params: { page?: string; }; }; const News = async ({ params }: NewsProps) => { const currentPage = params.page ? parseInt(params.page) : 1; const { posts, pages } = await getNewsData(currentPage); return (

News

{post.title}

{post.date}

Pages:

{page}

); }; export default News; ``` ちなみに、このコード、めっちゃ汎用性高いからね。ニュースでもブログでも Markdown 一覧ページを作れてしまう。でも、このコードに文句言うなよ。エラーが出たら、自分で解決してみてな、コード書くより勉強になるからね。詳細ページの作り方は、後日このページに書くかもな。後は、これ読んで進めてね。 https://nextjs.org/docs/app/building-your-application/configuring/mdx ### Clerk による認証機能の実装よし、ざっとブログ出力終わったかな？コーヒーブレイクしようや。ついでに大切なこと言うよ？ **細部まで完璧に理解しようとするなよ、高速で構造を掴むのが先決。** 言ってること分かるな？あと、 :::warning 以下に進む前に、GitHub でアカウント作っておく必要がある。そして、これから紹介するサービスでOAuthログインできるようになる。俺等「後でやろう」なのよ、だから今すぐに作ってくれ。１日でやるっていうのも、先延ばしさせないための工夫でもある。 ::: アカウントはここから作ってね。 https://github.com/ 作ったかな？ :::warning ちな、GitHub の 2FA、当然設定したかな？乗っ取られたら Supabase の管理権限も奪われるからね ::: そしたら、リポジトリを作ってみよう https://izanami.dev/post/626c7a76-767b-42cf-b267-f3fde28ecb8e/ よし！次は、これ読んでくれ。OAuth 認証を５分で実装できるから。 https://izanami.dev/post/63cd006d-1e3a-49d5-ba2b-e6a038faabff これ読んだ君、かなり興奮してるよね？だって、あんなに複雑だと思っていた認証機能を、５分で実装できるってことが分かっただろうからね。 ↓ AI に補足説明してもらったよ。認証機能は、多くのウェブアプリケーションで必要不可欠な要素。Clerk を使用することで、複雑な認証システムを簡単に実装できます。 Clerk は、UI コンポーネントを提供し、二段階認証にも対応していて、MAU 10,000 人まで無料で利用できます。Next.js との親和性も高く、数分で実装を完了できる点が特徴。 https://clerk.com/docs/quickstarts/setup-clerk でも、認証機能は後回しでも OK。 ### Supabase によるデータベース管理本来は、設計から入るけど、ここではそれはやらない。俺達にそんな高尚な時間はない。どうしても設計したいなら、紙にでも書けば OK。ほんじゃ、次に認証したユーザーの管理とか、会員機能を実装するための解説。Supabase っていうのは、データベースをエクセルの表のように簡単に視認できるわけよ。この中に、ユーザーの id や名前、ニックネーム、なんか色々情報が入ってる。それだけじゃないよ、表（テーブルっていう）のような中身にデータを入れたり・消したり・更新したりできる。 GUI から直感的に操作できる。んで、後は、Supabase のテーブルを、アプリ側で読み込んで表示するという仕組み。簡単やろ？しつこいけど「**簡単に考える**」ことが重要。なんだ、簡単にできるやん、と思うの大事。ちな、フロント側じゃなくて、バックエンドで取得してな。 Supabase OAuth も使えるけど、最初は苦戦するだろうから、さっきの Clerk でやってみようね。 ↓ AI に説明してもらったよ。データベースの管理には、Supabase が最適です。PostgreSQL をベースにした Supabase は、Row Level Security（RLS）によるセキュリティ管理が可能で、データのアクセス制御を細かく設定できます。また、リアルタイムサブスクリプションやストレージ機能も提供されており、個人開発に必要な機能が一通り揃っています。 https://supabase.com/docs/guides/database/postgres/row-level-security ### Vercel へのデプロイと運用開発したアプリケーションは、Vercel を使用して簡単にデプロイできる。サーバーじゃなくて、ホスティングサービスっていうのよ。GitHub にプッシュするだけで、自動ビルドして本番環境に反映されるってこと。SFTP ソフトとかいらないからね。 ↓ AI に説明してもらったよ。 Vercel は、Next.js の開発元が提供するホスティングサービスで、GitHub リポジトリと連携することで、自動デプロイが可能です。また、カスタムドメインの設定も容易で、SSL 証明書も自動的に管理されます。 https://vercel.com/docs ### セキュリティ対策お疲れやったね！１日でいけたかな？ついでに、セキュリティ対策でも読もうか。これ、実装の 1 億倍大事だからね！ちょっと待てよ！やっぱこれ開発前に読んでおいたほうがいいかもな。 https://izanami.dev/post/b10d2c64-159c-4a02-9ead-a808a28c551a ↓ AI に補足してもらったよ。個人開発においても、セキュリティは重要な考慮事項です。Supabase の RLS を適切に設定し、機密情報を適切に管理することが必要です。また、サーバーサイドでのサニタイズ処理や、クライアントサイドでのデータ取得制限など、基本的なセキュリティ対策を実装することが重要です。 https://supabase.com/docs/guides/auth/row-level-security ### 法律も読んでね個人開発 SaaS で気をつけるべき日本の法律もまとめたよ。これも短く簡単に理解できるように書いた。実装後に、法律に抵触したと分かったら、作り直しが面倒やろ？どうよ、ワイ優しいよね？ https://izanami.dev/post/cc5aa4dc-1988-49c5-b2ac-cddfd32e3a10 ### 続く休日はこんな感じで、進めてみよー。簡単簡単！毎日の積み上げなんていらないよ、意思決定 → 形にするのスピード感を鍛える。この１日で集中してやろう。何か分からんことがあったら、コメントでも X（@commte）でもいいから聞いてくれよな。タメ口でも愚痴でも OK よ。スパムは駄目よそれでは、また次回ねー！

News

{post.title}