VueでProfileBar の Atomic Componentを作成する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、VueでProfileBarの Atomic Componentを作成する方法について解説していきます。

1 VueでProfileBarの Atomic Componentを作成する方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

VueでProfileBarの Atomic Componentを作成する方法

ProfileBar・Component の要件定義

今回、作成するProfileBar・Component の要件定義をまとめると、次のとおりです。

Propsで、UserIcon, UserName, mailAddress を表示できる。
UserIconが、Setされていない場合は、SVGで、No_Image_User_Iconを表示する。
UserIconをFileInputによって、Upload(DomにSet)できる。

ProfileBar・Component の SampleCodeと実行イメージ

今回作成した、ProfileBar・Componentでは、ImageIconをSetする前は、次のような表示になります。

また、ImageIconを選択して、setすると次のような表示になります。

<template>
  <div class="profile_banner_wrapper">
    <!-- Icon_Uploader -->
    <div>
      <label for="user_profile_icon">
        <div>
          <!-- User_Set_Icon -->
          <img
            v-if="isSetIcon"
            :src="iconPath"
            alt="User Profile Icon"
            class="set_user_icon"
          />
          <!-- User_No_Set_Icon -->
          <img
            v-else
            src="~/assets/image/icon/icon_user.svg"
            alt="User Profile Icon"
            class="user_icon_img"
          />
          <!-- Camera_Icon -->
          <div class="camera_icon_block">
            <img
              src="~/assets/image/icon/icon_camera.svg"
              alt="Camera Icon"
              class="camera_icon_img"
            />
          </div>
        </div>
        <!-- File_Input -->
        <input
          type="file"
          id="user_profile_icon"
          class="icon_upload"
          accept="image/*"
          @change="handleFileChange"
          ref="user_icon"
        />
      </label>
    </div>
    <!-- UserName & MailAddress -->
    <div class="user_profile_info_block">
      <div v-text="userName"></div>
      <div v-text="mailAddress"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ProfileBar",
  components: {},
  props: {
    userIcon: {
      type: String,
      default: "",
    },
    userName: {
      type: String,
      default: "",
      required: true,
    },
    mailAddress: {
      type: String,
      default: "",
      required: true,
    },
  },
  data() {
    return {
      iconPath: this.userIcon,
    };
  },
  computed: {
    // Icon_Image_Set_Flag
    isSetIcon() {
      if (this.iconPath === "") return false;
      else return true;
    },
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      // File情報から、Blob_Path_Create
      this.iconPath = URL.createObjectURL(file);
    },
  },
};
</script>
<style scoped>
/* Default_FileInput_Style_None */
input[type="file"] {
  display: none;
}
/* Component_Wrapper */
.profile_banner_wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 25px;
}
/* Setされている User_Icon */
.set_user_icon {
  object-fit: cover;
  width: 62px;
  height: 62px;
  border-radius: 31px;
}
/* User_Icon_Image */
.user_icon_img {
  width: 70px;
  height: 70px;
}
.user_icon_img:hover,
.set_user_icon:hover {
  cursor: pointer;
  color: rgb(189, 189, 189);
}
/* Camera_Icon_Block */
.camera_icon_block {
  position: relative;
  top: -23px;
  left: 45px;
  width: 25px;
  height: 25px;
  border-radius: 12px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
/* Camera_Icon_Image */
.camera_icon_img {
  cursor: pointer;
  position: relative;
  top: 4px;
  left: 3.5px;
}
/* UserName_MailAddress_Block */
.user_profile_info_block {
  color: gray;
  margin-bottom: 20px;
}
</style>

実装ポイント①： FileInputの処理のために、$refs or $eventを利用する

Vueでは、FileInputの処理のためには、$refs or $eventを利用する必要があります。

// $refs or $event　から File情報を取得する

// 1. Event情報から、file情報を取得する
const file = event.target.files[0]

// 2. $refs で、Vue_DOM 上の user_icon (id名) から file情報を取得する
console.log(this.$refs.user_icon.files[0])

実装ポイント②： URL.createObjectURL(file) で、ファイルの一時的なURLを作成する

今回は、FileInputで選択されてSetされたimage画像をプレビュー表示するので、ファイルの表示URLを作成する必要があります。

そんなプレビュー機能を実装する際に役に立つのが、URL.createObjectURL(file) です。

createObjectURLを使用すると、ブラウザ上でファイルの一時的なURLを生成することができます。

これにより、画像や動画などのメディアファイルをプレビューとして表示できます。

また、createObjectURLを使用すると、ブラウザ上で一時的なURLを生成するため、

ファイルの実際のパスや内容を直接公開することがありません。

これにより、ユーザーのプライバシーやセキュリティが向上します。

// File情報から、Blob_Path_Create
this.iconPath = URL.createObjectURL(file);

SVGのアイコン素材について

SVGのアイコン素材については、以前の記事で取得する方法などを紹介しています。

【随時更新】SVGとは？よく使用するSVGのDataまとめ・一覧

SVGファイルの画像イメージを確認したり、入手する方法

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

Twitterやってます！Follow Me！

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！