82
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

そのNuxt、TypeScriptで。

年末!楽しんでますか!
TUT Advent Calendar 2019 15日目の記事です!

Vue.jsベースでSPAが手軽に作れると評判のNuxt...
ビルド時に型検査が入り、絶大な安心感を提供するTypeScript...

これらふたつを組み合わせたモダンなフロントエンド開発で寒い冬を乗り切ろう!!!
npmのビルドで、きっと物理的な暖もとれるはず!!

Nuxt.ts、やっていくぞ!!

お品書き

Nuxtとは

image.png
Source : Nuxt.js - ユニバーサル Vue.js アプリケーション

Vue.jsにVue Router、VuexなどがバンドルされているJavaScriptのフレームワーク。
サーバーサイドレンダリングをするアプリケーションを簡単に作れることでよく話題になるけど、設定ひとつで静的サイト、Single Page Applicationとしてもビルドできるスグレモノ。

Nuxtの好きなところ

Vue Routerのルーティングに手間かからなさすぎ

プロジェクトルートにpagesというディレクトリを作って、その中にComponentを突っ込んであげるだけでルーティングされちゃう。

image.png

全体を通して使うテンプレート的なものはlayouts/default.vueに作れます。

ビュー - NuxtJS

ホットリロード便利すぎ

エディタでソースを変更すると何もせずともブラウザに反映されます。

TypeScriptもしっかりサポート

ギリ使えるとかじゃない。
nuxt-property-decoratorもあるし、 そもそも@nuxt/typescript-buildっていうパッケージがある。

最高。

Nuxtをインストールしよう!

TypeScriptを使うにしろ、まずはNuxtをインストールしないことには始まらない。
Nuxtをインストールするにはnpmが実行できる環境、すなわちNode.jsが必要だ。

おっさんはDockerを使って楽しているのでNode.jsのセットアップは省きます。知らないし。

以下、インストール - NuxtJSの「スクラッチから始める」に沿って、NuxtをTypeScriptではじめて行きますよー

package.jsonの作成

package.jsonはnpmの設定ファイル。
npmコマンドはNodeに同梱されていて、Nodeのパッケージマネージャなのです。

どうビルドするのかとか、必要なパッケージなんかを記す。
早速ファイルを追加して、nuxtの起動コマンドを書こう。

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

ほいっと。
nameはなんでもいいです。けど、npm的には小文字ケバブケースがいいみたい。

Dockerでやるならホストを指定しよう

デフォルトがlocalhost:3000になってしまって、Docker内にうまくマッピングされない。
ホストを0.0.0.0に指定して解決しよう。

{
    "name": "how-to-setup-nuxt",
    "scripts": {
        "dev": "HOST=0.0.0.0 nuxt"
    }
}

ちなみに、ポート番号も指定したくば、PORT=3939みたいな感じで追加すればできる。

コマンド - NuxtJS

Nuxtを追加

nuxtパッケージをプロジェクトに追加しよう。

npm install --save nuxt

pages/index.vueを作成

デフォルトのページとして表示されるpages/index.vueを作って試しにNuxtを起動してみよう!

pages/index.vue
<template>
    <h1>Hello, Nuxt!</h1>
</template>

Nuxtを開発モードで起動

Nuxtを動かそう!!

npm run dev

localhost:3000へアクセーーーーーース

Hello world!できたらよしです。

TypeScriptにしてみよう!!

TypeScriptとは?

Microsoftが開発したJavaScriptに静的型付けを加えたようなメタ言語
JavaScriptと相互互換があるらしい。

構文のスタイルはKotlinとかそのへんのモダン言語のような雰囲気がある。

TypeScriptに対応させる

じゃあ続いてTypeScriptに対応させちゃおっか。

Setup | Nuxt TypeScript に従います。うー、英語!

インストール

@nuxt/typescript-build@nuxt/typescript-runtimenuxt-property-decoratorをインストールしましょう。

npm install --save-dev @nuxt/typescript-build
npm install --save @nuxt/typescript-runtime

npm install --save nuxt-property-decorator

@nuxt/typescript-buildはNuxtをTypeScriptでコンパイルさせるために、@nuxt/typescript-runtimeはサーバーとしてTypeScriptを含んだNuxtを稼働させるのに必要なようです。

nuxt-property-decoratorとは?

VueのComponentとしてや、Nuxtのheader要素としてメソッドを割り付けるとき、デコレータを使って簡単にできるようになるというもの。

見た目もクラスらしくスッキリしますよ!

設定ファイルの追加

nuxt.config.jstsconfig.jsonを作成します。
ページに書いてある内容コピペです!

nuxt.config.js
export default {
  buildModules: ['@nuxt/typescript-build']
}

tsconfig.jsonnuxt-property-decoratorでデコレータを使うので"experimentalDecorators": trueを追加します。これを追加することでTypeScriptのコンパイラがデコレータを理解してくれます。

tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "ES2018",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

package.jsonの書き換え

nuxtnuxt-tsに書き換えます。

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt-ts"
  }
}

pages/index.vueにTypeScriptを書き加えてみる

<script>タグにlang=tsを追加して、TypeScriptを使って.vueファイルにスクリプトを仕込みます。
さっきnuxt-property-decoratorをインストールしたので、デコレータを利用して書くことができます!

単一コンポーネントファイルを作成して、TypeScriptを使ってComponentを書きましょう!

<template>
    <div>{{helloWorld}}</div>
</template>
<script lang="ts">
    import {Component, Vue} from "nuxt-property-decorator";

    @Component // <- 1
    export default class Index extends Vue /* <- 2 */{
        get helloWorld(): string { // <- 3
            return 'Hello world!';
        }
    }
</script>

1. @Componentデコレータ

@Componentデコレータは以下のクラスがVueのスクリプトであることを表します。
デコレータの次に定義されるクラスは必ずVueクラスを継承する必要があります。

2. Vueクラス

これを継承しないとめっちゃエラーになります。

3. get helloWorld():string

プロパティを定義しています。これをVueテンプレートから参照してHello world!します。

サーバー起動!

サーバーをまた起動してみましょう!

npm run dev

http://localhost:3000にアクセスして、Hello world!って出たらうまく行ってます。お疲れさまです。

うまく行かないときは...

  • npmコマンドで必要なものをインストールした?
  • tsconfig.jsonをちゃんと作った?
  • package.jsonのnuxtをnuxt-tsに書き換えた?

Jestをセットアップしよう!

Jestとは?

image.png

Source : Jest · 🃏快適なJavaScriptのテスト

JestはFacebook社が提供しているJavaScriptのテストを行うフレームワーク。
Node.js上で動作するのでブラウザを立ち上げる必要もないし、非同期のテストもできる!

Jestをインストールしよう

Jestと、JestでTypeScriptを動かすために必要なものと、型定義をインストールします。

npm install --save-dev jest ts-jest @types/jest

設定ファイルを作ろう

jest.config.jsを作ります。

jest.config.js
module.exports = {
    transform: {
        '.*\\.(ts)$': '<rootDir>/node_modules/ts-jest',    // TypeScriptファイルをテストする場合
    },
    moduleFileExtensions: ['ts', 'js'], // テスト対象の拡張子を列挙する
    moduleNameMapper: {
        "^~/(.+)": "<rootDir>/$1",
        "^@/(.+)": "<rootDir>/$1"
    }
};

tsconfig.jsonでTypeScriptでルートディレクトリへエイリアスを設定していたので、ここでも同じく設定してあげます。

この設定ではJavaScriptのテストがしづらい

TypeScriptのみを使う前提の超怠惰設定なのでJavaScriptのテストが満足にできません。
具体的にいうとES2015で登場したimport / export構文などが使えないのでクソクソ不便です。
これはNode.jsがES2015に対応していないことに起因しています。babelを使えばES2015構文も満足に使えます。設定頑張れ!

が、TypeScriptのほうが安心感があるのでJavaScriptが必要だと感じるシーンは少ないでしょう。なぁ、そうだろ?

tsconfig.jsonに型定義を追記する

Jestのテストメソッドの型定義をTypeScriptの設定ファイルに追加してあげます。

tsconfig.json
{
    //....
    "types": [
      "@types/node",
      "@nuxt/types",
      "@types/jest" // <- 追加
    ]
}

これで開発環境などでJestの入力補完が効き始めるようになると思います。

package.jsonにJest起動コマンドを追加

scriptsのところに"test": "jest"を追加します。

現時点でのpackage.jsonはだいたいこんな感じになると思います。

package.json
{
  "name": "how-to-setup-nuxt",
  "scripts": {
    "dev": "HOST=0.0.0.0 nuxt",
    "test": "jest"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^0.2.10",
    "nuxt": "^2.10.2",
    "nuxt-property-decorator": "^2.5.0"
  },
  "devDependencies": {
    "@nuxt/typescript-build": "^0.3.10",
    "@types/jest": "^24.0.23",
    "jest": "^24.9.0",
    "ts-jest": "^24.2.0"
  }
}

テストケースを作る

試しにtrueをアサーションするテストケースを作ってみよう!
Jestでは****.test.ts****.spec.tsがテストファイルとして自動的に認識されるようになっています。
今回はtests/ディレクトリを作って、その中にexample.test.tsを作ってみます。

tests/example.test.ts
test('example test', ():void=>{
    expect(true).toBeTruthy();
});

Jestを動かしてみる

Jestを動かしてみましょう!
npm run testをターミナルへターーーーイプッ!

image.png

うごいあ。
ぼくはDocker for Mac環境下なので実行にかなり時間がかかっていますが、ホストマシンで動かすとなかなか早いんじゃないでしょうか。

環境整備はおわった!

楽もう!みかんとお正月、そしてNuxt.ts!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
82
Help us understand the problem. What are the problem?