【CodePen】『一日一善』習慣化アプリでみんなハッピーって寸法よ

Last updated at 2023-11-19Posted at 2023-11-12

一日一善、できてますか？

一日一善（goo辞書）
「１日に一つの善行をして、それを積み重ねるようにしなさいという呼びかけ。」

善い行いが、誰かのため、自分のためになる。毎日続けようという意味。素敵ですよね。
できてないけど。

素敵と思うならやろうよ私。気づいたら一日終わってるんだよなあ。
こういう時は『見える化』すると良いって、誰かが言ってた気がする。

ちょうど使えそうな技術を学んだところだし、やってみますか。
今回も、まっっったくの初心者がお届けする記事となっております。

【目標】
　■ ToDoリスト機能を応用して、一日一善を管理するアプリをつくりたい。
　■ 書き出すだけでなく「完了」にしたり、「削除」したりしたい。

CodePen（アプリ制作環境）
Netlify（完成アプリ公開環境）
Vue.js（JavaScriptライブラリ）
iTyped.js（JavaScriptライブラリ）

「あなたは 100 人目のお客様♪」みたいなホームページをつくっていた黒歴史を思い出し悶絶。

こんなところで再会するとは、人間、何がどこで役立つかわからないものです。危うく古傷がひらきかけましたが、見た目部分を完成させることができました。

「名前はちょっと似ているけど全くの別物」ということらしいです。
うまい例えしますね。まあ私は、JavaもJavaScriptもわからないのですが。

『JavaScriptライブラリ／フレームワーク』と呼ばれる、JavaScriptを使った開発作業において汎用的に使える機能を、みんなで使えるようにまとめた場所がいろいろあるので、そこからお知恵を拝借することにしました。今回は『Vue.js』と『iTyped.js』を参考にしています。

なんだかんだで動くものができてしまった。紹介動画をご覧ください。

冒頭で述べた目標を達成することができました。
それっぽいものができてしまった…JavaScriptすごい。JavaScriptライブラリすごい。

当アプリの用途について、紹介動画のところでもチラっと言及したのですが、
こどものお手伝い習慣付けにも使えそうだと思いました。
スタンプカード機能を追加したり、ごほうび画像が出る仕様とか追加しても良さそうです。
ママもパパもキッズもハッピーって寸法よ。

機能はToDoリストでも、誰かのために使えたり、こどもとのコミュニケーションツールにもなったり、アイデア次第で用途は無限大ですね。

Vue.js - The Progressive JavaScript Framework
(https://vuejs.org/)