目次
はじめに
使用技術
使用するもの
さっそくViteプロジェクトを生成してみる
次回のお知らせ
はじめに
この記事では、TODOアプリを環境構築から作っていく様子を、少しずつ投稿していきます。
「もっとよいテストの書き方あるよー」とか、「こっちのが実装わかりやすいかもー」とか、フィードバックをいただけると嬉しいです！
今回はViteプロジェクトを生成するところまでやってみたいと思います！
環境構築って一番最初しかやらないから分からないこと多い😅
技術スタック
- Frontend
- TypeScript
- React
- Vite
- Vitest
- Backend
- Kotlin
- Spring Boot
- Data Base
- PostgreSQL
使用するもの
- MackBook Pro
- IntelliJ IDEA (Ultimate Edition)
さっそくViteプロジェクトを生成してみる
1. 任意の場所にディレクトリを作る
今回は todo-app-tdd というディレクトリ名で作っていきます。
ソースコードは GitHub で管理していきたいと思います。
2. Viteプロジェクトを生成する
Vite の公式ページを見ながらやってみます。
Viteプロジェクトを生成します。
ターミナルを開いて todo-app-tdd のディレクトリまで辿ったら
npm create vite@latest
コマンド実行後は画面の表示に従って選択していけばOKらしい。
何が表示されるか順に見ていきます。
まずこれ↓
Need to install the following packages:
create-vite@5.2.0
Ok to proceed? (y)
以下のパッケージをインストール必要があるけど、続けても大丈夫？って聞かれています。
ここは y を押して続けます。
? Project name: ›
プロジェクト名どうする？って聞かれているので、
今回は frontend としておきます。
（ここでのプロジェクト名とはディレクトリ名のことを指していて、ここにパッケージの構成ファイルが入ります。）
? Select a framework: › - Use arrow-keys. Return to submit.
❯ Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others
フレームワークを矢印キーで選んでね〜。と言っているので、
React を選びます。
? Select a variant: › - Use arrow-keys. Return to submit.
❯ TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC
使いたい言語は TypeScript だけど、SWC って何だろう？？
SWC
・Speedy Web Compiler の略
・Rust 製の高速なコンパイラ
・Deno や Next.js、Vite をはじめとした様々なツールの内部で採用されている
・env という Babel の preset-env 相当の機能も備えているため、本番ビルドでも十分使える
ふ〜ん。。。
分かったような分からないような・・・。
でも SWC なんだか速そうな印象なので、TypeScript + SWC を選択します！
Scaffolding project in /***/todo-app-tdd/frontend...
Done. Now run:
cd frontend
npm install
npm run dev
どうやら完了したらしい。
ターミナルの指示に従って、コマンドを実行してみよう。
cd frontend
Vite 公式ページに、Node.js のバージョンについて言及されているので、18+、20+ のバージョンが入っていることを確認します。
node -v
私は v16.20.2 と表示されたので、バージョンを上げたいと思います。
この記事を書いている時点で、Node.jsは 20.11.0 LTS とのことなので、これを入れていきますー。
(私は node のバージョン管理に、Volta を使っています。)
Node.js のバージョンが整ったら
npm install
npm run dev
↑これを実行すると、↓このようにターミナルに表示されるので
VITE v5.1.1 ready in 404 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
Chromeブラウザで、localhost:5173 を開いてみます。
おっ！！！表示されてるっ！！！
ボタン押すとカウントアップする機能あるじゃん。すご。
むふふ。なんか満足しちゃった(笑)
git に commit します！
commit message: Viteプロジェクトを生成した
今回はここまでにします。
GitHubのリポジトリはこちらになります→https://github.com/b-yuko/todo-app-tdd
なんか途中でコミットログがぐちゃぐちゃになりそうだけど、ご愛嬌ってことで温かい目で見守ってください<(_ _*)>
次回のお知らせ
ESLint、Prettierの設定とか、テストできる環境とか整えていけたらいいなと思っています。
README を読み解きながら、ESLint の設定をします。
記事はこちら 👉 https://qiita.com/b-yuko/items/299e2c92f3f810186f5b