はじめに 初めてVue.jsを使用したアプリを開発しているので、 そこで構築手順をアウトプットとして記載して行きたいと思います。^^ 流れ ・vue-cliのコマンドでVue.jsのプロジェクトを作成する 　　　・プロジェクトの設定を聞かれるので一つずつ答えていく ・Vue.jsのサーバを起動してブラウザでウェルカム画面を表示する プロジェクトの作成 ターミナル上で次のコマンドを実装 ターミナル vue create 　フォルダ名 するとターミナル上に、プリセットを利用するかどうかの質問が表示されます。 ? Please pick a preset: memo (babel, eslint) default (babel, eslint) ❯ Manually select features 今回は自分で設定を選択していきたいので「Manually select features」を選択してEnterを押します。 次に、プロジェクトで使用するライブラリを聞かれます。 ? Please pick a preset: Manually select features ? Check the features needed for your project: ◯ Choose Vue version ◯ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◯ Router ◉ Vuex ◯ CSS Pre-processors ❯◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing 今回は「Vuex」と「Linter / Formatter」を選択します。 スペースキーで選択/解除できますので、その2つを選択した状態でEnterを押します。 次に、linter / formatterの設定を聞かれます。 ? Please pick a preset: Manually select features ? Check the features needed for your project: Vuex, Linter ? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ❯ ESLint + Prettier 今回は「ESLint + Prettier」を選択してEnterを押します。 次に、Lintを実行するタイミングを聞かれます。 ? Please pick a preset: Manually select features ? Check the features needed for your project: Vuex, Linter ? Pick a linter / formatter config: Prettier ? Pick additional lint features: ❯◉ Lint on save ◯ Lint and fix on commit 今回は「Lint on save」を選択してEnterを押します。 次に、ESLintなどの設定ファイルを集約するか各設定ファイルで分けて書くかを聞かれます。 ? Please pick a preset: Manually select features ? Check the features needed for your project: Vuex, Linter ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? ❯ In dedicated config files In package.json 今回は「In dedicated config files」を選択してEnterを押します。 次に、パッケージ管理をnpmコマンドかyarnコマンドのどちらを使うかを聞かれます。 ? Pick the package manager to use when installing dependencies: (Use arrow keys) Use Yarn ❯ Use NPM 今回は「Use NPM」を選択してEnterを押します。 最後に、今回選択した設定をプリセットとして保存しておくかどうかを聞かれます。 ? Please pick a preset: Manually select features ? Check the features needed for your project: Vuex, Linter ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Pick the package manager to use when installing dependencies: Use NPM ? Save this as a preset for future projects? (y/N) 今回は「N」を入力してEnterを押します。 これで設定の選択は完了です。 その設定に沿ってプロジェクトの作成処理が走ります。 作成が完了すると次のように表示されます。 Vue CLI v4.5.3 ✨ Creating project in /Users/username/workspace/vue-calendar/frontend. ? Initializing git repository... ⚙️ Installing CLI plugins. This might take a while... > fsevents@1.2.13 install /Users/username/workspace/vue-calendar/frontend/node_modules/watchpack-chokidar2/node_modules/fsevents > node install.js SOLINK_MODULE(target) Release/.node CXX(target) Release/obj.target/fse/fsevents.o SOLINK_MODULE(target) Release/fse.node ... ⚓ Running completion hooks... ? Generating README.md... ? Successfully created project frontend. ? Get started with the following commands: 作成されたディレクトリに移動します。 $ cd 作成したフォルダ名 nodeのバージョンを改めて設定します。 次のコマンドを実行して、今のディレクトリで使用するnodeのバージョンを指定します。 $ nodenv local 14.8.0 nodeのバージョンが14.8.0になっているかを確認します。 $ node -v v14.8.0 次のコマンドでサーバーを起動します。 $ npm run serve 処理が完了すると次のように表示されます。 DONE Compiled successfully in 1977ms 21:29:28 App running at: - Local: http://localhost:8080/ - Network: http://192.168.2.110:8080/ Note that the development build is not optimized. To create a production build, run npm run build. そうしたら、ブラウザでhttp://localhost:8080/ を開いてください。 次の画面が表示されれば成功です。 ここまでで詰まったポイント 全ての設定を終えて作成処理が始まった後に、、 Vue CLI v4.5.3 ✨ Creating project in /Users/username/workspace/vue-calendar/frontend. ⚙️ Installing CLI plugins. This might take a while... added 1193 packages in 2m ? Invoking generators... ? Installing additional dependencies... npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: vue@2.6.14 npm ERR! node_modules/vue npm ERR! vue@"^2.6.11" from the root project npm ERR! peer vue@"^2.0.0" from vuex@3.6.2 npm ERR! node_modules/vuex npm ERR! vuex@"^3.4.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"3.1.5" from @vue/compiler-sfc@3.1.5 { npm ERR! node_modules/@vue/compiler-sfc npm ERR! peer @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-service@4.5.13 npm ERR! node_modules/@vue/cli-service npm ERR! dev @vue/cli-service@"~4.5.0" from the root project npm ERR! 3 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex) npm ERR! peer @vue/compiler-sfc@"^3.0.8" from vue-loader-v16@16.3.3 { npm ERR! node_modules/vue-loader-v16 npm ERR! optional vue-loader-v16@"npm:vue-loader@^16.1.0" from @vue/cli-service@4.5.13 npm ERR! node_modules/@vue/cli-service npm ERR! dev @vue/cli-service@"~4.5.0" from the root project npm ERR! 3 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex) npm ERR! . . ERROR command failed: npm install --loglevel error 無数のエラーが発生してしまいました^^; エラー内容で調べると この記事にたどり着きなんとか作成できました！ https://qiita.com/saken649/items/ccabb2f34cdac784b383 正直内容は理解できていませんが、 解決に至った流れを記載しておきます? $ vi ~/.vuerc { "useTaobaoRegistry": true, ⇦ false 変更 "latestVersion": "4.5.13", "lastChecked": 1627541270361, "packageManager": "npm" } trueをfalseに変更してあげる "useTaobaoRegistry": false 再度実行するといけました！ vue create フォルダ名 おわりに Vue.jsやりたてほやほやです。 感じたこと大事だと思ったことはしっかりアウトプットして行きたいと思います^^

[Vue→Rails]ネストされた状態の親子孫オブジェクト（一対多の関係あり）を全て同時にデータベースに保存するでは、Vue側で作ったネストされたデータを複数のテーブルに保存した。 この記事では、別々のテーブルに保存されたそれらのデータを再びネストされた形でVueコンポーネント側で取得する。 前提条件 モデル 親：School 子：Student school.rb # 親 class School has_many :students student.rb # 子 class Student belongs_to :school 保存されているレコード School { id: 1, school_name: 'first' } { id: 2, school_name: 'second'} Student { id: 1, student_name: 'Suzuki', age: 13, school_id: 1 } { id: 2, student_name: 'Hirano', age: 14, school_id: 1 } { id: 3, student_name: 'Nagai', age: 15, school_id: 1 } { id: 4, student_name: 'Sato', age: 13, school_id: 2 } { id: 5, student_name: 'Iguchi', age: 14, school_id: 2 } { id: 6, student_name: 'Arai', age: 15, school_id: 2 } axios.getによるデータの取得 $axiosはインスタンスプロパティに追加済み schools#indexにgetリクエストを送りデータを取得する <script> ... this.$axios.get('schools') .then(res => { console.log(res) }) .catch(err => { console.log(err) }) ... </script> コントローラ to_jsonメソッドの使用 includeオプションでstudentsを指定する。school.studentsで取得されるstudentの配列をschoolにネストさせることができる。 schools_controller.rb def index schools = School.all string = schools.map.to_json(include: :students) render json: string end 取得できるデータ to_jsonのincludeオプションで指定した'students'がそのままキー名になる。 data: [ { schoolName: 'first', students: [ { studentName: 'Suzuki', age: 13 }, { studentName: 'Hirano', age: 14 }, { studentName: 'Nagai', age: 15 } ] }, { schoolName: 'second', students: [ { studentName: 'Sato', age: 13 }, { studentName: 'Iguchi', age: 14 }, { studentName: 'Arai', age: 15 } ] } ] 【追記】 キー名を変えたいとき students以外のキー名にしたいとき（例：studentDataなど） モデル アソシエーションを取得するメソッドを親側に新しく定義し、目的のキー名をメソッド名にする。 school.rb class School < ApplicationRecord has_many :students def studentData # 目的のキー名 self.students end end コントローラ to_jsonメソッドのmethodsオプションでそのメソッド名を指定する。 メソッド名がそのままキー名になる。 schools_controller.rb def index schools = School.all string = schools.map.to_json(methods: :studentData) render json: string end 取得できるデータ data: [ { schoolName: 'first', studentData: [ { studentName: 'Suzuki', age: 13 }, { studentName: 'Hirano', age: 14 }, { studentName: 'Nagai', age: 15 } ] }, { schoolName: 'second', studentData: [ { studentName: 'Sato', age: 13 }, { studentName: 'Iguchi', age: 14 }, { studentName: 'Arai', age: 15 } ] } ] 参考文献

前提条件 モデル 親：City 子：School 孫：Student 一つの市に複数の学校があり、それぞれの学校に複数の生徒がいるという想定 city.rb # 親 class City has_many :school school.rb # 子 class School has_many :students belongs_to :city student.rb # 孫 class Student belongs_to :school Vue（フロントエンド側)で生成されるオブジェクト // the city has 2 schools // each school has 3 students { city: { cityName: 'tokyo', schools: [ { schoolName: 'first', students: [ { studentName: 'Suzuki', age: 13 }, { studentName: 'Hirano', age: 14 }, { studentName: 'Nagai', age: 15 } ] }, { schoolName: 'second', students: [ { studentName: 'Sato', age: 13 }, { studentName: 'Iguchi', age: 14 }, { studentName: 'Arai', age: 15 } ] }, ] } } axiosのpostメソッドでバックエンドに送る。 コントローラ cities,schools,studentsコントローラで個別にレコードを保存するのではなく、citiesコントローラで一括で保存を行う。 ストロングパラメータの記述 cityの一つの属性としてschoolsを指定する。配列データであるschoolsは[]で表し、中にschoolsのパラメータを記述する。 さらに、schoolsの一つのパラメータとしてstudentsを指定する。同様に配列データであるstudentsを[]で表し、中にstudentsのパラメータを記述する。 createアクションの記述 CityObjectインスタンス（次章で解説）をビルドし、パラメータを渡す（2行目)。 CityObjectのインスタンスメソッド'save'（次章で解説：ActiveRecordのsaveメソッドではない）内で親子孫それぞれのモデルにおいてレコードの保存を行う（4行目)。 cities_controller.rb def create city = CityObject.new(city_params) if city.save render json: city else render json: city.errors.full_messages, status: :unprocessable_entity end end private def city_params params.require(:city).permit(:cityName, schools: [:schoolName, students: [:studentName, :age]]) end 子孫オブジェクトを包含したインスタンスの利用 City,School,Studentのパラメータを持つ非ActiveRecordクラス'CityObject'を定義する。 コントローラでCityObjectのインスタンスにパラメータが渡されているので、インスタンスメソッド'save'内でそのパラメータにアクセスし、City,School,Studentそれぞれのインスタンスに渡して保存を行う。 ActiveModelモジュールの利用 CityObjectクラスを定義し、ActiveModel::ModelをインクルードすることでActiveRecordモデルと同様の処理を可能にする（1,2行目）。 それとともにActiveModel::Attributesをインクルードし、attributeメソッドによりCityObjectに渡されたパラメータを参照できるようにする（3-5行目）。親オブジェクトの各属性を指定する。 CityObjectのインスタンスメソッド'save'の定義 CityObjectの属性値'cityName'にアクセスし、新しいCityインスタンスの属性値'city_name'としてセットし、それを保存する（10-11行目）。 schools（selfは省略可）でschoolオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う（14行目）。 schoolオブジェクトの'schoolName'の値をSchoolインスタンスの属性値'school_name'としてセットし、先程保存したCityインスタンスの子オブジェクトとして保存する（15行目）。 sc[:students]でschoolオブジェクトが持つstudentオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う（16行目）。 studentオブジェクトの'studentName','age'の値をStudentインスタンスの属性値'student_name','age'として渡し、先程保存したSchoolインスタンスの子として保存する（18行目）。 app/models/city_object.rb class CityObject include ActiveModel::Model include ActiveModel::Attributes attribute :cityName attribute :schools def save # Cityインスタンスの保存 city = City.new(city_name: self.cityName) city.save # Schoolインスタンスの保存 self.schools.each do |sc| school = city.schools.create(school_name: sc[:schoolName]) sc[:students].each do |st| # Studentインスタンスの保存 school.students.create(student_name: st[:studentName], age: st[:age]) end end end end 保存されるレコード City { id: 1, city_name: 'tokyo' } School { id: 1, school_name: 'first', city_id: 1 } { id: 2, school_name: 'second', city_id: 1 } Student { id: 1, student_name: 'Suzuki', age: 13, school_id: 1 } { id: 2, student_name: 'Hirano', age: 14, school_id: 1 } { id: 3, student_name: 'Nagai', age: 15, school_id: 1 } { id: 4, student_name: 'Sato', age: 13, school_id: 2 } { id: 5, student_name: 'Iguchi', age: 14, school_id: 2 } { id: 6, student_name: 'Arai', age: 15, school_id: 2 }

前提条件 モデル 親：City 子：School 孫：Student 一つの市に複数の学校があり、それぞれの学校に複数の生徒がいるという想定 city.rb # 親 class City has_many :school school.rb # 子 class School has_many :students belongs_to :city student.rb # 孫 class Student belongs_to :school Vue（フロントエンド側)で生成されるオブジェクト // the city has 2 schools // each school has 3 students { city: { cityName: 'tokyo', schools: [ { schoolName: 'first', students: [ { studentName: 'Suzuki', age: 13 }, { studentName: 'Hirano', age: 14 }, { studentName: 'Nagai', age: 15 } ] }, { schoolName: 'second', students: [ { studentName: 'Sato', age: 13 }, { studentName: 'Iguchi', age: 14 }, { studentName: 'Arai', age: 15 } ] }, ] } } axiosのpostメソッドでバックエンドに送る。 コントローラ cities,schools,studentsコントローラで個別にレコードを保存するのではなく、citiesコントローラで一括で保存を行う。 ストロングパラメータの記述 cityの一つの属性としてschoolsを指定する。配列データであるschoolsは[]で表し、中にschoolsのパラメータを記述する。 さらに、schoolsの一つのパラメータとしてstudentsを指定する。同様に配列データであるstudentsを[]で表し、中にstudentsのパラメータを記述する。 createアクションの記述 CityObjectインスタンス（次章で解説）をビルドし、パラメータを渡す（2行目)。 CityObjectのインスタンスメソッド'save'（次章で解説：ActiveRecordのsaveメソッドではない）内で親子孫それぞれのモデルにおいてレコードの保存を行う（4行目)。 cities_controller.rb def create city = CityObject.new(city_params) if city.save render json: city else render json: city.errors.full_messages, status: :unprocessable_entity end end private def city_params params.require(:city).permit(:cityName, schools: [:schoolName, students: [:studentName, :age]]) end 子孫オブジェクトを包含したインスタンスの利用 City,School,Studentのパラメータを持つ非ActiveRecordクラス'CityObject'を定義する。 コントローラでCityObjectのインスタンスにパラメータが渡されているので、インスタンスメソッド'save'内でそのパラメータにアクセスし、City,School,Studentそれぞれのインスタンスに渡して保存を行う。 ActiveModelモジュールの利用 CityObjectクラスを定義し、ActiveModel::ModelをインクルードすることでActiveRecordモデルと同様の処理を可能にする（1,2行目）。 それとともにActiveModel::Attributesをインクルードし、attributeメソッドによりCityObjectに渡されたパラメータを参照できるようにする（3-5行目）。親オブジェクトの各属性を指定する。 CityObjectのインスタンスメソッド'save'の定義 CityObjectの属性値'cityName'にアクセスし、新しいCityインスタンスの属性値'city_name'としてセットし、それを保存する（10-11行目）。 schools（selfは省略可）でschoolオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う（14行目）。 schoolオブジェクトの'schoolName'の値をSchoolインスタンスの属性値'school_name'としてセットし、先程保存したCityインスタンスの子オブジェクトとして保存する（15行目）。 sc[:students]でschoolオブジェクトが持つstudentオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う（16行目）。 studentオブジェクトの'studentName','age'の値をStudentインスタンスの属性値'student_name','age'として渡し、先程保存したSchoolインスタンスの子として保存する（18行目）。 app/models/city_object.rb class CityObject include ActiveModel::Model include ActiveModel::Attributes attribute :cityName attribute :schools def save # Cityインスタンスの保存 city = City.new(city_name: self.cityName) city.save # Schoolインスタンスの保存 self.schools.each do |sc| school = city.schools.create(school_name: sc[:schoolName]) sc[:students].each do |st| # Studentインスタンスの保存 school.students.create(student_name: st[:studentName], age: st[:age]) end end end end 保存されるレコード City { id: 1, city_name: 'tokyo' } School { id: 1, school_name: 'first', city_id: 1 } { id: 2, school_name: 'second', city_id: 1 } Student { id: 1, student_name: 'Suzuki', age: 13, school_id: 1 } { id: 2, student_name: 'Hirano', age: 14, school_id: 1 } { id: 3, student_name: 'Nagai', age: 15, school_id: 1 } { id: 4, student_name: 'Sato', age: 13, school_id: 2 } { id: 5, student_name: 'Iguchi', age: 14, school_id: 2 } { id: 6, student_name: 'Arai', age: 15, school_id: 2 }

前提条件 モデル 親：City 子：School 孫：Student 一つの市に複数の学校があり、それぞれの学校に複数の生徒がいるという想定 city.rb # 親 class City has_many :school school.rb # 子 class School has_many :students belongs_to :city student.rb # 孫 class Student belongs_to :school Vue（フロントエンド側)で生成されるオブジェクト // the city has 2 schools // each school has 3 students { city: { cityName: 'tokyo', schools: [ { schoolName: 'first', students: [ { studentName: 'Suzuki', age: 13 }, { studentName: 'Hirano', age: 14 }, { studentName: 'Nagai', age: 15 } ] }, { schoolName: 'second', students: [ { studentName: 'Sato', age: 13 }, { studentName: 'Iguchi', age: 14 }, { studentName: 'Arai', age: 15 } ] }, ] } } axiosのpostメソッドでバックエンドに送る。 コントローラ cities,schools,studentsコントローラで個別にレコードを保存するのではなく、citiesコントローラで一括で保存を行う。 ストロングパラメータの記述 cityの一つの属性としてschoolsを指定する。配列データであるschoolsは[]で表し、中にschoolsのパラメータを記述する。 さらに、schoolsの一つのパラメータとしてstudentsを指定する。同様に配列データであるstudentsを[]で表し、中にstudentsのパラメータを記述する。 createアクションの記述 CityObjectインスタンス（次章で解説）をビルドし、パラメータを渡す（2行目)。 CityObjectのインスタンスメソッド'save'（次章で解説：ActiveRecordのsaveメソッドではない）内で親子孫それぞれのモデルにおいてレコードの保存を行う（4行目)。 cities_controller.rb def create city = CityObject.new(city_params) if city.save render json: city else render json: city.errors.full_messages, status: :unprocessable_entity end end private def city_params params.require(:city).permit(:cityName, schools: [:schoolName, students: [:studentName, :age]]) end 子孫オブジェクトを包含したインスタンスの利用 City,School,Studentのパラメータを持つ非ActiveRecordクラス'CityObject'を定義する。 コントローラでCityObjectのインスタンスにパラメータが渡されているので、インスタンスメソッド'save'内でそのパラメータにアクセスし、City,School,Studentそれぞれのインスタンスに渡して保存を行う。 ActiveModelモジュールの利用 CityObjectクラスを定義し、ActiveModel::ModelをインクルードすることでActiveRecordモデルと同様の処理を可能にする（1,2行目）。 それとともにActiveModel::Attributesをインクルードし、attributeメソッドによりCityObjectに渡されたパラメータを参照できるようにする（3-5行目）。親オブジェクトの各属性を指定する。 CityObjectのインスタンスメソッド'save'の定義 CityObjectの属性値'cityName'にアクセスし、新しいCityインスタンスの属性値'city_name'としてセットし、それを保存する（10-11行目）。 schools（selfは省略可）でschoolオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う（14行目）。 schoolオブジェクトの'schoolName'の値をSchoolインスタンスの属性値'school_name'としてセットし、先程保存したCityインスタンスの子オブジェクトとして保存する（15行目）。 sc[:students]でschoolオブジェクトが持つstudentオブジェクトの配列を取得し、一つ一つのオブジェクトについて以下のループ処理を行う（16行目）。 studentオブジェクトの'studentName','age'の値をStudentインスタンスの属性値'student_name','age'として渡し、先程保存したSchoolインスタンスの子として保存する（18行目）。 app/models/city_object.rb class CityObject include ActiveModel::Model include ActiveModel::Attributes attribute :cityName attribute :schools def save # Cityインスタンスの保存 city = City.new(city_name: self.cityName) city.save # Schoolインスタンスの保存 self.schools.each do |sc| school = city.schools.create(school_name: sc[:schoolName]) sc[:students].each do |st| # Studentインスタンスの保存 school.students.create(student_name: st[:studentName], age: st[:age]) end end end end 保存されるレコード City { id: 1, city_name: 'tokyo' } School { id: 1, school_name: 'first', city_id: 1 } { id: 2, school_name: 'second', city_id: 1 } Student { id: 1, student_name: 'Suzuki', age: 13, school_id: 1 } { id: 2, student_name: 'Hirano', age: 14, school_id: 1 } { id: 3, student_name: 'Nagai', age: 15, school_id: 1 } { id: 4, student_name: 'Sato', age: 13, school_id: 2 } { id: 5, student_name: 'Iguchi', age: 14, school_id: 2 } { id: 6, student_name: 'Arai', age: 15, school_id: 2 }