Vue.jsで簡易的な振り返りツールを作った

この記事は公開されてから1年以上経過しており、最新の内容に追従できていない可能性があります。

クイック振り返り - 記録 | tools.gomiba.co

(主に)オンラインで対戦するようなゲームをやっているときとか、毎日の様子とか、日常的にシュッと自分のパフォーマンスを記録して振り返りができるようにしたいなあと思っていて、せっかくだし、とVue.jsの練習になるだろうと作った。

自分で振り返り項目を定義、それに対して1-10段階でマークを付けられる。で、記録がたまると折れ線グラフで可視化される。 最初はGoogle Formsのような、項目を自由自在に定義できるようにしようとしたけれど、結構たいへんになってしまって、単純に10段階くらいで記録できれば十分では?となった。 まだ自分でも多くを記録しているわけではないけれど、記録が積み重なっていくとここがいかんなあとか、こっちはいいなあとか、今よりも見えるものが増えるんじゃないだろうか、と思っている。


初期設定はここでやったものとおなじ。 0からVue.jsを始める

やっていると結構つまるポイントがあって楽しかった。具体的には、

  • データはどのコンポーネントで持つのがいいか
  • タブでやったら動きがもっさりしてしまったのでvue-routerでページを分けた
  • 親子間でのデータの受け渡し
  • v-model
  • vuetifyのAPI
  • DB定義(あきらめて大半をJSONにしちゃったけどこれはよくない)

オフラインでも動かしたかったので、ローカルだけで動くように、データストアにはDexieを使っている。ちゃんとテストしたわけではないのだけど、おそらくだいじょうぶ。

ホスティングには自作した onstatic ( 静的コンテンツをシュッと共有する何かの onstatic を作った ) を使っているのだけど、これを拡張して、そのうちオンラインで複数デバイスでも内容を同期できるようにしたいなあ〜なんて考えている。これはそのうち。


とくに誰かにレビューを受けているわけでもないのでお作法が正しいかもわからないけれど、なんとなくこんな感じか〜がわかってきてVue.js面白いなってなっている。ある程度の部品数があって、ユーザ操作に紐付いて画面の様子が変わるようなものであれば、Vue.jsないし、その手のライブラリを使うのが便利だな〜と思った。Vue.jsはCLIも提供されていて、一発で下準備が整うのがよかった。ReactやAngularでも提供されている気がするけれども。

逆に、Webアプリケーション ではなくて、Webページを作るようなときは、ちょっとオーバースペックなのかな〜という気がする。コンポーネントを使いまわせるのは確かにいいんだけど、Webページの場合にはJavascriptの挙動があまり複雑にはならないだろうので、CSSフレームワークだけ入れるのがいいと思う。たとえ何か書く必要があっても、現代的なWebブラウザであればピュアなJavascriptで環境差異もあまりないようなのでそれで十分だと思っている。表現する必要に応じてライブラリを探すのがいいのかな。

以前つかったことがあるCSSフレームワークだとBulmaはよかった。

Bulma: Free, open source, and modern CSS framework based on Flexbox

サイト案内

運営してるひと: @sters9

最近は Go, Ruby, Rails, Kubernetes, GCP, Datadog あたりをしていますがもっといろいろやりたい!

サイト案内

開発環境の紹介

プライバシーポリシー

tools.gomiba.co

サイト内検索

アーカイブ

2024/09 (3) 2024/07 (1) 2024/06 (3) 2024/05 (1) 2024/04 (7) 2024/03 (4) 2024/01 (3)

2023/12 (1) 2023/11 (3) 2023/10 (1) 2023/09 (1) 2023/08 (2) 2023/05 (4) 2023/04 (4) 2023/03 (4) 2023/02 (2) 2023/01 (1)

2022/12 (2) 2022/11 (4) 2022/10 (3) 2022/09 (2) 2022/08 (4) 2022/07 (5) 2022/06 (4) 2022/05 (9) 2022/04 (8) 2022/03 (10) 2022/02 (21) 2022/01 (8)

2021/12 (11) 2021/11 (1) 2021/10 (4) 2021/09 (2) 2021/08 (1) 2021/07 (2) 2021/06 (5) 2021/05 (10) 2021/04 (1) 2021/03 (8) 2021/02 (12) 2021/01 (8)

2020/05 (2) 2020/04 (2) 2020/02 (2) 2020/01 (1)

2019/12 (3) 2019/11 (2) 2019/10 (5) 2019/09 (3) 2019/07 (6) 2019/06 (4) 2019/04 (3) 2019/01 (2)

2018/12 (6) 2018/10 (4) 2018/09 (6) 2018/08 (7) 2018/07 (16) 2018/06 (7) 2018/05 (7) 2018/04 (5) 2018/03 (3) 2018/02 (10) 2018/01 (6)

2017/12 (8) 2017/11 (6) 2017/10 (10) 2017/09 (12) 2017/08 (12) 2017/07 (3) 2017/06 (1) 2017/01 (4)

2016/12 (5) 2016/10 (3) 2016/09 (1) 2016/07 (2) 2016/06 (1) 2016/04 (1) 2016/02 (1) 2016/01 (2)

2015/12 (1) 2015/10 (1) 2015/09 (3) 2015/06 (1) 2015/01 (1)

2014/08 (2) 2014/07 (3) 2014/05 (1) 2014/01 (7)

2013/12 (2) 2013/11 (4) 2013/10 (1) 2013/09 (1) 2013/08 (3) 2013/07 (4) 2013/06 (5) 2013/05 (2) 2013/04 (7) 2013/03 (1)