0%

Programmingプログラミングナレッジ

Posted:2019.03.28

Vueインスタンスで使うオプションと単一ファイルコンポーネントについて(単一ファイルコンポーネント編)

前回記事「Vueインスタンスで使うオプションと単一ファイルコンポーネントについて(オプション編)」に引き続き、今回もVue.jsに関する記事をまとめていきたいと思います。今回のテーマはVue.jsの大きな特徴でもある単一ファイルコンポーネントについてです。Vue.jsでアプリケーションを作成する時にはとても重要になるものです。

 

Vue.jsで扱う単一ファイルコンポーネント

このようにVue.jsではVueインスタンスと呼ばれるものを定義して、その中に意図する動きになるよういろんな処理や実行される関数などのプログラムをオプションとして入れていく形になり、基本的にはjavascriptとして書かれているので、HTMLや外部のjsファイルにまとめられるのですが、開発するアプリケーションが複雑かつ大規模になった場合に、修正範囲が多岐にわたる場合にはかなり改修コストがかかったり、そもそもコードが増えていくとわかりにくくバグが発生しやすい状況にあります。

 

そんなときに解決してくれるのが「単一ファイルコンポーネント」というものです。これは1つのファイルを1つのコンポーネントとして扱うこともので、コンポーネントとして描画されるHTMLや、そのコンポーネントで行う処理をまとめたjavascript、コンポーネントのデザインを調整するためのCSS、これら3つが一つのファイルにまとめられたものになります。また、この単一ファイルコンポーネントでは拡張子が「.vue」になるので注意が必要です。単一ファイルコンポーネントの中身はこのような構成になっています。

【sample.vue】

<template>
// コンポーネントになるHTMLが記述される
</template>

<script>
// コンポーネント内で使われるjavascriptが記述される
</script>

<style lang="scss">
// コンポーネントに適用するCSSが記述される
</style>

 

これまでのHTMLと同じような形でコードは記述できるので、比較的イメージしやすいのではないでしょうか。コンポーネント化することで、要素に対して固有のスタイルやスクリプトを適用する形になり、メンテナンス性も向上します。HTMLを記述する部分はVue独自のtemplateというタグで囲う形になるので注意が必要です。また、コンポーネント内のscriptやstyleはこのコンポーネント専用のものになります。

 

単一ファイルコンポーネントをベースのHTMLに出力する

実際のコンポーネント使用を見てみるとこのような形になります。まずはベースのHTMLをこのような形で用意します。

【index.html】

<!doctype html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>PAGE TITLE</title>
 </head>
 <body>
  <div id="app">
  </div>
 </body>
</html>

 

注目すべきはidがappの要素ですが、このような形でベースコンポーネントの出力先となる要素を用意しておきます。これでビルドをすると上記でいうところのidがappの要素内に、Vue.jsで作成されたコンポーネントが描画される仕組みになります。もちろん現状のままですとbody要素内には空っぽになるので引き続きコンポーネントの作成と設定を行います。まずはベースとなるコンポーネントを作成していきます。ここでは「App.vue」というファイルで作成しています。

【App.vue】※一部省略

<template>
 <div id="app">
  <header></header>
  <main></main>
  <footer></footer>
 </div>
</template>

<script>
 export default { 
  alert('hello vue!!');
 }
</script>

<style lang="scss">
 body {
  margin: 0;
  padding: 0;
   header,main,footer {
    width: 100%;
   }
 }
</style>

 

上記サンプルは最小限でシンプルなものになりますが、サンプルではヘッダー要素とメイン要素、フッター要素を入れる想定をしています。ちなみにtemplateタグにはルートとなる要素を入れないとビルド時にエラーとなるので、コンポーネントにはそれぞれルート要素を必ず入れるようにします。ここではindex.htmlの時に指定したidがappの要素をルートにします。スクリプトも適宜追記することができます。またスタイルもCSSの形で指定できますが、ビルド時にコンパイルされるようにモジュールを準備しておけば、Sassなども利用することができます。

 

引き続き、ベースコンポーネントの設定をしていきます。これは「main.js」というファイルに記述していく形になります。Vue CLIを使う場合ですと、あらかじめフォーマットが用意されていますので、そのままで流用が可能です。

【main.js】

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

 

上から順に見ていきますと、まずはVue.js本体のモジュールを読み込みます。そしてベースのコンポーネントになる「App.vue」も読み込んでいきます。

 

そして最後にVueのインスタンスを作成し、要素にはidがappのものを指定し、そこにコンポーネントを描画していく指定を上記のように設定します。上記は最小限の記述になっていますが、いろんな拡張機能を足していく場合にはこちらにまとめて記述していく形になります。

 

これでビルドすると作成したApp.vueのコンポーネントが、index.htmlにあるmain.jsで指定した要素であるidがappの中へ、出力・描画されるようになります。このような形で、Vue.jsではアプリケーションを構成するいろんな要素をコンポーネント化することでができます。

 

また、この単一ファイルコンポーネントですが、下記の例のように前回記事「Vueインスタンスで使うオプションと単一ファイルコンポーネントについて(オプション編)」で紹介したVueインスタンスと同じオプションが使えるようになります。

【App.vue】※一部省略

<template>
</template>

<script>
 export default {
  name: 'App',
  mounted() {
   alert('hello vue!!');
  }
 }
</script>

<style lang="scss">
</style>

 

今回は、Vueの単一ファイルコンポーネントを使って、ベースのhtmlファイルにコンポーネントを出力してみました。ここではベースコンポーネントだけでしたが、次回は様々なコンポーネントに分けて階層構造のコンポーネントを読み込むケースについてまとめていきたいと思います。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】