ゲーム（仮称）_技術_Vue.jsの導入

基本

書き込んだらコンパイル

$ npm run dev

Vue.jsの導入

laravelに統合されているフロントエンドアセットビルダのこと

jsのコンパイルなどができる。これを介してvue.jsも導入できる。

$ npm install

プロジェクトの依存パッケージをインストールするコマンド。

code:php

# コンテナの外、自分の端末で

npm install

npm install vue

npm install vue

added 12 packages, changed 4 packages, and audited 1132 packages in 6s

2 packages are looking for funding

69 vulnerabilities (5 low, 15 moderate, 44 high, 5 critical)

To address issues that do not require attention, run:

npm audit fix

To address all issues (including breaking changes), run:

npm audit fix --force

脆弱性が発見されているので、コマンドに従って実行する

$ npm audit fix

治ったのだろうか？

動作確認する

vueコンポーネントの作成

resources/js/components フォルダに TestComponent.vue ファイルを作成する

いい感じのテストコードを載せた。

app.jsの設定

app.js上に作成したvueコンポーネントを登録する。

code:app.js

const app = new Vue({

el: '#app',

// ここから追加

components: {

TestComponent

}

// ここまで

});

bladeファイルに書く

cssとjs。

code:blade.php

<link href="{{ mix('css/app.css') }}" rel="stylesheet">

<h4>vue.jsテストです</h4>

<div>

<test-component></test-component>

</div>

<script src="{{ mix('js/app.js') }}"></script>

ビルドする

コンテナでなく自分の端末で。

$ npm run dev

確認するが動かない...

動かない原因を調査する

code:txt

...

at /Users/skoni/Desktop/Laravel_kirThread/local/laravel_kirthread/backend/node_modules/loader-runner/lib/LoaderRunner.js:233:18

at context.callback (/Users/skoni/Desktop/Laravel_kirThread/local/laravel_kirthread/backend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)

at /Users/skoni/Desktop/Laravel_kirThread/local/laravel_kirthread/backend/node_modules/babel-loader/lib/index.js:59:103 {

library: 'digital envelope routines',

reason: 'unsupported',

code: 'ERR_OSSL_EVP_UNSUPPORTED'

openssh3を使用していて、非推奨になっているのでバージョンを下げる必要がある

package.jsonで設定をつかすればいいっぽい

code:package.json

"dev": "npm run development",

// こうした

"dev": "export NODE_OPTIONS=--openssl-legacy-provider && npm run development",

実行テスト

code:sh

npm run dev

dev

export NODE_OPTIONS=--openssl-legacy-provider && npm run development

development

cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

DONE Compiled successfully in 4952ms 22:20:30

Asset Size Chunks Chunk Names

読み込めた。けど少し調整したのでメモ

code:既存のlayout.blade.php

<link href="{{ asset('css/app.css?' . $date) }}" rel="stylesheet">

<script src="{{ asset('js/app.js') }}" defer></script>

こちらがすでに載っていた

多分ずっと昔から意味もなく載せてたんだと思う

これを消して、以下として書き直した

code:layout.blade.php

{{-- vue.js --}}

<link href="{{ mix('css/app.css') }}" rel="stylesheet">

{{-- vue.js --}}

<script src="{{ mix('js/app.js') }}"></script>

これで行ける

簡易解説

vueコンポーネント

メッセージを表示したりhtmlを書いて出し分けるところ

app.js

vueインスタンスを作成し、そこにコンポーネントを登録した。

使うためにはこの作業が必要

code:app.js

import Vue from 'vue'; // vueライブラリのインポート

import TestComponent from './components/TestComponent.vue'; // 作成したコンポーネントのインポート

const app = new Vue({ // vueインスタンスの作成

el: '#app', // マウントするHTML要素の指定。今回はid="app"にマウントする

components: {

TestComponent // 登録するコンポーネントの指定

}

});

bladeファイルへの記述

code:html

<div id="app">

<test-component></test-component> <!-- コンポーネントの名前でタグを記述する -->

</div>

ステージングに導入する

stagingブランチに反映

stgサーバでfetchとpull。

なんかこれだけで動いたっぽいけど大丈夫か？

この状態でjsファイルを操作したら反映されなかった。

ついでにコンパイルできる状態にしておく

node.jsの導入

code:sh

sudo yum install -y nodejs

OSが古いので動かないらしい...面倒

後回し

stgサーバ止まった なんでや

git stash --allとかyum updateとかしたら止まっちゃった

? envをスタッシュしたのかもしれない...

真っ白な画面になった

code:php

PHP Warning: require(/var/www/html/laravel_kirthread/backend/vendor/autoload.php): failed to open stream: No such file or directory in /var/www/html/laravel_kirthread/backend/artisan on line 18

PHP Fatal error: require(): Failed opening required '/var/www/html/laravel_kirthread/backend/vendor/autoload.php' (include_path='.:/usr/share/pear:/usr/share/php') in /var/www/html/laravel_kirthread/backend/artisan on line 18

artisanが動作していない。

この辺

ストレージファイル作り直してcomposer update

config:cacheできた。けど画面はまだ真っ白

作り直した。

APP_KEYも記載消えたのでkey:generateした。

治らない。apache再起動もした。service httpd restart

治らない。サーバ再起動

治んねえ

code:txt

このページは動作していません

stg-kir-thread.site では現在このリクエストを処理できません。

HTTP ERROR 500

? envのデバッグモードをONにする

APP_DEBUG=true

典型的なエラーだった

code:error.txt

The stream or file ".../laravel_kirthread/backend/storage/logs/laravel.log" could not be opened in append mode: failed to open stream: Permission denied The exception occurred while attempting to log:

$ chmod -R 775 storage

解決。タコ

本番反映

git pull

vue.jsが読まれなかったのでブラウザ側のキャッシュを消したら動作した。

この辺もうまく後々調整できるかもしれないが、一旦よしとする

コマンド選択の流れを軽く実装してみる

画面のコマンドをクリック→結果をバックエンドで処理→返すということになる

まず超基本の非同期の動かし方から学びたい。

非同期

入力→確認→確定の流れをやりたい

Vue.jsの理解

v-model

vue.jsのディレクティブ

フォーム要素とvueコンポーネントのデータをバインドする（紐付ける）

フォームの値とコンポーネントの状態が同期されるようになる。

code:vue.js

<input v-model="message" type="text" />

...

<script>

export default {

data() {

return {

message: '' // ここと同期

export default

これはバニラjsの構文。

このファイルのデフォルトとして後ろに続くものをexport（定義）するという意味

props: {...

vue.jsが親から子のコンポーネントに渡すための機能。

code:blade.php

// ここが親

<div id="app">

<message-editor

post-id="{{ $post->id }}"

initial-message="{{ $post->message }}">

</message-editor>

</div>

ここではpostIdとinitialMessageを子に向けて渡していることがわかる。

それをpropsで受け取っている

data() {

vue.jsのオプション。コンポーネントのステートを管理するためのもの

コンポーネント内部で使用するデータや変数を定義し、それを使えるようにする

successMessage: ''

正常に受け取れた時の状態変数（デフォルトで用意されている。）

methods: {

コンポーネントで定義された関数の集まり

データの操作や処理をする時に使うメインの箇所

遭遇したエラー

型エラー

code:txt

# １つ目

found in

---> <MessageEditor> at resources/js/components/MessageEditor.vue

# 2つ目

https://scrapbox.io/files/66b4d14e6132c1001d72689f.png

1つ目

code:js

props: {

postId: {

type: Number,

required: true

},

stringとしてpostIdを扱っていることでエラーになっている。

2つ目

code:js

export default {

props: {

postId: {

type: String,

required: true

},...

code:js

data() {

return {

postId: this.postId,

使うなら別のvalueにしてくれと言われている。data側をコメントアウトして解消した。

次の課題

入力→確認→確定などのフローで試したい

画面に記載された情報も更新に合わせて即時反映させたい

条件分岐のテスト

v-if

app.jsの定義について

新しいコンポーネントを作った場合、以下の作業が必要となる

新しいVueモデルの定義

エラーについて

code:console.log

Vue warn]: Unknown custom element: <if-test> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

code:console.log

現状app.jsにコンポーネントごとにインスタンスを作成する方法だと、上記のエラーが発生する。