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

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

by

前回の記事ではアプリの概要とデザインを全体像として決めました。

今日は、もう少し具体的なフロントエンドのデザインを設計していきます。ファイル構成（どの段階でコンポーネントにするか）とPrimeVueのライブラリを見ながらサクサク進めていきたいです。

ちなみにバックエンドも同時に進めても良かったのですが、割と簡単な作業になりそうなので、モックのJSONファイルで先にフロントエンドでテストをしてからでも良いと判断しました。ですので先にVueのアプリケーションから固めていきます。

作業日2022年12月10日
作業にかけた時間3時間
合計作業時間6時間
作業内容Figmaのデザインを形にしていく
ファイル構成を考える
Vueコンポーネントの作成
Piniaのインストール

PrimeFlexのインストール

前回入れていなかったので、今回使うCSSライブラリのPrimeVueで使うCSSユーティリティをインストールします。

npm install primeflex

でmain.jsに下記を追加
import "/node_modules/primeflex/primeflex.css";

これでクラスを使ってマージンの設定やFlexの設定ができるようになりました。

次にGoogleフォントを追加しました。CDNでfontをリンクさせました、必要に応じてフォントのファイルをダウンロードしてローカルから使うようにすることも考えています。

main.jsに下記のimport ‘@/assets/global.css’をインポートしました。

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700;800&family=Noto+Sans+JP:wght@400;500;700;900&display=swap");

* {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

スタイルはできるだけPrimeVueのものを使い、カスタムしたい場合は.Vueファイルの下に<style></style>を作成してそこにCSSを書きました。

ざっくりと全体像を作成しました。

ユーザーエクスペリエンスの向上のために下記のことを先に達成したいです。

  • ボタンを押してもその下の画面が動かないようにしたい。
  • ボタンの要素が多いのでタイトルをクリックしたら内容が表示されるようにしたい。

これを実現するにはいくつか方法がありますが、PrimeVueのコンポーネントでダイナミックダイアログというものがあったのでこれで対応していきます。

さらに上記でごちゃごちゃした検索機能とか、ボタンの枠を固定してボタンを押すとこのダイアログが表示されるようにします。なのでこれらはコンポーネントにまとめてあげましょう。

とりあえずポップアップが開くところまではOKですね。

Piniaのインストール

次にPiniaをインストールします。単純にreactive()でオブジェクトとしてデータまとめても良いのですが、propsでごちゃごちゃしていくと後からの修正が大変なので、グロバールでアクセスできるPiniaの方がよいと判断しました。

Piniaの使い方はこちらで説明しています。

npm install pinia

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

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')

その後にstore.jsというファイル名でアプリに使うデータをPiniaを使ってここに保管させます。

どのようなデータを保管するか具体的な構成は次回までに考えておきます。

とりあえずこんな感じでPiniaで作成したStoreデータをメインの画面に表示させることができました。

Piniaのファイルはこのように書きました。

import { defineStore } from 'pinia'
import { reactive } from 'vue';

export const useStore = defineStore('member', ()=> {
  const finderHistory = reactive({
    historyOne: null,
    historyTwo: null,
    historyThree: null
  })

  return {
    finderHistory,
  }
})

App.VueのファイルにはこのようにPiniaをインポートしました。

import { useStore } from "@/store/store.js";

const store = useStore();
const finderHistory = store.finderHistory

では、次回にポップアップの中身と検索機能を作成していきたいと思います。

お疲れ様です。

　JSひろば