Overview

Vue.js を使っていて、この Component 間の関係だとどうやって data 渡すんだっけな...？
となることが多いので方法はいろいろあると思いますが、自分がよくやるやり方をこの記事にまとめておきます。
(他にもこんなやり方あるよ！という知見ありましたら教えていただけますと幸いです )

親 → 子

親 Component から 子 Component へのデータの受け渡しは、
親 Component で data を v-bind して、子 Component で props で data を引き取ります。

Sample Code

• Parent.vue ( v-bind で data を渡す)

<template>
  <div id="parent">
    <child v-bind:messageFromParent="this.message" />
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  data () {
    return {
      message: 'Hello from Parent!'
    }
  },
  components: {
    child: Child
  },
}
</script>

• Child.vue ( props で引き取る)

<template>
  <div id="child">
    {{ messageFromParent }}
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['messageFromParent']
}
</script>

子 → 親

逆に、子 Component から 親 Component への data の受け渡しは
親 Component で v-on でイベントハンドラを定義しておき、子 Component では $emit で data を持たせて 親 Component で提起しているイベントを発火させます。

※ emit : 放つ、放射する

Sample Code

• Parent.vue ( v-on でイベントハンドラを定義する)

<template>
  <div id="parent">
    <child v-on:sendMessage="receiveChildMessage" />
    {{ this.childMessage }}
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  data () {
    return {
      childMessage: ''
    }
  },
  components: {
    child: Child
  },
  methods: {
    receiveChildMessage (message) {
      this.childMessage = message
    }
  }
}
</script>

• Child.vue ( $emit で data を持たせつつ、親のイベントを発火する)

<template>
  <div id="child"/>
</template>

<script>
export default {
  name: 'Child',
  data () {
    return {
      message: 'Hello from Child!'
    }
  },
  created () {
    this.$emit('sendMessage', this.message)
  }
}
</script>

子A → 子B

これは実装の方針が人によって分かれそうなのですが、自分は ２つ以上の Component にまたがって data の受け渡しを行う場合 (子A → 親 → 子B 、 親 → 子 → 孫 など) Vuex を使うことが多いです。

※ Vuex についの詳細はこちらをご参照ください。
https://vuex.vuejs.org/ja/

Sample Code

• store.ts

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

interface State {
  message: string
}

const initState: State = {
    message: ''
};

export default new Vuex.Store({
  state: initState,
  mutations: {
    setMessage(state, { message }: { message: string }) {
      state.message = message;
    }
  }
})

• Parent.vue ( store を import する)

<template>
  <div id="parent">
    <child-a />
    <child-b />
  </div>
</template>

<script>
import store from './store'
import ChildA from './ChildA'
import ChildB from './ChildB'

export default {
  name: 'Parent',
  store,
  components: {
    child-a: ChildA,
    child-b: ChildB
  },
}
</script>

• ChildA.vue ( Vuex に data を store する)

<template>
  <div id="child-a"/>
</template>

<script>
export default {
  name: 'ChildA',
  created () {
    this.$store.commit('setMessage', { message: 'Hello from ChildA!' });
  }
}
</script>

• ChildB.vue ( Vuex から data を参照する)

<template>
  <div id="child-b"/>
  {{ this.message }}
</template>

<script>
export default {
  name: 'ChildB',
  data () {
    return {
      message: ''
    }
  },
  created () {
    this.message = this.$store.state.message
  }
}
</script>

まとめ

• 親 Component → 子 Component

(親) v-bind:'value' → (子) props['value']

• 子 Component → 親 Component

(子) this.$emit('childHandler', value) → (親) v-on:childHandler="parentHandler"

• 子 Component A → 子 Component B

(子A) Vuex に data を store → (子B) Vuex から data を参照

ただの個人的備忘録なのであまり詳しく書いてはないです。

前提

環境/バージョン	内容
OS	macOS Catalina 10.15.5
node	13.12.0
yarn	1.22.4
npm	6.14.4

エラー詳細

Nuxt.jsプロジェクトにFirebaseのライブラリを追加したらビルド時に「These dependencies were not found」エラーが発生。
ビルドエラーは以下のような感じです。

These dependencies were not found:                                         friendly-errors 14:45:34
                                                                           friendly-errors 14:45:34
* core-js/modules/es6.array.find in ./.nuxt/client.js                      friendly-errors 14:45:34
* core-js/modules/es6.array.from in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es6.array.iterator in ./.nuxt/client.js                  friendly-errors 14:45:34
* core-js/modules/es6.date.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es6.function.name in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es6.object.assign in ./.nuxt/client.js                   friendly-errors 14:45:34
* core-js/modules/es6.object.keys in ./.nuxt/client.js                     friendly-errors 14:45:34
* core-js/modules/es6.object.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
* core-js/modules/es6.promise in ./.nuxt/client.js                         friendly-errors 14:45:34
* core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js               friendly-errors 14:45:34
* core-js/modules/es6.regexp.match in ./.nuxt/client.js                    friendly-errors 14:45:34
* core-js/modules/es6.regexp.replace in ./.nuxt/client.js, ./.nuxt/components/nuxt.js
* core-js/modules/es6.regexp.search in ./.nuxt/utils.js                    friendly-errors 14:45:34
* core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicator.vue?vue&type=script&lang=js&
* core-js/modules/es6.regexp.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es6.string.ends-with in ./.nuxt/utils.js                 friendly-errors 14:45:34
* core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es6.string.iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es6.string.repeat in ./.nuxt/utils.js                    friendly-errors 14:45:34
* core-js/modules/es6.string.starts-with in ./.nuxt/utils.js               friendly-errors 14:45:34
* core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js
* core-js/modules/es7.promise.finally in ./.nuxt/client.js                 friendly-errors 14:45:34
* core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
                                                                           friendly-errors 14:45:34
To install them, you can run: npm install --save core-js/modules/es6.array.find core-

core-js関連でエラーが吐いてるのがわかります。

対処方法

出力されたエラー通りのcore-jsをインストールしても解決しませんでした。

調べた結果core-js v-2系が必要みたい。
なのでちゃんと適したバージョンでインストールしなおします。

yarn add core-js@^2.6.11

僕はyarnで解決しましたが、npmの場合は以下のコマンドを参考に。

npm install --save core-js@2

参考文献

• https://github.com/yarnpkg/yarn/issues/3270
• https://code.st40.xyz/article/979

vue.jsでコードをハイライトしたい。
しかし、動的に取得したデータをハイライトできない。

cdn から直接読み出し、ハイライトする方法を取る。

vue.blade

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>

以下の感じ。
getProfileでソースコード code タグ入りのHTMLを読み込むような。

hoge.vue

<style>

</style>

<template>
    <div>
        <div v-html="post"></div>
    </div>
</template>


<script>

    export default {

        data () {
            return {

                post:''
            };
        },

        created(){
            this.getProfile();
        },


        methods: {


            highlight() {
                document.querySelectorAll('code').forEach((block) => {
                    hljs.highlightBlock(block)
                })
            },

            getProfile(){


                let dataform = new FormData();
                dataform.append('screen_name',this.$route.params.screen_name);

                axios.post('/profile/view/', dataform).then(e => {

                    this.post = e.data.res.profile.body;
                    this.$nextTick(() => {
                        this.highlight();
                    })

                }).catch((error) => {

                    console.log(error);
                    console.log("プロフィール読み込みエラー");
                });
                //


            },
        }
    }
</script>

Vue.jsについて必要な知識をまとめました。
自身の備忘録として記載します。

render

テキストだけではなくHTMLのタグを使用して要素を組み込みたいような場合は。{{}}によるテキスト表示は難しいです。
このような場合は、「render」プロパティを使うことでHTMLのエレメントを生成し組み込むことができるようになります。

render: (element)=>{・・・・描画処理・・・・}

アロー関数

(○○)=>{・・・・}というのは「アロー関数」という特別な書き方であり、
「名前のない（無名の）関数」を少し違った書き方で表したものです。

仮想DOM

実際のDOMに完璧に対応しており、常に実際のDOMと仮想DOMは同様の状態になるように働きます。仮想DOMのコンテンツやプロパティを操作すると、それに対応する実際のDOMの内容が更新され、HTMLの表示タグが変更されます。

参考書籍

Vue.js & Nuxt.js超入門
https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339

コピペだけで作れるマテリアルデザインを８０個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSボタンアニメーション８０選

１. シンプルなスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

２. filterとopacityを使いこなすスライダーマテリアルデザイン３選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

３. filterエフェクトを使いこなすhoverアニメーション３選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

４. overflow: hiddenを使いこなす美しいCSSアニメーション３選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

５. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション３選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

↓参考記事は下の記事です↓

６. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション３選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

↓参考記事は下の記事です↓

７. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション３選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

８. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト５選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

↓参考記事は下の記事です↓

９. margin-leftとscaleを使いこなすスライドアニメーション１６選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１０. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト３選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

↓参考記事は下の記事です↓

１１. transformを使いこなすボタンアニメーション１６選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１２. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

↓参考記事は下の記事です↓

１３. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

↓参考記事は下の記事です↓

１４. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

↓参考記事は下の記事です↓

１５. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

↓参考記事は下の記事です↓

１６. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか？

回転扉みたいに動くんです

↓参考記事は下の記事です↓

コピペだけで作れるマテリアルデザインを８０個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSボタンアニメーション８０選

１. シンプルなスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

２. filterとopacityを使いこなすスライダーマテリアルデザイン３選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

３. filterエフェクトを使いこなすhoverアニメーション３選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

４. overflow: hiddenを使いこなす美しいCSSアニメーション３選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

５. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション３選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

↓参考記事は下の記事です↓

６. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション３選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

↓参考記事は下の記事です↓

７. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション３選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

８. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト５選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

↓参考記事は下の記事です↓

９. margin-leftとscaleを使いこなすスライドアニメーション１６選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１０. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト３選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

↓参考記事は下の記事です↓

１１. transformを使いこなすボタンアニメーション１６選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１２. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

↓参考記事は下の記事です↓

１３. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

↓参考記事は下の記事です↓

１４. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

↓参考記事は下の記事です↓

１５. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

↓参考記事は下の記事です↓

１６. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか？

回転扉みたいに動くんです

↓参考記事は下の記事です↓

コピペだけで作れるマテリアルデザインを８０個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSボタンアニメーション８０選

１. シンプルなスライダーマテリアルデザイン３選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

２. filterとopacityを使いこなすスライダーマテリアルデザイン３選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

３. filterエフェクトを使いこなすhoverアニメーション３選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

４. overflow: hiddenを使いこなす美しいCSSアニメーション３選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

↓参考記事は下の記事です↓

５. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション３選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

↓参考記事は下の記事です↓

６. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション３選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

↓参考記事は下の記事です↓

７. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション３選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

↓参考記事は下の記事です↓

８. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト５選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

↓参考記事は下の記事です↓

９. margin-leftとscaleを使いこなすスライドアニメーション１６選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１０. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト３選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

↓参考記事は下の記事です↓

１１. transformを使いこなすボタンアニメーション１６選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

↓参考記事は下の記事です↓

１２. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

↓参考記事は下の記事です↓

１３. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

↓参考記事は下の記事です↓

１４. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

↓参考記事は下の記事です↓

１５. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

↓参考記事は下の記事です↓

１６. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか？

回転扉みたいに動くんです

↓参考記事は下の記事です↓

今回は、Nuxt.jsを立ち上げ後のデフォルト画面について。
画面はちょっと変更したのですが、最初は真っ黒な画面がデフォルトになっています。
フレームワークとしてVuetifyが非所に便利なので、使用しています。

これを変更するには、
nuxt.config.js の　Vuetifyオブジェクトのdarkがtrue になっていますが、これをfalseにします。

そうすると、

画面が白背景のものになります。
Vuetifyはデフォルトとしてdarkテーマとlightテーマというのがあるようです。
もし細かく色を変更したいということであれば、
default.vue内のtemplate に色を追加していけば、変更することができます。

是非やってみてください。

Vueまとめパート4（小技集）

こちらの記事は、Adnan Babakan 氏によりDev.to上で公開された『 Vue advanced tricks cheat sheet 』の邦訳版です（原著者から許可を得た上での公開です）

• 元記事：Vue advanced tricks cheat sheet

---

DEV.toコミュニティの皆さん、こんにちは！

普通にVueで開発をしていると、解決するべき多くの問題に遭遇しますが、開発者にとって長時間苛立たせる問題を解決することほど気持ちいいことはないなと感じています！

ここで、私はいくつかの問題を解決するために使用したいくつかの小技を書いています。これを読んでいるあなたにもいつか役立つかもしれません。

vm.$forceUpdate() - 強制的再レン​​ダリング

場合によっては仮想DOMの一部の変更を反映できないことがあるため、このような場合ではVueにコンポーネントを再レンダリングさせる必要がある。

このような場合には他にもv-ifを使うなどいくつか方法があるが、forceUpdateメソッドを使うのが正しいとされている。

export default {
  methods: {
    forceUpdateMyComponent() {
      this.$forceUpdate()
    },
  },
}

Vueインスタンスでこのメソッドを使用するためには$をメソッド名の前につける必要があることに注意。

使ってみるとわかるがどの算出プロパティも更新されず、コンポーネントのビューが強制的に再レン​​ダリングされるだけだ。

ネストされたデータの監視

場合によっては、ネストされたデータを監視したい場合もあるだろう。このような場合は.チェーンで実現できる。

  export default {
    data() {
      return {
        myInfo: {
          firstName: 'Adnan'
        }
      }
    },

        // `myInfo.firstName`とつなげることで監視プロパティにできる 
    watch: {
      'myInfo.firstName'() {
        console.log('Here')
      }
    }
  }

上記のコードは、オブジェクト内の監視するプロパティどれかがわかっている場合に使える。

しかし、オブジェクト全体とその値を監視したい場合はどうすればいいか？
その場合は次のようにする。

  export default {
    data() {
      return {
        myFruits: {apple: 'red', banana: 'yellow'}
      }
    },

    methods: {
      changeIt() {
        this.myFruits.apple = 'green'
      }
    },

    watch: {
      myFruits: {
        // `deep`, `handler`プロパティを追加する
        deep: true,
        handler() {
          console.log('Fruits updated!')
        }
      }
    }
  }

監視プロパティを関数としてではなくオブジェクトとして定義し、deepキーとその値をtrueにセットする。これによってオブジェクト全体を監視でき、handlerと呼ばれる関数内にデータが変更されたときに発生させたいことを書くことができる。

v-modelをサポートするカスタム(子)コンポーネント

ご存じのとおりv-modelはコンポーネント（input要素）とデータプロパティを介した双方向バインディングを実現するために使われる。

カスタム(子)コンポーネントを作成し、v-modelをサポートさせたい場合は、inputキーワードを発行し、最初にコンポーネントに渡されるものをv-modelで受け取るために、valueと呼ばれるpropを取得する必要がある。

より理解しやすくするために、次のコードを見てみよう。

<template>
    <div>
        <label>My custom test input: <input :value="inputValue" @input="emitTheData" /></label>
    </div>
</template>

<script>
  export default {
    props: ['value'],

    data() {
      return {
        inputValue: value
      }
    },

    methods: {
      emitTheData() {
        this.$emit('input', this.inputValue)
      }
    }
  }
</script>

この単純なコンポーネントは、渡されたデータを2つの方向にバインドする。

注：ご覧の通り、valueというpropをinputValueというデータに割り当てて、それをinputタグで使用した。propをinput要素に直接渡すことができると思うかもしれないが、Vue公式で言われている通り、propsは直接変更しない方がよい。

関数型コンポーネント

監視プロパティまたは算出プロパティとメソッドのないコンポーネントがあると想像してみよう。それを使うだけで、propsを使ってコンポーネントをレンダリングすることが可能だ。これが可能であれば、ライフサイクルメソッドもないため描画時間を短縮することができる。

それが関数型コンポーネントだ。

関数型コンポーネントは次のように定義できる。

<!-- `template`要素の中に`functional`含めると関数型コンポーネントになる -->
<template functional>
  <div>{{ props.foo }}</div>
</template>

このコンポーネントは関数型コンポーネントであるため、thisコンテキストは使えないことに注意。

Vueの関数型コンポーネントの詳細については、以下のリンクから確認できる。

• 関数型コンポーネント

方針

vue単体ではなく、vue-cliからvueが導入済みのプロジェクトを生成する

事前準備

yarnとnpmが入っていることを確認する

yarn -v
npm -v

vue-cliを導入する

npm install -g @vue/cli

vue-cliのvueというコマンドで、ディレクトリを作成する

vue create hoge

色々聞かれるけど、全部デフォルト設定でOK

サーバ起動

yarn serve

localhost:8080にアクセスする

こうなればOK

ディレクトリ構造について

- node_modules      # nodeモジュールが入っています
- public            # なんやこれは
- src               # アプリのソースコードが入っています。
  - assets          # 画像とか
  - components      # App.vueから呼ばれるコンポーネント
  - App.vue         # main.jsから呼ばれるvueファイル 
  - main.js         # 最初に実行されるJavaScript
- .gitignore　　　　　 
- babel.config.js
- package.json
- README.md
- yarn.lock

注意書き

自分の備忘録的なもの。

Vue.js使用。（コンポーネント、Vuex、Vue-CLIなどの参考にはならない記事！）
bootstrap4使用。

以下の2つのファイルを作成して中身全てコピペしてhtmlファイルをChromeか何かに放り込めば実際の動きが確認できます

htmlファイル

for_check.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <title>v-forとcheckboxのv-modelオブジェクト</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<body>
    <div id="app">
        <div class="container">
            <p class="h5 mt-3">商品を選択</p>
            <ul class="list-group list-group-flush" v-for="prod in production">
                <li class="list-group-item">
                    <input type="checkbox" :id=prod.id :value=prod v-model="checked">
                    <label :for=prod.id>{{ prod.name }}</label>
                </li>
            </ul>
            <p class="h5 mt-3">選択された商品</p>
            <table class="table w-50">
                <tr>
                    <th class="w-25">商品名</th>
                    <th class="w-25">価格（円）</th>
                </tr>
                <tr v-for="c in checked">
                    <td>{{ c.name }}</td>
                    <td>{{ c.price }}</td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script src="http://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script src="js/for_check.js"></script>

</html>

同じ階層にjs/for_check.jsといった感じでjsフォルダ作らないと
<script src="js/for_check.js"></script>の部分が適用されないです。
続いてjsファイル

jsファイル

for_check.js

new Vue({
    el: '#app',
    data: () => {
        return {
            // v-bind用
            id: '',
            value: '',
            for: '',

            // 商品のオブジェクト配列
            production: [
                {
                    id: 1,
                    name: 'お茶',
                    price: 120
                },
                {
                    id: 2,
                    name: 'たばこ',
                    price: 520
                },
                {
                    id: 3,
                    name: 'ライター',
                    price: 130
                },
                {
                    id: 4,
                    name: 'コーヒー',
                    price: 100
                }
            ],

            // 選択された商品のオブジェクト配列
            checked: [],
        };
    },

});

動作キャプチャ

Railsアプリ内でVueを使用し、SPAを実装しました。
ページネーション機能が欲しかったので、簡単に自分で実装してみました。
ライブラリを使うのが基本的だと思いますが、今回は練習したかったということでライブラリは使いませんでした。

プログラミング初心者かつVue自体も初めてなので間違いもだいぶあると思います。見つけたら指摘していただいたら嬉しいです。

version
Rails 6.0.3.2
ruby 2.6.3
@vue/cli 4.4.1

モデル

diary.rb

class Diary < ApplicationRecord
  # 省略
end

コントローラ

diaries.rb

def index
  diaries = Diary.all
  render json: diaries
end

コンポーネントのscript部分

今回は1ページ(1つのページネーションごと)に6つの要素を表示させることにしました。

表示分の要素をマウントできるようにする

まずコントローラから全ての要素を取得し、diariesとします。
のちの繰り返し構文で6つ表示させたいのでsliceメソッドを使い、diariesから６つの要素をとり、present_diariesとします。
sliceメソッドは第一引数+1番目の要素から第2引数番目の要素までを返します。

diaries.vue

<script>
  import axios from 'axios'
  export default {
    data: function() {
      diaries: [],
      present_diaries: []
    },
    mounted() {
      let that = this;
      axios.get('アクションへのパス').then(function(response) {
        that.diaries = response.data;
      }).then(function() {
        if (that.diaries.length > 6) {
          that.present_diaries = that.diaries.slice(0, 6);  // 6番目の要素まで取得
        } else {
          that.present_diaries = that.diaries
        }
      })
    }
  }
</script>

ページャーのカウントを算出

ページャーのカウントをいくつ出すかはcomputedで算出しました。
6つずつ出したいので取り出した要素を6で割ります。
要素が6つだったらページャーは1が表示されるようにします。
要素が7つなど、割り切れずに小数点が出た場合は切り上げてページャーのカウントを一つ増やします。
つまり、要素が7つだったらページャーのカウントは１と2が表示されるようにします。
ページャーの最大表示数は10としました。

diaries.vue

<script>
  // 省略

    // computedでページャーのカウントをいくつ出すか求めます
    compouted: {
      pageCount() {
        let count = this.diaries.length / 6  // 6つずつ表示したいので6で割ります
        let page_count = Math.ceil(count)    // ceilで切り上げます
        if (page_count > 10) {    // 10以上なら10を返します
          return 10
        } else {
          return page_count
        }
      }
    }
  }
</script>

選択されたページャーの番号によって要素が変わるようにする

ページャーの番号が押されたら、このイベントハンドラーが発動するとします。
何番が押されたかはテンプレートの方から渡し、引数countとします。
sliceメソッドを使い、引数(渡された数)に合わせて要素を取得します。
例えば、テンプレートから2が渡されたら、7 ~ 12の要素をとり、present_diariesに入れるようにします。

diaries.vue

<script>
 // 省略
  methods: {
    changeDiaries(count) {
      // 引数に合わせて要素を取得
      this.present_diaries = this.diaries.slice(count * 6 - 6, count * 6)
    }
  }
</script>

テンプレートで要素を表示する

v-forディレクティブで表示したい要素を複数表示します。
present_diariesをv-forに渡すことで、全ての要素ではなく、表示したい要素(ここでは6つ)のみを表示するようにします。

diaries.vue

<template>
  <div>
    <div v-for='diary in present_diaries' v-bind:key='diary.id'>
      {{diary}}
    </div>
  </div>
</template>

ページャーを表示する

computedで算出された数分の繰り返し処理を行います。3が算出されたら1,2,3と画面に表示されます。
また、v-onディレクティブでクリックに反応するようにし、先ほどのイベントハンドラを呼びます。
引数にそのボタンの数を与えます。

diaries.vue

<template>
  <div>
    // 省略
    <div v-for='count in pageCount'>
      <input type='button' v-bind:value='count' v-on:click='changeDiaries(count)'>
    <div>
  </div>
</template>

あとはcssなどで整えてください。
こんな感じで簡単なものは一応形になりました。

npm run buildした後

distファイルが生成され、そのファイルをNetlifyにアップしても、
真っ白な画面で何も開かない。(Netlifyに限らずデプロイしたとき)
画面遷移させてもこんなかんじに404エラーに。

原因

ドメイン直下で開発していれば、問題なくできるのですが、
サブディレクトリなど別の場所で開発していると起きる現象だそうです。
なので、サブディレクトリに配置していても、パスを通るようにして上げる必要があります。

解決方法

package.jsonなどがある階層に
vue.config.jsを作成します。
そして以下のように書きます。

vue.config.js

module.exports = {
  publicPath: './'
}

これによって、サブディレクトリで開発していてもパスが通ります。

少し前の記事とかだと publicPathの部分を、baseUrlにしている記事がありましたが、現在は非推奨だそうです(公式リファレンス)
baseUrlにしてやると、エラー(?)が出て進みませんでした。

参考サイト
【Vue.js】CLI 3系でビルドしたファイルが表示されなかったら相対パスにしよう

はじめに

この度、名古屋を離れ、関東へ引っ越すことになりました。名古屋（東海圏）エンジニアを増やして地元を盛り上げていくという夢が叶わなくなってしまいました。

名古屋でもエンジニアコミュニティを盛り上げようと頑張っている企業さんや、エンジニアさんがたくさんいることを多くの人に共有したくこの記事を書いています。

名古屋へのUターンを考えていたり、リモートができるようになり都心を離れようかなぁと考えている人は、ぜひ次の拠点として名古屋を選択に入れる参考にしてみてください。

定期開催編

以下、定期開催されている勉強会です。

フロントエンドもくもく会

主催：Nagoya Frontend User Group
概要：フロントエンドを中心にしたもくもく会。名古屋の企業・団体からの会場提供を受けている。

名古屋アジャイル勉強会

概要：アジャイルの考え方や方法を体験的に学び、職場で活かすことを応援する、誰でも参加できるグループ。

Mobile Act

主催：フェンリル
概要：モバイルアプリ開発関連の情報共有や参加者同士の交流を目的とした勉強会。

Nagoya.Swift+

概要：技術者としての好奇心や向上心を満たすために技術的な挑戦をするふりをして遊びます。

nagoya.go

概要：名古屋のGoコミュニティ。もくもく会やGo勉強会が開催されている。

OthloTech

主催：OthloTech
概要：OthloTech＜オスロテック＞は東海圏の学生エンジニア・デザイナーによる学校を超えたコミュニティ。 月に1〜2回、学生限定の勉強会やハッカソンを開催。

MISO MOKU

主催：Misoca Developer Meetup
概要：毎週ベースで行われていた、エンジニア・デザイナー向けのもくもく会。弥生株式会社と合併したため、2020年7月以降の開催は未定。

番外編

開催頻度が低いけど大規模だったり、面白い試みをしているイベントを書いていきます。

NGK2020S

概要：NGK2020Sは、東海地方IT系コミュニティ合同の大新年会。普段から東海地方の勉強会に参加している人、今まで参加したことがない人、他地域の人など、 誰にとっても、さまざまなコミュニティとつながりを広げ、深める良い機会になることを目指すイベント。

みそかつウェブ

概要：名古屋という土地を生かし、エンジニア＆デザイナーコミュニティを盛り上げるため、 IT業界に関わる人同士の交流の場として似た境遇の仲間を探したり、相談できる友人を作ったりできるコミュニティです。

*イベント情報の概要はリンクページから一部引用させていただいています。

最後に

思いついたイベントをばっと書いているので、どんどん追記していきます。他もあるよ～みたいなご意見ありましたら是非いただけますと嬉しいです。

コミュニティも盛り上がっているので、ぜひ色々参加してみてください。
割とアットホームな土地（外からはそう思われていないかもしれないが）なので、いいですよ～。

はじめに

この度、名古屋を離れ、関東へ引っ越すことになりました。名古屋（東海圏）エンジニアを増やして地元を盛り上げていくという夢が叶わなくなってしまいました。

名古屋でもエンジニアコミュニティを盛り上げようと頑張っている企業さんや、エンジニアさんがたくさんいることを多くの人に共有したくこの記事を書いています。

名古屋へのUターンを考えていたり、リモートができるようになり都心を離れようかなぁと考えている人は、ぜひ次の拠点として名古屋を選択に入れる参考にしてみてください。

*以下イベント情報の概要はリンクページから一部引用させていただいています。

定期開催編

以下、定期開催されている勉強会です。

Yahoo! JAPAN Nagoya

主催：Yahoo! JAPAN
概要：ヤフー株式会社の名古屋オフィスで開催するクリエイター向け勉強会コミュニティ。 多種多様なクリエイター同士が交流できる場所として、開発スキルやノウハウについて学びながら、社内外のクリエイターがアウトプット/インプットできる機会になるべく、2019年3月にスタート。

フロントエンドもくもく会

主催：Nagoya Frontend User Group
概要：フロントエンドを中心にしたもくもく会。名古屋の企業・団体からの会場提供を受けている。

名古屋アジャイル勉強会

概要：アジャイルの考え方や方法を体験的に学び、職場で活かすことを応援する、誰でも参加できるグループ。

Mobile Act

主催：フェンリル
概要：モバイルアプリ開発関連の情報共有や参加者同士の交流を目的とした勉強会。

Nagoya.Swift+

概要：技術者としての好奇心や向上心を満たすために技術的な挑戦をするふりをして遊びます。

nagoya.go

概要：名古屋のGoコミュニティ。もくもく会やGo勉強会が開催されている。

OthloTech

主催：OthloTech
概要：OthloTech＜オスロテック＞は東海圏の学生エンジニア・デザイナーによる学校を超えたコミュニティ。 月に1〜2回、学生限定の勉強会やハッカソンを開催。

JAWS-UG名古屋

主催：JAWS-UG名古屋支部
概要：Amazon Web Services（AWS）のユーザグループ、JAWS-UGの名古屋支部のイベント。
AWSに興味があるんだけど周りに知ってる人がいない、がっつり勉強したい！という人たちが集い、一緒に勉強する場を企画。

MISO MOKU

主催：Misoca Developer Meetup
概要：毎週ベースで行われていた、エンジニア・デザイナー向けのもくもく会。弥生株式会社と合併したため、2020年7月以降の開催は未定。

Nagoya.unity

概要：名古屋を中心に活動を行うUnityユーザのコミュニティで、主に勉強会などの開催を行っています。

OWASP Nagoya

主催：OWASP Nagoya Chapter
概要：Webをはじめとするソフトウェアのセキュリティ環境の現状、またセキュアなソフトウェア開発を促進する技術・プロセスに関する情報共有と普及啓発を目的としたプロフェッショナルの集まる、オープンソース・ソフトウェアコミュニティ。

名古屋ギークバー

概要：技術的なものから、アナログゲーム、LT大会、生ハムを食べるなど、幅広くイベントを開催され、名古屋のギークな人達に会える。

Nagoya.php

概要：名古屋のPHPユーザーのコミュニティで、隔月で勉強会をやっています。（現在コロナのため休止中）

番外編

開催頻度が低いけど大規模だったり、面白い試みをしているイベントを書いていきます。

NGK

概要：NGKは、東海地方IT系コミュニティ合同の大新年会。普段から東海地方の勉強会に参加している人、今まで参加したことがない人、他地域の人など、 誰にとっても、さまざまなコミュニティとつながりを広げ、深める良い機会になることを目指すイベント。

東海のエンジニアはみんな参加しているのではないか？と思うぐらい大規模なイベント。

みそかつウェブ

概要：名古屋という土地を生かし、エンジニア＆デザイナーコミュニティを盛り上げるため、 IT業界に関わる人同士の交流の場として似た境遇の仲間を探したり、相談できる友人を作ったりできるコミュニティです。

最後に

思いついたイベントをばっと書いているので、どんどん追記していきます。他もあるよ～みたいなご意見ありましたら是非いただけますと嬉しいです。

コミュニティも盛り上がっているので、ぜひ色々参加してみてください。
割とアットホームな土地（外からはそう思われていないかもしれないが）なので、いいですよ～。

はじめに

この度、名古屋を離れ、関東へ引っ越すことになりました。名古屋（東海圏）エンジニアを増やして地元を盛り上げていくという夢が叶わなくなってしまいました。

名古屋でもエンジニアコミュニティを盛り上げようと頑張っている企業さんや、エンジニアさんがたくさんいることを多くの人に共有したくこの記事を書いています。

名古屋へのUターンを考えていたり、リモートができるようになり都心を離れようかなぁと考えている人は、ぜひ次の拠点として名古屋を選択に入れる参考にしてみてください。

*以下イベント情報の概要はリンクページから一部引用させていただいています。

定期開催編

以下、定期開催されている勉強会です。

Yahoo! JAPAN Nagoya

主催：Yahoo! JAPAN
概要：ヤフー株式会社の名古屋オフィスで開催するクリエイター向け勉強会コミュニティ。 多種多様なクリエイター同士が交流できる場所として、開発スキルやノウハウについて学びながら、社内外のクリエイターがアウトプット/インプットできる機会になるべく、2019年3月にスタート。

フロントエンドもくもく会

主催：Nagoya Frontend User Group
概要：フロントエンドを中心にしたもくもく会。名古屋の企業・団体からの会場提供を受けている。

名古屋アジャイル勉強会

概要：アジャイルの考え方や方法を体験的に学び、職場で活かすことを応援する、誰でも参加できるグループ。

Mobile Act

主催：フェンリル
概要：モバイルアプリ開発関連の情報共有や参加者同士の交流を目的とした勉強会。

Nagoya.Swift+

概要：技術者としての好奇心や向上心を満たすために技術的な挑戦をするふりをして遊びます。

nagoya.go

概要：名古屋のGoコミュニティ。もくもく会やGo勉強会が開催されている。

OthloTech

主催：OthloTech
概要：OthloTech＜オスロテック＞は東海圏の学生エンジニア・デザイナーによる学校を超えたコミュニティ。 月に1〜2回、学生限定の勉強会やハッカソンを開催。

JAWS-UG名古屋

主催：JAWS-UG名古屋支部
概要：Amazon Web Services（AWS）のユーザグループ、JAWS-UGの名古屋支部のイベント。
AWSに興味があるんだけど周りに知ってる人がいない、がっつり勉強したい！という人たちが集い、一緒に勉強する場を企画。

MISO MOKU

主催：Misoca Developer Meetup
概要：毎週ベースで行われていた、エンジニア・デザイナー向けのもくもく会。弥生株式会社と合併したため、2020年7月以降の開催は未定。

Nagoya.unity

概要：名古屋を中心に活動を行うUnityユーザのコミュニティで、主に勉強会などの開催を行っています。

OWASP Nagoya

主催：OWASP Nagoya Chapter
概要：Webをはじめとするソフトウェアのセキュリティ環境の現状、またセキュアなソフトウェア開発を促進する技術・プロセスに関する情報共有と普及啓発を目的としたプロフェッショナルの集まる、オープンソース・ソフトウェアコミュニティ。

名古屋ギークバー

概要：技術的なものから、アナログゲーム、LT大会、生ハムを食べるなど、幅広くイベントを開催され、名古屋のギークな人達に会える。

Nagoya.php

概要：名古屋のPHPユーザーのコミュニティで、隔月で勉強会をやっています。（現在コロナのため休止中）

番外編

開催頻度が低いけど大規模だったり、面白い試みをしているイベントを書いていきます。

NGK

概要：NGKは、東海地方IT系コミュニティ合同の大新年会。普段から東海地方の勉強会に参加している人、今まで参加したことがない人、他地域の人など、 誰にとっても、さまざまなコミュニティとつながりを広げ、深める良い機会になることを目指すイベント。

東海のエンジニアはみんな参加しているのではないか？と思うぐらい大規模なイベント。

みそかつウェブ

概要：名古屋という土地を生かし、エンジニア＆デザイナーコミュニティを盛り上げるため、 IT業界に関わる人同士の交流の場として似た境遇の仲間を探したり、相談できる友人を作ったりできるコミュニティです。

最後に

思いついたイベントをばっと書いているので、どんどん追記していきます。他もあるよ～みたいなご意見ありましたら是非いただけますと嬉しいです。

コミュニティも盛り上がっているので、ぜひ色々参加してみてください。
割とアットホームな土地（外からはそう思われていないかもしれないが）なので、いいですよ～。

Nuxt.jsとRuby on Railsでaxiosとdevise_token_authを利用してPOSTする時に、地味に詰まってしまったので備忘録がてらまとめます。

Ruby on Rails側の実装

devise_token_authの設定諸々は省きます。

以下のURLあたりが参考になりましたので、そちらをご覧いただけると良いかもしれません。

https://github.com/lynndylanhurley/devise_token_auth
https://qiita.com/Masahiro_T/items/6bc49a625b437a7c2f45
https://sainu.hatenablog.jp/entry/2018/08/11/194319

FormObjectを導入してるので、そちらも込みで載せます。

articles_controller.rb

class ArticlesController < ApplicationController
  def create
    @article = ArticleForm.new(article_params).save
    if @article
      # 省略
    end
  end

  private

  def article_params
    json_request = ActionController::Parameters.new(JSON.parse(request.body.read))
    json_request.permit(
      :title,
      :description,
    ).merge(user_id: current_user.id)
  end
end

articles_form.rb

class ArticleForm
  include ActiveModel::Model
  attr_reader :title, :description

  validates :title, presence: true, length: { maximum: 50 }
  validates :description, length: { maximum: 300 }

  def initialize(article_params)
    @article = article_params
  end

  def save
    return false if valid?
    Article.create(@article)

    true
  end
end

これで、POSTするまでの準備が整いました。

補足

POSTされる時にJsonをごにょごにょすることになったので、JsonをParseする処理を書いてあげる必要がありました。(ここに凄くハマりました。)

def article_params
  json_request = ActionController::Parameters.new(JSON.parse(request.body.read))
  json_request.permit(
    :title,
    :description,
  ).merge(user_id: current_user.id)
end

以下の記事に救われた(というかJsonのParse部分はコピペ)ので載せておきます。

http://tabunmuri.hatenablog.com/entry/2015/07/02/rails%E3%81%A7json%E3%81%AB%E3%80%81permit%E3%81%A7%E8%A6%81%E7%B4%A0%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%97%E3%81%9F%E3%81%84%E6%99%82%E3%81%AE%E6%96%B9%E6%B3%95

Nuxt.js側の実装

Componentに書いた実装は省いて、Vuexの中でやってるaxiosでPOSTした部分の実装だけ切り取ります。

article.js

export const actions = {
  async postArticle({ dispatch }, article) {
    await this.$axios
      .post('/articles', article, {
        headers: {
          'Content-Type': 'multipart/form-data', // サムネ画像を送信する想定のため
          'access-token': this.state.user.userToken.accessToken,
          client: this.state.user.userToken.client,
          uid: this.state.user.userToken.uid,
        },
      })
      .then(() => dispatch('getArticleList'))
      .catch((error) => console.log(error))
  },
}

devise_token_authのtokenをCookieに詰めて、nuxtServerInit時にVuexに書き出す実装をしていて、リクエスト時にヘッダーにTokenを突っ込めるようにしました。

ちなみに、Ruby on Railsではありませんが、GOのechoを利用した時に似たような実装をしていて、その備忘録を以下にまとめています。

https://qiita.com/arthur_foreign/items/fadd784610d764419786

はじめに

SrorybookにTypeScript構文のVueコンポーネントを登録する方法が分からずつまったため備忘録として残す。

Storybookはそのままの状態だとVueコンポーネントのTypeScript構文に対応できない。そこで、webpack.config.jsに設定を加えることで対応できるようにする。

目次

1. 開発環境・使用ツールについて
2. StoryBook for Vue.jsの導入方法
3. StoryBookをTypeScript記述に対応させる方法

1.開発環境・使用ツールについて

1. 環境構築
   • Mac
2. 使用ツール
   • VueCLI

2.StoryBook for Vue.jsの導入方法

1. VueCLIでVueプロジェクトを作成

ここではプロジェクトの作成方法については割愛する。

2. Srcと同じディレクトリに.storybookディレクトリを作成

3. .storybookディレクトリにconfig.jsを作成

4. index.jsに以下の記述を行う

config.js

import { configure } from '@storybook/vue'

import Vue from 'vue'

function loadStories() {
  require('../src/stories/index.stories.ts')
}

configure(loadStories, module)

5. src/components配下にディレクトリを作成、コンポーネントを一つ用意する

今回はTypeScript構文で記述する。

6. src配下にstoriesディレクトリを作成

7. storiesディレクトリにindex.stories.jsを作成

8. index.stories.jsに以下の記述を行う

index.stories.js

import { storiesOf } from '@storybook/vue';

import SimpleButton from '../components/atoms/Sample.vue';

storiesOf('Atoms', module).add('Button', () => ({
  components: { Sample },
  template: `<Sample></Sample>`,
}));

9. .storybookディレクトリにwebpack.config.jsを作成

10. webpack.config.jsに以下の記述を行う

これにより、Vue.jsコンポーネント内でTypeScriptの構文が見つかると、対応するローダー(ts-loader)が働き、StorybookがTypeScriptが読み込むようになる。

webpack.config.js

const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: "ts-loader",
                options: { appendTsSuffixTo: [/\.vue$/] }
            }
        ]
    }
};