Vue.js

【Vuetify】ボタンコンポーネントを作成する方法

はじめに

今回はVuetifyでボタンコンポーネントを作成していきます。

完成イメージは下記の通りです。

ボタンコンポーネント

本記事の内容

■ Vuetifyでのボタンコンポーネント作成方法

■ 親から子へのデータの受け渡し方法

本記事は、以下の記事で紹介しているハンズオンの個別解説記事となりますので、全体像やこれまでの実装が知りたい方は以下の記事をご参照ください。

Vuejsでレスポンシブ対応のホームページを作成&公開する方法本記事ではVuejsでレスポンシブ対応のポートフォリオサイトの作成方法をハンズオン形式で解説していきます。ハンズオンを通したVuejsの解説、実践を意識した保守性・可読性の高いコーディング方法、レスポンシブ対応のサイト作成方法を盛り込んだ内容となっております。...

ボタンコンポーネントの設計

今回作成したボタンは以降のハンズオンの複数のコンポーネントで使用するため、汎用的に使用できる設計とします。

具体的にはボタンを使用するコンポーネント(親)からボタンコンポーネント(子)にデータを受け渡し、動的にボタンを生成するようにします。

今回のハンズオンでは以下のようなデータの受け渡しを行います。

親から子へのデータ受け渡し

Vuetifyでボタン作成

以下のディレクトリへ「AppButton.vue」を作成します。

次に、以下のコードを貼り付け、ボタンのUIを実装します。

① ボタンを中央に配置するため、v-rowタグ・v-colタグを使用し、v-rowタグへ「text-align: center;」をセット

v-btnタグを使用し、ボタンのUI実装

url(遷移先)buttonText(ボタンテキスト)は変数参照できるよう実装

v-btnの使い方・書き方

Vuetifyでは以下のようにv-btnタグを使用することで簡単にボタンUIを実装することが可能です。

また、v-btnには様々なオプションを設定することが可能です。

今回使用したオプションは以下の通り。

large 大きめのボタンにするときに指定。
color ボタンの色を指定。今回は「error」というVuetify側で用意されているカラーを利用しているが、独自のカラーコードを指定することも可能。
min-width ボタンの横幅の最小値を設定。
to ボタン押下後の遷移先(Vue Router)を指定。

その他のオプションについては公式サイトをご参照ください。

親から子へデータ受け渡し

ボタンコンポーネント(子)の修正

親から渡されたデータを子で受け取るには、propsプロパティを用意し、データを受け取るための変数を用意してやる必要があります。

propsプロパティは以下のように定義します。

また、defaultを使用することで、デフォルト値をセットすることもできます。

今回のハンズオンでは、以下のようにpropsプロパティを定義します。

ボタンを使用するコンポーネント(親)の修正

親から子へデータを受け渡すには、子コンポーネントのタグへ子コンポーネントで定義したpropsを指定するだけでOKです。

今回、以前作成した「HomeAbout.vue」でボタンコンポーネントを使用したいため、ボタンコンポーネントへ「ボタンテキスト」と「遷移先」を渡してやります。

また、遷移先については、以前作成したAboutページへ遷移させます。

① ボタンコンポーネント読み込み

② dataプロパティへボタンテキストと遷移先の値をセット

③ ボタンコンポーネントの属性へdataプロパティで定義したボタンテキストと遷移先をセット

勘のいい方は気づいたかもしれませんが、ボタンテキストの変数が親と子でわずかに違います。

親(HomeAbout.vue):button-text(ケバブケース)

子(AppButton.vue):buttonText(キャメルケース)

なぜこのようにしているかといいますと、親の方はHTMLの属性であり、HTMLは大文字と小文字の区別ができないため、HTMLの慣習にしたがってケバブケースで記述しております。

そして、子の方はJavaScriptの変数であり、JavaScriptの変数は一般的にキャメルケースで記述するため、キャメルケースで記述しております。

このように変数に違いがあっても、Vueが自動で同一変数であると認識してくれるため、正常にデータの受け渡しが可能です。

親子ともにケバブケースもしくはキャメルケースで変数名を統一するようにしてもエラーは起きないのですが、Vue公式では上記の書き方が推奨されております。

動作確認

さいごに、トップページのAboutエリアにボタンが表示されることを確認してください。

また、ボタンを押して以下のようなページへ遷移したらOKです。

さいごに

以上でボタンコンポーネントのコーディングは完了です!

お疲れ様でした!

少し休憩して、次回は下層ページをカスタマイズしていきましょう。

【Vuetify】下層ページタイトル部分の共通コンポーネント作成Vuetifyを使用した下層ページタイトル部分の共通コンポーネント作成を解説。また、下層ページタイトル部分は様々なコンポーネントから参照されるため、汎用的に作成するための設計についてもハンズオンを通して学んでいきます。...

ES6について基礎から学習したい方は、以下の記事で紹介している教材がおすすめです。

【最新版】JavaScript(ES6)が学べるおすすめサイト・書籍まとめ【無料あり】はじめに 今回はこんな疑問に答えていきます。 本記事の内容 ■ JavaScript(ES6)が学べ...

VueJsの基礎知識についてより詳しく網羅的に学習したい方は、以下の記事で紹介している教材がおすすめです。

【これだけでOK!】おすすめのVue.js入門教材「Vue.jsを初めてみたいけど、どの教材から手をつけてよいか分からない」という方や「Vue.jsできるようになるためにどんなことをやったらよいのか?」という疑問をもった方向けにおすすめのVue.js入門教材の紹介とその教材の使い方について詳しく解説しております。...

JavaScriptの基礎からVueJsが学べるスクールは以下の記事で紹介しております。

【2020年最新版】おすすめJavaScriptスクール【未経験からフロントエンドエンジニアへ】未経験からフロントエンドエンジニアになりたいけど、独学で限界を感じている方に向け、客観的審査基準から厳選したおすすめのJavaScriptスクールを公開。実践的でモダンなフロントエンド技術が学べるスクールのみご紹介しております。...

さいごまで読んでいただき、ありがとうございました。

フリーランスエンジニア転職完全ロードマップ

知り合いから
「フリーランスエンジニアになれば、年収800万円以上の高報酬でかつ、自由な働き方をチョイスできる」
というのを聞いて、フリーランスエンジニアに興味を持ったのですが、
当時SIer企業でエンジニアをやっていたボクはなかなか一歩踏みだせませんでした。

というもの以下のような不安があったからです。

■フリーランスエンジニアってかなりの技術力がないとなれないのではないのか?

■フリーランスエンジニアって不安定なのではないのか?

■フリーランスエンジニアって人脈やコネ、営業力が必要なのではないのか?

しかし、実際にフリーランスエンジニアになってみて気づきました。

これらはすべて間違いです。

過去のボクのようにフリーランスエンジニアに興味あるけど一歩踏み出せないという方向けに
『フリーランスエンジニア転職完全ロードマップ』
という記事を書きました。

この記事読めば、どうすればフリーランスになれるのかが分かりますので、ぜひ一読ください。