これでわかるvue.jsのrender関数 | アールエフェクト

vue-cliでプロジェクトを作成し、main.jsを見た時にrender関数って何？って思った人も多いかと思います。本文書では初めてrender関数を見た時に調べたことをまとめたもので、render関数の使用方法について説明を行っています。

1 renderは何をしてくれるのか
2 vue-cliで見つけたrender
3 はじめてのrender関数
4 属性の設定(class, style)
5 イベントの設定
6 子要素の追加

renderは何をしてくれるのか

vueのコンポーネントは通常templateの中にhtml文を記述することでブラウザ上に表示させることができます。renderもtemplateと同様にhtml文をブラウザに表示させることができる関数です。

vue-cliで見つけたrender

vue-cliを使用してプロジェクトを作成後にmain.jsを確認するとrender関数についての記述があります。


new Vue({
  render: h => h(App),
}).$mount('#app')

最初はhが何を意味するかわかりませんでした。hはhype Scriptの略でrender h => h(App)のついて調べていくと下記を略した記述方法だということがわかりました。


render: function(createElement){
  return createElement(App)
}

さらにcreateElementの引数にタグや文字列を入れることで、ブラウザ上に記述した内容を表示させる機能があることがわかったので試しながら理解を深めていきます。

はじめてのrender関数

テキストHello Worldをrender関数を利用してブラウザ上に表示させるためには以下のような記述が必要となります。createElementでは第一引数に要素名、第二引数に要素の中に入る文字列を記述しています。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Render Function</title>
</head>
<body>
  <div id="app">
  </div>

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

var app = new Vue({
  el: '#app',
  render: function(createElement){
    return createElement('p','Hello World')
  }
})

</script> 
</body>
</html>

ブラウザで見るとHello Worldが表示されます。

Vueに設定したdataも使用することができます。dataを使っても表示結果は同じです。


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  },
  render: function(createElement){
    return createElement('h1',this.message)
  }
})

属性の設定(class, style)

classや属性の設定も行うことができます。属性を使用する場合は第二引数を使用して、第三引数が文字列になります。


render: function(createElement){
  return createElement('h1',{ class: 'hello' },this.message)
}

style属性も同様に設定可能です。


render: function(createElement){
  return createElement('h1',{ style: 'background-color:red;color:white;' },this.message)
}

v-bindを使ってclass属性の設定も行うことができます。下記ではclassのFooのみclassが適用されます。


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World',
    isActive: true,
    isFalse: false
  },
render: function(createElement){
  return createElement('h1',{ class: {
    foo: this.isActive,
    bar: this.isFalse
  } },this.message)
}
})

イベントの設定

clickイベントも設定を行うことができます。h1もHello Worldをクリックするとalertがポップアップします。


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World',
  },
  methods:{
    alert: function(){
      alert('click')
    }
  },
  render: function(createElement){
    return createElement('h1',{ on: {click: this.alert}},this.message)
  }
})

子要素の追加

1つの要素だけではなくその下に子要素も追加することができます。ulタグの下に複数のliタグを追加することもできます。


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World',
  },
  render: function(createElement){
    return createElement('ul',{ class: 'hello'},
      [
        createElement('li',this.message),
        createElement('li','Hello Vue')
      ]
    )
  }
})

このように属性やイベント、子要素の追加等なんでも行うことが可能です。

ここでは簡単な例を使って使用方法の説明を行いましたが、より詳しい説明は公式ドキュメントに記載されています。