こんにちは、まちいろの門田です。

今までiOSに関する記事しか書いていないので
「あぷりかいはつえんじにあ」的なポジションなていで外に発信しておりますが業務内容的にはフロントエンドの開発のほうが長かったりします。

昨今うちの会社では主にフロントはNuxtを使用して開発を行っており、CSSはPostCSSを使ってあの手この手で開発してました（最近はSassにまた戻ったりなんだり）。
そんな中で最近Nuxt+Typescriptでの開発の話題をちらほら耳にいたしましたので（ようやく書籍やらネットでググることなくとも多少は書けるようになってきたなという段階まできてまた新しい技術を取り入れて学習の日々を繰り返すのかという気持ちをが無いといえば嘘になるがより便利な開発環境を目指して）うちも次の案件はNuxt+Typescript（+Sass）での開発を行う運びとなりました。

そんなわけで環境構築の備忘録がてら、まとめておこうと思います。
最近ちょうど、Nuxt2.4.0よりTypeScriptをサポートし始めたのも時期が良いです。が、新しすぎてサポートやら何やらがまだ把握しきれていないと、社内でもデザイナー担当の方にも環境構築をしていただく事もあるので、あんまり小難しいことは抜きで「この通りやれば動くぞ」というつもりで。ざっくりめにメモの様な形で残しておこうかと思います。

1.Nuxtの導入

まずインストールにはyarnを使用します。
Node.jsのバージョンは10系で行おうと思いますので、
nodebrewで10系最新のv10.15.1をインストールしまずはnuxtの環境を構築します。1

$ yarn create nuxt-app

これを叩くと色々聞かれます。
プロジェクト名をどうするかや、PWAサポートいるか、UIフレームワーク使うかなどなど...
とりあえず以下のような形でサンプルを作成、

? Project name -> sample
? Project description -> My funkadelic Nuxt.js project
? Use a custom server framework -> none
? Choose features to install ->none
? Use a custom UI framework -> none
? Use a custom test framework -> none
? Choose rendering mode -> Universal
? Author name -> s_kadota
? Choose a package manager -> yarn

これで現在のディレクトリにnuxtの初期プロジェクトが作成されます。
そのまま続いて

$ yarn run dev

を叩いてlocalhostの3000番portでちゃんと起動するか確かめます。
問題なく起動した場合には、ブラウザでlocalhost:3000にアクセスすればNuxt.jsのロゴなどが出てきてちゃんと動いているのが確認できるかと思います。

2.TypeScript導入

次にプロジェクト内でTypescriptを使用するための準備をします。
再びyarnでインストールしますが、nuxtが2.4.0移行よりサポートされたことによりnuxt-tsという便利なツールが登場しました。
早速インストールしていきます

$ yarn add nuxt-ts

次にcomponentやpropやらのデコレータとしてnuxt-property-decoratorをインストールいたします。

$ yarn add nuxt-property-decorator

これでほぼ準備ができました。
早速pages/index.vueをtsで書き換えてみましょう。
コンポーネントはvueファイル内ではなくtsファイルとして分けて作りたいので、index.vueには

<script lang="ts" src="./index.ts"/>

とし記載し読み込ませる様にし、index.tsを作成します。

//index.ts

import { Component, Vue } from 'nuxt-property-decorator'
import Logo from '~/components/Logo.vue'

@Component({
 components: {
   Logo
 }
})
export default class extends Vue {
 created() {
   console.log('typescriptです')
 }
}

//こんな感じで

ここまで書けたらとりあえず、再度yarn run devしてNuxtの初期画面がlocalhost:3000で表示されるかを確かめます。
ついでにログも出るか見てみましょう。

と思いましたが起動するとエラーが出ました。
構成ファイルとしてtsconfig.jsonに誤りがあるとかなんとか。

//tsconfig.json

{
 "compilerOptions": {
   "target": "es5",
   "lib": [
     "dom",
     "es2015"
   ],
   "module": "es2015",
   "moduleResolution": "node",
   "experimentalDecorators": true,
   "noImplicitAny": false,
   "noImplicitThis": false,
   "strictNullChecks": true,
   "removeComments": true,
   "suppressImplicitAnyIndexErrors": true,
   "allowSyntheticDefaultImports": true,
   "allowJs": true,
   "baseUrl": "./",
   "rootDir": "./",
   "paths": {
     "~/*": ["./*"]
   }
 },
 "include": [
   "**/*.ts",
   "**/*.vue"
 ],
 "exclude": [
   "node_modules"
 ]
}

色々なサイトを参考にこの様な感じで。
baseUrlでしたりincludeの箇所などはプロジェクトのディレクトリ構成に合わせて調整を。
改めてrunしてみます。localhost:3000にアクセスすれば...

出てきました、ちゃんと動いてくれているようですね！
いったんとりあえず起動するところまでのメモとして、次はSassを書く環境をこのプロジェクト内に作成します。