Reactの環境構築までは下記へ記載しています。
技術選定
Reactの勉強をするためにブログサイトを作りたいのですが、どんな技術を使うべきか調べてみました。
React
JavaScriptのUI側のライラブリ。フレームワークと違ってあくまでライラブリ。
Next.js
サーバー側で画面を構築してクライアントに返す（SSR）ことで高速表示が可能なフレームワーク。
Typescript
静的型付けなのでエラーを防ぎやすい。大規模プロジェクトで採用されることが多い。
仕事で使う技術の勉強の為こちらを採用。
Tailwind.css
bootstrapみたいなcssのフレームワーク。
最近よく使われているみたいです。bootstrapより自由度が高いが慣れが必要。
上記を使って作っていきます。
羅列してもよくわからなかったので調べると、
Next.jsがReactを拡張したもので、Typescriptはこれらのフレームワークやライラブリの中で使用されている、という関係だそうです。
環境を構築する
Next.jsのプロジェクトを作成する
以下コマンドを実行する
npx create-next-app@latest my-blog --tpescript
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm run dev
Next.jsのプロジェクトが作成できました。
最終的なフォルダ構成
最近のNext.jsのフォルダ構成（App Router)で作成しています。
/
├── app/
│ ├── page.tsx
│ ├── layout.tsx
│ ├── [slug]/
│ │ └── page.tsx
├── components/
│ ├── PostList.tsx
│ ├── PostPreview.tsx
├── lib/
│ ├── api.ts
├── posts/
│ ├── example-post-1.md
│ ├── example-post-2.md
├── public/
├── styles/
│ └── globals.css
├── next.config.js
├── tailwind.config.js
├── tsconfig.json
example-post-1.md
---
title: 'きょうのできごと'
date: '2023-05-21'
excerpt: '今日は楽しかった。Reactでブログを作成することができた。'
---
# きょうのできごと
今日は楽しかった。
なぜなら、Reactでブログを作成することができたからだ。
僕はうれしかった。
app/layout.tsx
まず、全体に適用するスタイルをglobals.cssで設定しているのでimportします。
RootLayoutの関数によってレイアウトコンポーネントを定義します。
これによってapp以下のフォルダでレイアウトが共通で使われることになります。
この関数の引数のchildrenは子要素の内容を受け取るための変数で、これがmainタグの中で表示されることになります。
import '../styles/globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>
<div className="max-w-4xl mx-auto px-4 py-8">
<header className="mb-8">
<h1 className="text-4xl font-bold">My Blog</h1>
</header>
<main>{children}</main>
<footer className="mt-8 text-center text-gray-500">
© 2023 My Blog
</footer>
</div>
</body>
</html>
)
}
styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
tsconfig.json
{
"compilerOptions": {
// ... 他の設定 ...
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
},
// ... 他の設定 ...
}
components/PostPreview.tsx
import Link from 'next/link'
import { Post } from '../lib/api'
export default function PostPreview({ post }: { post: Post }) {
return (
<div className="mb-8">
<h2 className="text-3xl font-bold mb-2">
<Link href={`/${post.slug}`}>
<span className="hover:underline">{post.title}</span>
</Link>
</h2>
<p className="text-gray-500 mb-4">{post.date}</p>
<p className="text-lg">{post.excerpt}</p>
<Link href={`/${post.slug}`}>
<span className="text-blue-500 hover:underline">続きを読む</span>
</Link>
</div>
)
}
components/PostList.tsx
import Link from 'next/link'
import { Post } from '../lib/api'
export default function PostList({ posts }: { posts: Post[] }) {
return (
<ul className="space-y-4">
{posts.map((post) => (
<li key={post.slug}>
<Link href={`/${post.slug}`}>
<div className="block hover:bg-gray-100 p-4 rounded">
<h3 className="text-lg font-semibold">{post.title}</h3>
<p className="text-sm text-gray-500">{post.date}</p>
</div>
</Link>
</li>
))}
</ul>
)
}
lib/api.ts
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
const postsDirectory = path.join(process.cwd(), 'posts')
export interface Post {
slug: string;
title: string;
date: string;
excerpt: string;
content?: string;
}
export function getAllPosts(fields: (keyof Post)[] = []): Post[] {
console.log('Posts directory:', postsDirectory); // デバッグ用
const slugs = fs.readdirSync(postsDirectory)
console.log('Found slugs:', slugs); // デバッグ用
const posts = slugs
.map((slug) => getPostBySlug(slug, fields))
.sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
console.log('Processed posts:', posts); // デバッグ用
return posts
}
export function getPostBySlug(slug: string, fields: (keyof Post)[] = []): Post {
const realSlug = slug.replace(/\.md$/, '')
const fullPath = path.join(postsDirectory, `${realSlug}.md`)
console.log('Reading file:', fullPath); // デバッグ用
const fileContents = fs.readFileSync(fullPath, 'utf8')
const { data, content } = matter(fileContents)
console.log('Parsed frontmatter:', data); // デバッグ用
const items: Post = {
slug: realSlug,
title: '',
date: '',
excerpt: '',
}
fields.forEach((field) => {
if (field === 'slug') {
items[field] = realSlug
}
if (field === 'content') {
items[field] = content
}
if (typeof data[field] !== 'undefined') {
items[field] = data[field]
}
})
console.log('Processed post:', items); // デバッグ用
return items
}
app/page.tsx
import { getAllPosts, Post } from '../lib/api'
import PostList from '../components/PostList'
import PostPreview from '../components/PostPreview'
export default function Home() {
const posts = getAllPosts(['title', 'date', 'slug', 'excerpt'])
console.log('Posts in Home:', posts); // デバッグ用
const latestPost = posts[0]
const otherPosts = posts.slice(1)
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="md:col-span-2">
{latestPost && <PostPreview post={latestPost} />}
</div>
<div>
<h2 className="text-2xl font-bold mb-4">過去の記事</h2>
<PostList posts={otherPosts} />
</div>
</div>
)
}
できあがった画面
