トップ画像イメージ

SPAでサクッと動くウェブアプリを作ってみた

みなさまこんにちは。

実は以前、vue.jsとfirebaseを活用して、ウェブアプリを作成したことがあります。

内容的には、Ruby技術者認定試験の学習サイトなのですが・・・

コンビニに行って、帰ってこれるくらい遅い!!

というクソみたいなコンテンツを作って、放置しておりました。

しかし、そんなクソみたいなサイトでも、Rubyアソシエーションの公式サイトからリンクを貼っていただいておりました。(本当に申し訳ない)

そこで、どうせなら、ちゃんとRubyを使って、サクサク動く、かつ無料!!のサイトを作り直しました。

今回は自分が使いたい技術を使うこと、サクサク動かすこと、完全無料で実働させること(サイトの独自ドメインの料金は除く)にこだわりました!!

サイトの説明

サイトの実物はこちらです。

Ruby1問1答

Ruby1問1答の画像

説明する必要もない程度の内容なのですが、

Ruby技術者認定試験の勉強用のサイトとなっています。

今のところ、Ruby Silverの模擬問題が50問づつ利用できます。

会員登録なども不要にしていますので、お気軽に利用できるようにしています。

ちなみに、筆者もRuby SilverもRuby Goldも合格しているため、筆者的おすすめ勉強方法なども載せています。

利用した技術

  • Ruby on Rails(APIモード)
    • APIモードでバックエンドの処理に専念してもらいました。
  • Vue.js(フロント側)
    • Railsとは分離し、Rails側のAPIを叩いて、コンテンツの内容を取得しています
    • vue-router(spaに必須)
    • vuex(ぶっちゃけこれを使ってみたかっただけかもしれない・・・)
  • Docker
    • 開発環境用
  • Heroku
    • Ruby on Railsを動かしてもらってます。無料モードで利用していますが、APIに専念したら意外と実用に耐えうることに気づきました
  • Netlify
    • vue.jsのデプロイ。初めて使ったけど、各種設定も非常にやりやすかったです。

Herokuで動作するRailsからデータを取得し、Vuexのストアに登録しています。

vueのコンポーネントで問題や、解説を表示しているという形です。

まとめ

  • Railsは遅い!と喚く前に、ちゃんとやり方を考えれば、結構簡単にサクッと動くアプリは作れる。
  • 一度作ったアプリは、ちゃんと責任持って、動くようにチューニングしないといけないと強く反省しました