Zenn
📖

Viteを使ってMy日記帳アプリを作り、Vercelでデプロイしました（React+TypeScript+Tailwind CSS）

に公開
React
TypeScript
Vercel
Tailwind CSS
Vite
tech

デプロイしたWebアプリ

バージョン履歴

ver 0.1

  • プロトタイプをデプロイしました

TODO

  • 「保存」ボタンを適切な場所に配置
  • 感情値を直感的に入力できるようにデザイン
    • 折れ線グラフにしたものを別ページに配置
  • 入力した日付は色が変わるようにデザイン
  • 「今日のビジネス提案」
    • 日記の入力後に「生成」ボタンを押すと、
      日記の内容をもとにAIが考えたビジネス提案文が生成される
    • ビジネス提案に対するFBをフォームに入力する

動機

  • 日々の振り返りを行うため
  • ViteでReact + TypeScript + Tailwind CSSを練習する

技術スタック

  • Vite 6.2.0
  • React 19.0.0
  • TypeScript 5.7.2
  • Tailwind CSS 4.1.4

環境構築

Viteのインストール

参考：最初の Vite プロジェクトを生成する
ReactとTypeScriptを使用するため react-tsを指定

terminal
npm create vite@latest btfDiary -- --template react-ts
npm install
npm install tailwindcss @tailwindcss/vite

ファイル構成

参考：React／Vite src フォルダのなかみ

📦 src
├── 📁 assets                  # 共通で使用する画像を格納
├── 📁 components              # 共通で使用するコンポーネントを格納
├── 📁 pages                   # ページを格納
│   ├── 📄 Home.tsx            # カレンダー画面
│   └── 📄 DiaryForm.tsx       # 日記入力ページ
├── 📁 types                   # 型定義を格納
│   └── 📄 diary.ts            # `DiaryEntry` 型定義や関連する型を記述
├── 📁 utils                   # ユーティリティ関数を格納
│   └── 📄 storage.ts          # `localStorage`へのデータ保存・読み込み関数を記述
├── 📄 App.tsx                 # エントリポイントとなるメインのコンポーネントファイル
├── 📄 main.tsx                # Reactアプリを実際にブラウザ上に描画するためのエントリファイル
├── 📄 index.css               # Reactアプリ全体の共通スタイルを定義するためのCSSファイル（Tailwindはここからインポート）
└── 📄 vite-env.d.ts           # Viteプロジェクトの型定義ファイル

Tailwind CSSのインストール

参考：Get started with Tailwind CSS

terminal
npm install tailwindcss @tailwindcss/vite
vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite' # 追記部分
export default defineConfig({
  plugins: [
    tailwindcss(),　# 追記部分
  ],
})
index.css
@import "tailwindcss";

デプロイ（Vercel）

参考：GitHubのリポジトリとVercelを接続して、ホスティングする

デプロイしたWebアプリ
→btf_diary

知ったこと

TypeScript関連

React関連

  • Reactで使用するJSXの基本をわかりやすく解説
    • JavaScriptファイル内にHTMLのようなコードを記述できるようにする
    • ブラウザで実行される前に、通常のJavaScriptにトランスパイラ（Babel）によって変換
    • コンポーネントのマークアップとロジックを1つのファイルに記述することができる
  • React.FCってなんぞや？
    • constによる型定義でコンポーネントを定義できる型
  • 【React】エクスポートはexport? default export?
    • default exportは同ファイルに1つしか宣言できず、exportは複数使用可能
    • importする際のする方法がexportの記述によって変化する
    • defaultではimport側で名前を自由に決めることができる(※asを使用すれば変更することも可能)
  • import React from "react" はもう要らない
    • エレメントを生成する関数がReact.createElementからjsxに変わった
    • jsxはコンパイル時に自動でインポートされるようになった
    • よって、React 17以降はimport React from "react";は書く必要がなくなった

Discussion