☰

Written by TSUYOSHI

【初心者向け】 NuxtとTypeScriptで書くための環境を構築する方法

JavaScript Nuxt PROGRAMMING

本記事では、NuxtでTypeScriptを使った環境を簡単に構築する方法を解説します。

今回は、「create-nuxt-app」を使い、簡単に環境を構築します。

NuxtとTypeScriptで書くための環境を構築する方法


手順を順を追って解説していきます。NuxtでTypeScriptを使うときは公式サイトを参考にすると問題解決できることも多々あるので参考にするとよいかと思います。

今回は「create-nuxt-app」を使って簡単に設定していく方法を解説します。

前提条件

  • すでにNode.jsはインストールされているものとします。
  • yarnを使うのですでにyarnはインストールされて使えるものとします。

GitHub

参考までにGitHubに環境構築したものを上げています。
https://github.com/it-web-life/nuxt_typescript_environment_setup

「create-nuxt-app」でベースを作成する

「create-nuxt-app」を実行して、順番に質問に答えていき、ベースの設定を完了させます。

今回は、「nuxt_typescript_environment_setup」という名前で、Nuxtのプロジェクトを作成します。

「yarn create nuxt-app 【プロジェクト名】」をすると直下に「プロジェクト名」のディレクトリが作成され、質問に答えていくだけで、Nuxtの環境が一気に構築されます。

$ yarn create nuxt-app nuxt_typescript_environment_setup

質問に順番に答えていきます

プロジェクト名を決める

? Project name:

プロジェクト名を決めます。何も選択せずにEnterを押せば「yarn create nuxt-app」の時に指定したプロジェクト名になります。

JavaScriptかTypeScriptを選ぶ

? Programming language:
  JavaScript
❯ TypeScript

今回は「TypeScript」を選択してEnterします。

パッケージマネージャーの選択

? Package manager: (Use arrow keys)
❯ Yarn
  Npm

yarnかnpmのどちらのパッケージマネージャーを使うか選択します。今回はYarnを選択します。

UIフレームの選択

? UI framework: (Use arrow keys)
❯ None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Framevuerk
  Oruga
  Tachyons
  Tailwind CSS
  Windi CSS
  Vant
  View UI
  Vuesax
  Vuetify.js

UIに関するフレームワークを選択できます。今回はNoneにします。

Nuxtで使うモジュールを選択

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Axios - Promise based HTTP client
 ◯ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS

Axiosなどを最初から入れるかどうかをSpaceキーでON/OFFして複数選択できます。今回はAxiosだけ選択します。

Lint系ツールの選択

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint

ESLintやPrettierなどをデフォルトでインストールするかを選択できます。今回は選択なしで進みます。

テストのフレームワーク選択

? Testing framework: (Use arrow keys)
❯ None
  Jest
  AVA
  WebdriverIO
  Nightwatch

Jestなどテストのフレームワークを選択できます。今回は何も選択せず進みます。

SSR/SSGかSPAを選択

? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
  Single Page App

SSR(サーバーサイドレンダリング)・SSG(サーバーサイドジェネレート)を使うか、SPA(シングルページアプリケーション)で動作させるかを選択できます。今回は「Universal (SSR / SSG)」を選択します。

Node or Staticを選択

? Deployment target: (Use arrow keys)
  Server (Node.js hosting)
❯ Static (Static/Jamstack hosting)

Node.jsのサーバー環境(主にSSR)か静的なホスティング(主にSSGでJamstackな環境)かを選択できます。今回はStaticを選択します。

開発ツールの選択

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
 ◯ Semantic Pull Requests
 ◯ Dependabot (For auto-updating dependencies, GitHub only)

開発ツール類をデフォルトで入れておくかがSpaceで複数選択できます。今回は何も選択せずEnterで進みます。」

GitHubのユーザー名

? What is your GitHub username?

GitHubのユーザー名を選択できます。Enterだとデフォルトのユーザーが選択されます。

バージョン管理ツールの選択

? Version control system: (Use arrow keys)
❯ Git
  None

Gitを使うかどうかを選択できます。今回はGitを選択します。

インストールが自動的に進みます。

$ yarn create nuxt-app nuxt_typescript_environment_setup
yarn create v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "create-nuxt-app@3.6.0" with binaries:
      - create-nuxt-app

create-nuxt-app v3.6.0
✨  Generating Nuxt.js project in nuxt_typescript_environment_setup
? Project name: nuxt_typescript_environment_setup
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? it-web-life
? Version control system: Git

🎉  Successfully created project nuxt_typescript_environment_setup

  To get started:

	cd nuxt_typescript_environment_setup
	yarn dev

  To build & start for production:

	cd nuxt_typescript_environment_setup
	yarn build
	yarn start


  For TypeScript users.

  See : https://typescript.nuxtjs.org/cookbook/components/
✨  Done in 1204.47s.

無事にセットアップが完了しました。直下にディレクトリが出来上がっています。

Nuxtのディレクトリで起動するか試してみる

作成した直下のプロジェクトのディレクトリへ移動します。(今回の例ならnuxt_typescript_environment_setup ディレクトリ)

$ cd nuxt_typescript_environment_setup

すでにパッケージのインストールができているため、yarn(yarn install)の実行は必要ない(すでに実行済)状態になっています。
「package.json」の「scripts」部分を見るとどのコマンドを使えばよいかがわかります。

▼package.json の例

{
  "name": "nuxt_typescript_environment_setup",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0"
  }
}

まずは開発環境を起動するために、「yarn dev」を実行します。

$ yarn dev

# 【中略】

ℹ Waiting for file changes
ℹ Memory usage: 158 MB (RSS: 276 MB) 
ℹ Listening on: http://localhost:3000/

「http://localhost:3000/」にアクセスすると表示がされるかと思います。

基本動作の確認ができたので、一旦「control + C」で停止します。

PUG・Sass・CSS関連パッケージのインストール

順番に必要なパッケージのインストールをしていきます。

PUGを使えるようにする

pugを使って書くために、「pug」「pug-plain-loader」パッケージをインストールします。

$ yarn add -D pug pug-plain-loader

Sassを使えるようにする

Sassを使うために「node-sass」「sass-loader」パッケージをインストールします。

$ yarn add -D node-sass sass-loader

しかし「node-sass」「sass-loader」でSassを書いてビルドするとこの記事を執筆時点ではエラーになります。

$ sass-loader@11.0.1 is installed but ^10.1.1 is expected

どうやらこの２つのパッケージのバージョンの組み合わせを調整しないといけないようでした。

▼現在のバージョン

"node-sass": "^5.0.0",
"sass-loader": "^11.0.1"

↓

「sass-loader」を「11.0.1」から「10.1.1」に落としたいと思います。

$ yarn remove sass-loader

$ yarn add -D sass-loader@10.1.1

これで「yarn dev」し直したらエラーが解消されました。

CSSをグローバルで使う設定を追加

まず「reset.css」をインストールします。

$ yarn add reset-css

次にnuxt.config.jsにグローバルでreset.cssを読み込ませるように設定をします。公式サイトを参照するとわかりやすいかもしれません。

▼nuxt.config.js

export default {
// 【中略】
  css: [
    'reset-css'
  ],

TypeScript関連の対応とパッケージインストール

ここからTypeScript関連の対応をします。

「nuxt.config.ts」に変更

まず「nuxt.config.js」を「nuxt.config.ts」に変更します。

「nuxt-property-decorator」の導入

「nuxt-property-decorator」を追加します。「nuxt-property-decorator」は「vue-property-decorator」のラッパーでNuxtの対応が追加されています。TypeScriptでVueを書く時に便利なデコレーターです。

$ yarn add nuxt-property-decorator

「vuex-module-decorators」の導入

「vuex-module-decorators」を追加します。VuexをTypeScriptで型安全に書くのに適していてオススメです。

$ vuex-module-decorators

まとめ

NuxtのTypeScript環境を構築する方法を初心者向けに解説しました。

「nuxt-property-decorator」や「vuex-module-decorators」を使った書き方はそれぞれのチュートリアルを見ると分かるようになっています。このあたりは別記事でも紹介していく予定です。

ご参考になれば幸いです。

※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています

RELATED

Vue「v-for」の正しい使い方 【バグ回避・key属性をつけるべき理由】...

JavaScript

Vueを始める方法 【初心者でもVue-CLIで環境を簡単構築ができる】...

JavaScript

JavaScript ES6のアロー関数が簡単に理解できる 【thisやreturn、引数について初心者向けに解説】...

JavaScript

Intersection Observer で画像の遅延ロードを実装する...

JavaScript

HOME >  JavaScript >  【初心者向け】 NuxtとTypeScriptで書くための環境を構築する方法