このサイトのテーマ『SWELL』を見てみる >>

1分で出来るNuxt.jsでのTypeScript環境構築【簡単】

takabee
こんにちは。takabeeです。

 

今回は、

初心者
Nuxt.jsでTypeScript環境を構築したいけど、どうやってやれば良いんだろう?

という悩みを解決すべく、Nuxt.jsにTypeScript環境を構築する方法を、6STEPで解説していきます。

 

この記事で理解できること

・Nuxt.jsとは?
・TypeScriptとは?
・Nuxt.jsとTypeScriptの開発環境構築

ネコ大先生
この記事は【約3分】で読めるニャ。
目次

Nuxt.jsとは?

Nuxt.jsがそもそも何かわからない方は、こちらの記事で詳しく解説しています。

5分くらいこの記事を眺めてから、戻ってきてください。

あわせて読みたい
Nuxt.jsとは?超シンプルなTODOアプリを作りながらサクッと理解しよう!【メチャクチャ簡単です】 こんにちは。takabeeです。   今回はNuxt.jsをTODOアプリを作りながらサクッと理解してしまおう、という記事です。 この記事を見てくれている方は、 Nuxt初心者 Nu...

 

TypeScriptとは?

TypeScriptとは、一言でいうと「JavaScriptに強い型付けを導入した言語」です。

JavaScriptの性質も多く受け継いでいますが、自分自身触っていく中で一番インパクトを受けたのはこれでした。

 

分からない方にすこし解説すると、まずJavaScriptは動的型付け言語です。

つまり作った変数に数字を入れても、文字列を入れても問題ないです。

 

しかし大規模なプロジェクトになって、ほかの方が書いたコードを触るとき、この変数が厳密に何を指しているのか分かりません。

そういった場合にはあらかじめ変数を作るときに、厳密に決めてしまった方があとから書き直しやすいです。

つまり「なんでも入れていいですよー」な変数より、「これしか入れてはいけません」な方が、大規模なプロジェクトには向いているということですね。

 

自分はTypeScriptを使った大規模なプロジェクトに入ったことはありません。

でも実際に、大規模でもなく多人数でもない、個人開発でもその恩恵ははっきり分かりますよ。

だって1週間前に書いたコードなんて自分でも忘れてますもの。

 

takabee
JavaScriptを厳密にしたものっていう認識でいいよ!

Nuxt.jsにTypeScriptの環境構築をしてみよう!

6STEPで完了します。

【STEP1】Nuxtプロジェクトを作成しよう!
【STEP2】TypeScriptを導入しよう!
【STEP3】nuxt.config.jsファイルに登録しよう!
【STEP4】tsconfig.jsonを作成しよう!
【STEP5】vue-shim.d.tsを作成しよう!
【STEP6】package.jsonをアップデートしよう!

 

公式ドキュメントはこちら。日本語なのでメチャクチャ読みやすいですよ。
Nuxt TypeScript
セットアップ Nuxt.js 向け TypeScript サポート

 

【STEP1】Nuxtプロジェクトを作成しよう!

まずNuxtプロジェクトを作っていきましょう。

<プロジェクト名>はなんでも大丈夫です。

npm init nuxt-app <プロジェクト名>

 

設定は、すべてデフォルトで大丈夫です。

 

【STEP2】TypeScriptを導入しよう!

Nuxt.jsのTypeScriptサポートは3つのパッケージからなっています。

@nuxt/types:主なTypeScriptサポートモジュール。これは入れておく。
@nuxt/typescript-build:主なTypeScriptサポートモジュール。これも入れておく。
@nuxt-typescript-runtime:オプション。nuxt.config.js、modules、serverMiddlewaresでTypeScriptが使えるようになる。今回はテストで入れる。

 

これらをインストールしましょう。

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

 

@nuxt/typescript-runtimeだけ開発用ではないので注意。
–save-devはサービスを開発するときのみ使うパッケージ、–saveは開発だけでなく公開したあとも使うパッケージを書きます。

 

【STEP3】nuxt.config.jsファイルに登録しよう!

インストールできたら、nuxt.config.jsファイルのbuiildModulesセクションに、モジュールを登録しましょう。

buildModules: ['@nuxt/typescript-build']

 

【STEP4】tsconfig.jsonを作成しよう!

TypeScriptの設定ファイルtsconfig.jsonを、ルートディレクトリに新規作成し、編集しましょう。

{
  "compilerOptions": {
    "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"
  ]
}

 

【STEP5】vue-shim.d.tsを作成しよう!

vue-shim.d.tsファイルをルートディレクトリ、もしくはtypesディレクトリに新規作成して、編集しましょう。

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

 

vue-shim.d.tsファイルは、TypeScriptでコンポーネントを作るときに必要なファイルです。

初めて見る形式のファイルで戸惑いますね。。。

 

【STEP6】package.jsonをアップデートしよう!

最後に、package.jsonのscriptsセクションにある、”dev”, “build”, “start”, “generate”をすべて、

nuxt → nuxt-ts

としてください。

 

nuxt.config.jsを編集しよう!

 

これでNuxt.jsでのTypeScript環境の構築が完了しました。

確認のために

npm run dev

でローカルサーバーを立ち上げてみます。

これでTypeScript環境構築が完了!

ブラウザで確認すると、しっかり動作していますね。

 

takabee
あとは実際に自分でTypeScriptのコーディングをしていきましょう!

まとめ:TypeScriptで実際にコーディングしてみよう!

以上がNuxt.jsでTypeScriptを使うときの、6STEPでした。
ちなみにNuxt.jsでTypeScriptを書くとき、3つのAPIがあり、それぞれ書き方が違います。

①OptionsAPI
②CompositionAPI
③ClassAPI

 

それぞれの書き方については、こちらの公式ドキュメントが参考になりますよ。
Nuxt TypeScript
Options API Nuxt.js 向け TypeScript サポート

 

またNuxt.jsを4000円以下でキャッチアップするために、自分自身の経験からおすすめの参考書などをまとめてみたので、ぜひこちらもチェックしてみてください。
あわせて読みたい
Nuxt.jsの勉強法を4000円以下でまとめてみた。【1ヶ月でマスター】 こんにちは。takabeeです。 *本記事はNuxt.jsの勉強法について解説をしていく記事となっています。 この記事は「いますぐNuxt.jsを始めたい!でも方法が分からない!」...

 

takabee
では、また次の記事でお会いしましょう!
ネコ大先生
最後まで読んでくれて、ありがとうニャ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Webエンジニア兼ブロガー。Nuxt.js, Wordpress, SEO対策などの案件を承っております。両感音性難聴3級持ち。
お仕事の依頼はこちらから。
https://www.lancers.jp/profile/takabeee

コメント

コメントする

目次
閉じる