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. 【C97】冬コミ申し込みました!
  2. 【WPテーマ自作】ローカル環境でWP開発ができる「Local」の導入
  3. 【CharattDB】勉強がてらアプリを作ってみる
  4. 【git】git logで変更ファイル名を確認したい!
  5. 【git】git checkoutする時に、ベースブランチを指定する

関連記事

  1. App

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

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

カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

最近の記事

  1. railsをproductionモードで実行する
  1. App

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

    開発系の記事をまとめたブログ
  3. 【WPテーマ自作】ローカル環境でWP開発ができる「Local」の導入

    WordPress

    【WPテーマ自作】ローカル環境でWP開発ができる「Local」の導入
  4. WordPress

    【その他】ブログのテーマを変えました
  5. App

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