質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Q&A

1回答

638閲覧

vue.js new Vueとexport default そして xxx.jsとxxx.vueの使い分け

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

0グッド

0クリップ

投稿2018/12/03 13:39

編集2022/01/12 10:55

vue.jsを学習中です。

一通りvueに関するいろんな記事を見てきたのですがタイトルの通り、使い分けが未だにわからずもやもやしています。

使っているバックエンドFWはLaravelになりますが、まず、Vueとexport defaultについてです。

/* app.js */ /** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue'); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ Vue.component('example-component', require('./components/ExampleComponent.vue')); const app = new Vue({ el: '#app' });
<!--ExampleComponent.vue--> <template> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">Example Component</div> <div class="panel-body"> I'm an example component! </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('ExampleComponent!!!') } } </script>

vueファイル(Component)の方ですが、感覚的にHTMLファイルにJSを埋め込んでいると思っています。
Vueじゃなくて通常のやり方の場合、HTMLファイルにJSを記述するのは個人的に好まないので外部JSファイルに切り出して読み込んでいます。

なのでその感覚でいうと、vueファイルに

<script> export default { mounted() { console.log('ExampleComponent!!!') } } </script>

を含めるのは好まないので、app.jsにdata定義などしています。

/* app.js */ /** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue'); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ Vue.component('example-component', require('./components/ExampleComponent.vue')); const app = new Vue({ el: '#app' data: { // ビュー切替用判定値 is_preview: false, }, created: function () { }, methods: { // 確認画面への切り替え。 inputComplete: function() { /* axiosのthen内でthisとするとthisがaxiosを参照するのでvueインスタンスは明示的にインスタンスを代入している変数名にして切り分けている */ app.is_preview = true; }, // 入力画面への切り替え。 back: function() { app.is_preview = false; }, // 処理実行。 submit: function() { }, }, });

その他は、routesで画面遷移ができるということぐらいしか知らないです。
vue.jsはコンポーネント指向とのことですが実際にはcompornentは使っておらず、Laravel側のbladeファイル内の要素に対して各ディレクティブを使って部分的にSPAを作って行っている感じです。

理由はblade側で各ディレクティブを使うことで、Laravel側の関数(oldなどformヘルパーなど)も併用できて便利だからです。

<div v-cloak v-if="is_show_company_name" class="form-group{{ $errors->has('company_name') ? ' has-error' : '' }}"> <label for="company_name" class="col-md-4 control-label">@{{ text_company_name }}</label> <div class="col-md-6"> {!! Form::text('company_name', old('company_name'), [ 'id' => 'company_name', 'class' => 'form-control', 'v-model' => 'field_company_name', 'placeholder' => '株式会社XXX YYY法律事務所 ...', 'required']) !!} @if ($errors->has('company_name')) <span class="help-block"> <strong>{{ $errors->first('company_name') }}</strong> </span> @endif </div> </div>

最後の処理だけ同期でやれば$errors->first('company_name')なども捉えられるので様々なメリットがあると思っています。

でも、やはり完全なSPAにしたいと思ったとき、これらはあまり意味を成さずroutesを使おうと検討していたところ、こういうところでcomponentが使えるのか!と思い今一度ドキュメントを読み返したりいろんな記事を見たりしているのですが、どうもexport defaultの使い方がわからないのです。

全部、xxx.js側で定義したらいいんじゃないの?って思うんです。
でも、じゃあやってみればって言われたら、どういう構造で作り込んでいったら綺麗な構造を保ちながら開発できるのかがわからずそこでまた悩みます。

自分としては、以下のLaravel側の構造と合わせたくLaraval側のファイルと同名のjsファイルを作っていったら綺麗な構造を保てると思っているのですが、例えばJobControllerを例にとって考えてまるのですが、これは求人ページを作成する機能を担うcontrollerで、画面でいうと求人の「作成ページ」「一覧表示ページ」「詳細表示ページ」「編集ページ」としてページがあります。

イメージ説明

これをvueに置き換えると、Job.jsがあって、そのJob.jsでは多分、create.vue show.vue detail.vue edit.vueといった感じのcomponentができて、これらのcomponentで扱うdataJob.jsで取り扱うときのベストプラティクスな方法がわからないのです。

そもそもこういう構造にする場合、Job.jsでdataを持つのではなく、ここでまさしくそのexport defaultを使うときなのでしょうか?

仮にそうした場合、各componentで定義しているdataJob.jsで扱うにはどうしたら良いのでしょうか?

elの定義はJob.jsが持っているので、el: '#job',だった場合、各componentは<div id="job">配下にあるべきだと思うのです。

そうしたら<div id="job">はどこに記述すべきなのか?blade側?
構造を考えるので悩みます。。。

Laravelがformヘルパーのデフォルト導入をやめたのはこういう背景もあるんでしょうかね。。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Laravelは最初からVueコンポーネント使うように設定されてるのに無視して変なことするから混乱してるのでは。

こんな書き方してたらhtmlとVueとLaravelがごちゃまぜで他人どころか半年後の自分が見ても全く意味が分からない事態になる。こうならないためにVueコンポーネントで分離。

<div v-cloak v-if="is_show_company_name" class="form-group{{ $errors->has('company_name') ? ' has-error' : '' }}"> <label for="company_name" class="col-md-4 control-label">@{{ text_company_name }}</label>

Vueでフォーム作るならBladeの機能使う発想はすべて捨てる。
errorsはAPIの出力に含まれてるはずなので普通に使える。
リダイレクトしないのでoldはそもそも不要になる。
Vue用のUIコンポーネント使えばフォーム作りはBladeよりむしろ楽。

API側はLaravelである必要はないので一度Vueでのフォームの作り方を調べたほうがいい。

Laravel公式内ではPassportがVueでのフォームの例としてある。
https://github.com/laravel/passport/blob/7.0/resources/js/components/Clients.vue
errorsも確認できる。

form.errors = _.flatten(_.toArray(error.response.data.errors));

投稿2018/12/03 14:25

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問