目標：忘れた時にすぐに思い出せるようにざっくり解説する。

0章：Rails環境構築

0:Homebrewをインストール

Homebrewからインストールする

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew -v

1：rbenvをインストール

brew install rbenv
rbenv --version

2:rbenvにPATHを通す

echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
source ~/.bash_profile

3:Rubyをインストール

rbenv install 3.0.0

4:ローカルで使うRubyのバージョンを指定

rbenv local 3.0.0
ruby -v

5:Bundlerをインストール

gem install bundler
bundler -v

6:yarnをインストール(yarnはJavaScriptのライブラリの利用に必要なパッケージマネージャ)

brew install yarn
yarn -v

7:Railsをインストール

gem install rails -v 6.1.3.1
rails -v

1:NuxtJSの環境構築（macOS）

パッケージ管理ツールのインストール

Nuxtというフレームワークを使用するためには、
様々なプログラムをインストールする必要があります。

他のフレームワーク(Railsとか)と同じように、パッケージ管理ツールをインストールしていきます。

Railsにはパッケージ管理ツールにGem、
さらにそのGemを管理するBundlerなどが存在しています。
Nuxtの環境構築としてはNpmを利用します。

Npmの説明

Npmの正式名称はNode Package Managerです。

NpmはNode.jsというプログラムに組み込まれています。

Node.jsはJavaScriptを実行する環境です。

本来、JavaScriptはWebブラウザに組み込まれていて、
ブラウザ上でしか実行できませんでした。

しかし、Node.jsはその場でのスクリプトの実行を可能にしてくれます。
さまざまなライブラリが存在しているのですが、それらのインストールを行うツールとして、Node.jsに組み込まれているのが今回使用するNpmなのです。

他のJavaScriptライブラリもNpmを使ってインストールができるようになってきています。
NuxtもNpmでインストールできるため、Node.jsをインストールするというわけです。

8:Node.jsとNpmのインストールと確認

brew install node
node -v
npm -v

以上で環境構築は完了です。

1章:作り方の概要(RailsAPI の実装)

1:Todoモデルとテーブルの作成

Todoモデルの作成

rails g model Todo title:string user_id:integer

マイグレートして反映します

rails db:migrate

2:Todoのコントローラーの作成
nuxt-rails-todo/apiで行う

rails g controller v1::todos

v1にした理由：バージョンを指定してできるようにした

3:コントローラーに基本的なCRUD機能を追加してjson形式に変換してユーザーに返すようにする

render json: todo

理由：JavaScriptで非同期通信を行ってSPAを作成する際に、フロントエンド側でJSONのデータを使用するからです。

4:Todoのルーティングを作成する

`routes.rbで行う`

Rails.application.routes.draw do
  namespace :v1 do
  resources :todos, only: [:index, :create, :destroy]
end
end

Railsのルーティングではnamespaceという機能を使うことができ、URLのHelperとPathに指定した文字がつきます。

http://localhost:3000/v1/todos

↑で[]の配列が表示されていればAPIとして機能していることが確認できます！

5:Userモデルとテーブルの作成

apiディレクトリで行う

モデルの作成とmigrate

rails g model User name:string email:string uid:string
rails db:migrate

6:Userのコントローラーの作成

rails g controller v1::users

indexとcreateの機能とストロングパラメーターを実装して必ず以下の記述を追加する(JSON形式で返す)

render json: user
# create失敗したときはエラーを返す
render json: user.errors

7:Userのルーティングを作成する

api/config/routes.rbで行う

Rails.application.routes.draw do

namespace :v1 do
  resources :todos, only: [:index, :create, :destroy]
  resources :users, only: [:index, :create]
end
end

http://localhost:3000/v1/users

↑にアクセスして空配列[]を確認できればOKです。

8:JSON形式のデータを整形する(active_model_serializer)

active_model_serializersの導入

Gemfileに以下の記述を追加します。

gem 'active_model_serializers'

Gemをインストールします。

bundle install

9:JSON形式のデータを整形する(apiディレクトリで行う)

rails g serializer user

api/app/serializers/user_serializer.rbで以下の記述を追加します。

class UserSerializer < ActiveModel::Serializer
  attributes :id, :name, :email
  has_many :todos 
end

todoのserializerも作成します。

rails g serializer todo

user.nameと毎回書かないようにusernameというメソッドを作り、名前の値をTodoと一緒に返せるように設定します。

api/app/serializers/todo_serializer.rb

class UserSerializer < ActiveModel::Serializer
  attributes :id, :title, :user_id, :username
  belongs_to :user

  def username
    object.user.name
  end
end

10:モデルのアソシエーションの実装

api/app/models/todo.rb

class Todo < ApplicationRecord
  belongs_to :user
end

users.rb

class User < ApplicationRecord
  has_many :todos
end

javascript

{ 
  "user" : {
  "user_id" : "ユーザーのID",
  "username": "ユーザーの名前",
  "todo" : 
  {
    "title" : "todoのタイトル"
  }
}

↑のような、綺麗なJSONを返すことができるようになりました。