{"id":6724,"date":"2022-11-01T23:24:05","date_gmt":"2022-11-01T14:24:05","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=6724"},"modified":"2022-12-04T10:26:09","modified_gmt":"2022-12-04T01:26:09","slug":"vuerails","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2022\/11\/01\/vuerails\/","title":{"rendered":"Vue\u3068Rails\u3067\u4f5c\u6210\u3057\u305f\u30a2\u30d7\u30ea\u3067\u5f97\u305f\u77e5\u898b\u3068\u5099\u5fd8\u93321(\u74b0\u5883\u69cb\u7bc9\uff0bRailsAPI\u5b9f\u88c5\u65b9\u6cd5)"},"content":{"rendered":"

\u76ee\u6a19\uff1a\u5fd8\u308c\u305f\u6642\u306b\u3059\u3050\u306b\u601d\u3044\u51fa\u305b\u308b\u3088\u3046\u306b\u3056\u3063\u304f\u308a\u89e3\u8aac\u3059\u308b\u3002<\/h2>\n

0\u7ae0\uff1aRails\u74b0\u5883\u69cb\u7bc9<\/h1>\n

0:Homebrew\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n

Homebrew<\/a>\u304b\u3089\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/p>\n

\/bin\/bash -c \"$(curl -fsSL https:\/\/raw.githubusercontent.com\/Homebrew\/install\/HEAD\/install.sh)\"\r\nbrew -v<\/pre>\n
1\uff1arbenv\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n
brew install rbenv\r\nrbenv --version<\/pre>\n
2:rbenv\u306bPATH\u3092\u901a\u3059<\/h3>\n
echo 'export PATH=\"$HOME\/.rbenv\/bin:$PATH\"' >> ~\/.bash_profile\r\necho 'if which rbenv > \/dev\/null; then eval \"$(rbenv init -)\"; fi' >> ~\/.bash_profile\r\nsource ~\/.bash_profile<\/pre>\n
3:Ruby\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n
rbenv install 3.0.0<\/pre>\n
4:\u30ed\u30fc\u30ab\u30eb\u3067\u4f7f\u3046Ruby\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u6307\u5b9a<\/h3>\n
rbenv local 3.0.0\r\nruby -v<\/pre>\n
5:Bundler\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n
gem install bundler\r\nbundler -v<\/pre>\n
6:yarn\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb(yarn\u306fJavaScript\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u5229\u7528\u306b\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3)<\/h3>\n
brew install yarn\r\nyarn -v<\/pre>\n
7:Rails\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n
gem install rails -v 6.1.3.1\r\nrails -v<\/pre>\n
1:NuxtJS\u306e\u74b0\u5883\u69cb\u7bc9\uff08macOS\uff09<\/h1>\n
\u30d1\u30c3\u30b1\u30fc\u30b8\u7ba1\u7406\u30c4\u30fc\u30eb\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n
Nuxt\u3068\u3044\u3046\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u306b\u306f\u3001
\n\u69d8\u3005\u306a\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
\u4ed6\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af(Rails\u3068\u304b)\u3068\u540c\u3058\u3088\u3046\u306b\u3001\u30d1\u30c3\u30b1\u30fc\u30b8\u7ba1\u7406\u30c4\u30fc\u30eb<\/strong>\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
Rails\u306b\u306f\u30d1\u30c3\u30b1\u30fc\u30b8\u7ba1\u7406\u30c4\u30fc\u30eb\u306bGem\u3001
\n\u3055\u3089\u306b\u305d\u306eGem\u3092\u7ba1\u7406\u3059\u308bBundler\u306a\u3069\u304c\u5b58\u5728\u3057\u3066\u3044\u307e\u3059\u3002
\nNuxt\u306e\u74b0\u5883\u69cb\u7bc9\u3068\u3057\u3066\u306fNpm\u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n
Npm\u306e\u8aac\u660e<\/h3>\n
Npm<\/strong>\u306e\u6b63\u5f0f\u540d\u79f0\u306fNode Package Manager<\/strong>\u3067\u3059\u3002<\/p>\n
Npm\u306fNode.js<\/strong>\u3068\u3044\u3046\u30d7\u30ed\u30b0\u30e9\u30e0\u306b\u7d44\u307f\u8fbc\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n
Node.js\u306fJavaScript<\/strong>\u3092\u5b9f\u884c\u3059\u308b\u74b0\u5883\u3067\u3059\u3002<\/p>\n
\u672c\u6765\u3001JavaScript\u306fWeb\u30d6\u30e9\u30a6\u30b6\u306b\u7d44\u307f\u8fbc\u307e\u308c\u3066\u3044\u3066\u3001
\n\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u3057\u304b\u5b9f\u884c\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/p>\n
\u3057\u304b\u3057\u3001Node.js\u306f\u305d\u306e\u5834\u3067\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u5b9f\u884c\u3092\u53ef\u80fd\u306b\u3057\u3066\u304f\u308c\u307e\u3059\u3002
\n\u3055\u307e\u3056\u307e\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u5b58\u5728\u3057\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u305d\u308c\u3089\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3092\u884c\u3046\u30c4\u30fc\u30eb\u3068\u3057\u3066\u3001Node.js<\/strong>\u306b\u7d44\u307f\u8fbc\u307e\u308c\u3066\u3044\u308b\u306e\u304c\u4eca\u56de\u4f7f\u7528\u3059\u308bNpm<\/strong>\u306a\u306e\u3067\u3059\u3002<\/p>\n
\u4ed6\u306eJavaScript\u30e9\u30a4\u30d6\u30e9\u30ea<\/strong>\u3082Npm<\/strong>\u3092\u4f7f\u3063\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u304d\u3066\u3044\u307e\u3059\u3002
\nNuxt\u3082Npm\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u308b\u305f\u3081\u3001Node.js\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3068\u3044\u3046\u308f\u3051\u3067\u3059\u3002<\/p>\n
8:Node.js\u3068Npm\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u78ba\u8a8d<\/h3>\n
brew install node\r\nnode -v\r\nnpm -v<\/pre>\n
\u4ee5\u4e0a\u3067\u74b0\u5883\u69cb\u7bc9\u306f\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n
1\u7ae0:\u4f5c\u308a\u65b9\u306e\u6982\u8981(RailsAPI \u306e\u5b9f\u88c5)<\/h1>\n
1:Todo\u30e2\u30c7\u30eb\u3068\u30c6\u30fc\u30d6\u30eb\u306e\u4f5c\u6210<\/h1>\n
Todo\u30e2\u30c7\u30eb\u306e\u4f5c\u6210<\/h2>\n
rails g model Todo title:string user_id:integer<\/pre>\n
\u30de\u30a4\u30b0\u30ec\u30fc\u30c8\u3057\u3066\u53cd\u6620\u3057\u307e\u3059<\/h2>\n
rails db:migrate<\/pre>\n
2:Todo\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4f5c\u6210
\nnuxt-rails-todo\/api\u3067\u884c\u3046<\/h1>\n
rails g controller v1::todos<\/pre>\n
v1\u306b\u3057\u305f\u7406\u7531\uff1a\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u6307\u5b9a\u3057\u3066\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u305f<\/h4>\n
3:\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306b\u57fa\u672c\u7684\u306aCRUD\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u3066json\u5f62\u5f0f\u306b\u5909\u63db\u3057\u3066\u30e6\u30fc\u30b6\u30fc\u306b\u8fd4\u3059\u3088\u3046\u306b\u3059\u308b<\/h2>\n
render json: todo<\/pre>\n
\u7406\u7531\uff1aJavaScript\u3067\u975e\u540c\u671f\u901a\u4fe1\u3092\u884c\u3063\u3066SPA\u3092\u4f5c\u6210\u3059\u308b\u969b\u306b\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u5074\u3067JSON\u306e\u30c7\u30fc\u30bf\u3092\u4f7f\u7528\u3059\u308b\u304b\u3089\u3067\u3059\u3002<\/h2>\n
4:Todo\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u4f5c\u6210\u3059\u308b<\/h1>\n
routes.rb\u3067\u884c\u3046<\/code>
\n<\/code><\/h2>\n
Rails.application.routes.draw do\r\n  namespace :v1 do\r\n  resources :todos, only: [:index, :create, :destroy]\r\nend\r\nend<\/code><\/pre>\n
Rails\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3067\u306fnamespace\u3068\u3044\u3046\u6a5f\u80fd\u3092\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u3001URL\u306eHelper\u3068Path\u306b\u6307\u5b9a\u3057\u305f\u6587\u5b57\u304c\u3064\u304d\u307e\u3059\u3002<\/p>\n
http:\/\/localhost:3000\/v1\/todos<\/h3>\n
\u2191\u3067[]\u306e\u914d\u5217\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308c\u3070API\u3068\u3057\u3066\u6a5f\u80fd\u3057\u3066\u3044\u308b\u3053\u3068\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\uff01<\/p>\n
5:User\u30e2\u30c7\u30eb\u3068\u30c6\u30fc\u30d6\u30eb\u306e\u4f5c\u6210<\/h1>\n
api\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3067\u884c\u3046<\/h2>\n
\u30e2\u30c7\u30eb\u306e\u4f5c\u6210\u3068migrate<\/h3>\n
rails g model User name:string email:string uid:string\r\nrails db:migrate<\/pre>\n
6:User\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4f5c\u6210<\/h1>\n
rails g controller v1::users<\/pre>\n
index\u3068create\u306e\u6a5f\u80fd\u3068\u30b9\u30c8\u30ed\u30f3\u30b0\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u5b9f\u88c5\u3057\u3066\u5fc5\u305a\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0\u3059\u308b(JSON\u5f62\u5f0f\u3067\u8fd4\u3059)<\/h2>\n
render json: user\r\n# create\u5931\u6557\u3057\u305f\u3068\u304d\u306f\u30a8\u30e9\u30fc\u3092\u8fd4\u3059\r\nrender json: user.errors<\/pre>\n
7:User\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u4f5c\u6210\u3059\u308b<\/h1>\n
api\/config\/routes.rb\u3067\u884c\u3046<\/h2>\n
Rails.application.routes.draw do\r\n\r\nnamespace :v1 do\r\n  resources :todos, only: [:index, :create, :destroy]\r\n  resources :users, only: [:index, :create]\r\nend\r\nend<\/pre>\n
http:\/\/localhost:3000\/v1\/users<\/p>\n
\u2191\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u7a7a\u914d\u5217[]\u3092\u78ba\u8a8d\u3067\u304d\u308c\u3070OK\u3067\u3059\u3002<\/p>\n
8:JSON\u5f62\u5f0f\u306e\u30c7\u30fc\u30bf\u3092\u6574\u5f62\u3059\u308b(active_model_serializer)<\/h1>\n
active_model_serializers\u306e\u5c0e\u5165<\/h2>\n
Gemfile\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
gem 'active_model_serializers'<\/pre>\n
Gem\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/h2>\n
bundle install<\/pre>\n
9:JSON\u5f62\u5f0f\u306e\u30c7\u30fc\u30bf\u3092\u6574\u5f62\u3059\u308b(api\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3067\u884c\u3046)<\/h1>\n
rails g serializer user<\/pre>\n
api\/app\/serializers\/user_serializer.rb\u3067\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
class UserSerializer < ActiveModel::Serializer\r\n  attributes :id, :name, :email\r\n  has_many :todos \r\nend<\/pre>\n
todo\u306eserializer\u3082\u4f5c\u6210\u3057\u307e\u3059\u3002<\/h2>\n
rails g serializer todo<\/pre>\n
user.name\u3068\u6bce\u56de\u66f8\u304b\u306a\u3044\u3088\u3046\u306busername\u3068\u3044\u3046\u30e1\u30bd\u30c3\u30c9\u3092\u4f5c\u308a\u3001\u540d\u524d\u306e\u5024\u3092Todo\u3068\u4e00\u7dd2\u306b\u8fd4\u305b\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n
api\/app\/serializers\/todo_serializer.rb<\/h3>\n
class UserSerializer < ActiveModel::Serializer\r\n  attributes :id, :title, :user_id, :username\r\n  belongs_to :user\r\n\r\n  def username\r\n    object.user.name\r\n  end\r\nend<\/pre>\n
10:\u30e2\u30c7\u30eb\u306e\u30a2\u30bd\u30b7\u30a8\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5<\/h1>\n
api\/app\/models\/todo.rb<\/h1>\n
class Todo < ApplicationRecord\r\n  belongs_to :user\r\nend<\/pre>\n
users.rb<\/h1>\n
class User < ApplicationRecord\r\n  has_many :todos\r\nend<\/pre>\n
javascript<\/h2>\n
{ \r\n  \"user\" : {\r\n  \"user_id\" : \"\u30e6\u30fc\u30b6\u30fc\u306eID\",\r\n  \"username\": \"\u30e6\u30fc\u30b6\u30fc\u306e\u540d\u524d\",\r\n  \"todo\" : \r\n  {\r\n    \"title\" : \"todo\u306e\u30bf\u30a4\u30c8\u30eb\"\r\n  }\r\n}<\/pre>\n
\u2191\u306e\u3088\u3046\u306a\u3001\u7dba\u9e97\u306aJSON\u3092\u8fd4\u3059\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
http:\/\/localhost:3000\/v1\/users<\/p>\n
\u2191\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066[]\u3068\u3044\u3046\u914d\u5217\u304c\u5e30\u3063\u3066\u3044\u308c\u3070\u6b63\u3057\u3044\u5b9f\u88c5\u304c\u3067\u304d\u3066\u3044\u307e\u3059\u3002<\/p>\n
\uff12\u306b\u7d9a\u304d\u307e\u3059\u3002<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u76ee\u6a19\uff1a\u5fd8\u308c\u305f\u6642\u306b\u3059\u3050\u306b\u601d\u3044\u51fa\u305b\u308b\u3088\u3046\u306b\u3056\u3063\u304f\u308a\u89e3\u8aac\u3059\u308b\u3002 0\u7ae0\uff1aRails\u74b0\u5883\u69cb\u7bc9 0:Homebrew\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb Homebrew\u304b\u3089\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b \/bin\/bash -c “$(curl -fsSL http […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-6724","post","type-post","status-publish","format-standard","hentry","category-programming-note"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/6724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/comments?post=6724"}],"version-history":[{"count":9,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/6724\/revisions"}],"predecessor-version":[{"id":6751,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/6724\/revisions\/6751"}],"wp:attachment":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/media?parent=6724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/categories?post=6724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/tags?post=6724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}