見出し画像

(4) 新規コンポーネントの追加 - デザイナー向けのVue.js紹介

noonworks

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、新規コンポーネントを追加してみます。
連載をまとめたマガジンはこちら↓

新規コンポーネントファイルの作成

前回までで基本的なファイル構成や動作の流れがわかりました。
今回は、新規コンポーネント作成のサンプルとして、シンプルな水平罫線（<hr>）のコンポーネントを追加します。

コンポーネントの名前
コンポーネントの名前は自由に決められます。ただし、標準のHTMLタグとかぶるのを避けたり、他の人に使ってもらうときに混乱しないようにするため、命名に関するガイドラインが用意されています。

このガイドにはコンポーネント名以外にも様々な規則がまとめられています。プログラマー向けの内容も多くて難しく見えますが、現段階では以下の点に気をつけましょう。

コンポーネント名を考えるときの推奨規則
①コンポーネント名は複数単語にする（複数単語コンポーネント名）
②ComponentNameのように、大文字で始まり、単語ごとに大文字になる形式で書く（単一ファイルコンポーネントのファイル名の形式）
③基本のコンポーネントにはBaseをつける（基底コンポーネントの名前）
④略語を使わない（完全な単語によるコンポーネント名）
⑤大分類～小分類になるよう単語を並べる（コンポーネント名における単語の順番）

以上のルールから、今回の単純な水平罫線コンポーネントはBaseLineコンポーネントと名付けてみます。
componentsフォルダの中に、新しくBaseLine.vueを作りましょう。

画像2

そして、今まで見てきたコンポーネントと同様に、<template><script><style>の3つのパートを用意します。<template>には<hr>タグも書いてしまいましょう。

<template>
 <hr>
</template>

<script>
</script>

<style>
</style>

スタイルは後で修正することにして、先にコンポーネントとして実際に使うところまでを見ていきます。

コンポーネントの設定を追加

BaseLine.vueは、このままではまだコンポーネントとして動作しません。なぜなら、<script>の中身が空で、Vueのコンポーネントとして必要な設定が行われていない状態だからです。

設定といっても、現段階で必要なのは名前と使うコンポーネントくらいです。少しだけJavaScriptを読み書きすることになりますが、プログラムを書くというより設定ファイルを書くようなものなので、あまり難しく考えないでください👍

App.vueの<script>部分には、以下のような記述がありました。

画像3

前回までに解説した通り、1行目のimportは他のコンポーネントを読み込んでいる部分です。そして3行目以降がAppコンポーネント自体の設定です。
4～5行目を見ると、先ほども言った通り、名前（name）と使うコンポーネント（components）がそのまま書いてありますね。

Appコンポーネントの設定
・name（名前） App
・components（使うコンポーネント） HelloWorld
↑これを、BaseLineにも同じように設定してあげればよさそうです。

（オマケ）export default ...ってところは何？
ここはJavaScriptの文法になるので、少し難しいところです。ざっくり説明すると、export（エクスポート）は、今まで何回か出てきたimport（インポート）の反対語です。現段階では、エクスポートされた情報が、他のファイルからインポートできるようになるととらえていただければ問題ありません。

BaseLineコンポーネントの設定
BaseLineコンポーネントに必要なのは、以下の設定です。
・name（名前） BaseLine
・components（使うコンポーネント） なし
App.vueの<script>タグの内容をコピーしてきて、書き換えてみましょう。

画像4

①App.vueの<script>タグの中身をコピー＆ペースト
②nameのAppをBaseLineに書き換え
③BaseLineコンポーネントの中ではHelloWorldコンポーネントは使わないので、componentsから削除
④使わないならimportも必要ないので、import HelloWorldの行も削除
⑤使うコンポーネントがないならcomponentsの項目自体不要なので削除

以上のように書き換えると、BaseLine.vueの<script>タグは非常にシンプルになります。

<script>
export default {
 name: "BaseLine"
};
</script>

BaseLineコンポーネントを使用する

以上の操作で、ただ<hr>が表示されるだけのコンポーネントが完成しました。実際に、トップの画像と文字の間に水平罫線を表示してみましょう。

画像4

BaseLineコンポーネントの表示方法は、HelloWorldコンポーネントのときと同じです。今回新しく「components（使うコンポーネント）を設定する」ということがわかったので、それも併せて書いてみましょう。

画像5

①App.vueの<script>の冒頭で、 BaseLineコンポーネントをimport する
　（図の11行目）
②App.vueの<script>のcomponentsにBaseLineを追加する（17行目）
　※2つ以上のコンポーネントがある場合はカンマ「,」で区切ります！
③App.vueの<template>内に<BaseLine/>タグを追加する（4行目）

これでプレビューを更新すると、画像の下に<hr>の線が表示されているはずです。（表示されないまたはエラーになる人は、このサンドボックスと見比べてみてください。）

今回のまとめ

・新しいコンポーネントを追加して使用できた
・新しいコンポーネントの名前を考えるときは、Vueの公式スタイルガイドを参考にするとよい
・コンポーネントとして動作させるには<script>タグ内に設定が必要
・現段階ではとりあえずコピペして名前だけつければOK
・使うときは①import、②componentsに追加、③タグを追加の3ステップ

-----------------------------

ここまでお読みいただきありがとうございました。次回は、BaseLineコンポーネントにCSS追加し、スタイルの閉じ込め方および共通CSSの使い方を解説します。

-----------------------------

おまけ：練習課題

ごく単純なコンポーネントの作り方と使い方がわかったので、単純なコンポーネントをいくつか作ったり使ったりしてみましょう。

・HelloWorldコンポーネント内で、各サブタイトルの間にBaseLineコンポーネントを入れてみましょう。
・ただの<br>タグを新しいコンポーネントにしてみましょう。BaseLineのときのように、適切な名前を考えてみましょう。
・作った新しいコンポーネントを、App.vueやHelloWorld.vueで使用してみましょう。

ヒント
・コンポーネントをHelloWorld.vueから使用する場合は、App.vueから見たときとはフォルダの相対パスが異なるので気をつけてください。

🐥はげみになります！