? この記事はWP専用です
https://wp.me/pc9NHC-FE

前置き

今回はcomponent①で解説した
自作コンポーネントを動的に変えられる
componentタグについての解説です✨?‍♀️

⬇️公式ガイドはこちら
https://jp.vuejs.org/v2/guide/components.html#動的なコンポーネント
https://jp.vuejs.org/v2/guide/components-dynamic-async.html

ボタンで表示させる
コンポーネントを切り替えています??
条件つきのキャッシュ保存もやりますよ?‍♀️

非同期コンポーネントは
NuxtならasyncDataが使えるので
そちらをご覧ください?

【Nuxt.js】Nuxt文法編：asyncData

ただasyncDataは
pageコンポーネントでしか使えないので
通常のコンポーネントで使うなら
こちらを参考にすると良いかと思います??‍♀️
https://qiita.com/hiroyukiwk/items/b83f52e6d899b06506cb

簡単な使い方

component v-bind:is
動的に複数のコンポーネントを
切り替えることができます?

切り替える度に
新しいインスタンスが作成され
キャッシュはクリアされてしまいます?
クリアされないようにするには
componentタグを
keep-aliveタグで囲むのですが、
まずは簡単な使い方を理解しましょう?

切り替えできることが分かれば良いので
コンポーネント名は安直に命名してます。

❓キャッシュ
保存する仕組みのことです?
キャッシュのクリア
＝保存ができない状態です?
Input1に入力した文字が
別のコンポーネントを表示させると
なくなってしまっていますね?

コード

index.vue

<template>
 <div class="page">
   <button @click="changeComponent = 'Input1'">Input1</button>
   <button @click="changeComponent = 'Input2'">Input2</button>
   <button @click="changeComponent = 'Input3'">Input3</button>
   <component
     v-bind:is="changeComponent"
     class="box"
    >
     ここにコンポーネントが表示されます
    </component>
 </div>
</template>

<script>
import Input1 from '~/components/Input1.vue'
import Input2 from '~/components/Input2.vue'
import Input3 from '~/components/Input3.vue'

export default {
 data () {
   return {
     changeComponent: 'Input1',
   }
 },
 components: {
   Input1,
   Input2,
   Input3,
 },
}
</script>

<style lang="scss" scoped>
 .page {
   .box  {
     border: 1px solid orange;
   }
 }
</style>

【Input1.vue】
数字だけ変えたinputのコンポーネントを
3つ作成しています。

Input.vue

<template>
 <div class="input1">
   <p>Input1</p>
   <input type="text">
 </div>
</template>

値の受け渡し

propsなども使用できます⭕?‍♀️
inputでやるとややこしいので
ただのテキストをpropsで渡してみます。
画像Input1の
「親からテキストを渡す」の部分です。

? 続きはWPでご覧ください?
https://wp.me/pc9NHC-FE

? この記事はWP専用です
https://wp.me/pc9NHC-kO

前置き

前回はinputやtextareaなどで
基本的な使い方を解説しました！
今回は親子間での使い方がメインです?

【Nuxt.js】Nuxt文法編：v-model①

基本的な使い方

親子間でv-modelをやるには工夫が必要です！

v-modelはこれと同じです?
v-bind:value, v-on:input

値は親から受け取るprops
イベントは子自体のイベントなので
親に通知するための$emitを使用します?

親で入力した値を
子のinputにも反映させています?

components/
--| atom/
----| inputs/
-----| InputDefault.vue

pages/
--| index.vue

解説

【InputDefault.vue】

・v-bind:value="value"
　value属性をvalueプロパティにバインド
　valueはpropsで値を親からもらう

・@input="$emit('input', $event.target.value)"
　└@input：inputした時(イベントハンドラ )
　└$emit('input')：子のイベント名inputを親に伝える
　　https://note.com/aliz/n/nd6e771724cd7
　└\$event.target.value：
　　イベントが起きる(入力イベント)要素(input)の値を取得
　　入力した値を取得できるってことです?
　　$emitの第二引数で使えます！

コード

InputDefault.vue

<template>
<input
  :value="value"
  @input="$emit('input', $event.target.value)"
>
</template>

<script lang="ts">
export default {
props: {
  value: {
    type: String,
    // ここは影響しない
    default: 'ハロー'
  }
},
}
</script>

または
v-modelのような属性自体を親に渡す
v-bind="$attrs"でもOK⭕️

InputDefault.vue

<template>
<input
  v-bind="$attrs"
  @input="$emit('input', $event.target.value)"
>
</template>

<script lang="ts">
export default {
props: {
  value: {
    type: String,
    // ここは影響しない
    default: 'ハロー'
  }
},
}
</script>

input.vue

<template>
<div class="page">
  <form @submit.prevent>
    <InputDefault
      v-model="message"
    />
    <button
      @click="submit(message)"
    >
      送信
    </button>
  </form>
</div>
</template>

<script>
import InputDefault from '~/components/atom/inputs/InputDefault.vue'

export default {
components: {
  InputDefault,
},
data () {
  return {
    message: 'メッセージ',
  }
},
methods: {
  submit (message) {
    console.log(message)
  },
},
}
</script>

コンポーネントにネイティブイベントをバインディング

子にあるinputのイベントを
親で使いたい時にどうするのか、
という話です！

? 続きはWPでご覧ください?
https://wp.me/pc9NHC-kO

Windows環境でLaravelを動かすには色々と方法がある。

• Homesteadを使って仮想環境を立てる（公式推奨？）
• Dockerを使う
• XAMPPでPHPを動かす
• etc ...

今のトレンドだとDockerで環境ごと保存するのが一番？
でも個人的に準備などが面倒臭くて手が出しにくい…
（立ち上げるのが面倒だったり、リソースを食い散らかしたり...）

Nodeみたいにローカルで開発できないかなぁ...
XAMPP使うかぁ？という時に Laragon というものを見つけた。

• 様々な言語に対応（PHP, Node.js, Python, Java, Go, Ruby）
• 内部でDBを立ち上げて管理してくれる（mysql, PostgreSQL, mongoDBなど）
• SSLに対応（証明書は無い？）
• 環境変更はボタン一つ
  • 新しい構成を追加することも可能
• ポータブルな設計なので移動が簡単
  • 要らなくなったらフォルダ削除でOK
  • 追加も配置するだけ
  • データもプログラムも
• 滅茶苦茶早くて軽い
  • 本当に秒で起動する
  • フルインスコで130MBのディスク使用量
  • 実行時のメモリ使用量も4MB未満らしい
• 設定でhostsを自動的に書き換えてくれる
  • ***.testのリンクを作成（デフォルト）
• ngrokを用いたローカルデータの一時的な公開が可能
  • 40 connections / minute

と使わない理由が無い内容だったので、折角なのでLaravel8の開発環境で採用してみた。
（個人的にhosts書き換えがGOD）

以下のソフトウェアの使用が強制されるのが注意点？
アップデートで使用するソフトウェアを切り替えれるようになると神になると思う。

• editor として Notepad++
• terminal として Cmder
• DB管理ソフトとして HeidiSQL
  • phpMyAdmin も使える

公式サイト
Laravel - ウェブ職人のためのPHPフレームワーク
Laragon - portable, isolated, fast & powerful universal development environment for PHP, Node.js, Python, Java, Go, Ruby.

Introduction | Laravel Jetstream
Inertia.js - The Modern Monolith

Laragon のインストール

Download | Laragon

上記リンクからLaragonをインストールする。
LiteはNode系が無いバージョンだが、後で簡単に追加できるのでお好みで。
（今回はLaravelでVueを使用したいのでProを採用（Liteだとコンパイルできない...））

• 起動
• 「▶全て開始」をクリック
• 「?ウェブ」をクリックしてLaragonのページが開けたら成功

Laravel8 のインストール

• 「右クリック」>「クイックアプリ作成」>「構成」をクリック
• 勝手にNotepad++が起動する（いつの間に入ったんだろ...）
  • Laravel8=composer create-project "laravel/laravel=8.*" %s --prefer-dist を追記
  • ver 8に固定させるため一応...
• 「右クリック」>「クイックアプリ作成」>「Laravel8」をクリック
• 「右クリック」>「www」> 「<作成したプロジェクト名>」を選択
• Laravelのページが開けたら成功

php artisan serve は必要ない。（そのためのLaragon）

以下のエラーはPHPのversionが足りてないので最新のを取ってくる。

[InvalidArgumentException]
Could not find package laravel/laravel with version 8.* in a version installable using your PHP version 7.2.19.

• Laravel8の必要環境はPHP >= 7.3
  • https://readouble.com/laravel/8.x/en/installation.html
• Laragonのupdateはzipを持ってくるだけでOK
• 以下のリンクからPHPのzipを落とす
  • https://windows.php.net/download
  • 初期に入っていたのはx64のThread Safety版だった
  • zipを解凍して「%laragon%/bin/php」に置く
  • 「右クリック」>「PHP」>「バージョン[xxx]」>「<導入したversion>」を選択
  • リアルタイムに環境が更新されるはず

Laravel Jetstream(Inertia) の導入

DBやjavascriptとの連携を確認したいので認証のテンプレまで入れてみる。
従来の認証周りは8ではJetstreamが担うらしい。
Introduction | Laravel Jetstream

Jetstream では2つのフロントエンドスタックがある。

• Livewire + Blade Templates (従来のBladeを拡張する)
• Inertia.js + Vue.js (SPA, VueのPropsにControllerからデータを渡せる)

今回はVueを使いたいのでInertiaを選択。

• 「◼ターミナル」をクリック
• 勝手にCmderが開く

cd <プロジェクトdir>

// インストール
composer require laravel/jetstream
php artisan jetstream:install inertia

// DB構築
php artisan migrate

// nodeセットアップ
npm install
npm run dev

• Laravelのページの右上に login / register が表示されていれば完成

以下のエラーはデータベースが存在しないので作成しよう。

Illuminate\Database\QueryException
SQLSTATE[HY000] [1049] Unknown database 'laravel'

• Laragonの初期設定ではプロジェクト名のデータベースが作成される
• root / no password

所見

適当に垢作ってログインするとテンプレートのダッシュボードが表示される。
標準で二段階認証やセッション管理、API tokenなどが用意されているのは流石。
新たにTeamというroleみたいな仕組みがあるらしいが調査中。

このように手軽に遊んだりテストしたりにはLaragonは最適かもしれない。
仮想環境と別の手段として覚えておいても良いかも。
Laravelいいよ！Laragonいいよ！
（Laragonの由来ってもしかしてLaravel…？）

簡単にいろいろなアクションやイベントを実行することができるVue.js！

そのVue.jsを簡単に導入するには、CDN（コンテンツデリバリーネットワーク）を使うのが最も簡単かと思います。

CDN（コンテンツデリバリーネットワーク）とは

CDNとは、端的に言うと、コンテンツ（ここではVue.jsのこと）を早く簡単に使えるようにできるものです。

詳しく知りたい方はこちら
・[https://business.ntt-east.co.jp/content/cloudsolution/column-66.html]
・[https://www.kagoya.jp/howto/network/cdn/]

では実際に実装してみましょう（コピペだけですが！）

どのページでもVue.jsを使用できるようにするには、＜head＞にCDNを挿入するだけでOK!
もしくはVue.jsを使用するhtmlページに挿入するだけでOK！

application.html

<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>

以上！超絶簡単ですね！

上記のCDNはVue.jsの最新版を毎回採用

注意点

実際の開発現場では、バグやエラーを回避するために、バージョンを固定する場合が多い！
本番環境での開発は、バージョンが指定されたCDNがおすすめです。

application.html

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
</body>

Vue.jsのCDNをググる↓
[https://jp.vuejs.org/v2/guide/installation.html]

Vue.jsをTypescriptで書く場合、オブジェクトをネストするような形をとることで、Propsに型定義することができます。
型定義以外にも必須項目やデフォルト値を設定することもできます。
PropTypeを忘れないよう気をつけてください

vue.js

<script>
import Vue, { PropType } from 'vue'

export type DataType = {};
export default Vue.extend({
    name: "Sample",
    components: { RoundRectButton },
    data(): DataType {
        return {};
    },
    props: {
        target: {
            type: String as PropType<string>,,
            required: true,
            default: "ターゲット",
        },
        message: {
            type: String as PropType<string>,,
            required: true,
            default: "メッセージ",
        },
        btnText: {
            type: String as PropType<string>,,
            required: true,
            default: "ボタン",
        },
        btnColor: {
            type: String,
            required: true,
            default: "btn-main",
        },
    },
});
</script>