Nuxt.js,Rails APIを切り離して完全SPAなポートフォリオを作成してみた

はじめに

今回はVue.jsのフレームワークであるNuxt.jsを学び、Rails APIと組み合わせてWebアプリを作成してみました。

この記事ではポートフォリオの内容に加えて、機能を実装する上で工夫したことや苦労したこと、開発を通して感じたことなどについてもお伝えできればと思います。

アプリの概要

手軽に学習記録や振り返りができる学習管理アプリです。

• 「毎日なんとなくだらけてしまう..」
• 「１日の振り返りが面倒でためらってしまう..」
• 「学習のモチベーションが維持できない..」

といった課題に対して、

“ユーザーがより快適に使える”,“とにかく手軽でシンプル”

というコンセプトをもとに設計することで、学習記録をつけるハードルを下げることで習慣化を促し、課題を解決できるように作成しました。

また、私自身何かの試験に取り組む際には学習管理アプリを活用してきたのですが、
さらに「シンプルで使いやすい」かつ「もっとこういう機能があったら良いな」と感じていたことを集約し、今回のポートフォリオに盛り込みました。

なお、“勉強”という固いイメージよりも“育成ゲーム感覚”で毎日の学習に取り組んでほしいという思いから
本アプリでは“学習項目”ではなく“スキル”という名称を使用しています。

使用技術

• フロントエンド

  • Vue.js(Nuxt.js) 2.14.7
  • Javascript
  • HTML / CSS / Vuetify

• バックエンド

  • Ruby 2.6.6
  • Rails API 6.0.3.4

• フロントエンドとバックエンドの繋ぎこみ

  • Axios
  • Auth Module

機能一覧

• ユーザー登録関連(devise_token_auth / auth module / axios/ vuetify)

  • 新規登録機能
  • ログイン、ログアウト機能
  • メールアドレス変更機能
  • トライアル機能(ゲストユーザー登録機能)

• スキル設定関連(axios / vuex / vuetify)

  • ユーザーに紐づくスキルの一括登録機能

• 学習記録関連(axios / vuex / vuetify)

  • ユーザーのスキルに紐づく学習時間の一括登録機能
  • 学習時間の表示機能

• スキル編集関連(axios / vuex / vuetify)

  • スキルの追加、削除機能

• タスク管理関連(axios / vuex / vuetify)

  • タスクの書き込み、一括登録機能、一括削除機能
  • タスクの編集機能

• カレンダー関連(axios / vuex / vuetify)

  • カレンダー表示機能
  • 学習時間に応じた各日付の背景色の表示機能
  • 各日付の学習時間表示機能

• チャート関連(vue-chartjs / axios / vuex / vuetify)

  • 棒グラフの表示機能
    • 月別学習時間の表示
  • 円グラフの表示機能
    • スキル別学習時間の表示
  • スキル別学習時間のランキング表示機能

• その他

  • フラッシュメッセージ機能
  • エラーメッセージ機能
  • バリデーション機能
  • ログイン前後のリダイレクト機能

以降、主要機能の詳細や工夫した点について紹介していきます！

学習記録機能

概要
各スキルに対して学習時間を入力できます。
1日に複数回入力することもできるようになっています。

##工夫した点

①学習時間入力に至るまでのフローを簡略化

ログインしてすぐに各スキルの一覧と学習時間の入力フォームを表示することで、学習時間入力に至るまでのフローを最大限省略し、手間なく学習記録をつけることができるようにしました。

Ramp Up    ：ログイン→学習時間の入力
某有名サービス：ログイン→学習記録ボタン→学習項目を選択→学習時間の入力

②配色

アプリ全体にも言えることですが、主に就寝前に使用することを想定してダークモード仕様としています。
特にユーザーが必ず使用することを想定した機能であるため、黒をベースとしたモノトーンの色のみを使用しました。

タスク管理機能

概要
タスクを管理するためのメモです。
学習に取り掛かる際の「あれ？今日この後何をするんだったけ？」をなくすために作成しました。
以下のような流れでの利用を想定しています。
1日の終わりに翌日のタスクを書き出す→学習に取り掛かる時にタスクを確認して1つ1つ取り組む。

##工夫した点

①手軽さ

メモ代わりに気軽に使ってもらえるように、書き込んだタスクを一括して保存、削除できるようにしました。
編集機能も用意し、タスク1つ1つに対しての変更もできるようにしています。

②好きな場所に書き込める

入力したタスクを順番に表示するのではなく、書き込んだ箇所にタスクが表示されるようにしています。
実際に16分割したA4用紙に書き込む感覚やふせんのメモを貼り付ける感覚を再現するつもりで実装しました。

カレンダー機能

概要
学習時間を確認するためのカレンダーです。
パッと見で学習時間が把握でき、各日付をクリックすることでその日の学習時間を確認することができます。

工夫した点

①学習時間に応じて日付の背景色が変わる

各日付の背景色が表示されることで、その月にどの程度学習できたかがひと目でわかります。
また、学習時間が少ない場合の背景色に警告色を採用することで、ユーザーが学習時間を確保するモチベーションにも繋がる(危機感を感じてもらう)ように意識しました。
就寝前に利用することを考慮し、透明度を指定して少しくすんだ色になるようにもしています。

なお、色を出し分ける基準は以下のようになっています。

8時間以上：青
4時間以上：黄色
0時間超え：赤
0時間　　：黒

②カスタマイズ性

カレンダーをカスタマイズしやすいようにするためにライブラリは使わず、VueとJavascriptだけで作成しました。

チャート機能

概要
長期的な学習時間を可視化するためのチャートです。
棒グラフと円グラフを表示し、月別学習時間とスキル別学習時間が表示されるようにしています。

工夫した点

①チャートの見やすさ

デザイン性の高いvue-chartjsを活用し、データが見やすいように配置しました。
色についてもカレンダーページで使用している色と同じ色や相性の良い色を使用することで、綺麗に見えるように意識しました。
カレンダーページと同様に透明度を指定することで明るすぎないようにもしています。

②ランキング表示

全体に占める学習時間の上位３位までをランキング形式で表示し、傾向をすぐに把握できるようにしました。
また、時間だけでなく割合を表示することで、全体に占める学習量がより詳しくわかるようにしました。

苦労したこと

特に苦労した点はフロントとバックの繋ぎこみの部分です。

VueとRailsを組み合わせる手法は以下の２つがあり、

• Railsの一部にVueを組み込む
• RailsとVueで分けてアプリを作成し、データをやり取りする

ベストプラクティスはケースバイケースではあるものの、複数の記事を見る中でフロントとバックで分けて実装したほうがより学びが大きいのでは？と感じたことから後者の手法で作成することに決めました。

当初は、APIを叩く？？json？？という知識レベルだったことやRailsとVueを分けての開発を解説する書籍や教材が皆無だったことから、Railsの一部にVueを組み込むことを考えたりもしましたが、
最終的にはGithub上で公開されていたRailsとVueを分けて作られたtodoアプリのソースコード(今は見れなくなっています)を読み込んで学びました。

参考記事も少なく、おそらくスクールなどでも学べない内容だと思いますので、このあたりも今後別の記事で解説できればと思っています。

ポートフォリオを作成して得たもの

• 自走力

ポートフォリオの作成に取りかかる時点ではNuxt.js、ひいてはVueやJavascriptの知識が全くなかったことやできそうかどうかよりも実現したい内容を盛り込んで設計したことから、はじめはわからないことや詰まってしまうことが何度もありました。
しかし、書籍やudemyなどを活用した基礎学習や開発をしながら学び続けることで、使用技術全般に関する知識が深まり、このポートフォリオに関するほとんどのタスクを自力で実装することができるようになっていました。

• デバッグ力

このポートフォリオを作成する上で幾度となくエラーに遭遇しましたが、
その都度何度もデバッグツールを仕込み、上手くいっている箇所と上手くいっていない箇所を切り離し、原因を絞り込んで特定、解決することで乗り越えてきました。
もう何百回と仕込んだかわかりませんが、気づいたらこの過程自体が楽しく感じるようになっていました(笑)

• 開発の楽しさ

ポートフォリオを作成して得た一番大きなものかもしれません。
作りたいサービスの実現に向けて、タスクを実現するための実装方針を考え、ロジックをコードに反映し、上手くいかない箇所は何度もデバッグして改善する。
この過程が本当に楽しいと感じなから開発をしていました。
以前にもリリースしたいサービスを実現するためにRails単体でアプリを作ったことがあったのですが、その時はRailsがよしなにやってくれる部分が大きかったからか、先に挙げた過程をあまり意識せずに実装していたような気がしました。
そういう意味でも今回のポートフォリオを作成して本当に良かったと振り返って思います。

結果的に、

楽しい→やる(実装)→できることや知識が増える→楽しい

という正のスパイラルに入れたことで、よりプログラミングが好きになっていきました。

終わりに

振り返って一番に思うことは「とにかく楽しかった」ということです。特に開発の中盤から終わりにかけては、毎日朝起きてから「今日はあの部分の実装かー。楽しみだな〜！」と思いながら、実装に取りかかっていました。

ポートフォリオを作り始めたばかりの頃はわからないことが多くて苦労しましたが、ひとまず設計の段階で考えていた機能を実装することができて良かったです。
今後もたくさんのわからないことや壁にぶつかると思いますが、その先のことを考えたり、学ぶことの楽しさを噛みしめながら、学習に努めたいと思います。
また、コンセプトに沿った実装をするために実装したいことはまだまだたくさんありますので、今後は引き続きAWSへのデプロイや機能、デザインの修正を行い、よりユーザーにとって使いやすいアプリの開発に取り組んでいきます。

長くなってしまいましたが、ここまで読んでいただきありがとうございました！
紹介したアプリはもちろん、この記事自体が少しでも学習のモチベーションなどに繋がったら嬉しいです！^^