Nuxt3でsequelize7を使う

javascript code NuxtJS
Photo by Markus Spiske on Pexels.com
この記事は約4分で読めます。

ORMであるsequelizeのバージョン7(執筆時点でalpha)では、デコレータを使ったモデル定義が可能です。本記事では、Nuxt3でsequelize7を使ってデータベースを検索してその結果を返すまでのステップを記述します。

テスト環境

  • mac 10.15.7
  • Node.js v20.13.0
  • nuxt@3.11.2
  • sequelize@6.37.3
  • @sequelize/core@7.0.0-alpha.41

セットアップ

Nuxt3とsequelizeをインストールします。今回データベースはSQLite3を使います。sequelizeライブラリは、sequelize-cliによるデータベース作成のためにインストールします。sequelize-cliはsequelize7にまだ対応していないためです。なお、sequelize7では、sequelizeは@sequelize/coreというパッケージ名に変更されています。

nuxt.config.ts

デコレータを使えるようにするため、以下の設定が必要です。TypeScriptのコンパイルオプションで、experimentalDecoratorsをtrueにします。また、tsconfig.jsonにも設定を加えます。VSCode上でのエラーも消えます。

tsconfig.json

モデル定義

sequelize-cliを使って環境を初期化します。databaseディレクトリ の下に関連ファイルを置くこととします。models/index.jsは使わないので削除しておきます。

今回はSQLiteを使うのでconfig.jsonを修正します。

config/config.json

続いてモデルを作成していきます。今回は、2つのテーブルからなるシンプルな構成とします。

database/models/index.ts

ER図は以下のとおりです。

APIの作成

記事投稿と参照のAPIを定義します。

server/api/posts.get.ts

server/api/posts.post.ts

実行

準備ができましたので、アプリケーションを起動してみます。

VSCodeでデータベースを覗いてみましょう。VSCodeでSQLiteエクステンションをインストールすると、 VSCode内でデータベースを見ることができます。ちゃんとデータベースが作成され、ユーザーが作成されていることがわかります。

今回は画面を作成せず、devtoolsでAPIをコールしてみます。

まずは、記事を投稿してみます。良さそうですね。

続いて記事の参照。こちらも良さそうですね。

まとめ

Nuxt3でSequelize7を使用してみました。

Sequelize7ではモデル定義でデコレータを使用できます。なお、機能を使用するにはTypeScriptのexperimentalDecoratorsオプションを有効化する必要があります。また、nitroでも(内部でesbuildを使用)同様にオプションを有効化する必要があります。

参考リンク

サンプルプログラム

今回のサンプルプログラムは以下です。

moritetu/nuxt-sequelize7: nuxt3+sequelize7 sample (github.com)

コメント

タイトルとURLをコピーしました