自作アプリのプログラムをVue.jsに移植する

in2

2020年7月17日 21:44

自作していたアプリがあるんだけど、WEBアプリ開発をやったこともなかったためにフレームワークも使わず、PureJSでひとっとび(嘘)

目的

いったんはそれでリリースしたものの、今後複数人で開発を進めること、運用性、拡張性を考慮した場合、このままではいかんということで、バックエンドとインフラを開発してくれている仲間からの指示に従ってNuxt.jsに移植することにした。

WEBアプリの開発日記を何も書いていなかったため（ばかやろう）、これを機会に自分のコードをレビューしながら移植作業を進めていきたい。

あと、この本を買ったので気を付けながら取り組む。

ひとまずNuxt.jsとVue.jsについての概観をつかみたい

とりあえず「Vue.js　WEBアプリ」「Nuxt.js　WEBアプリ」あたりでブログやら記事やらを漁って、概念を抽出する。

・MVVMフレームワーク設計
・ディレクトリ構造
　・assets
　・components
　・layouts
　・middleware
　・pages
　・plugins
　・static
　・store
　・nuxt.config.js
　・package.json
・単一ファイルコンポーネント

とりあえず現段階ではこんな感じ？とりあえず基礎的なところをドキュメントでさらう。

むむむ、いまいちパーツをどう分ければいいかわからない...

コードの書き方はある程度までは追えるとして、Nuxt.js（Vue.js）では、そもそもの開発における根本概念が違いそうなので一度そこから学ばないと手も足も出ない。以下の記事に端的な概念が記載されていた。

・UI コンポーネントごとにコードが分離される
・影響範囲を Vue ファイルの中に閉じ込めることができる
・保守しやすくなる

これは利点でありながらNuxt.jsの開発概念なんじゃないか？
言い換えれば、

・UIコンポーネントごとにコードを分離し
・影響範囲をVueファイル内に閉じ込め（*.Vueごとに機能を独立させ）
・保守管理をしやすいように開発しましょう

うんうん。そうなると、「アトミックデザイン」が思い出される。ってことはアトミックデザインの概念を学ぶとよさそう。

ひとまず、これ以上分割できない分子から組んでいくか

チームとサービスのロゴ

もともとはこんな感じ。

<header>
    <p class="header__logo__synschismo"></p>
    <p class="header__logo__safetypark"></p>
    ~
</header>

<p>タグの中にSVGがインラインで入ってる。かなり煩雑だし、外在化できるVue.jsは本当にありがたい。

ひとまず1つずつコンポーネント化。Logo~.vue

<template>
 <div>
   <svg width="137" height="31" viewBox="0 0 137 31" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M14.6278 3.45L13.4578 6.12C12.6378 5.82 11.8178 5.58 10.9978 5.4C10.1978 5.22 9.42778 5.13 8.68778 5.13C7.42777 5.13 6.41777 5.39 5.65777 5.91C4.91777 6.43 4.54777 7.09 4.54777 7.89C4.54777 8.57 4.81777 9.12 5.35777 9.54C5.89777 9.94 6.56777 10.31 7.36778 10.65C8.16777 10.97 9.03777 11.3 9.97777 11.64C10.9178 11.96 11.7878 12.38 12.5878 12.9C13.3878 13.42 14.0578 14.08 14.5978 14.88C15.1378 15.66 15.4078 16.67 15.4078 17.91C15.4078 18.87 15.2278 19.74 14.8678 20.52C14.5278 21.28 14.0078 21.94 13.3078 22.5C12.6278 23.06 11.7678 23.49 10.7278 23.79C9.70777 24.09 8.50777 24.24 7.12777 24.24C6.24777 24.24 5.44777 24.18 4.72777 24.06C4.02777 23.94 3.38777 23.79 2.80777 23.61C2.24777 23.41 1.74777 23.2 1.30777 22.98C0.887774 22.76 0.527774 22.56 0.227774 22.38L1.66777 19.53C2.46777 19.99 3.35777 20.36 4.33777 20.64C5.31777 20.92 6.20777 21.06 7.00777 21.06C7.40777 21.06 7.89777 21.01 8.47778 20.91C9.07778 20.81 9.64777 20.64 10.1878 20.4C10.7278 20.14 11.1878 19.8 11.5678 19.38C11.9678 18.96 12.1678 18.43 12.1678 17.79C12.1678 17.21 12.0078 16.72 11.6878 16.32C11.3878 15.9 10.9778 15.54 10.4578 15.24C9.95777 14.92 9.37777 14.64 8.71777 14.4C8.07777 14.14 7.41777 13.88 6.73777 13.62C6.05777 13.34 5.38777 13.05 4.72777 12.75C4.08777 12.45 3.50777 12.09 2.98777 11.67C2.48777 11.23 2.07777 10.73 1.75777 10.17C1.45777 9.59 1.30777 8.9 1.30777 8.1C1.30777 7.36 1.45777 6.63 1.75777 5.91C2.05777 5.19 2.50777 4.55 3.10777 3.99C3.70777 3.43 4.44777 2.98 5.32777 2.64C6.22777 2.3 7.26777 2.13 8.44777 2.13C9.16777 2.13 9.86778 2.19 10.5478 2.31C11.2478 2.43 11.8778 2.57 12.4378 2.73C12.9978 2.87 13.4678 3.01 13.8478 3.15C14.2478 3.29 14.5078 3.39 14.6278 3.45ZM16.8462 17.85C16.8462 16.93 17.0162 16.07 17.3562 15.27C17.7162 14.45 18.1962 13.74 18.7962 13.14C19.3962 12.52 20.0862 12.03 20.8662 11.67C21.6662 11.31 22.5162 11.13 23.4162 11.13C24.0162 11.13 24.5662 11.21 25.0662 11.37C25.5662 11.51 25.9962 11.69 26.3562 11.91C26.7162 12.13 27.0062 12.36 27.2262 12.6C27.4462 12.84 27.5962 13.05 27.6762 13.23L27.7962 11.46H30.2562V24H27.6762V22.41C27.5762 22.57 27.4162 22.76 27.1962 22.98C26.9762 23.2 26.6862 23.41 26.3262 23.61C25.9862 23.79 25.5762 23.95 25.0962 24.09C24.6162 24.23 24.0662 24.3 23.4462 24.3C22.4862 24.3 21.5962 24.13 20.7762 23.79C19.9762 23.43 19.2862 22.96 18.7062 22.38C18.1262 21.78 17.6662 21.09 17.3262 20.31C17.0062 19.53 16.8462 18.71 16.8462 17.85ZM19.4262 17.7C19.4262 18.28 19.5262 18.82 19.7262 19.32C19.9462 19.82 20.2362 20.25 20.5962 20.61C20.9562 20.97 21.3862 21.26 21.8862 21.48C22.3862 21.68 22.9362 21.78 23.5362 21.78C24.1362 21.78 24.6862 21.68 25.1862 21.48C25.7062 21.26 26.1462 20.97 26.5062 20.61C26.8862 20.23 27.1762 19.8 27.3762 19.32C27.5762 18.82 27.6762 18.28 27.6762 17.7C27.6762 17.12 27.5762 16.59 27.3762 16.11C27.1762 15.61 26.8862 15.18 26.5062 14.82C26.1462 14.46 25.7062 14.18 25.1862 13.98C24.6862 13.76 24.1362 13.65 23.5362 13.65C22.9362 13.65 22.3862 13.76 21.8862 13.98C21.3862 14.18 20.9562 14.46 20.5962 14.82C20.2362 15.18 19.9462 15.61 19.7262 16.11C19.5262 16.59 19.4262 17.12 19.4262 17.7ZM32.3708 13.95V11.43H34.5008V8.52C34.5008 5.9 35.1108 3.96 36.3308 2.7C37.5708 1.42 39.3208 0.749999 41.5808 0.69V3.15C40.0208 3.23 38.8808 3.73 38.1608 4.65C37.4408 5.57 37.0808 6.88 37.0808 8.58V11.43H41.0408V13.95H37.0808V24H34.5008V13.95H32.3708ZM53.0671 22.53C52.4671 23.07 51.7371 23.5 50.8771 23.82C50.0171 24.14 49.1371 24.3 48.2371 24.3C47.3171 24.3 46.4471 24.13 45.6271 23.79C44.8271 23.43 44.1271 22.96 43.5271 22.38C42.9271 21.78 42.4471 21.08 42.0871 20.28C41.7471 19.48 41.5771 18.63 41.5771 17.73C41.5771 16.83 41.7471 15.98 42.0871 15.18C42.4471 14.38 42.9271 13.68 43.5271 13.08C44.1271 12.48 44.8171 12.01 45.5971 11.67C46.3971 11.31 47.2471 11.13 48.1471 11.13C49.5671 11.13 50.7971 11.56 51.8371 12.42C52.8971 13.26 53.6571 14.37 54.1171 15.75C53.4971 15.97 52.7871 16.24 51.9871 16.56C51.1871 16.88 50.3571 17.22 49.4971 17.58C48.6371 17.92 47.7771 18.26 46.9171 18.6C46.0571 18.94 45.2571 19.25 44.5171 19.53C44.8571 20.21 45.3471 20.76 45.9871 21.18C46.6471 21.58 47.3771 21.78 48.1771 21.78C48.7171 21.78 49.2571 21.68 49.7971 21.48C50.3571 21.28 50.8071 21.01 51.1471 20.67L53.0671 22.53ZM50.9071 15.15C50.6671 14.65 50.2871 14.28 49.7671 14.04C49.2471 13.78 48.7171 13.65 48.1771 13.65C47.5971 13.65 47.0571 13.76 46.5571 13.98C46.0771 14.2 45.6571 14.5 45.2971 14.88C44.9371 15.24 44.6471 15.66 44.4271 16.14C44.2271 16.62 44.1271 17.11 44.1271 17.61C44.1271 17.71 44.1271 17.78 44.1271 17.82C44.1471 17.86 44.1571 17.89 44.1571 17.91C44.6771 17.71 45.2371 17.49 45.8371 17.25C46.4571 16.99 47.0671 16.74 47.6671 16.5C48.2671 16.24 48.8471 16 49.4071 15.78C49.9671 15.54 50.4671 15.33 50.9071 15.15ZM57.0058 5.94H59.5558V11.49H62.9158V13.77H59.5558V24H57.0058V13.77H54.7558V11.49H57.0058V5.94ZM68.0791 30.03H65.4991C65.7791 29.45 66.0391 28.89 66.2791 28.35C66.5391 27.83 66.7891 27.29 67.0291 26.73C67.2891 26.19 67.5491 25.62 67.8091 25.02C68.0691 24.44 68.3591 23.81 68.6791 23.13C68.2191 22.23 67.7491 21.29 67.2691 20.31C66.7891 19.31 66.3091 18.31 65.8291 17.31C65.3491 16.31 64.8691 15.31 64.3891 14.31C63.9291 13.31 63.4691 12.36 63.0091 11.46H65.7991C66.5191 12.88 67.1091 14.08 67.5691 15.06C68.0491 16.04 68.4391 16.89 68.7391 17.61C69.0591 18.31 69.3091 18.91 69.4891 19.41C69.6891 19.91 69.8591 20.37 69.9991 20.79C70.1591 20.37 70.3291 19.91 70.5091 19.41C70.7091 18.91 70.9591 18.31 71.2591 17.61C71.5791 16.89 71.9691 16.04 72.4291 15.06C72.9091 14.08 73.5091 12.88 74.2291 11.46H77.0191L68.0791 30.03ZM89.2526 13.14H92.2226C93.0226 13.14 93.6926 13 94.2326 12.72C94.7726 12.44 95.1926 12.1 95.4926 11.7C95.8126 11.3 96.0326 10.87 96.1526 10.41C96.2926 9.95 96.3626 9.54 96.3626 9.18C96.3626 8.8 96.2926 8.39 96.1526 7.95C96.0326 7.49 95.8126 7.07 95.4926 6.69C95.1726 6.29 94.7426 5.96 94.2026 5.7C93.6826 5.44 93.0326 5.31 92.2526 5.31H89.2526V13.14ZM85.9526 24V2.25H91.8926C93.0326 2.25 94.0726 2.4 95.0126 2.7C95.9726 3 96.7926 3.45 97.4726 4.05C98.1726 4.63 98.7126 5.35 99.0926 6.21C99.4726 7.05 99.6626 8.02 99.6626 9.12C99.6626 9.98 99.5326 10.84 99.2726 11.7C99.0126 12.54 98.5926 13.3 98.0126 13.98C97.4326 14.64 96.6726 15.18 95.7326 15.6C94.7926 16.02 93.6526 16.23 92.3126 16.23H89.2526V24H85.9526ZM99.5078 17.85C99.5078 16.93 99.6778 16.07 100.018 15.27C100.378 14.45 100.858 13.74 101.458 13.14C102.058 12.52 102.748 12.03 103.528 11.67C104.328 11.31 105.178 11.13 106.078 11.13C106.678 11.13 107.228 11.21 107.728 11.37C108.228 11.51 108.658 11.69 109.018 11.91C109.378 12.13 109.668 12.36 109.888 12.6C110.108 12.84 110.258 13.05 110.338 13.23L110.458 11.46H112.918V24H110.338V22.41C110.238 22.57 110.078 22.76 109.858 22.98C109.638 23.2 109.348 23.41 108.988 23.61C108.648 23.79 108.238 23.95 107.758 24.09C107.278 24.23 106.728 24.3 106.108 24.3C105.148 24.3 104.258 24.13 103.438 23.79C102.638 23.43 101.948 22.96 101.368 22.38C100.788 21.78 100.328 21.09 99.9878 20.31C99.6678 19.53 99.5078 18.71 99.5078 17.85ZM102.088 17.7C102.088 18.28 102.188 18.82 102.388 19.32C102.608 19.82 102.898 20.25 103.258 20.61C103.618 20.97 104.048 21.26 104.548 21.48C105.048 21.68 105.598 21.78 106.198 21.78C106.798 21.78 107.348 21.68 107.848 21.48C108.368 21.26 108.808 20.97 109.168 20.61C109.548 20.23 109.838 19.8 110.038 19.32C110.238 18.82 110.338 18.28 110.338 17.7C110.338 17.12 110.238 16.59 110.038 16.11C109.838 15.61 109.548 15.18 109.168 14.82C108.808 14.46 108.368 14.18 107.848 13.98C107.348 13.76 106.798 13.65 106.198 13.65C105.598 13.65 105.048 13.76 104.548 13.98C104.048 14.18 103.618 14.46 103.258 14.82C102.898 15.18 102.608 15.61 102.388 16.11C102.188 16.59 102.088 17.12 102.088 17.7ZM123.012 14.43C122.452 14.43 121.912 14.51 121.392 14.67C120.872 14.81 120.402 15.03 119.982 15.33C119.582 15.63 119.262 16.01 119.022 16.47C118.782 16.91 118.662 17.42 118.662 18V24H116.112V11.46H118.362C118.402 12.08 118.432 12.65 118.452 13.17C118.492 13.67 118.532 14.17 118.572 14.67C118.832 14.13 119.172 13.64 119.592 13.2C120.012 12.76 120.462 12.39 120.942 12.09C121.422 11.79 121.892 11.56 122.352 11.4C122.812 11.22 123.222 11.13 123.582 11.13L123.012 14.43ZM133.931 11.13L135.461 12.66C134.701 13.36 133.971 14.04 133.271 14.7C132.591 15.36 131.871 16.05 131.111 16.77C132.011 17.97 132.891 19.18 133.751 20.4C134.611 21.6 135.481 22.8 136.361 24H133.421C132.741 23.06 132.051 22.14 131.351 21.24C130.671 20.32 129.991 19.39 129.311 18.45L127.571 20.04V24H125.021V0.69H127.571V17.04C128.691 16.02 129.761 15.04 130.781 14.1C131.801 13.14 132.851 12.15 133.931 11.13Z" fill="#424242"/>
   </svg>
 </div>
</template>

<style>
 svg{
   width: 137px;
   float: left;
   padding: 0;
   margin: 0;
 }
</style>

やりながら思ったけど、すでに手本となるレイアウト・デザインが上がっているんだから大枠から取り組んでもよさそう。

ということで一旦

レイアウトコンポーネントに移植

コードの棲み分けがなかなか身体に染みなくてあたふたしていたんだけど、調べていくうちに腹落ちするサイトに出会った。

はーん、レイアウトコンポーネントってこんな簡潔に書くものなのか！
「ヘッダー」「フッター」とコンポーネントを割り当てる。なんだかHTMLの入門に戻った感覚。

間に<main>タグを入れて、基本レイアウトが完成というわけか。

レイアウトもdefault.vueだけでなくて、複数作れるし、レイアウトに用いるコンポーネントも組み換え自由かつ独立ってことか、素晴らしい。

とりあえずこんな感じかな...（移植用にメモってます）

<template>
 <div> <!--id='page-top'部分-->
   <Header /> <!--id='page-top'部分-->
   <main>
     <Nuxt />
   </main>
   <Footer />
 </div>
</template>

<style>
* {
   margin: 0px;
   padding: 0px;
}
</style>

ひとまず移植できるものから移植。途中で勘違いに気が付いたので記録。

Nuxt.jsの概念、コンポーネント・レイアウト・ページというモノの主従関係を、ページ＞レイアウト＞コンポーネントと解釈していたけど、実際は

レイアウト＞ページ＞コンポーネントなんだね。わかりやすい図がありました。ほかにも細かいものが載っていますね。

少しずつ棲み分けが見えてきた。

ヘッダーの一部を動的にする

ここで要件として、レイアウトに読み込んだHeaderのコンポーネント内の文字をページごとに帰ることはできないんだろうか...そもそもその設計が間違ってる？？　以下のケースに対応させたいんだけど、そもそもページ共通でない要素をヘッダーに含めるなよって感じか。

あった

ただ、ここでリンクのコードを真似てみるとめちゃくちゃめんどくさいエラーにはまった。以下のエラーと、<script>タグ改行後にインデントいらないよとか、初見のエラーが。

ERROR in ./pages/index.vue
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
~\index.vue
 126:7  error  Missing space before function parentheses  space-before-function-paren

しっかり読めばわかるんだけどこんな細かい仕様の違いがあるもんなのか。
関数の括弧の前にスペース1つ入れろって笑

エラー文はよく読みましょう...

とりあえずひたすら移植できるものに取り組む...

ここでエラー！CSSとJSを使った動的な背景をコンポーネント化したときに、SSRでは未定義とされてしまうことがあった。毎回ではなくランダムなタイミングで。

ただ、<no-ssr>コンポーネントで囲っても非表示になってしまうので解決に至ってない。とりあえず明日に引き継ぐ。

(2020.07.18　投稿)

動的にヘッダーのボタンテキストを変更できた

以下のページを参考に実装できた。

Gitのmasterを作業用ブランチに反映させる

ようやく舞い戻った3日もあけてしまった。その間に、プルリクがmasterブランチにマージされて修正もしてもらったので、再度作業用ブランチにて開発を進める。

Gitを多人数で使ったことがなくて、正直ブランチを切り出して使ったことがないので、Gitのややこしい部分に触れないできた感がある。

さて、最新のmasterをもう一度クローンしてもいいけど、なんかもっといい方法はないのかなと思ったところ、以下の記事を見つけた。

似た要請が沢山あった。以下コード（作業用ブランチ名hogehoge）

$ git branch -a
* hogehoge
master

$git fetch origin
...

$git merge --no-ff origin/master
...

これで、再度開発を進める。

（2020.07.21　追記）

未実装だったaboutページの作成

冒頭で紹介したアプリの初期でも実装していなかったページを実装する。

メンバー紹介のところで、何度も同じコードを書くのが煩雑というか、今後メンバー一覧に開発メンバーが追加されていくので、ベタ打ちだと後々面倒くさい。

v-forでjsonを展開してメンバー一覧を作ってしまおう。

ここで、メンバー一覧の横並びデザインがうまくいかない。ここで詰まっている...。

（2020.07.23　追記）

サーバーサイドのセットアップとサーバー起動

時間が空いてしまった！！
さあ、こないだLaravelを動かすために

XAMPP
PHP 7.4
Composer
Laravel 7

のセットアップをしたぞい。

手順として

①XAMPPを起動し、ApacheとMySQLを起動
②clientディレクトリで以下のコードを実行

$ npm run dev

③apiディレクトリで以下のコードを実行

$ php artisan serve

これで、MySQLのデータベースとの接続&APIとの接続ができた。
僕の作業が急がれる！！

ということで、今日から本アプリの心臓であるマップ部分を移植する。

この「VueMapbox」というラッパーライブラリをインストールする。
package.jsonのあるディレクトリで以下のコマンドを実行

npm install --save vue-mapbox mapbox-gl

以下のドキュメントを見ながら地図の表示から各公園のマーカー表示までやってみる。

…

地図の表示まではできたんだけど、各公園のマーカーをどう打っていくかわからない

<template>
 <div class="map">
   <MglMap :accessToken='accessToken' :mapStyle='mapStyle' :center='defaultCoordinates' :zoom='zoom'>
     <MglGeolocateControl position="bottom-right" />
     <MglGeojsonLayer
       :sourceId="geoJsonSource.id"
       :source="geoJsonSource"
       layerId="myLayer"
       :layer="geoJsonlayer"
     />
   </MglMap>
 </div>
</template>

<script>
//Mapboxのラッパーライブラリをインポート
import Mapbox from 'mapbox-gl'
import { MglMap, MglGeolocateControl, MglGeojsonLayer } from 'vue-mapbox'

export default {
 components: {
   MglMap,
   MglGeolocateControl,
   MglGeojsonLayer
 },
 data () {
   return {
     accessToken: 'pk.eyJ1Ijoic3luc2NoaXNtbyIsImEiOiJja2E5eHEwbXAweHdyMnlxcjlzMDVjMm56In0.lOPjbTfTjop6jTk58sOhTQ',
     mapStyle: 'mapbox://styles/synschismo/cka9xvauz00w31ilcr6ganv88',
     zoom: 11,
     defaultCoordinates: [139.540667, 35.650614],
     coordinates: [139.540667, 35.650614],
     geoJsonSource: {
       // GeoJSON をURLから読み込む方法がわからない
     },
     geoJsonLayer: {
       //...some GeoJSON layer configuration object
     }
   }
 },
 created () {
   // We need to set mapbox-gl library here in order to use it in template
   this.mapbox = Mapbox
 }
}
</script>

data()内のgeoJsonSourceに、GeoJsonを読み込むんだろうけど、書き方がわからない...。いったんここで区切ろう。

参考になりそうな記事をためとく

（2020.07.27　追記）

複数マーカーの追加に成功した

かなり時間がたってしまった。ようやく、複数のマーカーを設置できた。

結局前に話していたGeoJsonLayerは使わずにMglMarker内をv-forでループさせて、それぞれの座標を渡している形。以下の記事で解決した。（これ7/27に参照していたけど、当時はGeoJsonLayerに頭が持っていかれていた）

そういえば、知らなかったのがコンポーネントタグ内で変数参照し合えるんですね。例えば以下のコードなら変数 l を共有してる。これは知らなかった。

<MglMarker v-for="(l, key) in geojson" :key="key" :coordinates="l.geometry.coordinates" color='red'>

ということで、何とか設置完了。

ここでさらにエラーが発生

Unknown custom element: <VCard> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

（2020.08.10　追記）

チャート機能の実装

前回まで、複数マーカーの設置に取り組んできた。次は、ポップアップのスタイルなど変更する予定なんだけど、どうしてもうまくいかず、いったん後回しに。てことで今回は、チャート機能を実装する。

ひとまずこちらのドキュメントを読もう...本当にドキュメント大事よ。

まずは、インストールから。Package.jsonのあるディレクトリで以下のコマンドを実行。

npm install vue-chartjs chart.js --save

この辺りを見ながらとりあえず基本的な棒グラフを描画してみる

<<BarChart.vue>>

import { Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
 extends: Bar,
 mixins: [reactiveProp],
 props: ['chartData', 'options'],
 mounted () {
   // this.chartData is created in the mixin.
   // If you want to pass options please create a local options object
   this.renderChart(this.chartData, this.options)
 }
}

<<chart.vue>>

<template>
 <div class="small">
   <bar-chart :chart-data="datacollection"></bar-chart>
   <button @click="fillData()">Randomize</button>
 </div>
</template>

<script>
import BarChart from './BarChart.js'
export default {
 components: {
   BarChart
 },
 data () {
   return {
     datacollection: null
   }
 },
 mounted () {
   this.fillData()
 },
 methods: {
   fillData () {
     this.datacollection = {
       labels: ['6時', '7時', '8時', '9時', '10時', '11時', '12時', '13時', '14時', '15時', '16時', '17時', '18時', '19時', '20時', '21時', '22時'],
       datasets: [
         {
           label: 'Data One',
           backgroundColor: '#f87979',
           data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
         }
       ]
     }
   },
   getRandomInt () {
     return Math.floor(Math.random() * (50 - 5 + 1)) + 5
   }
 }
}
</script>

<style>
 .small {
   max-width: 600px;
   margin:  150px auto;
 }
</style>

ひとまず描画できた。

次は、Y軸の範囲を定義することと、X軸のラベルを3時間飛ばしにするなど。

あと、warningが出てきた。
propでchartDataとoptions属性を指定しないといけないみたい。以下の記事参考。

（2020.8.21　追記）

参加ボタンの実装

今日は、APIとのやり取りを含めた参加ボタン周りの実装します。

<select v-model="number_of_people">
     <option disabled value="">利用人数</option>
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
     <option>6</option>
     <option>7</option>
     <option>8</option>
     <option>9</option>
     <option>10</option>
   </select>
   <select v-model="time_diff">
     <option disabled value="">滞在時間 (分)</option>
     <option>5</option>
     <option>10</option>
     <option>20</option>
     <option>30</option>
     <option>60</option>
   </select>

とりあえず、v-modelを使ってセレクトボックスを作成。

この記事が気に入ったらサポートをしてみませんか？