はじめに
単一ファイルコンポーネントでの実装を想定してます。
以下のような読者を想定してます。
- Vue.jsってどういう言語なの？
- コンポーネント指向？聞いたことはあるけどよくわからん
- コンポーネント指向はわかるけど、なにが嬉しいの？
コンポーネントとは？
「部品」
「構成要素」
という意味の言葉。
Vue.jsでは、「機能ごとにJavaScriptとテンプレートをセットしたパーツ」のことを指します。
テンプレートは、HTMLとCSSによって構成されます。
例
ログイン機能のコンポーネントがあるとしたら…
- JavaScript
- ログインボタンが押された時、入力されたIDとパスワードを持ったユーザが存在するかチェックする
- ユーザが存在する場合、ログイン処理を行う
- ユーザが存在しない場合、エラーメッセージを表示する
- テンプレート
- ID入力フォーム
- パスワード入力フォーム
- ログインボタン
- エラーメッセージ表示エリア
みたいな感じになります。
「ログインをする」という一つの機能に対して、必要なものを全てまとめた部品ですね。
コンポーネント指向とは？
たくさんのコンポーネントを作って、それを組み合わせることで一つのアプリケーションを作りあげようという考え方です。
利点
- 一度コンポーネントにしてしまえば何度でも使える！
- 違うアプリケーションでも同じものが使える
- 処理する部分と見た目を定義する部分のソースコードが近い位置にあるから分かりやすい！
単一ファイルコンポーネント
Vue.jsに用意されたコンポーネント指向を助ける仕組みです。
HTML、CSS、JavaScriptを一つのファイルにまとめて書き、拡張子に「.vue」をつけることで単一ファイルコンポーネントの実装ができます。
じゃあコンポーネントごとにJSやCSSを書かないといけないの？というとそういうわけではありません。
「.vue」という拡張子のファイルであっても、今までと同じように外部で宣言された「JSファイル」、「CSSファイル」を読み込むこともできます。
なので、複数のコンポーネントで呼び出されるような汎用的なJS処理、CSSはそれぞれ外部に宣言しておけます。
コンポーネントの使いかた
コンポーネントはHTMLタグのように呼び出せます。
例えばログインコンポーネントであれば
<login />
というように書きます。
また、コンポーネントには値を渡す事ができます。
渡す値によって、同じコンポーネントであっても柔軟な処理を行わせる事ができます。
楽曲の検索機能の実装で例えると
「曲名」を入力させて検索するコンポーネント
<songSearch searchTarget="song_title" />
「アーティスト」を入力させて検索するコンポーネント
<songSearch searchTarget="artist" />
という実装方法になります。
これによって内部の処理を使いまわす事ができ、効率的な開発を行う事ができます。
どんな単位でコンポーネントにすればいいのかわからない…
コンポーネント化の粒度の指標として「アトミックデザイン」というものがあります。
迷ったら参考にしてみるのも良いのではないでしょうか。
参考
コンポーネントの基本 — Vue.js
フロントエンドのコンポーネント設計に立ち向かう - Qiita
基礎から学ぶ Vue.js