タスク管理アプリを作った話

タスク管理アプリを作りました

まぁオタクが作ったタスク管理アプリです．機能がいちいちコアユーザー向けな感じになってます． このブログでは作った経緯とかではなく新たに得られた知見とかを備忘録的につけていこうかと思います．

これがGitHub github.com

こっちが作ったサイト sana-task.herokuapp.com

タスクを完了すると名取が褒めてくれるアプリを作った#ヌォンタート pic.twitter.com/86hv8x9BZR

— napo naporitan🍆🐰💛 (@naporin24690) 2019年2月1日

PWAで作ってみたかった

1年前からPWAって言葉は知ってたんですが，どうやってやるのかわからずに今日までたちました． Vueでできるらしいということで調べたら

vue init pwa プロジェクト名

って書くだけですぐにできました．なんて楽なんだ・・・・・ SPAでいつも通りサイトを作ればすぐにPWAのネイティブアプリ感とサクサク感が体験できます！気持ちよすぎる

アイコンはデバイスの分だけ用意する必要がある

Android，iPhoneでホームに追加するときに表示されるアイコンを自作することくらいがいつもと違うところかなって思います． 僕は適当にキャラットってサイトでアイコンを作ってサイズ変更をしてsrc/static/manifest.jsonとindex.htmlの数行を変更しました．変更はgitのほうを確認してもらえるとすぐだと思います．

localStrageを使う

vuexを使ってデータを管理していて，ローカルに保存したい場合は

npm install vuex-persistedstate

をして

import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import {
    getters
} from './getters';
import {
    state,
    mutations
} from './mutations';
import createPersistedState from "vuex-persistedstate"; //モジュールを追加

Vue.use(Vuex);

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    plugins: [createPersistedState()] // これを追加
});

するだけですぐにローカルにstateデータが保存できます．

めっちゃ簡単．Vueすごすぎて去年までプログラムも全く分からないのにjQueryをコピペコピペしてた時間がもったいなく感じされますね・・・・

jsをimportできるようになった

これを作ったときは全く分からなかったです．適当に調べてできているので今のやり方でやってますが，どこかの記事でexport defaultはやめとけ～みたいな記事を見かけたので少し不安です ．

Vueの環境だけで動いているやつです 例えばUNIXtimestampモジュールを作りたいな～と思ったら以下を書いて

timestamp.js

export default {
    toString: (timestamp) => {
        let d = new Date(timestamp * 1000);
        let year = d.getFullYear();
        let month = d.getMonth() + 1;
        let day = d.getDate();
        return year + "-" + month + "-" + day;
    }
}

別ファイルで

import TimeStampModule from "modules/timestamp.js"
//new Date()から生成されるtimestampはmsなので1000をかける
let now = new Date().getTime() / 1000;

let dateString = TimeStampModule.toString(now);
console.log(dateString);

するとちゃんと動きました～

最後に

PWAでアプリを作りたーいって適当に作ってみましたが結構成長があったように思えます．あと割とRT,Favをもらえて喜んでいます！！！！めちゃめちゃうれしい！！！

twitter.com