NuxtにPiniaをインストールする方法

NuxtにPiniaをインストールする

今日はNuxtJSのウェブアプリのプロジェクトに状態管理システムのPiniaをインストールする方法を紹介します。 VueでPiniaを使ったことがある人、Nuxtのコンフィグファイルを触ったことがある人はなんとなくイメージがつかめると思います。 Piniaのインストール Nuxtのプロジェクトが設定できたところで、Piniaの公式サイトの説明に従いインストールを進めていきましょう。 コマンドラインから下記の通りPiniaをインストールします。 npmを使っている人はERESOLVE unable to resolve dependency tree errorというエラーが出るかもしれません。 その場合は、package.json:に下記の行を追加して、再度試してみて下さい。 次に、NuxtのコンフィグファイルにPiniaを登録します。 setup()の外でPiniaを使う場合 Vueの書き方で<script setup>があります。その外でPiniaを使いたい場合はpiniaオブジェクトをuseStore()に渡してあげるようにしましょう。慣習としてプロジェクトのルート直下にstoresディレクトリを作成してPiniaのファイルを格納するようにするようにします。 Piniaファイルを作成 ではsotesディレクトリ直下にJSファイルでPiniaを作成します。<script setup>に近い方法で書く方法を紹介しているので参考にしてください。この方法だとJavaScriptのやり方で書けるので見やすいと思いました。 イメージとしてはこのような感じになります。 お疲れ様です。

JSひろば開発6日目:Vueアプリのデプロイとデザイン

JSひろばアプリ作成まで~6日目

前回までの記事では、Djangoをデプロイし実際のドメインからアクセスできるところまで行いました。今日の作業ではバックエンドのDjangoアプリで作成したAPIのエンドポイントとVueのウェブアプリから実際にAPIのリクエストを送りバックエンドからデータをもらえるようにします。あとデザインをキレイにしましょう。 作業日 2022年12月16日 作業にかけた時間 8時間 合計作業時間 24時間 作業内容 Djangoに実際のデータを入力VueアプリにAxiosをインストールAPIコールのリスポンスをPiniaに保管実行ボタンの作成アニメーションの設定highlight.jsを設定 ではDjangoのアドミンページから実際のデータを入力してAPIのエンドポイントから取得できるようにします。 VueアプリにAxiosをインストール 次に、EventService.jsというAPI関連のコールをまとめた別ファイルを作成しました。 次にPiniaのファイルにAPIコールのファンクションを保管しておきPiniaが読み込まれたらデータをフェッチするようにします。どこでこのファンクションと発火させるかは後から変更するかもしれません。 ここで、APIのGETリクエストを送ると予定通りにCORSポリシーでDjangoからブロックされてしまいました。 詳しい対応方法はDjango REST API COR Headersの使い方の記事を参照してください。ではこの記事通りにいったんDjangoのアプリを更新してまた戻ってきましょう。 あと、Vue側のアプリケーションのindex.htmlのheadタグ内に下記のmetaを追加しました。 Vueアプリの検証 ではAPIの問題が解決したところでこのPrimeVueのターミナルで問題発生。。このUIだと改行ができないことが発覚しました。まあターミナルなのでそうでしょうが。なのでPrimeVueのTextAreaのコンポーネントと入れ替えました。 Vueアプリのデプロイ Vueアプリのデプロイはこの記事を参考にして行いました。これもLet’s EncryptとCertbotを使ってHTTPSからアクセスできるようにしました。 とりあえず、Vueアプリがデプロイできるようになりました。後はUIの調整と細かい設定をして完了です! アニメーションで使ったCSSはこちらの記事に書いています。Animistaというサイトです。 highlight.jsの追加 このままだと、テキストエディタのように色でハイライトされないので見づらいですね。highlight.jsをインストールしてみます。ここで入力したときと同時に1文字ずつでJavaScriptのキーワードかを判定してハイライトするようにしたかったのですが、うまくいきませんでした。テキストエリアをハイライトさせるのが難しそうでしたので諦めました。 しかし、他の方法でコマンドを実行したときにコードがハイライトされるようにできたので良しとします! もし、単純にダイナミックでないコードをハイライトしたいのであればVueのコンポーネントで使えるHighlight.jsのプラグインもあるので試してください。 とりあえず今日はここまで!

JSひろばアプリ開発3日目:Vueアプリの全体像

JSひろばアプリ作成まで~3日目

前回の記事では、Piniaを入れて大まかなレイアウトを作成しました。 今回はPiniaやemit()、テンプレートrefを使うのでVueの要素が盛りだくさんです。 今日で大まかなフロントエンドの部分を完了させます! 作業日 2022年12月12日 作業にかけた時間 3時間 合計作業時間 9時間 作業内容 ボタンのコンポーネントの作成モックのデータを作成グローバルで使うデータをPiniaに保管させるEmitを使いデータを親コンポーネントに送るライブラリコンポーネントのRefにアクセスする 3つのファインダーコンポーネント では、このJSひろばのアプリのメイン機能としてこの4つのファインダーがありましたがおすすめ検索機能はキーワード検索とほぼ同じなのでいったん取り除くことにしました。 これは、ユーザーがJavaScriptのサンプルコードを見つけるための機能になります。 ボタンのコンポーネント 各ボタンを押すとそれぞれのボタンに付属した内容が同じダイアログ(ポップアップ)のコンポーネント内で表示されるようにします。 まずは、各4種類の検索機能のコンポーネントをcomponents/finderフォルダに作成します。最初の中身はただのテキストでOKです。次にApp.vueに戻りPrimeVueにあるDialogコンポーネントをコピペします。 それから、各ボタンを押したときにそれぞれのコンポーネントの内容が表示されるようにロジックを作成すればOKです。 途中経過ですが、こんな感じになりました。 実際の画面はこんな感じです。 キーワード検索 まだ、データベースの細かい構成とデータの量を吟味していないので詳しくはすすめられません。ここで検討すべき課題はこちらになります。 このファインダー機能のコンポーネントは複雑になるので作成はいったん後回しにします。 Piniaの作成 Piniaを使ってグローバルにアクセスできるストレージを作成します。とりあえず、モックのJSONファイルを作成してテーブルとして表示できるところまでやってみます。 これを各テーブルで表示させるとこんな感じになりました。 履歴のデータを保管する 各コマンドを実行した後に、その履歴をオブジェクトの配列に保管します。常に最新の履歴が先に来るようにしたいため、pop()ではなく、unshift()を使っています。 コンソール関係のコードはこのような感じです。 これで入力したコマンドがオブジェクトとして配列に保管されました。テーブルにも問題なく表示されていることが分かります。 コードをコンソールにコピーする機能 では、検索機能で探したコマンドをコンソールにコピーするボタンのファンクションを作成していきます。ドキュメンテーションにはないですがこのターミナルがどうやって入力されたテキストをバインドしているか見てみましょう。 VueのGoogleエクステンションツールを使います。 VueのタブからTerminalのコンポーネントを開きます。すると、DataのところにcommandTextがあるのがわかります。ここがnullになっていますがターミナルにテキストが入力されると同時に更新されました。 では、このデータにコピーしたいコピーをバインドさせるようにします。 まず、ここのcommandTextにアクセスするには<Terminal ref=”terminal”/>のようにrefを使ってこのコンポーネント内にあるデータ、関数にアクセスすることができますね。(Compostion APIの場合は対象のコンポーネント側でexpose()されて公開されている必要がありますが。) あとは、テーブル側のボタンにemit()を設定して親コンポーネントにコマンドのデータを送ってあげます。 親コンポーネント側では、Emitを受け取ったときに発火するイベントを下記の様に設定してあげました。 細かいスタイルの変更 ここまでできたら、大体のレイアウトは決まったのでスタイルをキレイにしていきます。 特に、モバイルとデスクトップで共通のアプリを使えるようにしたいのでその設定も必要です。 とりあえずこんな感じになりました。ポップアップで表示されるダイアログは実際のデータが入ってからスタイリングをしたいと思います。 では、フロントエンドはこれくらいにして次回からにバックエンドにかかりましょう。 お疲れ様です。

JSひろばアプリ開発2日目:スタイルの設定

JSひろばアプリ作成まで~2日目

前回の記事ではアプリの概要とデザインを全体像として決めました。 今日は、もう少し具体的なフロントエンドのデザインを設計していきます。ファイル構成(どの段階でコンポーネントにするか)とPrimeVueのライブラリを見ながらサクサク進めていきたいです。 ちなみにバックエンドも同時に進めても良かったのですが、割と簡単な作業になりそうなので、モックのJSONファイルで先にフロントエンドでテストをしてからでも良いと判断しました。ですので先にVueのアプリケーションから固めていきます。 作業日 2022年12月10日 作業にかけた時間 3時間 合計作業時間 6時間 作業内容 Figmaのデザインを形にしていくファイル構成を考えるVueコンポーネントの作成Piniaのインストール PrimeFlexのインストール 前回入れていなかったので、今回使うCSSライブラリのPrimeVueで使うCSSユーティリティをインストールします。 これでクラスを使ってマージンの設定やFlexの設定ができるようになりました。 次にGoogleフォントを追加しました。CDNでfontをリンクさせました、必要に応じてフォントのファイルをダウンロードしてローカルから使うようにすることも考えています。 main.jsに下記のimport ‘@/assets/global.css’をインポートしました。 スタイルはできるだけPrimeVueのものを使い、カスタムしたい場合は.Vueファイルの下に<style></style>を作成してそこにCSSを書きました。 ざっくりと全体像を作成しました。 ユーザーエクスペリエンスの向上のために下記のことを先に達成したいです。 これを実現するにはいくつか方法がありますが、PrimeVueのコンポーネントでダイナミックダイアログというものがあったのでこれで対応していきます。 さらに上記でごちゃごちゃした検索機能とか、ボタンの枠を固定してボタンを押すとこのダイアログが表示されるようにします。なのでこれらはコンポーネントにまとめてあげましょう。 とりあえずポップアップが開くところまではOKですね。 Piniaのインストール 次にPiniaをインストールします。単純にreactive()でオブジェクトとしてデータまとめても良いのですが、propsでごちゃごちゃしていくと後からの修正が大変なので、グロバールでアクセスできるPiniaの方がよいと判断しました。 Piniaの使い方はこちらで説明しています。 ではPiniaのインストールが完了したらmain.jsに追加します。 その後にstore.jsというファイル名でアプリに使うデータをPiniaを使ってここに保管させます。 どのようなデータを保管するか具体的な構成は次回までに考えておきます。 とりあえずこんな感じでPiniaで作成したStoreデータをメインの画面に表示させることができました。 Piniaのファイルはこのように書きました。 App.VueのファイルにはこのようにPiniaをインポートしました。 では、次回にポップアップの中身と検索機能を作成していきたいと思います。 お疲れ様です。

VueでPiniaを使ってみよう

VueではState Management SystemのVuexが公式のプラグインとして紹介されてきました。しかし、最新のVue3ではPiniaを使うようにとVue生みの親のEvan Youさんもお勧めしています。

では、State Management(状態管理)って何でしょうか?

State Management(状態管理)

State Managementとはいわばストレージ/ストア(倉庫)のことです。アプリケーションでストアを作っておいてそこにデータを保管できるようになります。

例えばユーザーがログインしたときのトークン、APIでフェッチしたデータ、アプリケーションの状態(例:フォームが提出したとかの状態)があげられます。

PiniaのAPIの使い方

PiniaはVue2でもVue3でも使う事ができます。また、Options API(一般的に初心者向け)でもCompotion APIの書き方でもどちらでも対応しています。私の個人的な意見ではVue3でComspostion APIで書く方法が一番良いと思います。

なぜPiniaなのか

Piniaを使う事でこの状態管理システム(Store Library)を各コンポーネントやページのどこでも使う事ができます。

もちろん、同じことが export const state = reactive({}) でもできますよね。

しかし、このやり方だとセキュリティに脆弱性があり、何を管理しているのか見られてしまう可能性があります。

この他にもデベロッパー用のツールがあったり、サーバー側でもレンダーにも対応することができるなど色々メリットがあります。

Piniaをインストール

npmかyarnのコマンドでインストールしましょう。

yarn add pinia
# or with npm
npm install pinia

※NuxtJSの場合はこちらから

インストールが完了したらmain.jsにPiniaを追加します。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

Piniaのファイルを作成しよう

ではPiniaが追加できたらJSファイルでストアしたいデータを保管できる場所を作っていきましょう。

慣習的にsrcディレクトリの直下にstoreというフォルダを作成してそこにJavaScriptファイルで下記のコードを作るのが一般的になります。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    counter: 0
  }),
  getters: {
    doubleCount: (state) => state.counter * 2
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})
  • stateは保管するデータの初期値をリターンするファンクションです。(dataと同じ概念)
  • getters は stateを使ってデータをモディファイ(変更)したいときに使うファンクションです。(copmputedと同じ概念)
  • actionsはasyncにできるファンクションのことです。(methodと同じ概念)

<script setup>的なPiniaの使い方

他のサイトでは上記のやり方でPiniaを使っていますが、今年からVueで使えるようになった<script setup>を使ったやり方に合わせてPiniaも書きたい人は下のやり方をお勧めします。

import { defineStore } from 'pinia'
import { ref } from 'vue';
import EventService from "@/plugins/EventService";

export const useMemberStore = defineStore('member', ()=> {

  const data = ref(null)

  const getData = () => {
    EventService.getMember()
      .then((response) => {
        data.value = response.data;
      })
      .catch((error) => {
        console.log("data:" + error);
      });
  }

  return {
    data,
    getData
  }
})

上のコードを見ても分かるようにgetterとかactionsとかの概念はなく普通のJavaScriptのコードで<script setup>と同じようにVanilla JavaScriptに近い状態で書くこともできます。

個人的にはこちらの方が書きやすいと思ったので是非試してみてください。

ではこれをコンポーネントから読み込めるようにしましょう。

<script setup>

import { useOfficeStore } from "@/stores/members/office";

const officePinia = useOfficeStore();

const officeData = officePinia.data
</script>

このようにどのコンポーネントからでもStoreにアクセスでき、グローバルにデータを管理することで後から見やすくなりますね。