Vue.jsの単一ファイルコンポーネント

こんにちは、かずやです。

先日SPAに関するざっくり記事を書きました。

今回は、Vue.jsの単一ファイルコンポーネントについて。自分の理解のまとめ記事です。

短めの予定。

Vue.jsとは

本題に入る前に、簡単にVue.jsについて説明しておきます。

Vue.jsはJavaScriptのフレームワークです。JSのフレームワークといえばjQueryが有名ですが、値を複雑に操作するページを作成したい場合は圧倒的にVue.jsが楽。

JavaScriptのデータとHTMLの表示を紐づけ、データの変更を勝手に表示に反映してくれる素晴らしき仕様なのです。

チュートリアルは端折りますが、まー便利なフレームワークがあるんだなってこと。

Vue.jsのコンポーネント

さて、Vue.jsにはコンポーネントという概念があります。

例えばWebサイト作成を少しでもかじったことがある人であれば、Header要素やFooter要素をどうやって使いまわそうか、と考えたことがあると思います。

CMS(コンテンツマネージメントシステム。WordPressとか)を利用するとか、お金があればDreamweaverのテンプレート機能を使うとか、ま、それぞれの方法で管理するでしょう。

Vue.jsでは、それをコンポーネントという概念によって実現します。

コンポーネントとは、簡単にいえばHTML・CSS・JavaScriptをまとめて1つの塊にしたもの。これは何度でも呼び出しが可能です。

言ってみれば、見た目・動作を1つにまとめて、いろんなところで再利用できるように部品化できるってことですね。

例えば先ほど例に挙げたHeaderをHeaderコンポーネントとして定義してやれば、各ページでそれを呼び出してやるだけで簡単に利用できるのです。

便利。実に。

単一ファイルコンポーネント

さてこのコンポーネントですが、

  1. Script内で定義する
  2. 単一のファイルとして定義する

という2つの方法で定義が可能です。

1つ目の方法は簡単で、普通にHTMLファイルのScriptタグ内でコンポーネントを定義するというやり方になります。

これにより、そのファイル内で <my-component-name></my-component-name> を読み込めば、 {}内で定義したコンポーネントの要素が展開されるというわけ。

ああ、便利。

これに対し、単一ファイルコンポーネントとは、コンポーネントを別ファイルに分けることを指します。

1の方法では例えばheader, footer, navbarなどを定義したい場合、

などと各コンポーネントの定義を並べる必要があります。めんどくさい。

またこのやり方だと基本的に定義したファイル内で使い回すことしかできないため、再利用性が低いのです。めんどくさい。

これらを解消するために、1つのファイルに1コンポーネントの定義を書き込むようにしたのが、単一ファイルコンポーネント(Single File Component = SFC)。

具体的には.vueという拡張子をつけたファイルに、以下のような記述を書き込みます。

HTML, CSS, JavaScriptの使い慣れた記法をそのまま用いるため、学習コストが低いのもVueのSFCの特徴です。

いやあ、便利な世の中になったもんだ(定期

今日はこの辺で。雑い記事ですみません…!

ではではっ!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする