Vue.jsのコンポーネント指向を実際のコードと表示画面を用いて解説

今回はコンポーネント指向を解説するために実際のコードと表示画面を用いて解説します。

そもそもVue.jsのコンポーネント指向は、Vue.jsの特徴の1つであり、アプリケーションを小さな再利用可能な部品に分割するアプローチです。これにより、コードの再利用性、メンテナビリティ、拡張性が向上し、複雑なアプリケーションの開発を効率化します。以下に、Vue.jsのコンポーネント指向の特徴と利点について解説します

コンポーネントベースのアーキテクチャ：
- Vue.jsでは、UIを小さなコンポーネントに分割し、それぞれのコンポーネントが特定の機能や見た目を担当します。これにより、アプリケーション全体が複数の再利用可能な部品に分割され、コードの再利用性が向上します。
再利用性とメンテナビリティの向上：
- コンポーネント指向のアプローチにより、同じコンポーネントを複数の場所で再利用できます。たとえば、ボタンやフォームなどの一般的なUI要素は、コンポーネントとして定義して他の場所で再利用することができます。また、各コンポーネントが自己完結的であるため、コンポーネントごとに変更や修正が容易になります。
単一ファイルコンポーネント（SFC）：
- Vue.jsでは、コンポーネントを定義するための独自のファイル形式である単一ファイルコンポーネント（SFC）を提供しています。これにより、HTMLテンプレート、JavaScriptコード、CSSスタイルを1つのファイルにまとめることができ、コンポーネントごとにファイルが分割されているため、コードの構造が明確になります。
コンポーネント間の通信：
- Vue.jsでは、コンポーネント間でデータの受け渡しやイベントの伝播を容易にするためのさまざまな仕組みが提供されています。親から子へのデータの受け渡しにはpropsを使用し、子から親への通知にはイベントを発行します。また、VuexやVue Routerなどのライブラリを使用することで、より複雑なアプリケーション状態の管理やルーティングが可能になります。
開発効率の向上：
- コンポーネント指向のアプローチは、開発チーム全体の効率を向上させます。各開発者は特定のコンポーネントに集中して作業でき、そのコンポーネントを独立してテストやデバッグすることができます。さらに、コンポーネントが再利用可能であるため、同じ機能を何度も実装する必要がなくなります。

Vue.jsのコンポーネント指向のアプローチは、これらの特徴により、現代のWeb開発で広く採用されています。

今回は以下の画像のように「モーダルを表示」ボタンをクリックしたらモーダルウィンドウが表示されるようにしたいと思います。

最初にVisualStudioCode上でファイル構造を確認しておきましょう。

今回使用するのは次の画像のModal.vueとApp.vueです。vueファイルの配置に迷った際はこちらをご参考ください。

実際のコードを見ていこうと思います。

C:/npm_sample/src/App.vue

<template>
  <div id="app">
    <div class="main-content">
      <!-- メインコンテンツ -->
      <img alt="Vue logo" src="./assets/logo.png">
      <ModalWindow msg="クリック"/>
    </div>
  </div>
</template>

<script>
import ModalWindow from './components/Modal.vue'

export default {
  name: 'App',
  components: {
    ModalWindow
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex; /* Flexboxを使用してレイアウトを調整 */
  align-items: flex-start; /* 縦方向に上寄せ */
  justify-content: center; /* 横方向に中央寄せ */
}
</style>

上記のコードの解説をします。

<template>セクション：
- <div id="app">: アプリケーションのルート要素です。Vue.jsアプリケーションのすべてのコンテンツは、この要素の下にレンダリングされます。
- <div class="main-content">: メインコンテンツを含む要素です。ここにはVueロゴの画像と、ModalWindowコンポーネントが表示されます。
- <img alt="Vue logo" src="./assets/logo.png">: Vueロゴの画像を表示します。src属性はロゴの画像ファイルのパスを指定しています。ファイルはassetsディレクトリ内にあることが期待されます。
- <ModalWindow msg="クリック"/>: ModalWindowコンポーネントを表示します。このコンポーネントには、msgというプロパティに値 “クリック” が渡されます。
<script>セクション：
- import ModalWindow from './components/Modal.vue': ModalWindowコンポーネントをインポートします。.vueファイルの相対パスを指定しています。
- export default {...}: Vue.jsのルートコンポーネントを定義しています。名前は App です。
- componentsオプション内で、ModalWindowコンポーネントを使用可能にします。
<style>セクション：
- #appセレクタは、アプリケーション全体のスタイルを指定します。特に、フォントファミリーやレイアウトの調整を行っています。Flexboxを使用して、アプリケーションを中央に配置しています。

これにより、Vue.jsで作成されたシンプルなアプリケーションが完成します。メインコンテンツにはVueロゴの画像が表示され、モーダルコンポーネントが含まれています。

次にModalWindowコンポーネントを構成しているファイルを見てみましょう。

C:\npm_sample\src\components\Modal.vue

<template>
  <div>
    <button @click="showModal" class="button">モーダルを表示</button>

    <div v-show="modalFlag" class="modal-overlay">
      <div class="modal">
        <span class="close" @click="closeModal">&times;</span>
        <div class="modal-content">
          <p>モーダルウィンドウ</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ModalWindow",
  data() {
    return {
      modalFlag: false
    };
  },
  methods: {
    showModal() {
      this.modalFlag = true;
    },
    closeModal() {
      this.modalFlag = false;
    }
  }
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background-color: #fff;
  max-width: 80%;
  border-radius: 10px;
  padding: 20px;
  position: relative;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 8px;
}

.button:hover {
  background-color: #45a049;
}

.modal-content {
  padding: 20px;
}
</style>

上記のコードの構成は以下の通りです。

<template>セクション：
- <button @click="showModal" class="button">モーダルを表示</button>: ボタンをクリックするとshowModalメソッドが呼び出され、モーダルが表示されます。
- <div v-show="modalFlag" class="modal-overlay">...</div>: modalFlagがtrueの場合にモーダルを表示するための条件付きレンダリングです。modalFlagがtrueの場合、モーダルが表示されます。
<script>セクション：
- name: "ModalWindow": コンポーネントの名前を定義します。
- data() {...}: コンポーネントの状態を管理するためのデータオブジェクトを定義します。modalFlagはモーダルの表示状態を管理します。
- methodsオブジェクト内にshowModalメソッドとcloseModalメソッドが定義されています。showModalメソッドは、modalFlagをtrueに設定してモーダルを表示し、closeModalメソッドはmodalFlagをfalseに設定してモーダルを非表示にします。
<style>セクション：
- .modal-overlay: モーダルを覆うオーバーレイのスタイルを定義します。position: fixedで画面全体に固定され、background-colorで半透明の背景を設定します。
- .modal: モーダルのスタイルを定義します。position: relativeで相対位置指定し、max-widthで幅を制限し、border-radiusで角を丸めます。
- .close: モーダルの閉じるボタンのスタイルを定義します。position: absoluteで絶対位置指定し、右上に配置されます。
- .button: ボタンのスタイルを定義します。マウスオーバー時に背景色が変化するように設定されています。

これにより、ボタンをクリックするとモーダルが表示され、閉じるボタンをクリックするとモーダルが非表示になるシンプルなモーダルウィンドウが実装されます。

Vue.jsのコンポーネント指向を実際のコードと表示画面を用いて解説

いいね:

コメント

共有:

いいね:

コメント