RailsのAPIモード+フロントNuxt.jsでアプリを開発してみます！
Rails5から追加されたAPIモードでのrailsアプリケーションに、フロント部分をNuxt.jsで構築していきます。
目次
RailsのAPIモード
がっつり詳細はドキュメントを参考にどうぞ。
基本的にはrails newする時にオプションを追加するだけ。
rails new app_name --api作成されたアプリケーションは、普通に作成するよりもシンプルな構成になります。
・デフォルトで入るgemが少なくなる
・jsonをレスポンスとして返す想定になる など
普通にrails newするとこんな感じのgemファイルができます。
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.4', '>= 5.2.4.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: falseapiモードのオプションをつけて作成するとこんな感じ。
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.4', '>= 5.2.4.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
# gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false
# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
# gem 'rack-cors'コード量も少し減ってますが、sass-railsや、turbolinksなど、主にフロント側で使用するgemが無くなっていますね。
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'test用のgemでは、capybaraや、selenium-webdriverが無くなっていました。
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'capybaraはUIテストのためのgemです。
seleniumも、ブラウザ上でテストを行うためのgemなのでAPIモードでは確かに不要ですね。
NuxtJS
フロント側はNuxt.jsで構築していきます。
Nuxt.jsは、Vue.jsをベースとしたフレームワークです。
Vue.jsは前から使っていたので、今回は新しくNuxt.jsを使用して、Vueとの使用感の違いなども味わってみたいと思います。
Railsとの同居の仕方は、
rialsプロジェクト配下に、frontendというディレクトリを作成し、そこにNuxt.jsのプロジェクトを作成する形をとりました。
Nuxtが、毎回更新したコードをコンパイルして吐き出すので、ブラウザ上ではその吐き出されたコードからRails側のAPIにリクエストを投げていく形になります。
Vuetify
Nuxt.jsを選んだもう一つの理由にもなるのですが
このVuetifyというライブラリも使ってみたかった…！
vue.jsを使用したUIコンポーネントを提供してくれるライブラリで、マテリアルデザインをベースにした綺麗なUIを簡単に組む事ができます。
前から気になっていて、vuetifyを最大限使うためにNuxt.jsが最適だったので
フロント側については、Nuxt.js+Vuetifyという組み合わせで作っていきたいと思います！
どんなものを作るのか
今回は、ポケモンのダメージ計算ツールを作ってみたいと思います！
似たようなツールは色々公開されていて、今まではそれらを使っていましたが、
1体ずつ個体設定して、性格補正追加して、という工程が結構面倒でした。
なので、あらかじめ設定したポケモンに対して、ダメージ計算対象のポケモングループの技を、一括で計算できるようなアプリを作ってみたいと思います！
今後の拡張
作ってみたい機能
- ダメージ計算
- 育成した型の管理
- 種族値、実数値の計算
基本はダメージ計算機能ですが、付随して育成した型を管理しておく機能や、対戦時に対面したポケモンの実数値を推測するような機能も作ってみたいです！
素早さ比較する時に、毎回種族値検索するのも面倒だったので
性格補正やこだわり実数値も含めて比較できるような機能にしてみたいです。
開発経過は、随時ブログで記事化していきたいと思います！(続けば…)
