Vue.jsの単一ファイルコンポーネントを理解する。RailsJavaScriptPythonVue.jsRubyブロックチェーンHTML/CSSデザインCLOSEWebの技術は、無限大HOMEVue.jsVue.jsの単一ファイルコンポーネントを理解する。tty007Vue.jsの単一ファイルコンポーネントを理解する。ツイートシェアはてブLINEPocketVue.jsをある程度勉強したところで「コンポーネント」という言葉が出てきます。コンポーネントとは要は再利用可能なVueインスタンスの事を言い、使いまわすことが出来る部品のことです。Vue.jsのコンポーネントは様々な記述方法があり、コンポーネント設計も奥が深いのでなかなか難しい部分ではあります。今回はその中でも「.vueファイルを用いた単一ファイルコンポーネント」についての理解が浅かったので、理解すると同時にまとめておこうと思います。スポンサードリンク目次まずはコンポーネントについて単一ファイルコンポーネントとは単一ファイルコンポーネントを作成する単一ファイルコンポーネントの本領を発揮するまとめまずはコンポーネントについて単一ファイルコンポーネントの説明に入る前に一度Vue.jsのコンポーネントについて軽く復習しておこうと思います。Vue.js公式よりコードを拝借してきました。「button-counter」と呼ばれる新しいコンポーネントを定義しているコードです。この例の場合、<button-counter>です。インスタンス内でカスタム要素として使用することができます。コンポーネントそれ自体がインスタンスであり、それを指すのが<button-counter>であるという事です。これを何度も再利用する事が出来ます。})でVueインスタンスを作成します。すると、以下の様なビジュアルでコンポーネントが作成されました。5回クリックした後のものですが、コンポーネントを使ってインスタンスを簡単に生成することができるのが確認できたと思います。コンポーネントは基本的にこのような使い方をします。コンポーネントは利用可能なVueインスタンスなので、ライフサイクルフックも受け付けます。1つ異なるのが、コンポーネントではdataオプションが関数でないといけないという事です。コンポーネントはそれぞれのインスタンスとして生成されるので、それぞれのデータに対して独立したデータ状態を保持する必要があるからです。関数でなければ全てのコンポーネントでデータ状態が共有されるため、同じオプションに対して同じ値を返してしまいます。単一ファイルコンポーネントとはVue.jsの単一ファイルコンポーネントとは、仕組みは上で紹介したコンポーネントの作り方と同様です。JavaScriptまでひとまとめにした独立したファイルを作成できる部分に違いがあります。全て関連するコードを1つのファイルにまとめることができるので独立性があり非常に強力な機能です。コードを修正するために、関連したファイル間を行ったり来たりする必要が一切無くなります。保守性に優れ、グローバル変数による名前空間の汚染問題を解消できたりします。公式の単一ファイルコンポーネントについてはこちら。一度目を通しておくと良いかもしれません。単一ファイルコンポーネントを作成する単一ファイルコンポーネントを作成するときは非常に直感的で案外簡単です。.vueファイルに対して表示したいテンプレートを登録します。component!</div></template>HTMLを<template>タグの中に書くだけです。単一ファイルコンポーネントを作成したらrootインスタンスを作成するためのjsファイルを作成します。'<my-comp></my-comp>'})elの要素指定はこれまで通り、そしてcomponentsでimportしたコンポーネントオブジェクトを指定して、templateにカスタムタグを記述します。importする際にはfromを用いて.vueファイルまでのパスを記述します。これでコンポーネントを使える準備が整いました。elで指定したidを記述して、その中にカスタムタグを記述します。<my-comp></my-comp></div>このようにして上と同様の方法でコンポーネントを扱うことが可能になります。.jsファイルを<script>で読み込むのを忘れずに。単一ファイルコンポーネントの本領を発揮する上で説明した様に、単一ファイルコンポーネントにはCSSやJavaScriptの記述も可能です。その際は、<template>タグの後に<style>タグや<script>タグを使用して思いのままにコードを記述するだけです。リソースの読み込みはそのファイル内で完結するので、書かなくても良いです。まとめVue.jsでは単一ファイルコンポーネントを使うことでシステムの保守性が上がり、コンポーネントの再利用が可能となる。以上、Vue.jsの単一ファイルコンポーネントについてでした。今回は簡単に基本を説明しただけなので、時間があるときにサンプルプログラムでも組んでみようかなと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。関連記事は見つかりませんでした。(TECH::CAMP)の無料説明会に行ったら衝撃の事実が発覚した件について【2019年最新】テックキャンプ(TECH::CAMP)の評判と料金、概要まとめ。実際の最新情報を解説します。