概要

Frontendは「色々なComponentを使いこなせる」のが重要になってきています。

しかし一方で、「実現したいデザインの名称がわからなくて、検索できない！」って問題が往々にしてあります。

「リストを下にスワイプすると検索ボックスが出てくるiosのやつってなんて名前で検索すれば良いの！？」ってなっちゃいます。

ということで、Githubで見つけたComponent Libraryを眺めながら見つけた名称を随時まとめてみました！

（もしかしたら一般的でない名称も混ざってるかもしれないので、そのときはご指摘ください。）

名称一覧

DataTable | DataGrid

ソート、フィルタリング、ページングなどの機能を備えたテーブル。

ex) Vue Datatable

[Float | Floating | Sticky] [Thead | Header]

スクロールしていくとテーブルのヘッダが固定化されるテーブル。

ex) vue-floatthead

Toast | Notifications | FlashMessage | SnackBar

画面上部や画面下部に一時的にメッセージを出す機能。

ex) VueNotifications
ref) SnackBars

Loaders | Spinners

Loading中にでるくるくる回るもの。

ex) vue-simple-spinner

Skeleton Screen

ロード中などにテキストや画像のモックアップを出すもの。

ex) tb-skeleton
ref) Building Skeleton Screens with CSS Custom Properties

ProgressBar | LoadingBar

ロード状況に合わせて画面上部に伸びるバー。

ex) Vue 2 Loading Bar

Tooltip | Popover

要素の補足情報。

ex) v-tooltip

Overlay | Modal | Alert | Dialog | Lightbox | Popup

ユーザが操作するまで親ウィンドウに操作を戻さない子ウィンドウ。

ex) vuedals

Parallax

ウィンドウのスクロールとは違う速度で画像をスクロールさせる効果。

ex) vue-parallax

AccordionMenu

広がる要素を持つメニュー。

ex) vue-accordion

Drawar

ホーム画面とは別に用意されている表示領域。

ex) vue-drawer-layout
ref) ドロワー

Carousel | Slider | Swiper

複数の要素がスライドして切り替わるやつ

ex) Slick for Vue.js

InfiniteScroll | InfiniteLoading | InifiniteList

最後の要素まで行くと、次のページを自動でロードして表示してくれるやつ。

ex) vue-infinite-loading

PullToReflesh | SwipeToReflesh

（主に下に）引っ張ると、要素のリフレッシュが走るもの。

ex) vue-pull-refresh
ref) Android swipe to refresh

FlashCard

ex) Vue Flashcard

Particle

粒子っぽいデザイン

ex) vue-particles

Affix

コンテンツと連動して動く目次

ex) Qiitaの記事の右側にある目次
ex) vue-affix

ContextMenu

右クリックなどで出るメニュー

ex) vue-context-menu

FloatLabel

ex) vue-float-label

Wizard | Stepper

作業ステップをわかりやすく表記するもの。

ex) vue-form-wizard

Tour | PageGuide

アプリケーションのガイド

ex) vue-tour

WaterfallLayout | Masonry

Pinterestみたいな配置の要素

Headroom

Swipeで消えるHeader

ex) vue-headroom

序文

最近のiosアップデートでiphoneをダークモードに設定できるようになりました。私個人的にはダークモードの方が好みであり、自分自身のiphone,iPad,MacBookも全てダークモードに設定しております。
そこでふと自身で作成したWebページやポートフォリオをダークモードにできないかと思い、調べて見たところ簡単に設定する事ができましたので、下記に共有いたします。

コード

閑話休題、styleの中に下記を追加するだけです。
現在主要なブラウザ、crome,firefox,safariでは対応している模様です。

<style>
    @media (prefers-color-scheme: dark) {
    body{
      background-color: #000;
      color: #aaa;
    }
    }
 </style>

使用例

実際に私の簡単なサイト内で試して見ましたので画像を共有いたします。
＊MacBookAir(2018)をダークモードの設定状態で、ブラウザはcromeを使用しております。
＊サイトはちなみに自身の本管理用途をして,laravel(+vue,jquery)で作成したものです。

1.ダークモード実装前

2.ダークモード実装後

最後に

以上WebページをCSSでダークモードにする方法でした。
なんとなくダークモードの方がテンション上がる気がする笑

この記事は、 大阪工業大学 Advent Calendar 2019の5日目の記事です。

はじめに

つい先日のお話。新規サービス作ろうね〜ということで新しいタスクが降ってきました。
新しいアプリじゃん！！

ということで、このサービス開発の一部分にAtomic Designと関数型コンポーネントを使ってみたよってのが今回のおはなし。

自己紹介

某でフロントまわりを触ってます。ケモミミが好き。
大学自体はすでにOBだけど、参加条件的にはOKみたいなんでやります！

Atomic Design

Atomic Designは、ざっくり書くと画面を段階に分けてパーツの作成・組み合わせを行う手法です。

最小の要素（Atoms）から作って
Atomsを組み合わせて1つの機能をもつ要素（Molecules）を作って
Atoms,Moleculesを組み合わせて、画面を構成するいち要素（Organisms）を作って
最後、作った要素群を利用してテンプレート・ページを構成していく感じ。
（画像はわかりにくくてすいません）

Atomic Designの詳細と、それをVue.jsに落とし込むところについては、他の方の記事をお探しくださいな。

今回Atomic Designで組んだコンポーネントのうち、一部のAtomsを関数型コンポーネントで組んでみました。

関数型コンポーネント

※Vue.jsの公式リファレンスでは関数型コンポーネントの説明にRender関数を利用していますが、今回は主に単一ファイルコンポーネントでやっていきます

公式曰く、関数型コンポーネントは状態を持たず、描画コストの少ないコンポーネントを作ることができるやつですね。
（具体的になんで描画コストが少なく済むのかをちゃんと理解してない）

単一ファイルコンポーネントで使うときは、templateタグにfunctionalを追加すると関数型コンポーネントとして認識されます。

HeadOne.vue

<template functional>
  <h1 class="text-2xl font-bold">
    <slot />
  </h1>
</template>

こんなイメージ。
ちなみに、vueのdevtoolではこんな感じでfunctionalって表示されます。

値周りは気をつけて

関数型コンポーネントは、値の統合などを明示的に書いてあげる必要があります。
例えばクラスの設定ですね。

仮に通常のコンポーネントChild.vueを用意したとして

Child.vue

<template>
  <p class="leading-loose">ほげほげ</p>
</template>

任意のコンポーネントで読み込んであげて、呼び出し時にクラスを足します。

Parent.vue

<template>
  <div>
    <child class="text-gray" />
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  components: {
    Child,
  },
}
<script>

これを実行すると、pタグのclassにtext-grayが追加されます。

出力結果

<div>
  <p class="leading-loose text-gray">ほげほげ</p>
<div>

よくある挙動ですね。

じゃあ関数型コンポーネントだとどうなる？
関数型コンポーネントChild.vueで今回、上の例と同じように静的なclassを統合させたい時には

Child.vue

<template functional>
  <p 
    class="leading-loose" 
    :class="data.staticClass"
  >
    ほげほげ
  </p>
</template>

のように書けばOK。

ただ、上の書き方の場合はVue.jsによって操作可能なクラスv-bind:classは統合されません。
もし、静的・動的なクラスのどちらも取得して反映させたい時は、ちゃんと動的なクラスも含めるように書くといい感じになります。

Child.vue

<template functional>
  <p 
    class="leading-loose" 
    :class="[data.class, data.staticClass]" 
  >
    ほげほげ
  </p>
</template>

自分はこのあたりでちょっとハマってました。

感想

Atomic Designええやん

コードの量は増える感じはあるけど、むっちゃ使いまわしが効くから幸せに。(モノによってはプロジェクトをまたいで再利用できるとも思った)
ただ、色周りの定義ってどう分けたらいいのか困ってた。どうやるのがきれいなんだろうね。

関数型コンポーネントを適用させる範囲ひろげたい

知見が足らなかったためにAtomsだけを関数型コンポーネントに置き換えた形になったけど、もうちょっと動作に影響のないレベルで置き換えることはできたよなぁと。
せめてMoleculesの一部までは.....

パフォーマンスなんもわからん

これ。
どこかで試してみて、パフォーマンスまわりのデータ比較してみるのも面白そうだなぁ。

関数型のイベント周りなんもわからん

この記事書くときに試してみて、すずめの涙ほどですが知見が得られたので下の方のおまけにメモしておきますね。

さいごに

Vue.jsなんもわからん
（書いてることが正しいか確認するためにNuxt.jsを使わず、数ヶ月ぶりにVue.jsベースのプロジェクト作ったら、プロジェクトのテンプレートがwebpack使ってなくて探り探りでさわることに。）

あと、Atomic DesignってDRY原則に合ってる認識だけどどうなんでしょう...おしえて...

おまけ: 関数型コンポーネントへの置換

自分の備忘録も兼ねて、対応を残しておきます。
新たに知ったものとかがあれば足したり、間違いがわかれば修正加えます。

class

Child.vue

<template functional>
  <p :class="[data.class, data.staticClass]">
    ほげほげ
  </p>
</template>

親のコンポーネントからクラス名をもらう時は、ちゃんと読み込みを指示する必要があります。
静的・動的なクラスどちらもバインドさせたい場合は[data.class, data.staticClass]でclass名を取る感じにすれば困らないかと。

props

props.を足す。以上！

Child.vue

<template functional>
  <div>
    <h3>{{props.title}}</h3>
    <p>{{props.text}}</p>
  </div>
</template>
<script>
export default {
  props: {
    title: { type: String },
    text:  { type: String },
  },
}
</script>

slot

これは変更せずそのままで

Child.vue

<template functional>
  <p>
    <slot />
  </p>
</template>

イベントリスナー

特定のイベントを受け渡しする場合

通常時はこんな感じで書くやつ

Child.vue

<template>
  <button @click="$emit('click', $event)">おしてちょ</button>
</template>

Parent.vue

<template>
  <div>
    <component-button @click="callMethod" />
  </div>
</template>
<script>
import ComponentButton from '@/components/Button.vue'
export default {
  components: {
    ComponentButton,
  },
  methods: {
    callMethod() { /* 処理 */ },
  },
}
</script>

関数型コンポーネントではこんな感じで。

Child.vue

<template functional>
  <button @click="listeners.click">おしてちょ</button>
</template>

$emit('click', $event) → listeners.click

雑にイベントのやりとりをさせる場合

Child.vue

<template functional>
  <button v-on="listeners">おしてちょ</button>
</template>

はじめに

この記事は「Vue.jsとamCharts 4を使って地図を表示する」の続編です。
前回の記事で断念した、地図の一部のみを表示・除外する方法を書いていきます。

プロジェクトの作成方法やApp.vueの構成は前回の記事と同じです。

プロジェクト作成

# プロジェクト作成
$ vue create sample-map
$ cd sample-map
# amchartsインストール
$ yarn add @amcharts/amcharts4
$ yarn add @amcharts/amcharts4-geodata
# サーバー起動
$ yarn serve

日本地図表示

App.vue

<template>
  <div id="chartdiv"></div>
</template>

<script>
import * as am4core from "@amcharts/amcharts4/core"
import * as am4maps from "@amcharts/amcharts4/maps"
// 日本地図のgeodataを取得
import am4geodata_japanLow from "@amcharts/amcharts4-geodata/japanHigh"

export default {
  mounted () {
    let map = am4core.create("chartdiv", am4maps.MapChart)
    map.geodata = am4geodata_japanLow
    map.projection = new am4maps.projections.Miller()
    var polygonSeries = map.series.push(new am4maps.MapPolygonSeries())
    polygonSeries.useGeodata = true
  },
  beforeDestroy () {
    if (this.map) {
      this.map.dispose()
    }
  }
}
</script>
<style scoped>
#chartdiv {
  width: 100%;
  height: 600px;
}
</style>

地図の一部のみを表示する

MapPolygonSeriesのincludeに都道府県のISOコードを指定することでその地域のみ表示することができます。
今回は九州のISOコードを指定しました。

polygonSeries.include = [
  "JP-40",
  "JP-41",
  "JP-42",
  "JP-43",
  "JP-44",
  "JP-45",
  "JP-46",
  "JP-47",
]

App.vue

App.vue

<template>
  <div id="chartdiv"></div>
</template>

<script>
import * as am4core from "@amcharts/amcharts4/core"
import * as am4maps from "@amcharts/amcharts4/maps"
// 日本地図のgeodataを取得
import am4geodata_japanLow from "@amcharts/amcharts4-geodata/japanHigh"

export default {
  mounted () {
    let map = am4core.create("chartdiv", am4maps.MapChart)
    map.geodata = am4geodata_japanLow
    map.projection = new am4maps.projections.Miller()
    var polygonSeries = map.series.push(new am4maps.MapPolygonSeries())
    polygonSeries.useGeodata = true
    polygonSeries.include = [
      "JP-40",
      "JP-41",
      "JP-42",
      "JP-43",
      "JP-44",
      "JP-45",
      "JP-46",
      "JP-47",
    ]
  },
  beforeDestroy () {
    if (this.map) {
      this.map.dispose()
    }
  }
}
</script>
<style scoped>
#chartdiv {
  width: 100%;
  height: 600px;
}
</style>

地図の一部のみ除外する

先ほどとは逆に、九州のみ除外したい！という需要があるかもしれません。
九州以外のISOコードをincludeに指定することで実現可能ですが、かなり面倒臭いです。
そんな時はexcludeを使います。

polygonSeries.exclude = [
  "JP-40",
  "JP-41",
  "JP-42",
  "JP-43",
  "JP-44",
  "JP-45",
  "JP-46",
  "JP-47",
]

App.vue

App.vue

<template>
  <div id="chartdiv"></div>
</template>

<script>
import * as am4core from "@amcharts/amcharts4/core"
import * as am4maps from "@amcharts/amcharts4/maps"
// 日本地図のgeodataを取得
import am4geodata_japanLow from "@amcharts/amcharts4-geodata/japanHigh"

export default {
  mounted () {
    let map = am4core.create("chartdiv", am4maps.MapChart)
    map.geodata = am4geodata_japanLow
    map.projection = new am4maps.projections.Miller()
    var polygonSeries = map.series.push(new am4maps.MapPolygonSeries())
    polygonSeries.useGeodata = true
    polygonSeries.exclude = [
      "JP-40",
      "JP-41",
      "JP-42",
      "JP-43",
      "JP-44",
      "JP-45",
      "JP-46",
      "JP-47",
    ]
  },
  beforeDestroy () {
    if (this.map) {
      this.map.dispose()
    }
  }
}
</script>
<style scoped>
#chartdiv {
  width: 100%;
  height: 600px;
}
</style>

おわり

日本語・英語問わずほとんど参考文献の見つからない、地図の一部のみを表示・除外する方法を書いてみました。
前回の記事から半年経ちますが、日本で流行ってる感じは全くしませんね(~_~;)
公式のサンプルがハイレベルすぎて参考にならないのがネックなのかもしれません。
また気が向いたらパート3を書こうと思います。

はじめに

先日 Amplify DataStore というものがリリースされました。
詳しくは公式ブログで確認していただければいいのですが、簡単に使ってみたところ、GraphQLの書き方をしなくてもGraphQLを使えるという感想でした。
今までAmplifyでAppSync(GraphQL)を使っていたやり方と比較しながら解説していこうかと思います。(参考記事)

Getting Started

まずVueのプロジェクトを作りましょう。

$ npm install -g @vue/cli
$ vue create amplify-datastore-sample
$ cd amplify-datastore-sample

amplifyの初期化などをします

$ npx amplify-app

処理が完了すると amplify というディレクトリが生成されています。
その中にはAmplifyで利用するAWSサービスの情報が入っていきます。
amplify/backend/api/<datasourcename>/schema.graphql の内容を書き換えていきます。

schema.graphql

enum PostStatus {
  ACTIVE
  INACTIVE
}

type Post @model {
  id: ID!
  title: String!
  rating: Int!
  status: PostStatus!
}

AWSの環境にデプロイしていきます。

$ npm run amplify-modelgen

実行するとAppSyncとDynamoDBがデプロイされます。
これでAWS側の準備は完了です。

Settings

必要なパッケージをインストールしておきます。

$ npm i @aws-amplify/core @aws-amplify/datastore

インストールしたパッケージをimportしておきます。
models というディレクトリは npm run amplify-modelgen を実行したときに src 以下に生成されます。

import { DataStore } from "@aws-amplify/datastore"
import { Post, PostStatus } from "./models"

Save Data

データを書き込むときは DataStore.save() を使います。

await DataStore.save(
  new Post({
    title: "My First Post",
    rating: 10,
    status: PostStatus.ACTIVE
  })
)

このようにDynamoDBにPUTされます。

GraphQLで書くと…

const saveBody = `
  mutation {
    putData(
      input: {
        title: "My First Post",
        rating: 10,
        status: "active"
      }
    )
  }
`
await API.graphql(graphqlOperation(saveBody))

Query Data

データを取得するときは DataStore.query() を使います。

const posts = await DataStore.query(Post)

limitや条件を指定することもできます。

await DataStore.query(
  Post,
  c => c.status("eq", PostStatus.ACTIVE),
  {
    limit: 10
  }
)

GraphQLで書くと…

const queryBody = `
  query {
    queryData(limit: 10){
      items {
        id,
        title,
        rating,
        status
      }
    }
  }
`
const posts = await API.graphql(graphqlOperation(queryBody))

Delete Data

データを削除するときは DataStore.delete() を使います。

const todelete = await DataStore.query(Post, "1234567")
await DataStore.delete(todelete)

ちなみに論理削除となるので、DynamoDBからデータが削除されることはありません。
_deleted というフラグが立ちます。

GraphQLで書くと…

const deleteBody = `
  mutation {
    deleteData(
      input: {
        id: "1234567"
      }
    )
  }
`
await API.graphql(graphqlOperation(deleteBody))

さいごに

GraphQLのquery文で結構コード量が増えたり、query文の生成がめんどくさかったりとするのですが、AmplifyDataStoreを使うと、そういったところを解消してくれるそうですね。
プロダクションレベルで使うためには認証周りだったりなどを詰めていかないといけませんが、とても使う価値がありそうです。
ではまた！

最初に

ついにComposition APIがrfc上でmergeされました
rfc上でmergeされたこともあって、本格的に触っていく人も増えていくのではないか、と思います。
Composition APIを使うことで型推論がよくなる、IDEの恩恵を受けやすいだけでなく、
少し工夫するだけでなんちゃってSingle Store patternなどができたりします。

しかしながら、Composition API自体が新しい、ということもあってテストに関する情報がほとんどありません。
そこで、今回はCompositionを分離した状態でのテストの書き方について説明します。

Compositionを分離するって?

公式DocumentだとLogic reuse code organizationと書かれている部分です。
これを使うことで今までコンポーネント内で書いていたstateやstateの変更を行う関数などをすべて別ファイルに引き剥がすことが可能となります。
例えば、単純なカウントアプリを例にとります。

<template>
  <div class="count">
    <h1>{{countValue}}</h1>
    <div class="button-box">
      <button class="plus" @click="increment">+</button>
      <button class="minus" @click="decrement">-</button>
    </div>
  </div>
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api';
import { ref } from '@vue/composition-api';

export default createComponent({
  name: 'Count',
  setup() {
    const countValue = ref(0);

    const increment = () => {
      countValue.value += 1;
    };

    const decrement = () => {
      countValue.value -= 1;
    };

    return {
      countValue,
      increment,
      decrement,
    };
  },
});
</script>

<style scoped>
</style>

今回、すべてComposition APIを使って書いていますが、通常の場合、カウントを保存するstateだったり、カウントするための処理をComponentに書くと思います。(Vuexを使えばそんなもんComponentに書かないやん、といわれそうですが...)

Composition APIの場合、このようなロジックをComponent外部の別ファイルに移動させることができるようになっています!

今回の例だと、

const countValue = ref(0);

const increment = () => {
  countValue.value += 1;
};
const decrement = () => {
  countValue.value -= 1;
};

の部分を別ファイルに移動し、Component側ではこれらを呼び出す、といったことができます。

実際にテストを書いてみる

コード自体はGitHubにあげております。
環境は

ライブラリ	バージョン
@vue/cli	4.0.5
vue	2.6.10
@vue/composition-api	0.3.2
@vue/test-utils	1.0.0-beta.29

などを利用しています。

Refを使う場合

Refを使う例として、今回、単純なカウントアプリを例にしていきます。

コンポーネントをつくる

components/Count.vue

<template>
  <div class="count">
    <h1>{{countValue}}</h1>
    <div class="button-box">
      <button class="plus" @click="increment">+</button>
      <button class="minus" @click="decrement">-</button>
    </div>
  </div>
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api';
import { useCount } from '@/composition/count';

export default createComponent({
  name: 'Count',
  setup() {
    // compositionは次のところで見せます
    const { countValue, increment, decrement } = useCount();
    return {
      countValue,
      increment,
      decrement,
    };
  },
});
</script>

<style scoped>
</style>

Componentとしては単純で、カウンターが表示されて、+/-ボタンがあるだけです。

Compositionを書いてみる

composition/count.ts

import { ref } from '@vue/composition-api';

// compositionを作ってくれる関数
const useCount = () => {
  // dataみたいなもの
  const countValue = ref(0);
  // 1増やすやつ
  const increment = () => {
    countValue.value += 1;
  };
  // 1減らすやつ
  const decrement = () => {
    countValue.value -= 1;
  };
  // 作ったやつをここで返す
  return {
    countValue,
    increment,
    decrement,
  };
};

// eslint-disable-next-line import/prefer-default-export
export { useCount };

compositionを外部モジュールにする際、関数内で生成し、それをreturnで返す、といった例が多いです。

テストを書いてみる

それでは、実際にテストを書いていきます。
今回はJestを利用しています。

Componentをテストする

基本的にはVueのComponentのテストと変わりません。
しかし、compositionAPIを使っている部分(dataとか)をMockする必要があります。

tests/components/Count.spec.ts

import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
import VueCompositionApi from '@vue/composition-api';
import Count from '@/components/Count.vue';
import * as composition from '@/composition/count';


// localVueを使ってComposition APIを有効にする
const localVue = createLocalVue();
localVue.use(VueCompositionApi);

let incrementMock: jest.Mock;
let decrementMock: jest.Mock;

describe('Count.vue', () => {
  beforeEach(() => {
    jest.mock('@/composition/count');
    incrementMock = jest.fn();
    decrementMock = jest.fn();
    jest.spyOn(composition, 'useCount').mockReturnValue({
      countValue: 0 as any,
      increment: incrementMock,
      decrement: decrementMock,
    });
  });
  // snapshotを使って描画をチェック
  it('correctly renders initial html', () => {
    const wrapper = shallowMount(Count, {
      localVue,
    });
    expect(wrapper.html()).toMatchSnapshot();
  });
  // mockした関数が呼ばれたかチェック
  it('call increment when plus buttons is clicked', () => {
    const wrapper = shallowMount(Count, {
      localVue,
    });
    wrapper.find('button.plus').trigger('click');
    expect(incrementMock).toHaveBeenCalled();
  });
  // mockした関数が呼ばれたかチェック
  it('call increment when minus buttons is clicked', () => {
    const wrapper = shallowMount(Count, {
      localVue,
    });
    wrapper.find('button.minus').trigger('click');
    expect(decrementMock).toHaveBeenCalled();
  });
});

今回、jestのspyOnを使って関数のmockを行いました。

jest.spyOn(composition, 'useCount').mockReturnValue({
  countValue: 0 as any,
  increment: incrementMock,
  decrement: decrementMock,
});

ここで注意しなければいけないのが、refのmock方法です。
Composition APIのコードを見てみると

export interface Ref<T> {
    value: T;
}

といった記述があるため、この構造と同じようにmock値を作らなければいけない、と思いがちですが、これだとテストが実行できません。
そのため直接mockしたい値を入れる必要があります。

Compositionのテスト

composition/count.spec.ts

import VueCompositionApi from '@vue/composition-api';
import { createLocalVue } from '@vue/test-utils';
import { useCount } from '@/composition/count';

// localVueを使ってComposition APIを有効にする
const localVue = createLocalVue();
localVue.use(VueCompositionApi);

describe('count.spec.ts', () => {
  it('increment should work properly', () => {
    const { countValue, increment, decrement } = useCount();
    increment();
    expect(countValue.value).toEqual(1);
  });
  it('decrement should work properly', () => {
    const { countValue, increment, decrement } = useCount();
    decrement();
    expect(countValue.value).toEqual(-1);
  });
});

ここはjestでモジュールをテストする場合と変わらずに簡単にかけます。
ただし、注意として、

// localVueを使ってComposition APIを有効にする
const localVue = createLocalVue();
localVue.use(VueCompositionApi);

という行を書いてComposition APIを有効にする必要があります。

Reactiveを使う場合

Reactiveを使う例として、今回、単純なTodoアプリを例にしていきます。

コンポーネントをつくる

components/Todo.vue

<template>
  <div class="count">
    <input id="todo-input" v-model="text"/>
    <button class="add-btn" @click="onSubmit">追加</button>
    <ul>
      <li v-for="(task, i) in todo.todos" :key="i">
        <p>{{task}}</p>
        <button class="delete-btn" @click="deleteTodo(i)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { createComponent, ref } from '@vue/composition-api';
import { useTodo } from '@/composition/todo';

export default createComponent({
  name: 'Todo',
  setup() {
    // textフォームのv-model
    const text = ref('');
    const { todo, addTodo, deleteTodo } = useTodo();
    const onSubmit = () => {
      addTodo(text.value);
      text.value = '';
    };
    return {
      text,
      onSubmit,
      todo,
      addTodo,
      deleteTodo,
    };
  },
});
</script>

<style scoped>
</style>

こちらも、基本的には前回のTodoアプリと同様、シンプルな構成になっています。

Compositionを書く

composition/todo.ts

import { computed, reactive } from '@vue/composition-api';

const useTodo = () => {
  const todo = reactive({
    todos: [] as string[],
    length: computed(() => todo.todos.length),
  }) as any;
  const addTodo = (item: string) => {
    todo.todos.push(item);
  };
  const deleteTodo = (index: number) => {
    todo.todos.splice(index, 1);
  };
  return {
    todo,
    addTodo,
    deleteTodo,
  };
};

// eslint-disable-next-line import/prefer-default-export
export { useTodo };

ロジックとstateがきれいに分離できますね...
今回、computedなども追加しています。

テストを書いてみる

これについてもテストを書いてみます。

Componentをテストする

components/Todo.spec.ts

import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
import VueCompositionApi from '@vue/composition-api';
import Todo from '@/components/Todo.vue';
import * as composition from '@/composition/todo';


const localVue = createLocalVue();
localVue.use(VueCompositionApi);

let addTodoMock: jest.Mock;
let deleteTodoMock: jest.Mock;

describe('Todo.vue', () => {
  beforeEach(() => {
    jest.mock('@/composition/todo');
    addTodoMock = jest.fn();
    deleteTodoMock = jest.fn();
    const TODOS = [
      'アドベントカレンダー',
      '修論',
      '筋トレ',
    ];
    jest.spyOn(composition, 'useTodo').mockReturnValue({
      todo: {
        todos: TODOS,
        length: () => TODOS.length,
      },
      addTodo: addTodoMock,
      deleteTodo: deleteTodoMock,
    });
  });
  it('correctly renders initial html', () => {
    const wrapper = shallowMount(Todo, {
      localVue,
    });
    expect(wrapper.html()).toMatchSnapshot();
  });
  it('correctly call addTodo when `追加` button is clicked', () => {
    const wrapper = shallowMount(Todo, {
      localVue,
    });
    wrapper.find('#todo-input').setValue('ポスターセッション');
    wrapper.find('.add-btn').trigger('click');
    expect(addTodoMock).toHaveBeenCalledWith('ポスターセッション');
    expect(wrapper.html()).toMatchSnapshot();
  });
  it('correctly call deleteTodo when `Delete` button is clicked', () => {
    const wrapper = shallowMount(Todo, {
      localVue,
    });
    const INDEX = 1;
    wrapper.findAll('.delete-btn').at(INDEX).trigger('click');
    expect(deleteTodoMock).toHaveBeenCalledWith(INDEX);
  });
});

基本的にカウントの際と同じですが、ReactiveのMockは、Objectで渡してあげます。

Compositionをテストする

composition/todo.spec.ts

import VueCompositionApi from '@vue/composition-api';
import { createLocalVue } from '@vue/test-utils';
import { useTodo } from '@/composition/todo';

const localVue = createLocalVue();
localVue.use(VueCompositionApi);

describe('todo.spec.ts', () => {
  it('addTodo should work properly', () => {
    const { todo, addTodo, deleteTodo } = useTodo();
    addTodo('hogehoge');
    expect(todo.todos).toEqual(['hogehoge']);
  });

  it('addTodo should work properly', () => {
    const TODOS = [
      'アドベントカレンダー',
      '修論',
      '筋トレ',
    ];
    const EXPECTED = [
      'アドベントカレンダー',
      '筋トレ',
    ];
    const { todo, addTodo, deleteTodo } = useTodo();
    todo.todos = TODOS;
    deleteTodo(1);
    expect(todo.todos).toEqual(EXPECTED);
  });

  it('computed prop `length` should work properly', () => {
    const TODOS = [
      'アドベントカレンダー',
      '修論',
      '筋トレ',
    ];
    const { todo, addTodo, deleteTodo } = useTodo();
    todo.todos = TODOS;
    expect(todo.length).toEqual(TODOS.length);
  });
});

これもCountのcompsitionと同じように書けますね

最後に

どうでしたでしょうか。VueのComposition APIを利用することで、単体テストも、より書きやすくなった印象があります。
Componentに依存していたロジックなども別ファイルにすることでロジックそのもののテストも容易となり、
Componentのテストも、UIの操作や表示などにより特化した形になります。
以前よりは簡単にテストがかけるようになっていますので、テスト駆動を始めたい方などもぜひComposition APIから始めていきましょう!!
明日は@dayjournalさんです。

はじめに(軽く自己紹介を...)

今年度、駒場祭において、「マイページ」というページを実装しました。
htmlすら触るのがほぼ初めてだった私が、このマイページというページを仕様書の作成段階から(一応は)作り上げたました。その実装過程で、localStorageやqueryパラメータなどの機能を用いたので、その経緯を是非ともご紹介したいと思い、この記事を書いております。

ここから、始めましょう。一から……いいえ、ゼロから！

駒場祭公式ウェブサイト/マイページについて

今年度、駒場祭公式サイトの新たな試みとして、お気に入り登録機能と、お気に入り登録した企画等を表示するマイページを作成するというプロジェクトが持ち上がりました。
実際に完成したものはここから見てみてください。

仕様の決定

Cookie取得の難点

「お気に入り情報を登録」と聞くと、最初に挙げられる選択肢はおそらくCookieではないでしょうか。
私たちもはじめは、Cookieを取得することで、ユーザーの変更を保存しようと考えました。

しかし、ここで問題が生じます。

EUの「GDPR(一般データ保護規則)」などの影響で、ユーザーのcookie取得の際にユーザーの同意等が必要となるのです。
この、cookieの取得に対する是非を何回も聞かれるようでは非常に面倒になります。というわけで、とりあえずはcookie以外の方法を考えることにしました。

localStorageという選択

さて、cookie取得を封じたとして、ではなにを使おうか...となったときに見つけたのが、「localStorage」でした。localStorageは、簡単に言ってしまえば、「ブラウザに情報を保存する」機構です。
これを用いれば、お気に入りボタン的なのを押して、対応する企画idを一旦localStorageに保存することで、マイページにお気に入り登録した企画を表示できるようになりました。
ですが、このlocalStorage、上で紹介したように、「ブラウザに」情報を保存するものですので、次にブラウザ間のデータのやり取りと、他の媒体で情報を取得することを考えました。

ログイン機構の難点

お気に入りした情報をいかに保存、他の媒体で閲覧できるようにするか。
まず最初に思いついたのが「ログイン」機構です。

ですが、ここにも問題があります。ログイン情報の取得は「個人情報の取得」に該当することがあり、ユーザーに利用規約を提示し、同意をもらう必要が生じかねません。
しかし、お気に入り登録のデータを見るくらいのページでユーザーにそこまで求めてしまっては、ユーザビリティが低下してしまいます。

そうこうしているうちに公開日が迫ってきたので、とりあえずはログイン機構もデータの受け渡しも実装しないまま、第1版を公開しました。

シェアとクエリパラメータの導入

さて、とりあえず暫定的にデータの受け渡し機構を作らないまま公開をしましたが、やはり受け渡しをしないわけにもいきません。

色々考えて出てきたのが、「URLのクエリパラメータ」です。これは、URLの後ろに/?x=hogehogeのような感じで値をのせることができます。
このxやhogehogeの部分に、お気に入りした企画などのグッズの情報をのせてURLを作成すれば、QRコードを作ったり、Twitter/LINEなどでシェアする用のボタンを作ることができます。

検討の結果、今回はこれを導入することにしました。

実装

localStorageの面倒臭さ

実装段階に入ります。まずはお気に入り用の星を作成しました。
対応する企画のidをlocalStorageに保存する機構を作ろうと思ったのですが、ここで問題が…

localStorageに格納できるデータは、「文字列」だけなのです。すなわち、idを配列として保存することができないのです。

そこで取った方法ですが、まず、js部分で配列を生成し、これをJSON.stringfyを用いてString型にしてlocalStorageに保存する。
逆にlocalStorageに保存したデータを読み込むときは、文字列を取ってきて、これをJSON.parseを用いてObject型にして配列として読み込む。
ということをしました。実際のコードは以下の通り。

// 保存部分
let favoriteKikaku = []
favoriteKikaku.push(this.id);
localStorage.setItem('favoriteKikaku', JSON.stringify(favoriteKikaku));

// 読み込み部分
let favoriteKikaku = localStorage.getItem('favoriteKikaku');
favoriteKikaku = JSON.parse(favoriteKikaku);
let favoriteKikakuId = '';
for(let k=0;k<favoriteKikaku.length;k++){
    favoriteKikakuId += favoriteKikaku[k];
    if(k!=favoriteKikaku.length-1) favoriteKikakuId+=',';
}

読み込み部分ですが、最後のfor文、[xxx, xxx, xxx, xxx]という形の配列に格納されているidをxxx, xxx, xxx, xxxという形に変えてるんですが…
今見返してみると、汚いコードですね…
relpaceを知らないんですかね…

まぁ、ここまで書いたらだいたいlocalStorageのお気持ちを理解できたし、これでlocalStorage部分はほぼ完成しました。
なので、ここまでで初回公開にしました。

クエリパラメータの付与

さて、次にすることはクエリパラメータ付与したURLを生成することです。

まず、クエリパラメータの仕様ですが、

https://hogehoge.net/?f1=xxx,xxx,xxx&f2=yyy,yyy,yyy

こうあったときに、最後の?以降がクエリパラメータとなります。その後は

"key"=String&"key"=String
というように、続きます。

実際のコードを見てみましょう。

let kikakuURL = JSON.parse(localStorage.getItem('favoriteKikaku'));
this.postingKikakuURL = JSON.stringify(kikakuURL);
this.postingKikakuURL=this.postingKikakuURL.replace(/]/g, "");
this.postingKikakuURL=this.postingKikakuURL.replace(/\[/g, "");
this.postingKikakuURL=this.postingKikakuURL.replace(/:/g, "=")
this.postingKikakuURL=this.postingKikakuURL.replace(/"/g, "");

let goodsURL = JSON.parse(localStorage.getItem('favoriteGoods'));
this.postingGoodsURL = JSON.stringify(goodsURL);
this.postingGoodsURL=this.postingGoodsURL.replace(/]/g, "");
this.postingGoodsURL=this.postingGoodsURL.replace(/\[/g, "");
this.postingGoodsURL=this.postingGoodsURL.replace(/:/g, "=")
this.postingGoodsURL=this.postingGoodsURL.replace(/"/g, "");

this.shareURL = 'https://www.komabasai.net/70/visitor/mypage?kikaku='+this.postingKikakuURL+'&goods='+this.postingGoodsURL;

// こいつ、ようやくreplaceを覚えたんですね。

さて、ここでやっていることですが……見たらわかりますかね…

まずlocalStorageから文字列を持ってきて、これをreplaceでクエリパラメータとして変換できる形にしています。
ここで言う"クエリパラメータとして変換できる形"ですが、上でも挙げたように、基本的にはkey=Valueの形になっているものをさします。

クエリパラメータを読む

次にやったのは、上で付与したクエリパラメータを読む機構の作成です。
今回は、クエリパラメータで渡された企画のidを、パラメータを読み込んだブラウザのlocalStorageに"追加"で保存するようにしました。

コードは以下のような感じですね。やっていることは単純です

let queryKikakuList = (this.$route.query.kikaku || "").split(',');
let queryGoodsList = (this.$route.query.goods || "").split(',');
if (queryKikakuList == ""){}
else {
    if (localStorage.getItem('favoriteKikaku') == null){
        let favoriteKikaku = []
        for ( let i=0; i<queryKikakuList.length; i++) {
            favoriteKikaku.push(Number(queryKikakuList[i]));
        }
        localStorage.setItem('favoriteKikaku', JSON.stringify(favoriteKikaku));
    } else {
        let favoriteKikaku = localStorage.getItem('favoriteKikaku');
        favoriteKikaku = JSON.parse(favoriteKikaku);
        for ( let i=0; i<queryKikakuList.length; i++) {
            if (favoriteKikaku.some(value => value == queryKikakuList[i])) {
            } else {
                favoriteKikaku.push(Number(queryKikakuList[i]));
                console.log(queryKikakuList);
            };
        }
        localStorage.setItem('favoriteKikaku', JSON.stringify(favoriteKikaku));
    }
}

二次元コードの生成

URLを作っても、それをどうにかして別のデバイスや別ブラウザに送らなくてはなりません。そのために今回は、「URLコピーのボタン」「LINEでシェアボタン」「Twitterでシェアボタン」「QRコード」の4つを表示することにしました。

そのうちのQRコードの生成なのですが、Google Chart APIを使いました。
こいつ自体の使い方は非常に簡単です。

以下、コード

document.getElementById('qr').src = "http://chart.apis.google.com/chart?cht=qr&chs=130x130&chco=ED6D2B&chl=https://www.komabasai.net/70/visitor/mypage?kikaku="+this.postingKikakuURL+'&goods='+this.postingGoodsURL;

このように、imgのsrcの部分に、

http://chartapis.google.com/chart?cht=qr&chs={{サイズ}}&chco={{カラーコード(＃はいらない)}}&chl={{QRのURL}}

を入力すれば表示できます。

改善点

• フロントの実装のときにTabのようなものを実装したが、これの実装に名前付きビューを使っていた方が後々見やすかったかなぁ...
• localStorageへのデータの保存ですが、保存が完了するまでに少し時間がかかるため、早くにページを閉じてしまうと、お気に入りの情報が飛んでしまったようです…
• その他、localStorageまわりで、データが飛ぶ等のバグ報告を少し受けたので、次回までには原因究明と修正ができたらな...と思っています

まとめ

• GDPR対策で、Cookieを取得しないとなると、代替案を探すのが少々面倒
• localStorageはGDPR的には良いのだが、使いづらい点もある
• queryパラメータは積極的に使っていきたい

さて、ここまで読んでいただきありがとうございます。
初投稿かつ、やってきたことをタレ流した記事だったので、読み苦しいものであったかもしれませんが、ご容赦ください。
また、GDPR周りについては詳しくは知らないことも多く、多少間違った理解をしているかもしれません。その場合は遠慮なくコメント等でご指摘ください。

マイページのようなページの実装にlocalStorageやqueryパラメータを使うことが一般的なのかはわかりませんが、こういう方法もあるんだと思っていただければ幸いです。

最後になりますが、来年度の第71回駒場祭でもウェブサイトは制作する予定なので、来年の11月ごろにぜひ「駒場祭」で検索してみてください。

背景

$ npm install sass-loader --save-dev

をinstallして、$npm run devを実行すると、

下記のエラーが出た。

Module build failed: TypeError: this.getResolve is not a function

原因

sass-loaderのバージョンは最新すぎる

解決策

まず、sass-loaderをuninstallする

$ npm uninstall sass-loader

後、低いバージョンをinstallしたら、ok

$ npm install sass-loader@7.3.1 --save-dev

SpreadsheetID	SheetName
123456789012345678901234567890123456789012345	HistName

コード.gs

function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
  return html;
}


function appendData(inputData){

  var spreadSheetID_write = "123456789012345678901234567890123456789012345";
  var sheetName_write = 'HistName';    
  var sheet = SpreadsheetApp.openById(spreadSheetID_write).getSheetByName(sheetName_write);

  var dataList = [];

  for (i in inputData){
    var approvedSet = inputData[i];
    dataList.push(approvedSet);
  }

  sheet.appendRow(dataList);
}

vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

<script>  
  var app = new Vue({
    el: '#app',
    data: {
      showTemplate: 'App',
      inputName: '',
      rndNum: '',
      setAppData:[],
    },
    methods:{
      checkApp: function(){
        this.showTemplate = 'Confirm';
      },

      checkConfirm: function(){
        this.showTemplate = 'Thanks';
        this.setData();

        google.script.run
          .withSuccessHandler(function(arg){
            alert("データの登録に成功しました。");
          })
          .withFailureHandler(function(arg){
            console.log(arg);
            alert("データの登録に失敗しました。");
          }).appendData(this.setAppData);
      },

      setData: function(){
        this.setAppData = [];
        this.rndNum = this.createRndNum();

        // inputするデータ配列の作成
        this.setAppData.push(this.rndNum);
        this.setAppData.push(this.inputName);
      },      

      createRndNum: function (){
        var l = 12;

        // 生成する文字列に含める文字セット
        var c = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        var cl = c.length;
        var r = "";
        for(var i=0; i<l; i++){
          r += c[Math.floor(Math.random()*cl)];
        }
        return r;
      },
    },
  })
</script>

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id="app">

  <template v-if="showTemplate === 'App'">

    <input type="text" id="inputName" name="inputName" v-model="inputName"></input>
    <button type="submit" v-on:click="checkApp">確認画面に進む</button>

  </template>


  <template v-if="showTemplate === 'Confirm'">

    <input type="text" id="inputName" name="inputName" v-model="inputName" disabled=""></input>
    <button type="submit" v-on:click="checkConfirm">登録</button>

  </template>


  <template v-if="showTemplate === 'Thanks'">
　  <p>Thanks！</p>
    <p>{{  setAppData  }}</p>
  </template>


  </div>
  </body>
  <?!= HtmlService.createHtmlOutputFromFile('vue').getContent(); ?>
</html>

SpreadsheetID	SheetName
123456789012345678901234567890123456789012345	HistName

コード.gs

function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
  return html;
}


function appendData(inputData){

  var spreadSheetID_write = "123456789012345678901234567890123456789012345";
  var sheetName_write = 'HistName';    
  var sheet = SpreadsheetApp.openById(spreadSheetID_write).getSheetByName(sheetName_write);

  var dataList = [];

  for (i in inputData){
    var approvedSet = inputData[i];
    dataList.push(approvedSet);
  }

  sheet.appendRow(dataList);
}

vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

<script>  
  var app = new Vue({
    el: '#app',
    data: {
      showTemplate: 'App',
      inputName: '',
      rndNum: '',
      setAppData:[],
    },
    methods:{
      checkApp: function(){
        this.showTemplate = 'Confirm';
      },

      checkConfirm: function(){
        this.showTemplate = 'Thanks';
        this.setData();

        google.script.run
          .withSuccessHandler(function(arg){
            alert("データの登録に成功しました。");
          })
          .withFailureHandler(function(arg){
            console.log(arg);
            alert("データの登録に失敗しました。");
          }).appendData(this.setAppData);
      },

      setData: function(){
        this.setAppData = [];
        this.rndNum = this.createRndNum();

        // inputするデータ配列の作成
        this.setAppData.push(this.rndNum);
        this.setAppData.push(this.inputName);
      },      

      createRndNum: function (){
        var l = 12;

        // 生成する文字列に含める文字セット
        var c = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        var cl = c.length;
        var r = "";
        for(var i=0; i<l; i++){
          r += c[Math.floor(Math.random()*cl)];
        }
        return r;
      },
    },
  })
</script>

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id="app">

  <template v-if="showTemplate === 'App'">

    <input type="text" id="inputName" name="inputName" v-model="inputName"></input>
    <button type="submit" v-on:click="checkApp">確認画面に進む</button>

  </template>


  <template v-if="showTemplate === 'Confirm'">

    <input type="text" id="inputName" name="inputName" v-model="inputName" disabled=""></input>
    <button type="submit" v-on:click="checkConfirm">登録</button>

  </template>


  <template v-if="showTemplate === 'Thanks'">
　  <p>Thanks！</p>
    <p>{{  setAppData  }}</p>
  </template>


  </div>
  </body>
  <?!= HtmlService.createHtmlOutputFromFile('vue').getContent(); ?>
</html>

vue-routerの優先度は先に定義されたものが高くなる

はい、少しハマりました。

ハマった点はこちら

※一部省略しています。

router/index.js

const routes = [
    {
        path: '/',
        component: App,
    },
    {
        path: '/:path',
        name: 'week',
        component: Weekly,
    },
    {
        path: '/request',
        name: 'request',
        component: Request
    },
]

最初はこんな感じで書いていました。
上から順に
・homeのパス
・動的にルートを変更
・requestへのパス

こんな感じですね。
どうしてハマったかと言いますと、追加機能を/requestで定義してたんですね。
だけど、タイトルの通りvue-routerは先に定義されたルートの方が優先度高いので、同じものがあったら先に定義されたルートをマッチさせるんですね。

router/index.js

const routes = [
   {
     path: '/:path',
     name: 'week',
     component: Weekly,
   }
]

こいつですね。こいつにマッチしていたのでWeeklyコンポーネントが表示されてしまっていました。

その元となる原因がこちら。

top.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    @include('common.head')
</head>
<body>
    <div id="app">
        <header>
            <the-header-component />
        </header>
        <main>
            <router-view />
        </main>
    </div>
</body>
</html>

TheHeaderComponent.vue

<template>
    <div class="header">
        <a href="/">TODOdo?</a>
        <div class="request_link_container">
            <router-link to="/request">
                ご意見・ご要望
            </router-link>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

こんな感じです。
headerに<router-link to="/request">を設定しているのですが、/requestに遷移した際、マッチするルートを探し始めます。
上から順に〜〜

router/index.js

const routes = [
    {
        path: '/',
        component: App, // マッチしませーーーーん！！！ next next!!!!!
    },
    {
        path: '/:path',　// こいつがあんじゃん！！！！！！
        name: 'week',
        component: Weekly,
    },
    {
        path: '/request', // 本来はこっち！！！！！！
        name: 'request',
        component: Request
    },
]

ってな風にWeeklyコンポーネントが表示されてしまっていました。
なので単純に順番を変えて解決しました。

404の設定

じゃあ、404の設定はどうするんだ？となりました。
ちなみにこんな感じで、本来は曜日に関するパスでしかWeeklyコンポーネントを表示させたくない。
だけど、このままではどんなパスでもWeeklyコンポーネントが表示されてしまう。

app.vue

<template>
  <div class="weekly_card_container">
    <div v-for="(week, index) in weeks" :key="index">
      <router-link class="weekly_card" :to="{ name : 'week', params : { path: week.path }}">
        <div class="weeklytext">
          {{week.week}}曜日
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weeks: [
        {path: 'mon', week: '月'},
        {path: 'tue', week: '火'},
        {path: 'wed', week: '水'},
        {path: 'thu', week: '木'},
        {path: 'fri', week: '金'},
        {path: 'sat', week: '土'},
        {path: 'sun', week: '日'}
      ],
    }
  }
</script>

なので使いましたよ。
ナビゲーションガードを。

ナビゲーションガード

router/index.js

const routes = [
    {
        path: '*',
        component: NotFound
    },
    {
        path: '/404', 
        component: NotFound
    },
    {
        path: '/',
        component: App,
    },
    {
        path: '/request',
        name: 'request',
        component: Request
    },
    {
        path: '/:path',
        name: 'week',
        component: Weekly,
        beforeEnter: (to, from, next) => {
            const weekArray = ['mon','tue','wed','thu','fri','sat','sun']
            const week      = to.params.path
            if (weekArray.indexOf(week) >= 0) {
                next()
            } else {
                next('/404')
            }
        }
    },
]

const router = new VueRouter({
    mode: 'history',
    routes: routes
})

export default router

このbeforeEnterと言うものですね。
ナビゲーションガード(beforeEnter)

やってることは簡単です。
パスが曜日に関するものでなければ404のページを表示させるようにしています。

ただ、もっと良い方法がありそうな気がします。。。

まとめ

vue-routerは先に定義されたルートほど優先度が高いと言うお話でした。
ドキュメントは読む！！これにつきますね。

もっとこうした方がいいなどのアドバイスや、その考え方は間違っているなどあればご指摘いただければ嬉しく思います。

Display a set of data with hierarchies.

■vuejsexamples
https://vuejsexamples.com/tag/tree/

■iview
https://www.iviewui.com/components/tree

■vue-beauty
https://fe-driver.github.io/vue-beauty/#/components/tree

■element-ui
https://element.eleme.cn/2.0/#/zh-CN/component/tree

Display a set of data with hierarchies.

■vuejsexamples
https://vuejsexamples.com/tag/tree/

■iview
https://www.iviewui.com/components/tree

■vue-beauty
https://fe-driver.github.io/vue-beauty/#/components/tree

■element-ui
https://element.eleme.cn/2.0/#/zh-CN/component/tree

この記事はただの集団 Advent Calendar 2019の5日目の記事です。
( 内容が薄くて大変申し訳ありません )

ざっくりFirestore + Vue.jsの使い方

フロントエンドでも簡単にサーバーサイド込みで実装できると噂のFirebaseを
いじってみたので簡単にですがFirebaseのサービスの一つFirestore についてまとめてみました。

● Firestoreについて

Firestore は Realtime Database の進化版のようなものです。
ドキュメント指向のいわゆる NoSQL と言われるタイプのDBで、
MongoDBとかDynamoDBと同じカテゴリに入るやつです。

● 開発環境

• Mac : Mojave ~ Catalina
• Node.js : v10.17.0 (nodebrewでバージョン管理)
• yarn : v1.19.1 (brewでインストール)
• Vue CLI : v3.12.1 (globalにインストール)
• Firebase CLI : v7.8.1 (globalにインストール)

■ 初期設定

社内の勉強会で使用した資料ですが、下記を参考に初期設定。

• Macにvue-cliを導入する
• Macでvue-cli + Firebase toolsの初期設定

■ Firebaseモジュールをインストール

firebaseモジュールのインストール

# firebase SDKをインストール
$ yarn add firebase

# authとか使うときに便利らしいのでとりあえずいれる
$ yarn add firebaseui

■ Firebaseモジュールをインポートする準備

/src/plugins/firebaseConfig.js

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/storage";
import "firebase/auth";

// ↓は各自異なる値になると思います
const firebaseConfig = {
  apiKey: "hogehoge",
  authDomain: "hoge.firebaseapp.com",
  databaseURL: "https://hoge.firebaseio.com",
  projectId: "hoge",
  storageBucket: "hoge.appspot.com",
  messagingSenderId: "123456789",
  appId: "hogefuga"
};

export default firebase.initializeApp(firebaseConfig);

/src/plugins/firestore.js

// initializeしたものをimportする
import firebase from "@/plugins/firebaseConfig";
export default firebase.firestore();

/src/plugins/cloudStorage.js

// initializeしたものをimportする
import firebase from "@/plugins/firebaseConfig";
export default firebase.storage();

● Firestoreを試す

あくまでサンプルなので、誰でも全件データが編集削除できるザル仕様になってます。
コード自体も簡略化していますので、そのままだと動かない可能性が・・・

■ Create

src/views/Create.vue

<template>
<div class="create">
  <input v-model="inputData.name" type="text">
  <button @click="create">送信</button>
</div>
</template>
<script>
import Firebase from 'firebase/app'
import db from '@/plugins/firestore'
export default {
  data () {
    return {
      inputData: {
        name: '',
      }
    }
  },
  methods: {
    create () {
      db.collection('records')
        .add({
          name: this.inputData.name,
          createBy: this.$store.state.user.uid,
          createAt: Firebase.firestore.Timestamp.now(),
          updateAt: Firebase.firestore.Timestamp.now()
        })
        .then(docRef => {
          alert(`Document written with ID: ${docRef.id}`);
        })
        .catch(error => {
          alert(`Error adding document: ${error}`);
        });
    }
  }
}
</script>

■ Read

/src/views/Read.vue

<template>
  <div class="read">
    <ul>
      <li v-for="(record, index) in records" :key="index">
        {{ record.data.name }}
      </li>
    </ul>
  </div>
</template>
<script>
import Firebase from 'firebase/app'
import db from '@/plugins/firestore'
export default {
  data () {
    return {
      records:[]
    }
  },
  methods: {
    read () {
      // とりあえず全件取得。
      db.collection('records')
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
            this.records.push({
              id: doc.id,
              data: doc.data()
            })
          })
        })
    }
  },
  created () {
    this.read()
  }
}
</script>

↓取得条件を含めるとこんな感じで書けるらしい。

/src/views/Read.vue

<script>
// 前略
read () {
  db.collection('records')
    .where('createBy', '==', this.$store.state.user.uid)
    .then(querySnapshot => {
      querySnapshot.forEach(doc => {
        this.records.push({
          id: doc.id,
          data: doc.data()
        })
      })
    })
}
// 後略
</script>

■ Update

/src/views/Update.vue

<template>
  <div class="update">
    <input v-model="recordId" type="text">
    <input v-model="editedData.name" type="text">
    <button @click="delete">更新</button>
  </div>
</template>
<script>
import Firebase from "firebase/app";
import db from "@/plugins/firestore";
export default {
  data () {
    return {
      recordId: 'hoge',
      editedData: {
        name: '',
        updateAt: Firebase.firestore.Timestamp.now()

      }
    }
  },
  methods: {
    // 指定されたIDのdataを更新する
    update () {
      db.collection('records')
        .doc(this.recordId)
        .update(this.editedData)
        .then(() => {
          alert('Document successfully updated!')
        })
        .catch(error => {
          console.log('Error updating document: ', error)
        })
    }
  }
}
</script>

■ Delete

/src/views/Delete.vue

<template>
  <div class="delete">
    <input v-model="recordId" type="text">
    <button @click="delete">削除</button>
  </div>
</template>
<script>
import Firebase from 'firebase/app'
import db from '@/plugins/firestore'
export default {
  data () {
    return {
      recordId: 'hoge',
    }
  },
  methods: {
    // 指定されたIDのdataを削除する(物理削除)
    delete () {
      db.collection('records')
        .doc(this.recordId)
        .delete()
        .then(() => {
          alert('Document successfully deleted!');
        })
        .catch(error => {
          console.log('Error removing document: ', error)
        })
    }
  }
}
</script>

おまけ

Cloud Storageも主題として書きたかったのですが、Update,Delete機能が間に合いませんでした。
でも折角なので載せておきます

■ Create

/src/views/CreateStorage.vue

<template>
<div class="createStorage">
  <input type="file" @change="onFileChange">
  <button @click="fileSubmit()">登録</button>
</div>
</template>
<script>
import storage from '@/plugins/cloudStorage'
import db from '@/plugins/firestore'
export default {
  data  () {
    return {
      // uploadするファイルを格納
      file: [],
      // 登録用meta情報
      submitData: {
        filePath: '',
        createBy: this.$store.state.user.uid
      },
    }
  },
  methods: {
    onFileChange() {
      this.submitData.filePath = this.file.name;
    },
    fileInfoRegister(meta_data) {
      db.collection('meta')
        .add(meta_data)
        .then(docRef => {
          console.log(docRef)
        })
        .catch(error => {
          console.log(error)
        });
    },
    fileSubmit() {
      if (this.file.name) {
        // storageのrootディレクトリにファイルを保存する想定
        storage.ref()
          .child(`${this.submitData.filePath}`)
          .put(this.file)
          .then(snapshot => {
            console.log(`Uploaded a file: ${snapshot.metadata.fullPath}`)
          })
          .catch(error => {
            console.error(`${error.code}:${error.message}`)
          })
          this.fileInfoRegister(this.submitData)
          this.submitData = {}
        }
      }
    },
  }
}
</script>

■ Read

/src/views/ReadStorage.vue

<template>
<div class="readStorage">
  <ul>
   <li v-for="(refImgUrl, index) in refImgUrls" :key="index">
      <img :src="refImgUrl">
   </li>
  </ul>
</div>
</template>
<script>
import storage from '@/plugins/cloudStorage'
import db from '@/plugins/firestore'
export default {
  data  () {
    return {
      // dbから取得したもの
      getImgUrls: [],
      // storageからrefで取得したもの
      refImgUrls: [],
    }
  },
  methods: {
    fileRead () {
      db.collection('meta')
        .where('createBy', '==', this.$store.state.user.uid)
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
            this.getImgUrls.push({
              id: doc.id,
              data: `${doc.data().parentDir}${doc.data().fileName}`
            })
          })
          this.getImgUrls.forEach(ref => {
            storage
              .ref()
              .child(ref.data)
              .getDownloadURL()
              .then(url => {
                this.refImgUrls.push(url)
              })
              .catch(error => {
                console.log(error)
              })
          })
      })
    }
  }
  created() {
    this.fileRead()
  },
}
</script>

あとがき

FirebaseはJSが読み書きできれば、自分のアイディアを形にできるので触っていてとても楽しいです。
デメリットがあるとすれば、各種rulesファイルの書き方が独特だということでしょうかね。
ちなみにサンプルコードはルールをテストモードで動かしてますので、権限周りは本当にザルです。

今回は題材をFirestoreに絞りましたが、
Cloud Storage のリベンジと Firebase Authenticationでの権限設定
Cloud Functions + Firebase Admin SDKで通知設定なども機会があれば記事を書いて見ようかと思います。

　たまに地図上にメモを残せないかな？と考えていたのですが、Googleマップはちょっと敷居高いし、何か良い方法はないかな？と思って、「めもいち」と言うPWAサイトを自作してみたお話です。（ソースコードはGitHubリポジトリを参照のこと。

制作の動機

　もともと携帯電話の基地局を歩いて探すことをしていて（かなりマニアック）GoogleMapを使ってたのですが、いちいちその場でサイト開いて…とかめんどくさい。もっと気楽にマーキングできないか？と考えて、とりあえず個人的メモをOpenStreetMapに書き込もうと考えました。偶然 leaflet.js ってライブラリを見つけたのもありました。

そもそも独自性はあるのか？

　作る前に、代用できる物ってないのかな？って考えたんですよね。一般のGPSロガーとか、スマホのカメラの位置情報と地図の関連付けとか別にスマホがあれば使えるし… 言った先での写真とかなら instagram とか Swarm(Foursquare) とか考えましたが、パパッとメモするのにカメラ立ち上げてシャッター音ならして逆に問題大ありだろう…と思って、やっぱり作るしか…となりました。

　あと、個人の位置をクラウドに保存するのもプライバシーの観点からどうか？と思って、結局ローカルストレージに格納することにしました。ローカルストレージなのでさすがに写真撮影はバッサリ切り落としました。

制作するにあたって

　Vue.jsでPWAは前回の「まねかん」である程度はやってたのですが、どうせなら Webpack とかWorkbox とか使いたいって言う頭があったので、とりあえず Vue-cli で作成することにしました。PWAにもするのでWorkboxも使いますが、サーバはレンタルサーバーなので、サーバー側ではNode.js使えない…。（これは仕方ない）

テンプレート

　制作環境を構築するにあたって参考にした記事は、下記のページです。
・ Vue.jsでPWAアプリを作る
・ Vueのプロジェクトでworkboxを使ってみる。workboxについて説明してみる
・ webpackでビルドする前にeslintで.vueと.jsの構文チェックをする | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0004
・ Vue で地図を表示する無料で最短の道
　素材作成のために Shade13 と Adobe Photoshop CC も使ってます。

地図を表示させる

地図を初期化しなければいけないので、 mounted() に地図を表示させます。

leaflet.vue（抜粋）

<template>
  <div id="leaflet-vue" />
</template>
〜〜中略〜〜
export default {
  props: {
    geoList: {
      type: Array,
      default: null,
    },
    selected: {
      type: String,
      default: null,
    },
  },
  data () {
    return {
      leafletMap: null,
      markers: [],
      LeyerGroup: null,
    };
  },
  watch: {
    geoList (newVal, oldVal) {
      this.geoList = newVal;
      this.GeoMapRender();
    },
  },
  mounted () {
    // マップを表示させる
    this.leafletMap = L.map('leaflet-vue', {
      center: L.latLng(34.77530283508074, 138.01500141620636),
      zoom: 4,
      layers: this.points,
    }).addLayer(
      L.tileLayer(
        'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.(mapboxのトークン)',
        {
          maxZoom: 18,
          attribution:
            'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          id: 'mapbox.streets',
        }
      )
    );
  },
〜〜中略〜〜

これはそんなに難しくないです。ほとんどleafletのサンプル通り。

マーカーを描画する

leaflet.vue（抜粋）

〜〜中略〜〜
  methods: {
    GeoMapRender () {
      // マーカーのレイヤーグループがあれば削除
      if (this.layerGroup) {
        this.leafletMap.removeLayer(this.layerGroup);
      }
      this.markers = [];
      this.leafletMap.attributionControl.setPrefix(false);

      // おまじない
      const _self = this;

      // マーカーの数だけループ
      for (const item of this.geoList) {

        // マーカーを追加する。
        const marker = L.marker([item.latitude, item.longitude], {
          icon: item.marker_type === 'thumbtack' ? iconsThumbtack[item.color] : iconsNeedle[item.color],
          draggable: 'true',
          id: item.id,
        })
          .bindPopup(
            `${item.memo && item.memo.length ? item.memo.replace(/\n/g, '<br />') : ''}
              <p class="font-italic">at ${moment(item.time).format('YYYY.MM.DD HH:mm:ss')}`
          )
          .openPopup();

        // マーカーが移動されたら移動されたマーカーの緯度経度を親に返す
        marker.on('dragend', function () {
          const position = this.getLatLng();
          const index = this.options.id;
          const geoItem = _self.geoList.find(v => v.id === index);
          if (geoItem) {
            geoItem.latitude = position.lat;
            geoItem.longitude = position.lng;
            _self.$emit('onmoveditem', geoItem);
          }
        });

        // マーカーをタップされたら、マーカーのIDを親に返す
        marker.on('click', function () {
          const index = this.options.id;
          _self.$emit('onselectitem', index);
        });
        this.markers.push(marker);
      }

      // マーカーをレイヤーグループに追加してマップに重ねる
      this.layerGroup = L.layerGroup(this.markers);
      this.layerGroup.addTo(this.leafletMap);

      // 最後に追加したマーカーをマップの中心点にする。
      if (this.geoList.length > 0) {
        const lastGeo = Array.from(this.geoList).slice(-1);
        this.leafletMap.setView([lastGeo[0].latitude, lastGeo[0].longitude], 15);
      }
    },
  },
〜〜中略〜〜

　マーカーは更新されるとマップ上からマーカー用のレイヤーを削除して再描画させます。（こうしないとうまく更新できなかった）
　マーカーの管理はもっとちゃんとしないとダメかなぁ？とか思いましたが私の頭ではうまく思いつかなかったです。

メイン画面

App.vue（抜粋）

<template>
  <div id="app">
    <leaflet-vue
      :geo-list="geoList"
      @onmoveditem="onMovedItem($event)"
      @onselectitem="onSelectItem($event)"
    />
    <div id="form">
      <vm-status-indicator
        pulse
        :color="statusMode"
        class="indicator"
      >
        {{ statusMessage }}
      </vm-status-indicator>
      <vm-status-indicator
        pulse
        :color="errorLevel"
        class="indicator"
      >
        {{ errorMessage }}
      </vm-status-indicator>
      <div>
        <select
          v-model="selectedGeoListItem.marker_type"
          @change="onChange"
        >
          <option
            disabled
            value=""
          >
            マーカーを選択
          </option>
          <option
            v-for="item of markerTypes"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}
          </option>
        </select>
        <img
          :src="`/images/${selectedGeoListItem.marker_type}2_${selectedGeoListItem.color}_x2.png`"
          class="type_icon"
        >
      </div>
      <div>
        <span v-for="item of colors" :key="item.type">
          <input
            :id="item.type"
            v-model="selectedGeoListItem.color"
            type="radio"
            :value="item.type"
            @change="onChange"
          >
          <label
            :for="item.type"
            :style="`color: ${item.color}`"
          >■</label>
        </span>
      </div>
      <label>
        <textarea
          v-model="selectedGeoListItem.memo"
          placeholder="ここにメモする内容を書いてください。"
          @change="onChange"
        />
      </label>
      <button
        class="btn-lg"
        @click="SubmitButtonClick"
      >
        {{ buttonCaption }}
      </button>
      <button
        class="btn-lg"
        :disabled="isButtonDisabled"
        @click="DeleteButtonClick"
      >
        選択されたメモを削除
      </button>
    </div>
  </div>
</template>

import VueGeolocation from 'vue-browser-geolocation';
import moment from 'moment';
import store from 'store2';
import leafletVue from './components/leaflet.vue';
import 'jquery';
import 'vuemerang/dist/vuemerang.css';

〜〜中略〜〜

const cookiehead = '.Horornis-Simple-GPS-Memo-v1_2_2';
const storejs = store;

export default {
  components: {
    leafletVue,
    VueGeolocation,
  },
  data () {
    return {
      colors: [
        {
          type: 'clear',
          color: 'white',
        },
        {
          type: 'black',
          color: 'black',
        },
        {
          type: 'red',
          color: 'red',
        },
        {
          type: 'yellow',
          color: 'yellow',
        },
        {
          type: 'green',
          color: 'lawngreen',
        },
        {
          type: 'blue',
          color: 'blue',
        },
        {
          type: 'purple',
          color: 'magenta',
        },
      ],
      intervalId: undefined,
      latitude: 0,
      longitude: 0,
      memo: '',
      geoList: [],
      statusMode: 'success',
      statusMessage: '新規',
      errorLevel: 'default',
      errorMessage: '誤差: 計測中',
      templateItem: {
        id: null,
        latitude: null,
        longitude: null,
        accuracy: null,
        memo: '',
        time: moment(),
        color: 'yellow',
        marker_type: 'needle',
      },
      color: 'yellow',
      markerType: 'needle',
      markerTypes: [
        {
          id: 'needle',
          name: '針',
        },
        {
          id: 'thumbtack',
          name: '画鋲',
        },
      ],
      selectedId: null,
      buttonCaption: 'タップしてメモを追加',
    };
  },
  computed: {
    isButtonDisabled () {
      return this.selectedId === null;
    },
    selectedGeoListItem () {
      if (this.selectedId) {
        const item = this.geoList.find(v => v.id === this.selectedId);
        if (!item.marker_type) item.marker_type = 'needle';
        // console.log('selectedItem', item)
        return item;
      }
      return this.templateItem;
    },
  },
  mounted () {
    if (storejs.has(cookiehead)) {
      this.geoList = storejs.get(cookiehead);
    }
    this.gpsCheck();
    const _self = this;
    this.intervalId = setInterval(function () {
      _self.gpsCheck();
    }, 60000);
  },
  beforeDestroy () {
    clearInterval(this.intervalId);
    const _self = this;
    this.intervalId = setInterval(function () {
      _self.gpsCheck();
    }, 60000);
  },
  methods: {
    gpsCheck () {
      console.log('Do checking GPS status now');
      this.errorLevel = 'default';
      this.errorMessage = '誤差: 計測中';
      VueGeolocation.getLocation({
        enableHighAccuracy: false, // defaults to false
        timeout: Infinity, // defaults to Infinity
        maximumAge: 0, // defaults to 0
      }).then(coordinates => {
        if (coordinates.accuracy > 50) {
          this.errorLevel = 'danger';
          this.errorMessage = `誤差: ${Math.round(coordinates.accuracy)}m`;
        } else if (coordinates.accuracy > 30) {
          this.errorLevel = 'warning';
          this.errorMessage = `誤差: ${Math.round(coordinates.accuracy)}m`;
        } else if (coordinates.accuracy > 10) {
          this.errorLevel = 'success';
          this.errorMessage = `誤差: ${Math.round(coordinates.accuracy)}m`;
        } else {
          this.errorLevel = 'primary';
          this.errorMessage = `誤差: ${Math.round(coordinates.accuracy)}m`;
        }
      });
    },
    onChange () { // マーカーがタップされたときの処理
      if (this.selectedId) {
        const newGeoList = this.geoList.filter(v => v.id !== this.selectedId);
        newGeoList.push(this.selectedGeoListItem);
        newGeoList.sort((a, b) => {
          if (a.id < b.id) return -1;
          if (a.id > b.id) return 1;
          return 0;
        });
        this.geoList = newGeoList;
        this.buttonCaption = 'タップしてメモを更新';
        this.statusMode = 'warning';
        this.statusMessage = '編集中';
      }
    },
    onMovedItem (event) { // マーカーが移動されたときの処理
      const item = this.geoList.find(v => v.id === event.id);
      if (item) {
        item.latitude = event.latitude;
        item.longitude = event.longitude;
      }
      storejs.set(cookiehead, this.geoList);
    },
    onSelectItem (event) { // マーカーがタップされたときの処理
      this.selectedId = event;
      this.buttonCaption = 'タップしてメモを更新';
      this.statusMode = 'warning';
      this.statusMessage = '編集中';
    },
    SubmitButtonClick () { // マーカーを追加か編集確定
      if (!this.selectedId) {
        VueGeolocation.getLocation({
          enableHighAccuracy: false, // defaults to false
          timeout: Infinity, // defaults to Infinity
          maximumAge: 0, // defaults to 0
        }).then(coordinates => {
          const max = this.geoList.length > 0 ? Math.max(...this.geoList.map(v => v.id)) : 0;
          this.geoList.push({
            id: max + 1,
            latitude: coordinates.lat,
            longitude: coordinates.lng,
            accuracy: coordinates.accuracy,
            memo: this.selectedGeoListItem.memo,
            time: moment(Date.now()),
            color: this.selectedGeoListItem.color,
            marker_type: this.selectedGeoListItem.marker_type,
          });
          if (coordinates.accuracy <= 30) {
            this.$toasted.show(`メモ "${this.selectedGeoListItem.memo}" を追加しました。`, toastOptionsSuccess);
            storejs.set(cookiehead, this.geoList);
          } else {
            this.$toasted.show(
              `メモ "${
                this.selectedGeoListItem.memo
              }" を追加しました。<br />測位誤差が大きいのでマーカーの位置を確認してください。`,
              toastOptionsWarning
            );
            storejs.set(cookiehead, this.geoList);
          }
          this.selectedId = null;
          this.selectedGeoListItem.memo = '';
          this.buttonCaption = 'タップしてメモを追加';
          this.statusMode = 'success';
          this.statusMessage = '新規';
        });
      } else {
        this.selectedId = null;
        this.selectedGeoListItem.memo = '';
        this.buttonCaption = 'タップしてメモを追加';
        this.statusMode = 'default';
        this.statusMessage = '新規';
      }
    },
    DeleteButtonClick () {
      const aItem = this.selectedGeoListItem;
      this.selectedId = null;
      this.$toasted.show(`"${aItem.memo}"を削除しました。`, toastOptionsSuccess);
      this.geoList = this.geoList.filter(v => v.id !== aItem.id);
      storejs.set(cookiehead, this.geoList);
      this.selectedId = null;
      this.buttonCaption = 'タップしてメモを追加';
      this.statusMode = 'default';
      this.statusMessage = '新規';
    },
  },
〜〜中略〜〜

総括

　そんなにトリッキーなことはやってないつもりですが、無駄は多いかもしれません。マーカーオブジェクトはそれそのものを保存しようか考えましたが、それは逆に扱いづらそうなので、Ｏｂｊｅｃｔ配列をそのまま利用してます。

　まだ、万人向けには直すべきところは多いと思いますが、とりあえず自分でちゃんと使える形にはなったので、要望とかがあれば、機能追加しようかな？と思います。

　最後まで読んでくださり、ありがとうございました。