TypeScript で ToDo アプリの土台を作る

概要

会社の業務で TypeScript を扱う機会が増えることが予想されるため、技術をキャッチアップする目的で ToDo アプリを作成する。今回はプロジェクトの作成と Next.js で ToDo アプリの土台を作成する。

目標

• Next.js でプロジェクトを作成
• ローカル環境で動かせるか確認
• 軽く変更点を加えて動作するか確認

動作環境

• Windows 11 Pro
• yarn 1.22.19
• node v18.13.0
• WSL 2使用

作業手順

1. プロジェクトの作成

ディレクトリは任意で決めてください。

~/practice $ mkdir 01_todo
~/practice $ cd 01_todo

2. Next.js で ToDo アプリのプロジェクトを作成

今回は yarn でプロジェクトを作成する。

使用言語は技術キャッチアップのため、TypeScript を使用する。

~/practice/01_todo $ yarn create next-app todo --typescript

選択画面が出てきたので、Yes → Yes → Yes → No の順番で選択する。

? Would you like to use ESLint with this project? › No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /home/xxxxxx/practice/01_todo/todo.

少しすると諸々のインストールが終了する。

Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next

yarn add v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 199 new dependencies.
.
.
.
.
Done in 179.04s.
Initialized a git repository.

Success! Created todo at /home/xxxxxx/practice/01_todo/todo

Done in 206.63s.

3. ディレクトリ構成の確認

※ ll コマンドをエイリアスで ll='ls -lF' としているので隠しファイルは出ない。

~/practice/01_todo $ ls
todo

~/practice/01_todo $ cd todo

~/practice/01_todo/todo $ ll
total 132
-rw-r--r--   1 dnashimoto dnashimoto  1751 Apr  4 10:54 README.md
-rw-r--r--   1 dnashimoto dnashimoto   201 Apr  4 10:54 next-env.d.ts
-rw-r--r--   1 dnashimoto dnashimoto   118 Apr  4 10:54 next.config.js
drwxr-xr-x 244 dnashimoto dnashimoto 12288 Apr  4 10:58 node_modules/
-rw-r--r--   1 dnashimoto dnashimoto   463 Apr  4 10:58 package.json
drwxr-xr-x   2 dnashimoto dnashimoto  4096 Apr  4 10:55 public/
drwxr-xr-x   4 dnashimoto dnashimoto  4096 Apr  4 10:55 src/
-rw-r--r--   1 dnashimoto dnashimoto   556 Apr  4 10:55 tsconfig.json
-rw-r--r--   1 dnashimoto dnashimoto 93264 Apr  4 10:58 yarn.lock

4. ローカル環境で実行

以下のコマンドを実行すると画像のような画面が出ることが確認できる。

~/practice/01_todo/todo $ yarn dev

5. 何か変更を加えてみる

~/practice/01_todo/todo/src.index.tsx を下記のように書き換えて保存する。

export default function Home() {
  return (
    <>Test</>
  )
}

このような単調な画面が出れば成功。

まとめ

Next.js と TypeScript を使用して ToDo アプリの土台を作成しました。

次回は画面構成などを考えていきます。

参考文献

React.js + TypeScript でTodoアプリを作ってみる
https://www.webopixel.net/javascript/1598.html

React + TypeScript で Todoアプリの作成
https://qiita.com/tseno/items/b7133d73966c405b7249

React + TypeScript でTodoリストを作る！サンプルを用いて解説
https://terupro.net/react-ts-todo-sample/