Next.jsで電卓をつくってみる
fuutot背景
新卒社会人に向けて開発力を身につけていきたい。
以下のPostにこんな順番でアプリを開発したらどうかという提案がされていたのでできそうなものから取り組んでみる。
Next.jsを選んだのは、フロントエンドもバックエンドも開発できるらしく、アプリがどのような技術で動いているのか一通り経験できるのではと考えたため。まずは電卓を作ってみる。
fuutotプロジェクトの作成
npx create-next-app@latest calculator
npxコマンドってなんだっけ？
fuutot開発サーバーの実行
npm run dev
裏側で何か動いているのか？
fuutotpackage.jsonのscriptsのdevの部分が動いているみたい
以下の例だと、next dev --turbopackが動いている
{
"name": "calculator",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build --turbopack",
"start": "next start",
"lint": "eslint"
},
"dependencies": {
"react": "19.1.0",
"react-dom": "19.1.0",
"next": "15.5.2"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
"eslint": "^9",
"eslint-config-next": "15.5.2",
"@eslint/eslintrc": "^3"
}
}
package.json はプロジェクトの設定ファイル
scripts: よく使うコマンドをまとめられる
dependencies: 本番環境でも必要なライブラリを記載
devDependencies: 開発時だけ必要なライブラリを記載
fuutot直接実行できなかった
next dev --turbopack
グローバルインストールしていないから？
グローバルインストールしてみる
npm install -g next@15.5.2
実行できた
直接実行するためにはグローバルインストールが必要みたい
fuutotNext.jsのディレクトリ構成
.
├── README.md
├── app/ : Next.jsのアプリのディレクトリ
├── eslint.config.mjs : Lintの設定ファイル
├── next-env.d.ts : Next.js用のTypeScript型定義ファイル
├── next.config.ts : Next.jsの設定ファイル
├── node_modules/
├── package-lock.json
├── package.json : 依存パッケージやスクリプト、プロジェクト情報を管理
├── postcss.config.mjs :
├── public/ : URLで直接アクセス可能なファイル
└── tsconfig.json
appディレクトリには以下のファイルが入っている
.
├── favicon.ico
├── globals.css : グローバルなCSSスタイル
├── layout.tsx : 全体レイアウトを定義するコンポーネント
└── page.tsx : トップページのコンポーネント
Huskyの導入
サバイバルTypeScriptのチュートリアルからHuskyの存在を知った
チュートリアルは工事中だったため調べながらやってみる
fuutotHuskyとは
Gitのフックを簡単に管理するためのツール
Gitの特定のイベントに特定のプログラムを実行させることができる
コード整形とか、テスト実行を自動化する目的に使われる様子
fuutotセットアップ
- インストール
Gitのフックを管理するためのツールなので開発環境のみにインストールする
npm install --save-dev husky
- 初期化
huskyを初期化する
コミット前に実行されるフックが設定されたり、プロジェクトがインストールされるたびにHuskyが自動的にセットアップされるようになる
npx husky init
動作確認
huskyを初期化するとpre-comit(コミット時のフック)にnpm testが追加されるみたい
npm testはまだ使えないので、npm run lintに変更すると、動作することを確認できた
fuutotlint-stagedの導入
Huskyをもっと便利に使うことができるみたい
ステージされたgit fileに対してフォーマッターやリンターを適応することができるみたい
fuutotセットアップ
-
list-stagedのインストール
npm install --save-dev lint-staged
Prettierのインストール
npm install --save-dev --save-exact prettier
save-exactオプションは指定したバージョンで固定するもの
- lint-stagedの設定
フックにlint-stagedを追加
echo "npx lint-staged" > .husky/pre-commit
- 何に対して、何を実行するのかを追加
{
"*.{js,jsx,ts,tsx}": [
"eslint -c .eslintrc.js --fix",
"prettier --write '**/*.{js,jsx,ts,tsx,json}'"
]
}
fuutot.eslintrc.jsが存在しておらず、エラーが発生したため以下のように修正
{
"*.{js,jsx,ts,tsx}": [
"eslint -c eslint.config.mjs --fix",
"prettier --write '**/*.{js,jsx,ts,tsx,json}'"
]
}
電卓の見た目を作る
とりあえずiPhoneの電卓みたいな感じがいいな
fuutotまず中央に電卓をもってくるために、中央寄せするコンテナが欲しいな
Next.jsでは共通レイアウトをlayout.tsxに定義する
import './globals.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja">
<body>
<div className="center-container">
{children}
</div>
</body>
</html>
);
}
スタイルはglobal.cssに定義する
.center-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1rem;
}
fuutot.tsxはTypeScript(.ts)でUIを書くファイル
layout.tsxはdefault exportしないといけない？
childrenプロップはページかまた違うレイアウトになる
fuutotexport defaultはNext.js側が要求しているもの
defaultとある通り、1つのファイルで1つしかexport defaultできない