Vue.js

【Vuetify】下層ページタイトル部分の共通コンポーネント作成

はじめに

今回はVuetifyで下層ページのタイトル部分の共通コンポーネントを作成していきます。

ここでいう下層ページのタイトル部分とは以下の赤枠部分を指します。

下層ページタイトル完成イメージ

本記事の内容

■ Vuetifyでの下層ページタイトル部分の共通コンポーネント作成方法

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

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

下層ページのコンポーネント設計

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

具体的には下層ページのベースとなるコンポーネント(親)からタイトルコンポーネント(子)にデータを受け渡し、動的に下層ページのタイトルを生成するようにします。

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

コンポーネント設計図

下層ページのタイトルコンポーネントの作成

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

次に、以下のコードを貼り付けます。

propsプロパティを定義し、親コンポーネントからtitle(タイトルテキスト)を受け取れるよう設定。

② templateタグ内のタイトルテキスト部分は{{title}}とし、propsプロパティの変数を参照できるようにする。

propsプロパティについては、以下の記事で詳しく解説しております。

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

また、今回定義しているスタイルについては、以下の記事で解説しているヒーローエリアのスタイルと同じですので、いまいち分からない方は目を通していただければと思います。

Vuetifyでのトップページ画像エリア(ヒーローエリア)作成方法Vuetifyでトップページ画像エリア(ヒーローエリア)の実装方法を解説します。ヒーローエリアを実装するにあたって必要なVuetifyのディレクティブやプロパティ、ヒーローエリアのレスポンシブ化もハンズオンを通して詳しく解説しております。...

下層ページのコンポーネント修正

今回は、以前作成した下層ページのコンポーネントである「About.vue」をカスタマイズし、タイトルコンポーネントを読み込むよう修正していきます。

① AppBackgroundHolder.vueを読み込む

② dataプロパティで表示させたいtitle(タイトルテキスト)の値をセット

③ AppBackgroundHolder.vueへtitleを渡すため、AppBackgroundHolderタグの属性へdataプロパティで定義したtitleをセット

Aboutページへアクセスし、以下のような画面が表示されればOKです。

下層ページタイトル

さいごに

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

お疲れ様でした!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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