> node -vv12.16.3> yarn -vv1.22.4

> yarn global add @vue/cli> vue --version@vue/cli 4.4.5

> vue create gas-account-book

Vue CLI v4.4.5? Please pick a preset:      default (babel, eslint)  > Manually select features

? Check the features needed for your project: >(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support         (*) Router (*) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

? Pick a linter / formatter config: > ESLint with error prevention only  ESLint + Airbnb config  ESLint + Standard config  ESLint + Prettier

? Pick additional lint features:>(*) Lint on save ( ) Lint and fix on commit

? Where do you prefer placing config for Babel, ESLint, etc.? > In dedicated config files  In package.json

? Save this as a preset for future projects? (y/N) N

Vue CLI v4.4.5✨  Creating project in /xxxxx/gas-account-book.🗃️  Initializing git repository...⚙️  Installing CLI plugins. This might take a while...

🎉  Successfully created project gas-account-book.👉  Get started with the following commands: $ cd gas-account-book $ yarn serve

> cd gas-account-book

> vue add vuetify

✔  Successfully installed plugin: vue-cli-plugin-vuetify? Choose a preset:> Default (recommended)  Prototype (rapid development)  Configure (advanced)

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify vuetify  Discord community: https://community.vuetifyjs.com vuetify  Github: https://github.com/vuetifyjs/vuetify vuetify  Support Vuetify: https://github.com/sponsors/johnleider

> yarn serve

src/  assets/ ...... ロゴなどのアセット  components/ .. 主に再利用する vue コンポーネント  plugins/ ..... vuetify などのプラグイン  router/ ...... ルーティングの設定  store/ ....... Vuexストアの設定  views/ ....... ページを構成する vue ファイル  App.vue ...... Vueアプリのメインファイル  main.js ...... エントリポイントとなるファイル

<template><v-app><!-- ツールバー --><v-app-barappcolor="green"dark><!-- タイトル --><v-toolbar-title>GAS 家計簿</v-toolbar-title><v-spacer></v-spacer><!-- テーブルアイコンのボタン --><v-btniconto="/"><v-icon>mdi-file-table-outline</v-icon></v-btn><!-- 歯車アイコンのボタン --><v-btniconto="/settings"><v-icon>mdi-cog</v-icon></v-btn></v-app-bar><!-- メインコンテンツ --><v-main><v-containerfluid><!-- router-view の中身がパスによって切り替わる --><router-view></router-view></v-container></v-main></v-app></template><script>exportdefault{name:'App'}</script>

<!-- テーブルアイコンのボタン --><v-btniconto="/"><!-- クリックで "/" へ移動する --><v-icon>mdi-file-table-outline</v-icon></v-btn><!-- 歯車アイコンのボタン --><v-btniconto="/settings"><!-- クリックで "/settings" へ移動する --><v-icon>mdi-cog</v-icon></v-btn>

<!-- router-view の中身がパスによって切り替わる --><router-view></router-view>

constroutes=[{path:'/',// パスが "/" のときの設定name:'Home',// このルートに "Home" という名前をつけるcomponent:Home// router-view の中に Home コンポーネントを表示する},

importHomefrom'../views/Home.vue'

<template><div><h1>Home だよ</h1></div></template><script>exportdefault{name:'Home'}</script>

<template><div><h1>Settings だよ</h1></div></template><script>exportdefault{name:'Settings'}</script>

importVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../views/Home.vue'importSettingsfrom'../views/Settings.vue'Vue.use(VueRouter)constroutes=[{path:'/',name:'Home',component:Home},{path:'/settings',name:'Settings',component:Settings}]constrouter=newVueRouter({routes})exportdefaultrouter

<template><div><v-card><v-card-title><!-- 月選択 --><v-colcols="8"><v-menuref="menu"v-model="menu":close-on-content-click="false":return-value.sync="yearMonth"transition="scale-transition"offset-ymax-width="290px"min-width="290px"><templatev-slot:activator="{ on }"><v-text-fieldv-model="yearMonth"prepend-icon="mdi-calendar"readonlyv-on="on"hide-details/></template><v-date-pickerv-model="yearMonth"type="month"color="green"locale="ja-jp"no-titlescrollable><v-spacer/><v-btntextcolor="grey"@click="menu = false">キャンセル</v-btn><v-btntextcolor="primary"@click="$refs.menu.save(yearMonth)">選択</v-btn></v-date-picker></v-menu></v-col><v-spacer/><!-- 追加ボタン --><v-colclass="text-right"cols="4"><v-btndarkcolor="green"><v-icon>mdi-plus</v-icon></v-btn></v-col><!-- 検索フォーム --><v-colcols="12"><v-text-fieldv-model="search"append-icon="mdi-magnify"label="Search"single-linehide-details/></v-col></v-card-title><!-- テーブル --><v-data-tableclass="text-no-wrap":headers="tableHeaders":items="tableData":search="search":footer-props="footerProps":loading="loading":sort-by="'date'":sort-desc="true":items-per-page="30"mobile-breakpoint="0"></v-data-table></v-card></div></template><script>exportdefault{name:'Home',data(){consttoday=newDate()constyear=today.getFullYear()constmonth=('0'+(today.getMonth()+1)).slice(-2)return{/** ローディング状態 */loading:false,/** 月選択メニューの状態 */menu:false,/** 検索文字 */search:'',/** 選択年月 */yearMonth:`${year}-${month}`,/** テーブルに表示させるデータ */tableData:[/** サンプルデータ */{id:'a34109ed',date:'2020-06-01',title:'支出サンプル',category:'買い物',tags:'タグ1',income:null,outgo:2000,memo:'メモ'},{id:'7c8fa764',date:'2020-06-02',title:'収入サンプル',category:'給料',tags:'タグ1,タグ2',income:2000,outgo:null,memo:'メモ'}]}},computed:{/** テーブルのヘッダー設定 */tableHeaders(){return[{text:'日付',value:'date',align:'end'},{text:'タイトル',value:'title',sortable:false},{text:'カテゴリ',value:'category',sortable:false},{text:'タグ',value:'tags',sortable:false},{text:'収入',value:'income',align:'end'},{text:'支出',value:'outgo',align:'end'},{text:'メモ',value:'memo',sortable:false},{text:'操作',value:'actions',sortable:false}]},/** テーブルのフッター設定 */footerProps(){return{itemsPerPageText:'',itemsPerPageOptions:[]}}}}</script>

<!-- 検索フォーム --><v-colcols="12"><v-text-fieldv-model="search"入力したデータをthis.searchと同期append-icon="mdi-magnify"検索アイコンlabel="Search"ラベル名single-line1行だけ入力できるhide-details文字カウントなどを非表示/></v-col>

<!-- テーブル --><v-data-tableclass="text-no-wrap"文字を折り返さないようにするクラス:headers="tableHeaders"ヘッダー設定:items="tableData"テーブルに表示するデータ:search="search"検索する文字:footer-props="footerProps"フッター設定:loading="loading"ローディング状態:sort-by="'date'"ソート初期設定（列名）:sort-desc="true"ソート初期設定（降順）:items-per-page="30"テーブルに最大何件表示するかmobile-breakpoint="0"モバイル表示にさせる画面サイズ（今回はモバイル表示にさせたくないので0を設定）>

/** テーブルのヘッダー設定 */tableHeaders(){return[{text:'日付',value:'date',align:'end'},{text:'タイトル',value:'title',sortable:false},{text:'カテゴリ',value:'category',sortable:false},{text:'タグ',value:'tags',sortable:false},{text:'収入',value:'income',align:'end'},{text:'支出',value:'outgo',align:'end'},{text:'メモ',value:'memo',sortable:false},{text:'操作',value:'actions',sortable:false}]},

<!-- ～ 省略 ～ --><!-- テーブル --><v-data-table～省略～><!-- 日付列 --><templatev-slot:item.date="{ item }">{{parseInt(item.date.slice(-2))+'日'}}</template><!-- タグ列 --><templatev-slot:item.tags="{ item }"><divv-if="item.tags"><v-chipclass="mr-2"v-for="(tag, i) in item.tags.split(',')":key="i">{{tag}}</v-chip></div></template><!-- 収入列 --><templatev-slot:item.income="{ item }">{{separate(item.income)}}</template><!-- タグ列 --><templatev-slot:item.outgo="{ item }">{{separate(item.outgo)}}</template><!-- 操作列 --><templatev-slot:item.actions="{}"><v-iconclass="mr-2">mdi-pencil</v-icon><v-icon>mdi-delete</v-icon></template></v-data-table><!-- ～ 省略 ～ -->

/** ～ 省略 ～ */<script>exportdefault{name:'Home',data(){/** ～ 省略 ～ */},computed:{/** ～ 省略 ～ */},methods:{/**     * 数字を3桁区切りにして返します。     * 受け取った数が null のときは null を返します。     */separate(num){returnnum!==null?num.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,'):null}}}</script>

<!-- 日付列 --><templatev-slot:item.date="{ item }"><!-- この中で、日付は item.date でアクセスできる --><!-- '2020-06-01' → '1日' に加工 -->{{parseInt(item.date.slice(-2))+'日'}}</template>

<template><!-- データ追加／編集ダイアログ --><v-dialogv-model="show"scrollablepersistentmax-width="500px"eager><v-card><v-card-title>{{titleText}}</v-card-title><v-divider/><v-card-text><v-formref="form"v-model="valid"><!-- 日付選択 --><v-menuref="menu"v-model="menu":close-on-content-click="false":return-value.sync="date"transition="scale-transition"offset-ymax-width="290px"min-width="290px"><templatev-slot:activator="{ on }"><v-text-fieldv-model="date"prepend-icon="mdi-calendar"readonlyv-on="on"hide-details/></template><v-date-pickerv-model="date"color="green"locale="ja-jp":day-format="date => new Date(date).getDate()"no-titlescrollable><v-spacer/><v-btntextcolor="grey"@click="menu = false">キャンセル</v-btn><v-btntextcolor="primary"@click="$refs.menu.save(date)">選択</v-btn></v-date-picker></v-menu><!-- タイトル --><v-text-fieldlabel="タイトル"v-model.trim="title":counter="20":rules="titleRules"/><!-- 収支 --><v-radio-grouprowv-model="inout"hide-details@change="onChangeInout"><v-radiolabel="収入"value="income"/><v-radiolabel="支出"value="outgo"/></v-radio-group><!-- カテゴリ --><v-selectlabel="カテゴリ"v-model="category":items="categoryItems"hide-details/><!-- タグ --><v-selectlabel="タグ"v-model="tags":items="tagItems"multiplechips:rules="[tagRule]"/><!-- 金額 --><v-text-fieldlabel="金額"v-model.number="amount"prefix="￥"pattern="[0-9]*":rules="amountRules"/><!-- メモ --><v-text-fieldlabel="メモ"v-model="memo":counter="50":rules="[memoRule]"/></v-form></v-card-text><v-divider/><v-card-actions><v-spacer/><v-btncolor="grey darken-1"text:disabled="loading"@click="onClickClose">          キャンセル</v-btn><v-btncolor="blue darken-1"text:disabled="!valid":loading="loading"@click="onClickAction">          {{ actionText }}</v-btn></v-card-actions></v-card></v-dialog></template><script>exportdefault{name:'ItemDialog',data(){return{/** ダイアログの表示状態 */show:false,/** 入力したデータが有効かどうか */valid:false,/** 日付選択メニューの表示状態 */menu:false,/** ローディング状態 */loading:false,/** 操作タイプ 'add' or 'edit' */actionType:'add',/** id */id:'',/** 日付 */date:'',/** タイトル */title:'',/** 収支 'income' or 'outgo' */inout:'',/** カテゴリ */category:'',/** タグ */tags:[],/** 金額 */amount:0,/** メモ */memo:'',/** 収支カテゴリ一覧 */incomeItems:['カテ1','カテ2'],outgoItems:['カテ3','カテ4'],/** 選択カテゴリ一覧 */categoryItems:[],/** タグリスト */tagItems:['タグ1','タグ2'],/** 編集前の年月（編集時に使う） */beforeYM:'',/** バリデーションルール */titleRules:[v=>v.trim().length>0||'タイトルは必須です',v=>v.length<=20||'20文字以内で入力してください'],tagRule:v=>v.length<=5||'タグは5種類以内で選択してください',amountRules:[v=>v>=0||'金額は0以上で入力してください',v=>Number.isInteger(v)||'整数で入力してください'],memoRule:v=>v.length<=50||'メモは50文字以内で入力してください'}},computed:{/** ダイアログのタイトル */titleText(){returnthis.actionType==='add'?'データ追加':'データ編集'},/** ダイアログのアクション */actionText(){returnthis.actionType==='add'?'追加':'更新'}},methods:{/**     * ダイアログを表示します。     * このメソッドは親から呼び出されます。     */open(actionType,item){this.show=truethis.actionType=actionTypethis.resetForm(item)if(actionType==='edit'){this.beforeYM=item.date.slice(0,7)}},/** キャンセルがクリックされたとき */onClickClose(){this.show=false},/** 追加／更新がクリックされたとき */onClickAction(){// あとで実装},/** 収支が切り替わったとき */onChangeInout(){if(this.inout==='income'){this.categoryItems=this.incomeItems}else{this.categoryItems=this.outgoItems}this.category=this.categoryItems[0]},/** フォームの内容を初期化します */resetForm(item={}){consttoday=newDate()constyear=today.getFullYear()constmonth=('0'+(today.getMonth()+1)).slice(-2)constdate=('0'+today.getDate()).slice(-2)this.id=item.id||''this.date=item.date||`${year}-${month}-${date}`this.title=item.title||''this.inout=item.income!=null?'income':'outgo'if(this.inout==='income'){this.categoryItems=this.incomeItemsthis.amount=item.income||0}else{this.categoryItems=this.outgoItemsthis.amount=item.outgo||0}this.category=item.category||this.categoryItems[0]this.tags=item.tags?item.tags.split(','):[]this.memo=item.memo||''this.$refs.form.resetValidation()}}}</script>

<!-- タイトル --><v-text-fieldlabel="タイトル"v-model.trim="title":counter="20":rules="titleRules"/>

// v には現在入力されているデータが入ってるv=>/** OKにする条件 */||/** NGのときに表示させる文字 */

titleRules:[v=>v.trim().length>0||'タイトルは必須です',v=>v.length<=20||'20文字以内で入力してください'],

<template><div><v-card><v-card-title><!-- ～ 省略 ～ --><!-- 追加ボタン --><v-colclass="text-right"cols="4"><v-btndarkcolor="green"@click="onClickAdd"><v-icon>mdi-plus</v-icon></v-btn></v-col><!-- ～ 省略 ～ --></v-card-title><!-- テーブル --><v-data-table><!-- ～ 省略 ～ --><!-- 操作列 --><templatev-slot:item.actions="{ item }"><v-iconclass="mr-2"@click="onClickEdit(item)">mdi-pencil</v-icon><v-icon>mdi-delete</v-icon></template></v-data-table></v-card><!-- 追加／編集ダイアログ --><ItemDialogref="itemDialog"/></div></template><script>importItemDialogfrom'../components/ItemDialog.vue'exportdefault{name:'Home',components:{ItemDialog},/** ～ 省略 ～ */methods:{/** ～ 省略 ～ *//** 追加ボタンがクリックされたとき */onClickAdd(){this.$refs.itemDialog.open('add')},/** 編集ボタンがクリックされたとき */onClickEdit(item){this.$refs.itemDialog.open('edit',item)}}}</script>

<!-- 追加／編集ダイアログ --><ItemDialogref="itemDialog"/>

/** 追加ボタンがクリックされたとき */onClickAdd(){this.$refs.itemDialog.open('add')},

<template><!-- 削除ダイアログ --><v-dialogv-model="show"persistentmax-width="290"><v-card><v-card-title/><v-card-textclass="black--text">        「{{ item.title }}」を削除しますか？</v-card-text><v-card-actions><v-spacer/><v-btncolor="grey"text:disabled="loading"@click="onClickClose">キャンセル</v-btn><v-btncolor="red"text:loading="loading"@click="onClickDelete">削除</v-btn></v-card-actions></v-card></v-dialog></template><script>exportdefault{name:'DeleteDialog',data(){return{/** ダイアログの表示状態 */show:false,/** ローディング状態 */loading:false,/** 受け取ったデータ */item:{}}},methods:{/**     * ダイアログを表示します。     * このメソッドは親から呼び出されます。     */open(item){this.show=truethis.item=item},/** キャンセルがクリックされたとき */onClickClose(){this.show=false},/** 削除がクリックされたとき */onClickDelete(){// あとで実装}}}</script>

<!-- ～ 省略 ～ --></v-card><!-- 追加／編集ダイアログ --><ItemDialogref="itemDialog"/><!-- 削除ダイアログ --><DeleteDialogref="deleteDialog"/></div></template><script>importItemDialogfrom'../components/ItemDialog.vue'importDeleteDialogfrom'../components/DeleteDialog.vue'exportdefault{name:'Home',components:{ItemDialog,DeleteDialog},/** ～ 省略 ～ */methods:{/** ～ 省略 ～ *//** 削除ボタンがクリックされたとき */onClickDelete(item){this.$refs.deleteDialog.open(item)}}}</script>

<template><divclass="form-wrapper"><p>※設定はこのデバイスのみに保存されます。</p><v-formv-model="valid"><h3>アプリ設定</h3><!-- アプリ名 --><v-text-fieldlabel="アプリ名"v-model="settings.appName":counter="30":rules="[appNameRule]"/><!-- API URL --><v-text-fieldlabel="API URL"v-model="settings.apiUrl":counter="150":rules="[stringRule]"/><!-- Auth Token --><v-text-fieldlabel="Auth Token"v-model="settings.authToken":counter="150":rules="[stringRule]"/><h3>カテゴリ／タグ設定</h3><p>カンマ（&#44; ）区切りで入力してください。</p><!-- 収入カテゴリ --><v-text-fieldlabel="収入カテゴリ"v-model="settings.strIncomeItems":counter="150":rules="[stringRule, ...categoryRules]"/><!-- 支出カテゴリ --><v-text-fieldlabel="支出カテゴリ"v-model="settings.strOutgoItems":counter="150":rules="[stringRule, ...categoryRules]"/><!-- タグ --><v-text-fieldlabel="タグ"v-model="settings.strTagItems":counter="150":rules="[stringRule, tagRule]"/><v-rowclass="mt-4"><v-spacer/><v-btncolor="primary":disabled="!valid"@click="onClickSave">保存</v-btn></v-row></v-form></div></template><script>exportdefault{name:'Settings',data(){constcreateItems=v=>v.split(',').map(v=>v.trim()).filter(v=>v.length!==0)constitemMaxLength=v=>createItems(v).reduce((a,c)=>Math.max(a,c.length),0)return{/** 入力したデータが有効かどうか */valid:false,/** 設定 */settings:{appName:'GAS 家計簿',apiUrl:'',authToken:'',strIncomeItems:'給料, ボーナス, 繰越',strOutgoItems:'食費, 趣味, 交通費, 買い物, 交際費, 生活費, 住宅, 通信, 車, 税金',strTagItems:'固定費, カード'},/** バリデーションルール */appNameRule:v=>v.length<=30||'30文字以内で入力してください',stringRule:v=>v.length<=150||'150文字以内で入力してください',categoryRules:[v=>createItems(v).length!==0||'カテゴリは1つ以上必要です',v=>itemMaxLength(v)<=4||'各カテゴリは4文字以内で入力してください'],tagRule:v=>itemMaxLength(v)<=4||'各タグは4文字以内で入力してください'}},methods:{onClickSave(){// あとで実装}}}</script><style>.form-wrapper{max-width:500px;margin:auto;}</style>

construles=['rule2','rule3']console.log(['rule1',...rules])// -> ['rule1', 'rule2', 'rule3']

<!-- 収入カテゴリ --><v-text-fieldlabel="収入カテゴリ"v-model="settings.strIncomeItems":counter="150":rules="[stringRule, ...categoryRules]"/>

importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)/**  * State * Vuexの状態 */conststate={/** 設定 */settings:{appName:'GAS 家計簿',apiUrl:'',authToken:'',strIncomeItems:'給料, ボーナス, 繰越',strOutgoItems:'食費, 趣味, 交通費, 買い物, 交際費, 生活費, 住宅, 通信, 車, 税金',strTagItems:'固定費, カード'}}/** * Mutations * ActionsからStateを更新するときに呼ばれます */constmutations={/** 設定を保存します */saveSettings(state,{settings}){state.settings={...settings}document.title=state.settings.appNamelocalStorage.setItem('settings',JSON.stringify(settings))},/** 設定を読み込みます */loadSettings(state){constsettings=JSON.parse(localStorage.getItem('settings'))if(settings){state.settings=Object.assign(state.settings,settings)}document.title=state.settings.appName}}/** * Actions * 画面から呼ばれ、Mutationをコミットします */constactions={/** 設定を保存します */saveSettings({commit},{settings}){commit('saveSettings',{settings})},/** 設定を読み込みます */loadSettings({commit}){commit('loadSettings')}}/** カンマ区切りの文字をトリミングして配列にします */constcreateItems=v=>v.split(',').map(v=>v.trim()).filter(v=>v.length!==0)/** * Getters * 画面から取得され、Stateを加工して渡します */constgetters={/** 収入カテゴリ（配列） */incomeItems(state){returncreateItems(state.settings.strIncomeItems)},/** 支出カテゴリ（配列） */outgoItems(state){returncreateItems(state.settings.strOutgoItems)},/** タグ（配列） */tagItems(state){returncreateItems(state.settings.strTagItems)}}conststore=newVuex.Store({state,mutations,actions,getters})exportdefaultstore

<script>exportdefault{name:'Settings',data(){/** ～ 省略 ～ */return{/** ～ 省略 ～ *//** 設定 */settings:{...this.$store.state.settings},/** ～ 省略 ～ */}},methods:{/** 保存ボタンがクリックされたとき */onClickSave(){this.$store.dispatch('saveSettings',{settings:this.settings})}}}</script>

// Stateのsettingsにアクセスthis.$store.state.settings

/** 設定 */settings:{...this.$store.state.settings}

// dispatch('Action名', ペイロード)this.$store.dispatch('saveSettings',{settings:this.settings})// 以下の形式でもOKですthis.$store.dispatch({type:'saveSettings',settings:this.settings})

<template><v-app><!-- ツールバー --><v-app-barappcolor="green"dark><!-- タイトル --><v-toolbar-title>{{appName}}</v-toolbar-title><!-- ～ 省略 ～ --></v-app-bar><!-- ～ 省略 ～ --></v-app></template><script>import{mapState}from'vuex'exportdefault{name:'App',computed:mapState({appName:state=>state.settings.appName}),// Appインスタンス生成前に一度だけ実行されますbeforeCreate(){this.$store.dispatch('loadSettings')}}</script>

// mapState を使わないと…this.$store.state.settings.appName// 長い// mapState を使うと…this.appName// 短い

// 家計簿データ（abData）の構造{'2020-06':[{id:'xxx',title:'xxx',…},{id:'yyy',title:'yyy',…},],'2020-07':[{id:'zzz',title:'zzz',…}],…}

/** ～ 省略 ～ *//**  * State * Vuexの状態 */conststate={/** 家計簿データ */abData:{},/** ～ 省略 ～ */}/** * Mutations * ActionsからStateを更新するときに呼ばれます */constmutations={/** 指定年月の家計簿データをセットします */setAbData(state,{yearMonth,list}){state.abData[yearMonth]=list},/** データを追加します */addAbData(state,{item}){constyearMonth=item.date.slice(0,7)constlist=state.abData[yearMonth]if(list){list.push(item)}},/** 指定年月のデータを更新します */updateAbData(state,{yearMonth,item}){constlist=state.abData[yearMonth]if(list){constindex=list.findIndex(v=>v.id===item.id)list.splice(index,1,item)}},/** 指定年月&IDのデータを削除します */deleteAbData(state,{yearMonth,id}){constlist=state.abData[yearMonth]if(list){constindex=list.findIndex(v=>v.id===id)list.splice(index,1)}},/** ～ 省略 ～ */}/** * Actions * 画面から呼ばれ、Mutationをコミットします */constactions={/** 指定年月の家計簿データを取得します */fetchAbData({commit},{yearMonth}){// サンプルデータを初期値として入れるconstlist=[{id:'a34109ed',date:`${yearMonth}-01`,title:'支出サンプル',category:'買い物',tags:'タグ1',income:null,outgo:2000,memo:'メモ'},{id:'7c8fa764',date:`${yearMonth}-02`,title:'収入サンプル',category:'給料',tags:'タグ1,タグ2',income:2000,outgo:null,memo:'メモ'}]commit('setAbData',{yearMonth,list})},/** データを追加します */addAbData({commit},{item}){commit('addAbData',{item})},/** データを更新します */updateAbData({commit},{beforeYM,item}){constyearMonth=item.date.slice(0,7)if(yearMonth===beforeYM){commit('updateAbData',{yearMonth,item})return}constid=item.idcommit('deleteAbData',{yearMonth:beforeYM,id})commit('addAbData',{item})},/** データを削除します */deleteAbData({commit},{item}){constyearMonth=item.date.slice(0,7)constid=item.idcommit('deleteAbData',{yearMonth,id})},/** ～ 省略 ～ */}/** ～ 省略 ～ */

// （Actions）/** データを更新します */updateAbData({commit},{beforeYM,item}){constyearMonth=item.date.slice(0,7)// 更新前後で年月の変更が無ければそのまま値を更新if(yearMonth===beforeYM){commit('updateAbData',{yearMonth,item})return}// 更新があれば、更新前年月のデータから削除して、新しくデータ追加するconstid=item.idcommit('deleteAbData',{yearMonth:beforeYM,id})commit('addAbData',{item})},

<template><div><v-card><v-card-title><!-- 月選択 --><v-colcols="8"><v-menu～省略～><!-- ～ 省略 ～ --><v-date-picker～省略～><v-spacer/><v-btntextcolor="grey"@click="menu = false">キャンセル</v-btn><v-btntextcolor="primary"@click="onSelectMonth">選択</v-btn></v-date-picker></v-menu></v-col><!-- ～ 省略 ～ --></v-col></v-card-title><!-- ～ 省略 ～ --></v-card><!-- ～ 省略 ～ --></div></template><script>import{mapState,mapActions}from'vuex'/** ～ 省略 ～ */exportdefault{/** ～ 省略 ～ */data(){/** ～ 省略 ～ */return{/** ～ 省略 ～ *//** テーブルに表示させるデータ */tableData:[]}},computed:{...mapState({/** 家計簿データ */abData:state=>state.abData}),/** ～ 省略 ～ */},methods:{...mapActions([/** 家計簿データを取得 */'fetchAbData']),/** 表示させるデータを更新します */updateTable(){constyearMonth=this.yearMonthconstlist=this.abData[yearMonth]if(list){this.tableData=list}else{this.fetchAbData({yearMonth})this.tableData=this.abData[yearMonth]}},/** 月選択ボタンがクリックされたとき */onSelectMonth(){this.$refs.menu.save(this.yearMonth)this.updateTable()},/** ～ 省略 ～ */},created(){this.updateTable()}}</script>

methods:{...mapActions([/** 家計簿データを取得 *//**     * this.$store.dispatch('fetchAbData') を     * this.fetchAbData として使えるようにする     */'fetchAbData']),…}

<script>import{mapActions,mapGetters}from'vuex'exportdefault{name:'ItemDialog',data(){return{/** ～ 省略 ～ *//** メモ */memo:'',/** 選択可能カテゴリ一覧 */categoryItems:[],/** 編集前の年月（編集時に使う） */beforeYM:'',/** ～ 省略 ～ */}},computed:{...mapGetters([/** 収支カテゴリ */'incomeItems','outgoItems',/** タグ */'tagItems']),/** ～ 省略 ～ */},methods:{...mapActions([/** データ追加 */'addAbData',/** データ更新 */'updateAbData']),/** ～ 省略 ～ *//** 追加／更新がクリックされたとき */onClickAction(){constitem={date:this.date,title:this.title,category:this.category,tags:this.tags.join(','),memo:this.memo,income:null,outgo:null}item[this.inout]=this.amount||0if(this.actionType==='add'){item.id=Math.random().toString(36).slice(-8)// ランダムな8文字のIDを生成this.addAbData({item})}else{item.id=this.idthis.updateAbData({beforeYM:this.beforeYM,item})}this.show=false},/** ～ 省略 ～ */}}</script>

<script>import{mapActions}from'vuex'exportdefault{name:'DeleteDialog',/** ～ 省略 ～ */methods:{...mapActions([/** データ削除 */'deleteAbData']),/** ～ 省略 ～ *//** 削除がクリックされたとき */onClickDelete(){this.deleteAbData({item:this.item})this.show=false}}}</script>

constss=SpreadsheetApp.getActive()functiontest(){console.log(ss.getName())}

constss=SpreadsheetApp.getActive()functiontest(){insertTemplate('2020-06')}/** * 指定年月のテンプレートシートを作成します * @param {String} yearMonth * @returns {Sheet} sheet */functioninsertTemplate(yearMonth){const{SOLID_MEDIUM,DOUBLE}=SpreadsheetApp.BorderStyleconstsheet=ss.insertSheet(yearMonth,0)const[year,month]=yearMonth.split('-')// 収支確認エリアsheet.getRange('A1:B1').merge().setValue(`${year}年${parseInt(month)}月`).setFontWeight('bold').setHorizontalAlignment('center').setBorder(null,null,true,null,null,null,'black',SOLID_MEDIUM)sheet.getRange('A2:A4').setValues([['収入：'],['支出：'],['収支差：']]).setFontWeight('bold').setHorizontalAlignment('right')sheet.getRange('B2:B4').setFormulas([['=SUM(F7:F)'],['=SUM(G7:G)'],['=B2-B3']]).setNumberFormat('#,##0')sheet.getRange('A4:B4').setBorder(true,null,null,null,null,null,'black',DOUBLE)// テーブルヘッダーsheet.getRange('A6:H6').setValues([['id','日付','タイトル','カテゴリ','タグ','収入','支出','メモ']]).setFontWeight('bold').setBorder(null,null,true,null,null,null,'black',SOLID_MEDIUM)sheet.getRange('F7:G').setNumberFormat('#,##0')// カテゴリ別支出sheet.getRange('J1').setFormula('=QUERY(B7:H, "select D, sum(G), sum(G) / "&B3&"  where G > 0 group by D order by sum(G) desc label D\'カテゴリ\', sum(G)\'支出\'")')sheet.getRange('J1:L1').setFontWeight('bold').setBorder(null,null,true,null,null,null,'black',SOLID_MEDIUM)sheet.getRange('L1').setFontColor('white')sheet.getRange('K2:K').setNumberFormat('#,##0')sheet.getRange('L2:L').setNumberFormat('0.0%')sheet.setColumnWidth(9,21)returnsheet}

constss=SpreadsheetApp.getActive()

constsheet=ss.insertSheet('シート名',インデックス)

/** 単一のセルを取得する */// getRange(行, 列)sheet.getRange(1,2)// B1// getRange(A1形式)sheet.getRange('B1')// B1/** 複数のセルを取得する */// getRange(開始行, 開始列, 何行分選択するか, 何列分選択するか)sheet.getRange(1,2,3,4)// B1:E3// getRange(A1形式)sheet.getRange('B1:E3')// B1:E3

sheet.getRange('A1').func1()// どの操作も.func2()// A1に対して.func3()// 実行される

// A1に"A1 value"をセットsheet.getRange('A1').setValue('A1 value')// 複数セルの値をセットするときは// 2次元配列を渡しますsheet.getRange('A1:B2').setValues([['A1','B1'],['A2','B2']])// 1行(1列)だけでも2次元配列を渡しますsheet.getRange('A6:H6').setValues([['id','日付','タイトル','カテゴリ','タグ','収入','支出','メモ']])

sheet.getRange('A1').setFormula('=PI()')sheet.getRange('B2:B4').setFormulas([['=SUM(F7:F)'],['=SUM(G7:G)'],['=B2-B3']])

constss=SpreadsheetApp.getActive()functiontest(){onPost({item:{date:'2020-07-01',title:'支出サンプル',category:'食費',tags:'タグ1,タグ2',income:null,outgo:3000,memo:'メモメモ'}})}/** --- API --- *//** * データを追加します * @param {Object} params * @param {Object} params.item 家計簿データ * @returns {Object} 追加した家計簿データ */functiononPost({item}){if(!isValid(item)){return{error:'正しい形式で入力してください'}}const{date,title,category,tags,income,outgo,memo}=itemconstyearMonth=date.slice(0,7)constsheet=ss.getSheetByName(yearMonth)||insertTemplate(yearMonth)constid=Utilities.getUuid().slice(0,8)constrow=["'"+id,"'"+date,"'"+title,"'"+category,"'"+tags,income,outgo,"'"+memo]sheet.appendRow(row)return{id,date,title,category,tags,income,outgo,memo}}/** --- common --- *//** * 指定年月のテンプレートシートを作成します * @param {String} yearMonth * @returns {Sheet} sheet */functioninsertTemplate(yearMonth){/** ～ 省略 ～ */}/** * データが正しい形式か検証します * @param {Object} item * @returns {Boolean} isValid */functionisValid(item={}){conststrKeys=['date','title','category','tags','memo']constkeys=[...strKeys,'income','outgo']// すべてのキーが存在するかfor(constkeyofkeys){if(item[key]===undefined)returnfalse}// 収支以外が文字列であるかfor(constkeyofstrKeys){if(typeofitem[key]!=='string')returnfalse}// 日付が正しい形式であるかconstdateReg=/^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/if(!dateReg.test(item.date))returnfalse// 収支のどちらかが入力されているかconst{income:i,outgo:o}=itemif((i===null&&o===null)||(i!==null&&o!==null))returnfalse// 入力された収支が数字であるかif(i!==null&&typeofi!=='number')returnfalseif(o!==null&&typeofo!=='number')returnfalsereturntrue}

// 指定年月シートを取得する、なかったらテンプレートシートを作成するconstsheet=ss.getSheetByName(yearMonth)||insertTemplate(yearMonth)

consta1=sheet.getRange('A1').setValue("100").getValue()constb1=sheet.getRange('B1').setValue("'100").getValue()console.log(typeofa1)// -> "number"console.log(typeofb1)// -> "string"

constid=Utilities.getUuid().slice(0,8)

constss=SpreadsheetApp.getActive()functiontest(){constresult=onGet({yearMonth:'2020-07'})console.log(result)}/** --- API --- *//** * 指定年月のデータ一覧を取得します * @param {Object} params * @param {String} params.yearMonth 年月 * @returns {Object[]} 家計簿データ */functiononGet({yearMonth}){constymReg=/^[0-9]{4}-(0[1-9]|1[0-2])$/if(!ymReg.test(yearMonth)){return{error:'正しい形式で入力してください'}}constsheet=ss.getSheetByName(yearMonth)constlastRow=sheet?sheet.getLastRow():0if(lastRow<7){return[]}constlist=sheet.getRange('A7:H'+lastRow).getValues().map(row=>{const[id,date,title,category,tags,income,outgo,memo]=rowreturn{id,date,title,category,tags,income:(income==='')?null:income,outgo:(outgo==='')?null:outgo,memo}})returnlist}/** ～ 省略 ～ */

constsheet=ss.getSheetByName(yearMonth)constlastRow=sheet?sheet.getLastRow():0if(lastRow<7){return[]}

constvalues=[['xxx','2020-07-01','sample1'],['yyy','2020-07-02','sample2']]constlist=values.map(row=>{return{id:row[0],date:row[1],title:row[2]}})console.log(list)// -> [//      { id: "xxx", date: "2020-07-01", title: "sample1" },//      { id: "yyy", date: "2020-07-02", title: "sample2" }//    ]

constss=SpreadsheetApp.getActive()functiontest(){constresult=onDelete({yearMonth:'2020-07',id:'xxxxxxxx'})console.log(result)}/** --- API --- */functiononGet({yearMonth}){/** ～ 省略 ～ */}functiononPost({item}){/** ～ 省略 ～ */}/** * 指定年月&idのデータを削除します * @param {Object} params * @param {String} params.yearMonth 年月 * @param {String} params.id id * @returns {Object} メッセージ */functiononDelete({yearMonth,id}){constymReg=/^[0-9]{4}-(0[1-9]|1[0-2])$/constsheet=ss.getSheetByName(yearMonth)if(!ymReg.test(yearMonth)||sheet===null){return{error:'指定のシートは存在しません'}}constlastRow=sheet.getLastRow()constindex=sheet.getRange('A7:A'+lastRow).getValues().flat().findIndex(v=>v===id)if(index===-1){return{error:'指定のデータは存在しません'}}sheet.deleteRow(index+7)return{message:'削除完了しました'}}/** ～ 省略 ～ */

constvalues=[['xxx'],['yyy'],['zzz']]constflatted=values.flat()console.log(flatted)// -> ['xxx', 'yyy', 'zzz']console.log(flatted.findIndex(v=>v==='yyy'))// -> 1

sheet.deleteRow(index+7)

constss=SpreadsheetApp.getActive()functiontest(){onPut({beforeYM:'2020-07',item:{id:'xxxxxxxx',date:'2020-07-31',title:'更新サンプル',category:'食費',tags:'タグ1,タグ2',income:null,outgo:5000,memo:'更新したよ'}})}/** --- API --- */functiononGet({yearMonth}){/** ～ 省略 ～ */}functiononPost({item}){/** ～ 省略 ～ */}functiononDelete({yearMonth,id}){/** ～ 省略 ～ */}/** * 指定データを更新します * @param {Object} params * @param {String} params.beforeYM 更新前の年月 * @param {Object} params.item 家計簿データ * @returns {Object} 更新後の家計簿データ */functiononPut({beforeYM,item}){constymReg=/^[0-9]{4}-(0[1-9]|1[0-2])$/if(!ymReg.test(beforeYM)||!isValid(item)){return{error:'正しい形式で入力してください'}}// 更新前と後で年月が違う場合、データ削除と追加を実行constyearMonth=item.date.slice(0,7)if(beforeYM!==yearMonth){onDelete({yearMonth:beforeYM,id:item.id})returnonPost({item})}constsheet=ss.getSheetByName(yearMonth)if(sheet===null){return{error:'指定のシートは存在しません'}}constid=item.idconstlastRow=sheet.getLastRow()constindex=sheet.getRange('A7:A'+lastRow).getValues().flat().findIndex(v=>v===id)if(index===-1){return{error:'指定のデータは存在しません'}}constrow=index+7const{date,title,category,tags,income,outgo,memo}=itemconstvalues=[["'"+date,"'"+title,"'"+category,"'"+tags,income,outgo,"'"+memo]]sheet.getRange(`B${row}:H${row}`).setValues(values)return{id,date,title,category,tags,income,outgo,memo}}/** ～ 省略 ～ */

// 更新前と後で年月が違う場合、データ削除と追加を実行constyearMonth=item.date.slice(0,7)if(beforeYM!==yearMonth){onDelete({yearMonth:beforeYM,id:item.id})returnonPost({item})}

constvalues=[["'"+date,"'"+title,"'"+category,"'"+tags,income,outgo,"'"+memo]]sheet.getRange(`B${row}:H${row}`).setValues(values)

constss=SpreadsheetApp.getActive()constauthToken=PropertiesService.getScriptProperties().getProperty('authToken')||''/** * レスポンスを作成して返します * @param {*} content * @returns {TextOutput} */functionresponse(content){constres=ContentService.createTextOutput()res.setMimeType(ContentService.MimeType.JSON)res.setContent(JSON.stringify(content))returnres}/** * アプリにPOSTリクエストが送信されたとき実行されます * @param {Event} e * @returns {TextOutput} */functiondoPost(e){letcontentstry{contents=JSON.parse(e.postData.contents)}catch(e){returnresponse({error:'JSONの形式が正しくありません'})}if(contents.authToken!==authToken){returnresponse({error:'認証に失敗しました'})}const{method='',params={}}=contentsletresulttry{switch(method){case'POST':result=onPost(params)breakcase'GET':result=onGet(params)breakcase'PUT':result=onPut(params)breakcase'DELETE':result=onDelete(params)breakdefault:result={error:'methodを指定してください'}}}catch(e){result={error:e}}returnresponse(result)}/** --- API --- *//** ～ 省略 ～ */

functionresponse(content){constres=ContentService.createTextOutput()// レスポンスの Content-Type ヘッダーに "application/json" を設定するres.setMimeType(ContentService.MimeType.JSON)// オブジェクトを文字列にしてからレスポンスに詰め込むres.setContent(JSON.stringify(content))returnres}