Windows11にTypeScript/Reactの環境構築をしてみた

趣旨

  • お仕事でウェブアプリ開発をすることになった
  • 今回はJavaScriptベースで開発するのだが、せっかくなのでTypeScript+Reactを検討中
  • 先ずは、環境構築だ！ということでメモ書きを残していきたいと思います

手順

  1. Node.jsのインストール
    • こちらより、インストールをダウンロード
    • 今回は、node-v20.11.1-x64.msiにしました。
    • ダウンロードできたら、インストーラ起動して、何も考えずに[next]をクリックしていけばOK
    • インストールが完了したら、コマンドプロンプトで >node -v を実行しインストールできたかを確認します
  2. yarnのインストール
    • yarn自体は一言でいうと、パッケージ管理ツール。npmみたいなものらしい。
      • 詳しくは、こちらを後で読んでみようかなと思います！
    • 以下を実行でインストールできます

      • npm install -g yarn

  3. TypeScriptのプロジェクト作成
    • 以下コマンドを実行。
      • npx create-next-app Hoge-App --typescript
      • 以下は、自分が実行したときの出力です。 --typescript書き忘れた汗。笑
C:\sample-js-calender>npx create-next-app sample-js-calender
Need to install the following packages:
create-next-app@14.1.3
Ok to proceed? (y) y
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
Creating a new Next.js app in C:\sample-js-calender\sample-js-calender.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next


added 366 packages, and audited 367 packages in 28s

132 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created sample-js-calender at C:\sample-js-calender\sample-js-calender

C:\sample-js-calender>
  1. 実行してみる
    • ディレクトリを移動し、> yarn devを実行
    • 表示されるURLにアクセスすると、サンプルが表示されます！