長らくNuxt.jsから離れてしまっていたので再入門したいと思います。

というのも2つの案件でNuxt.jsを使うことが確定してしまったので、 もう完全に忘れてしまったので再び入門しようと立ち上がりました。

前回書いた記事からアプデは確実にされているので、 まずは簡単にサクってプロジェクトを立ち上げてみたいと思います。

せっかくなんでTypeScriptを基軸にViewはPug、スタイルはSassで組もうと思います。

PugとSassは後からくっつけるので今回はNuxt.jsの導入とTypeScirptの導入までやります。

私はWindowsでやってますが多分どの環境でもnode.jsが動けば動くはずです。

まずはNuxt.jsでTypeScriptを扱えるようにする

Nuxt.jsは「create nuxt-app」というコマンドでジェネレートできるので それを使ってTypeScriptを設定できるそうなのでまずそこからやります。

本来の私ならジェネレーターを使わず自力で導入したがりますが 今回はWebサイトを作るのではなくてWebアプリを作るのがメインで覚えようとしてるので ジェネレーターを使ってもいいかなって感じです。

yarn create nuxt-app myapp

少し待ったら色々質問されます。 現時点でTypeScriptで書けるWebアプリケーション風にしたいって感じなので TypeScript SPA PWA Vuetify以外の選択はお好きにどうぞ。

一応選択した項目を載せておきます。

? Programming language: TypeScript 
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA)       
? Linting tools: ESLint
? Testing framework: Jest
? Rendering mode: Single Page App    
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)

導入が終わったら作成されたプロジェクトに移動して

yarn dev

で一度起動してみましょう。

問題なく起動できたらlocalhost:3000にアクセスして表示できたらNuxt.jsの導入は完了です。

TypeScriptがちゃんと動くのか確かめる

まずはvueで使えるデコレーターを導入しておきます。

yarn add vue-property-decorator vue-class-component

componentsディレクトリに新たなコンポーネントを作成します。

とりあえずTestComponent.vueでファイルを作成しましょう。

<template>
  <div>
    <p>Name {{ userName }}</p>
    <p>Age {{ age }}</p>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

// 型の定義
interface User {
  name : string,
  age : number
}

@Component
export default class TestComponent extends Vue {
  // コンポーネントが持つプロパティ(引数にオブジェクト型をとり引数は必須
  // 受け取る変数は読み取り専用でUser型のuser)
  @Prop({ type: Object, required: true}) readonly user!: User

  // 年齢を設定
  age: number = 35;

  // 名前を返す関数
  get userName (): string {
    return this.user.name
  }
}
</script>

シンプルな年齢表示と名前を返す関数を実装しただけの仕組みです。

型定義があるのでそれがTypeScriptの証みたいなところでもあります。

次に元々入ってるpages/index.vueの中身を一旦全部消して 以下の様に書き換えます。

<template>
  <div>
    <h1>テストコンポーネントの実装実験</h1>
    <TestComponent :user="testUser" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import TestComponent from "../components/TestComponent.vue";

@Component({
  components: {
    TestComponent,
  },
})

export default class IndexPage extends Vue {
  myname = {
    name : "なおきーぬ"
  }

  get testUser() {
    return this.myname
  }
}
</script>

名前のところは好きに書き換えてください。

これで一旦動かしてみます。

yarn dev

index.vueで設定した名前とTestComponent側で準備した年齢が表示されていたらOKです。

手動で構築したい人向け

create nuxt-appを使わずに導入してる方がいらっしゃったので、 手動で入れたい方は以下の方の記事が参考になりそうです。

https://qiita.com/okmt_okmt_/items/a95c9aef4024f2f695cf

個人的にはやっぱり手動で全部準備したほうがいいって感じましたね。

私自身がまだNuxt.jsに慣れてないのもありとりあえずは前にならえでやっています。

そういえばReactもそんな感じでやってから完全手動で環境構築するようになってました。

node.jsって結構勝手に作られるファイルが多くて 知らないでも使えちゃうってところはいいんですが、 カスタマイズするときにその自動生成されたファイルをイジることがあって 自動生成だとどう弄ったらいいのかわからなくなってしまうんですよね。

一方自分で組み立てた場合必要なものを組み込んでいくので カスタマイズするときも理解してるので変なところで時間が奪われなくて結果スキルも上る感じがします。

なのである程度慣れてきたら自分の力でnuxtを動く環境を構築してみるといいでしょう。