はじめに
・某プログラミングスクールのチーム開発でフリマアプリを作りました。
・商品カテゴリー機能を実装するのが非常に難しかったので備忘録として書きます。
・やることが多いので複数回に分けて書きます。
・僕自信、かなり詰まりました。なので、同じような状況の初学者の方の参考になれば幸いだと思い、記事にします。
・間違いなどあればご指摘いただけると幸いです。
完成形はこれです
・親カテゴリーを選択すると子カテゴリーが表示され、子カテゴリーを選択すると孫カテゴリーが表示され、サイズが関係するものについては孫カテゴリーを選択するとサイズが表示される
https://gyazo.com/97e3bdfac114bcced73aa3840f02801c
ところでancestryって何
公式ドキュメント
https://github.com/stefankroes/ancestry
【翻訳】Gem Ancestry公式ドキュメント
https://qiita.com/Rubyist_SOTA/items/49383aa7f60c42141871
AncestryはRuby on RailsのActiveRecordモデルのレコードをツリー構造（階層）として編成することを可能にするGemです。
多階層カテゴリを実装するために今回はancestryを使います。
完成の定義
・孫カテゴリーまで選択できる
・サイズが選択できる
・商品の出品ができる←これ大事
今回はミニアプリを作ります
まずはターミナルでrails newします。
以降コードブロックにファイル名の表示がない場合はターミナルでの操作です
$ rails _6.0.0_ new ancestry_app -d mysql
$ cd ancestry_app/
gemをいくつかインストールします。一番下に記述。
gem 'haml-rails'
gem 'jquery-rails'
gem 'ancestry'
gem 'haml-rails'はhaml記法を使うために、
gem 'jquery-rails'はjQueryでAjaxを実装するために、
gem 'ancestry'はカテゴリー機能を実装するために、
それぞれ必要です。
データの保存形式を変更します。
# encoding: utf8mb4
encoding: utf8
次にターミナルで以下のコマンドを順に入力。
$ bundle install
$ rails db:create
$ rails haml:erb2haml
gemを有効化して、
データベースを作成して、
erbで記述されているファイルをhaml記法に変換して（途中コマンド入力を求められたらyを入力してENTER）、
という流れです。
itemsテーブルを作ります（商品が出品できるように）
$ rails g model item
modelsディレクトリにitem.rbというモデルファイルが、
db/migrateディレクトリに20200815022617_create_items.rbというマイグレーションファイルが、
それぞれ作成されました。 （マイグレーションファイルのファイル名の数字は生成日時です）
マイグレーションファイルを修正します。
class CreateItems < ActiveRecord::Migration[6.0]
def change
create_table :items do |t|
# 今回はstring型のnameカラムを作成するので以下のように記述。
t.string :name, null: false
t.timestamps
end
end
end
null: falseをつけるとnameカラムの入力をしないと商品データが登録できません（not null制約）。
単にt.string :nameとする場合はnameカラムが空っぽでも商品データが登録できます。
ではitemsテーブルを作ります。
$ rails db:migrate
これでitemsテーブルができました。sequelproでテーブルの中身を見ると
・idカラム
・nameカラム
・created_atカラム
・updated_atカラム
があるはずです。
itemsコントローラーを作ります（ビューも作ります）
今回は商品出品画面にカテゴリー機能を実装します。
なので、localhost:3000/items/newの画面が必要ですね。
コントローラー作成ついでにnewアクションのビューも作ってしまいます。
$ rails g controller items new
app/controllers/items_controller.rbというコントローラーと、
app/views/new.html.hamlというビューファイルが、
それぞれ作成されました。
Rails.application.routes.draw do
# get 'items/new'
resources :items
end
今回、ミニアプリなのでとりあえずルーティングは仮にこのようにします。
本来はonlyオプションを使ってください。
これでサーバーを立ち上げたらlocalhost:3000/items/newにアクセスできるはずです。
ひとまず商品出品画面に到達することができました。
①はここまでです。
次回はcategoriesテーブルを作るところからスタートです。
まとめ
最後にここまでのまとめを。
・rails newでアプリケーションを作成
・gemをインストールしたり、データベースを作成したりする
・商品出品画面を作る
以上です。
次回に続きます。
随時、修正・加筆します。
参考
公式ドキュメント
https://github.com/stefankroes/ancestry
【翻訳】Gem Ancestry公式ドキュメント
https://qiita.com/Rubyist_SOTA/items/49383aa7f60c42141871
【Rails】 gem ancestry カテゴリー機能実装について
https://qiita.com/k_suke_ja/items/aee192b5174402b6e8ca