#はじめに
学習開始から半年で、学習した技術を用いてアプリを作ってみましので内容を記しておきます。
作成したアプリのリンクを共有しますので、プログラミン学習を始めたばかりの方の半年後のスキルのベンチマークになれば幸いです。
アプリのURL
https://amaimon-decision.herokuapp.com/
#記事内容
0. 筆者について
- アプリのコンセプト
- アプリ機能概要
- 活用技術
- まとめ
#筆者について
2020年8月からプログラミング学習を開始しました。
当時は営業職でwebプログラミング未経験からの挑戦です。
2021年1月からエンジニアとしての職を得ました。
####学習技術
バックエンド ：Ruby, Ruby on Rails
フロントエンド ：Nuxt.js, Vue.js, vuetify
インフラ ：AWS, heroku
その他 ：docker, GitHub
#アプリのコンセプト
「達成する価値のある目標は多くない」をコンセプトに、達成したいと思ったことをからたった一つの目標を見つけ出すためのアプリを作成しました。
####利用者に提供する価値
自分にとって最も価値が高い目標を見つけ出すことができます。
これにより、下記3つのメリットを提供することを目指します。
・色々なことに気が散ってしまう状態を抜け出す
・継続できる目標設定ができる
・やらないことを決めることで自分自身の判断軸を見つめる
挑戦する方の役に立つことを目的にしています。
####利用方法
①興味のあることや達成したいと思ったことを書き出す
②ドラッグ＆ドロップ機能で①で書き出した項目の分類・並び替える（分類基準はその項目は他人が期待するものか否かと優先順位）
③完了ボタンかページ更新、ページ遷移で②で分類し優先順位付けたものの最上位を目標に設定する
④マイページにて③で設定した目標に達成したい理由などを追記する
↓作成したアプリのURL
https://amaimon-decision.herokuapp.com/
#アプリ機能概要
コンセプトを達成するために必要最小限の機能の実装を目指しました。
バックエンドエンドはRailsのAPIモード、フロントエンドはNuxtでVuetifyを活用してSPAを作成しました。それぞれをherokuにデプロイしています。
最も価値の高い目標を見つけ出すために必要だと感じた機能は下記です。
・ユーザー登録、ログイン、ログアウト機能
・目標書き出し、分類(ドラッグ＆ドロップ)、目標一つを決定する機能
・決定した1つの目標を別ページにて追記する機能
#活用技術
####ユーザー登録、ログイン、ログアウト機能
目標設定、目標分類が各ユーザーごとに発生するのでユーザーを識別するために実装しました。
本機能はgem"devise_token_auth", "devise"の二つを活用して実現しました。
また、ログイン状態を保持するためにRailsではcookie, NuxtではVuexを使っています。
####目標書き出し、分類(D&D)、目標を一つに決定する機能
このアプリの最重要部分です。
アプリコンセプトの利用方法部分の実装です。
イメージとしてはToDoアプリをドラッグ＆ドロップで移動できるものです。
ドラッグ＆ドロップを実装するにあたりvue-draggbleの活用を検討しましたが、カテゴリ間の項目の移動が実装できなかったので、見送りました。
文末記事を参考に実装しました。
目標を一つに決定する機能は、設定項目の特定カテゴリの最上位に設定されたものを目標に設定するように実装しました。
この際に気をつけたのが、項目の優先順位を変更した際の一斉更新機能です。
実装はRailsでは、ルーティングとメソッドを新しく定義して、繰り返し文mapで引数を全て更新するよう実装しました。
更新タイミングですが、vueライフサイクルのbeforeUpdate, beforeDestroyのタイミングと完了ボタンを押されたタイミングです。
余談ですが、ここの実装を通してjavascriptはタイミングがとても重要だと学びました
####決定した1つの目標を別ページにて追記する機能
使っているのはupdateメソッドですが、目的設定・選択機能とは別ページに実装しました。
意図としては、ユーザーにとって最も大事なのが、決定したたった一つの目標だからです。
目標設定・選択ページでの経験を最大化するために特別感を演出しようと考えています。
#まとめ
今後もこのアプリをアップデートしていく予定です。
まずは開発のためにダークモードにしたデザインを作成していく予定です。
次はユーザーのアプリ内での導線をデザインする予定です。
もしよかったら、使った感想などをいただけると幸いです。
https://amaimon-decision.herokuapp.com/
####参考記事
Vue.jsを使ってスクラッチから作るTrello風タスク管理アプリ
https://reffect.co.jp/vue/vue-js-trello