Vue.jsでLocal / Publicなコンポーネントをつくってみよう
Vue.jsでコンポーネントをつくる方法は2種類あるのを知ってるだろうか?

今回は2種類のつくりかたでコンポーネントをつくっていこう。

コンポーネントをつくる事前準備

今回は、Vue.jsのCDNをつかってコンポーネントをつくっていこう。つぎのコードをhtmlのbodyタグをとじる前に設定していく。

  

最新バージョンのCDNがつかいたい場合はVue.jsのCDN取得から。

Publicなコンポーネントをつくる

Vue.component('header-title-public', {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  template: `

{{ title }}

` }) // インスタンスをつくるまえにcomponentを設定しておく new Vue({ el: '#app' })

new Vueでインスタンス化するまえに、つくりたいコンポーネントを書いておくことでコンポーネントが適用されることをまず覚えておこう。

コンポーネントはつぎのように設定していく。

Vue.component('コンポーネント名', {dataやtemplate})

コンポーネント名は、英単語ごとに「-」ハイフンをいれてすべて小文字で名前を設定すること。HTMLでタグにするんだが大文字やハイフンじゃない場合を認識しないため。

  

title部分は、さっきpropsで設定したtitleをいれtemplateに値を渡す。{{ title }}の部分がかわる感じ。

Localなコンポーネントをつくる

const headerTitle = {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  template: `

{{ title }}

` }; // インスタンスをつくるまえにcomponentを設定しておく new Vue({ el: '#app', components: { 'header-title-local': headerTitle } })

みると分かるが、Localコンポーネントでは変数にコンポーネントを設定していく。書きかたはつぎのような感じだ。

const 変数名 = {dataやtemplete};

変数にしたものを、new Vueでインスタンス化したときにcomponentsに読み込んでいく。componentsの左側の名前がコンポーネント名になると覚えておけばいい。

コンポーネント名はさっきも言ったが、英単語ごとに「-」ハイフンをいれてすべて小文字で名前を設定すること。

  

HTMLではPublicと同じように、titleの部分に文字列をいれることで表示が変わるようなる。

まとめ: なるべくLocalでコンポーネントをつくっていこう

Public、Localでコンポーネントをつくる方法を紹介してきた。

ちなみにVue.jsの公式で推奨されてるのが、Localでコンポーネントをつくる方法だ。ビルドしたときにムダなコードが入らないようにするため。

日頃からなるべくLocalでつくることをすすめるが状況によって変えていってほしい。

事務作業を自動化してもっと"ラク"しませんか?

あなたの会社の事務作業...効率化してラクに。もっと重要な業務に集中できるようになります。

日々増えるルーティンの事務作業...
「この作業めんどくさい...」
「事務作業に時間をとられて他に集中できない...」

あなたの代わりにVBAを使ってパソコン業務を自動化。あなたはもっと価値のあることに時間を使うことができるため売上UP、ムダなコストの削減が期待できます。

また、作って終わりではなくつぎの3つのことを約束します。

  • しっかりドキュメント作成
  • きれいな見やすいコードでムダな工数カット
  • できるだけボタン1つポチッと押すだけで業務が完了

どんなにささいなめんどくさい事務作業でも相談してください。相談は無料です。
3年の業務効率化実績があるため、力になれるかもしれません。

※件名には「業務効率化の相談」と記載ください。できるだけ24時間以内に返信します。