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

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

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

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

Vuex

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

298閲覧

Vue.jsの描画関数について-公式ドキュメント内のソースで不明点があります

tmykndr

総合スコア74

Vue.js

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

Vuex

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/01/03 12:00

編集2019/01/03 12:01

正月の休みを利用してVue.jsの理解を深めています。
その中で公式ドキュメントを読んでいて理解が追い付かないところがありましたので記載します。
分かる方がいましたらご教示いただけたら嬉しいです!よろしくお願いします!

描画関数の使いどころとして実例を交えて解説されていましたが、描画関数のソースの理解ができません。

ドキュメントには、アンカーヘッダを生成するテンプレートが実例で載っており、それについて描画関数を使用する前と使用した後で、ソースの違いについて解説が載っています。

描画関数を使う前 - X-templateを利用した例

javascript

1<anchored-heading :level="1">Hello world!</anchored-heading>

javascript

1<script type="text/x-template" id="anchored-heading-template"> 2 <h1 v-if="level === 1"> 3 <slot></slot> 4 </h1> 5 <h2 v-else-if="level === 2"> 6 <slot></slot> 7 </h2> 8 <h3 v-else-if="level === 3"> 9 <slot></slot> 10 </h3> 11 <h4 v-else-if="level === 4"> 12 <slot></slot> 13 </h4> 14 <h5 v-else-if="level === 5"> 15 <slot></slot> 16 </h5> 17 <h6 v-else-if="level === 6"> 18 <slot></slot> 19 </h6> 20</script>

javascript

1Vue.component('anchored-heading', { 2 template: '#anchored-heading-template', 3 props: { 4 level: { 5 type: Number, 6 required: true 7 } 8 } 9})

上記のソースは冗長なので、描画関数を用いて以下のように書き換えて効率化しています。
描画関数を使ったソース

javascript

1<anchored-heading :level="1">Hello world!</anchored-heading> // これは変更なし

javascript

1Vue.component('anchored-heading', { 2 render: function (createElement) { 3 return createElement( 4 'h' + this.level, // タグ名 5 this.$slots.default // 子の配列 6 ) 7 }, 8 props: { 9 level: { 10 type: Number, 11 required: true 12 } 13 } 14})

そして公式ドキュメントの解説は以下のように説明されています。

このケースでは、 slot 属性無しでコンポーネントに子を渡した時に ( anchored-heading の内側の Hello world! のような) 、それらの子がコンポーネントインスタンス上の $slots.default にストアされているかを知っている必要があります。

私が分からないところは以下の2点です。


>__slot 属性無しでコンポーネントに子を渡した時に ( anchored-heading の内側の Hello world! のような) __
以上の説明文は、親から子にslotコンテンツを配信しなかったとき(=slotコンテンツはデフォルトを使用したいとき)と解釈して問題ないか


>__ それらの子がコンポーネントインスタンス上の $slots.default にストアされているかを知っている必要があります。 __
この説明は、子コンポーネント側にデフォルトのslotコンテンツが設定されていることを言っていますか?
$slots.default にストアされているか、とありますがまったく理解できず...

公式ドキュメントのリンクを載せておきます。
描画関数とJSX

ご説明いただける方がいましたら何卒よろしくお願いいたします。

ここまで読んでいただきありがとうございました。
みなさまにとって実り多き一年になりますよう願っております。

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

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

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

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

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

guest

回答1

0

ベストアンサー

公式の日本語訳が少しわかりにくいですね。
その部分をおおざっぱに意訳すると「render()関数を使ってシンプルにした例を理解するのに、$slotの知識が必要ですよ(知らなかったらAPIを見るといいよ)」と言っているだけです。

別の言い方をすれば、「render()関数の例は『テンプレートで<slot>を使っていなくても、コンポーネントのプロパティには$slotとして設定されていて利用できる』ことを知っていれば理解できるよ」ということです。

このケースでは、 slot 属性無しでコンポーネントに子を渡した時に ( anchored-heading の内側の Hello world! のような) 、それらの子がコンポーネントインスタンス上の $slots.default にストアされているかを知っている必要があります。

の部分は、原文だと

In this case, you have to know that when you pass children without a slot attribute into a component, like the Hello world! inside of anchored-heading, those children are stored on the component instance at $slots.default.

なので、「you have to know that ~」で「~を知っている必要がある」と言っているだけです。
日本語が「〜かを知っている必要があります」のように疑問形になっているのがややこしさの原因と思います。

投稿2019/01/03 13:03

NozomuIkuta

総合スコア1260

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

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

tmykndr

2019/01/03 13:27

NozomuIkuta さん こちらご回答いただきありがとうございました!!回答を読んですべて腑に落ちました!! 本当にありがとうございました。
NozomuIkuta

2019/01/03 13:29 編集

解決したようでよかったです。 三が日にもかかわらず勉強にはげまれているtmykndrさんにとっても、今年がよりよい1年でありますよう、願っております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問