「TypeScript」タグアーカイブ

nuxt.config.jsに、dotenvの環境変数を反映させる

.envファイルに設定した環境変数をnuxt.config.jsでも反映される方法。firebaseなどのプラグインを設定するときに、便利。

動作環境

.env.* ファイル

各環境毎の.envファイルをつくる。

your-app
|-- .env.development 開発サーバ用
|-- .env.local       ローカル開発用
|-- .env.production  本番サーバ用
`-- package.json

例えば、次の様な環境変数を設定する

FIREBASE_API_KEY="*****************"
FIREBASE_AUTH_DOMAIN="*****************.firebaseapp.com"
FIREBASE_PROJECT_ID="*****************"
FIREBASE_STORAGE_BUCKET="*****************.appspot.com"
FIREBASE_MESSAGING_SENDER_ID="*****************"
FIREBASE_APP_ID="*****************"
FIREBASE_MEASUREMENT_ID="*****************"

nuxt.config.js

nuxt.config.js内で、.env.*ファイルで設定した環境変数を読み込むには、以下の設定を冒頭の2行に加える。

// ...
const envPath = `.env.${process.env.NODE_ENV || 'local'}`
const envSet = require('dotenv').config({ path: envPath })

// ...

export default defineNuxtConfig({

//..

})

nuxt.config.js内から、次の様な形で環境変数を読み込める。

//..

export default defineNuxtConfig({

//..

  firebase: {
    config: {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
      measurementId: process.env.FIREBASE_MEASUREMENT_ID
    },
    services: {
      auth: true,
      firestore: true,
    },
  },

//..

package.json

dotenvとcross-envを組み合わせて、以下の様なスクリプトを組む

// ..

    "generate:prod": "cross-env NODE_ENV='production' nuxt generate",
    "generate:dev": "cross-env NODE_ENV='development' nuxt generate",

// ..

NODE_ENVの引数で、開発環境を指定する

Nuxt(Vue)の<template>でエラーが出る

VS Code上で、<template>でエラーが出る場合、tsconfig.jsonの設定を変更

動作環境

*.vue

1行目の<template>でエラーが出る

tsconfig.jsonの設定

以下の設定を追加する

{
  "compilerOptions": {
    ...
    "jsx": "preserve",
    ...
    "vueCompilerOptions": {
      ...
      "experimentalDisableTemplateSupport": true
    },
}

Nuxt.jsでSpotifyのoEmbed APIをプラグイン化

Spotifyでは、oEmbedの方法で、未ログインでも再生ができるWEB向けのiFrameプレイヤーをAPIから取得できる。これをNuxt.jsのプラグイン化する方法。

通常、iFrameのURLをHTMLに記述してプレイヤーを埋め込むが、そのiFrameの内容をJSON形式でも取得できる。

動作環境

通常のiFrame

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/25Wlc36nhO0sd8mNOQbOv1?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>

このようHTMLを埋め込むと、

と、表示される。

取得API

既出のiFrameのソースコードをこのAPIで取得可能

https://open.spotify.com/oembed?url=https%3A%2F%2Fopen.spotify.com%2Fplaylist%2F{id}

{id}の部分をプレイリストのIDを指定する。

取得結果

{
  html: "<iframe style="border-radius: 12px" width="100%" height="380" title="Spotify Embed: 昼の放送 #27" frameborder="0" allowfullscreen allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" src="https://open.spotify.com/embed/playlist/25Wlc36nhO0sd8mNOQbOv1?utm_source=oembed"></iframe>",
  width: 456,
  height: 380,
  version: "1.0",
  provider_name: "Spotify",
  provider_url: "https://spotify.com",
  type: "rich",
  title: "昼の放送 #27",
  thumbnail_url: "https://mosaic.scdn.co/300/ab67616d0000b273115c265fae60f66103a965c9ab67616d0000b2736dba235db4ccbec24606f0d9ab67616d0000b273bf6bcb4f1d2c4c49e67d6999ab67616d0000b273d6c059712a4916f1b278405a",
  thumbnail_width: 300,
  thumbnail_height: 300
}

実装的には、プレイリストのタイトル、サムネイル画像のURLを取得できる点が便利。

プラグイング化

import { Plugin } from '@nuxt/types'
import { NuxtHTTPInstance } from '@nuxt/http'

class SpotifyEmbed {
  http: NuxtHTTPInstance

  constructor(http: NuxtHTTPInstance) {
    this.http = http
  }

  /**
   * iFrameを取得
   * @param id spotifyのプレイリストのid
   * @returns
   */
  public async get(id: string): Promise<any> {
    try {
      return await this.http.$get(
        `https://open.spotify.com/oembed?url=https%3A%2F%2Fopen.spotify.com%2Fplaylist%2F${id}`
      )
    } catch (error) {
      console.log('response error', error)
    }
  }
}

export const spotifyEmbedPlugin: Plugin = (context, inject) => {
  const spotifyEmbed = new SpotifyEmbed(context.app.$http)

  inject('spotifyEmbed', spotifyEmbed)
}
export default spotifyEmbedPlugin

declare module '@nuxt/types' {
  interface Context {
    $spotifyEmbed: SpotifyEmbed
  }
}

.vueファイルからはこういう形で使う

<script lang="ts">
...

import { useSpotify } from '@/composables/spotifyState'
import {
  defineComponent,
  ref,
  useContext,
} from '@nuxtjs/composition-api'
...

export default defineComponent({
    const { app } = useContext()
...

const spotifyId = '25Wlc36nhO0sd8mNOQbOv1'

...

  setup(props) {
    ...

    async created() {
      const searchResult = await app.$spotifyEmbed.get(spotifyId)
    }

    ...
  }
}

asyncを宣言しているメソッド内で、await で実行結果を受け取ることができる。後は、ref宣言した変数にhtml部分を入れて、テンプレート内に表示することが可能。

    const spotifyIFrame = ref({ html: '' })
      const searchResult = await app.$spotifyEmbed.get(spotifyId.value)
      spotifyIFrame.value = searchResult

Vuetifyを使ってテンプレートに表示する例

<div v-html="spotifyIFrame.html"></div>

refで初期化する際に、htmlを空白にすることで、レンダリングのエラーを回避している

Nuxt.js + TSで読み込むJSONデータの型を定義

外部API、もしくは自データのJSONをTypeScriptで型定義して読み込む方法

動作環境

JSON

次のようなJSONを読み込むとする

[
  {
    "id": "25Wlc36nhO0sd8mNOQbOv1",
    "category": "dayprogram",
    "title": "昼の放送 #27",
    "count": 12,
    "total": 3397723,
    "cassetteType": 1
  },
  {
    "id": "33ewifXD4g0t1KfiGkzSlb",
    "category": "dayprogram",
    "title": "昼の放送 #26",
    "count": 11,
    "total": 2864799,
    "cassetteType": 2
  },
  {
    "id": "3fwnwowsaDzdW6GEZuU2r2",
    "category": "dayprogram",
    "title": "昼の放送 #25",
    "count": 11,
    "total": 2441976,
    "cassetteType": 1
  }
]

JSONファイルなどを置く場所は、/data以下に置く

型指定

次にJSONに含まれる配列内のオブジェクトの型について定義する。

export interface Playlist {
  id: string
  cassetteType?: number
  category: string
  title: string
  count: number
  total: number
}

ここでは、Playlistというインターフェースを定義している。
定義されたプロパティは、基本的に必須になるが、

  cassetteType?: number

という様に、プロパティ名の後ろに?を付けると、非必須項目になり、省略することができる。

JSONと型定義の関連付け

次に、読み込まれるJSONファイルの型宣言をし、型定義と関連付けを行う。

import { Playlist } from '~/lib/playlist'

declare module '~/data/playlists.json' {
  const data: Playlist[]

  export default data
}

このJSONは、Playlist型の配列を持つJSONなので、

  const data: Playlist[]

と記述し、Playlistの配列であることを定義する。

JSONファイルのインポート

実際に、スクリプト内にJSONを読み込むには、

<script lang="ts">
...

import playlistJson from '~/data/playlists.json'

...
</script>

の様な形でインポートする。こうすることによって、IDEなどでも、定義された型で参照することができるようになる。

Cannot find module ‘#app’ or its corresponding type declarations. と言われたら

エラー内容

Cannot find module '#app' or its corresponding type declarations.

というエラーが、Nuxt Bridge(TypeScript)の開発時に、VS Codeで発生。

例えば、このようなコードでエラーが発生する

import { readonly, useState, Ref } from '#app'

動作環境

Nuxt Bridgeの導入環境

  • node 16.13.1
  • npm 8.1.2
  • nuxt-edge 2.16.0
  • @nuxt/bridge 3.0.0
  • Type Script 4.6.2
  • Visual Studio Code 1.65.2
  • Volar 0.33.2

解決策

tsconfig.jsのpathsを以下の様に修正

"paths": {
  "~/*": ["./*"],
  "@/*": ["./*"],
  "#app": ["./node_modules/@nuxt/bridge/dist/runtime/index.d.mts"]
},

原因

nuxiが生成する.nuxt/tsconfig.jsonで設定される#appのパスが、TypeScript用のファイルに通っていないのが原因の模様。

"#app": [
  "node_modules/@nuxt/bridge/dist/runtime/index"
],

TypeScriptでlog4jsを使う方法

インストール

$ npm i -S log4js @types/log4js

使い方

コンソールとファイルに、ログを同時出力。

import { configure, getLogger } from "log4js";

configure({
  appenders: {
    console: {
      type: "console"
    },
    logfile: { type: "file", filename: "log/app.log" }
  },
  categories: { default: { appenders: ["console", "logfile"], level: "error" } }
});

const logger = getLogger();

logger.level = "debug";
logger.debug("Some debug messages");
logger.error("aha!");

出力結果

[2019-10-20T10:58:43.835] [DEBUG] default - Some debug messages
[2019-10-20T10:58:43.839] [ERROR] default - aha!

設定を変えると、ログレベルごとに出力先を変えたり、ログの出力のテンプレート（レイアウト）を変更できたりする。

log4jsのドキュメント
https://log4js-node.github.io/log4js-node/

日付の形式について
https://www.npmjs.com/package/date-format

TypeScript + node.js + VisualStudioCodeの開発環境

node.jsでアプリケーションをつくるのに、TypeScriptで書いて、Visual Studio Codeを開発環境とする方法を探る

参考になったサイト

https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49
https://qiita.com/kurogelee/items/cf7954f6c23294600ef2
https://github.com/TypeStrong/ts-node/issues/46#issuecomment-437758378

ここのボイラープレートをテンプレートにすると便利です。必要なnpmパッケージ、設定ファイルがはいっています。git cloneなどでローカルに。
https://github.com/notakaos/typescript-node-base

package.json

{
  "name": "typescript-node-base",
  "keywords": [],

  "version": "0.1.0",
  "main": "dist/index.js",
  "scripts": {
    "dev": "ts-node ./src/index.ts",
    "dev:watch": "ts-node-dev --respawn src/index.ts",
    "clean": "rimraf dist/*",
    "tsc": "tsc",
    "build": "npm-run-all clean tsc",
    "start": "node ."
  },
  "keywords": [],
  "author": "YOUR NAME",
  "license": "ISC",
  "description": "",
  "dependencies": {},
  "devDependencies": {
    "@types/node": "^12.7.4",
    "npm-run-all": "^4.1.5",
    "rimraf": "^2.7.1",
    "ts-node": "^8.3.0",
    "ts-node-dev": "^1.0.0-pre.42",
    "typescript": "^3.6.2"
  }
}

L9: --respawnを指定することで、サーバ型ではないスクリプトでも、実行後終了せずに待機させ、更新→再読み込み→再起動が可能に。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

sourceMapは有効にしましょう。Debugが効くようになります。

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ts-node[debug]",
      "type": "node",
      "request": "launch",
      "args": ["${workspaceFolder}/src/index.ts"],
      "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
      "sourceMaps": true,
      "cwd": "${workspaceRoot}",
      "restart": true,
      "protocol": "inspector"
    }
  ]
}

L8: 任意のファイルを指定

https://github.com/TypeStrong/ts-node/issues/46#issuecomment-437758378
の投稿が参考になりました。