App

【ツール開発】RailsのAPIモードでアプリ開発

RailsのAPIモード+フロントNuxt.jsでアプリを開発してみます!

Rails5から追加されたAPIモードでのrailsアプリケーションに、フロント部分をNuxt.jsで構築していきます。

目次

  1. RailsのAPIモード
  2. NuxtJS
  3. Vuetify
  4. どんなものを作るのか
  5. 今後の拡張

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: false

apiモードのオプションをつけて作成するとこんな感じ。

# 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体ずつ個体設定して、性格補正追加して、という工程が結構面倒でした。

なので、あらかじめ設定したポケモンに対して、ダメージ計算対象のポケモングループの技を、一括で計算できるようなアプリを作ってみたいと思います!

今後の拡張

作ってみたい機能

  1. ダメージ計算
  2. 育成した型の管理
  3. 種族値、実数値の計算

基本はダメージ計算機能ですが、付随して育成した型を管理しておく機能や、対戦時に対面したポケモンの実数値を推測するような機能も作ってみたいです!

素早さ比較する時に、毎回種族値検索するのも面倒だったので
性格補正やこだわり実数値も含めて比較できるような機能にしてみたいです。

開発経過は、随時ブログで記事化していきたいと思います!(続けば…)

ピックアップ記事

  1. 【Blender】複数バージョンを簡単に管理できる、BlenderLaunche…
  2. 【Blender】アニメーションでポーズを左右反転してコピペしたい時
  3. 【ツール開発】ポケモンの種族値と実数値を調べるツール – 1
  4. 【Rails】findメソッドで連想配列から指定した値を検索する
  5. 【Rails】modelを作成する

関連記事

 
  1. App

    【ツール開発】ポケモンの種族値と実数値を調べるツール – 1

    RailsのAPI+Nuxt.jsでアプリを作っていきます、第2回目…

  2. App

    【ツール開発】ポケモンの種族値と実数値を調べるツール – 2

    RailsのAPI+Nuxt.jsでアプリを作っていきます、第3回目…

カレンダー

2021年8月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

最近の記事

  1. Blender

    【UE4】用語備忘録メモ
  2. 【Rails】オブジェクトの中身をログに出力する

    Ruby on Rails

    【Rails】オブジェクトの中身をログに出力する
  3. WordPress

    【WPテーマ自作】UnderScoresの導入
  4. Ruby on Rails

    【Rails】development? production? 開発環境ごとに処…
  5. Ruby on Rails

    【Rails】selectメソッドで特定の条件を満たす要素を取得する
PAGE TOP