Javascriptで実際に動く画面を作ってみたい！！

はじめに

引き続きフロント触ってみたシリーズとなります

今回は以前Reactで作った画面のようなものを実際に作ってみることにします
ただ、同じものを作っても面白みがないので何かしら変化させます

ひとまず

どこいじって良いかもわからない状況なので、スタートアップの画面から軽く修正をしてどこが変更されるかを確認しながら作業をします

例えばnpm run devした後の画面がありますが、こちらを管理しているのは「App.vue」というファイルです

そちらの中身を軽くいじってみると、変化が確認できます
本来はYou did it!と表示されていましたがWelcome!!と表示されていますね

これでApp.vueをいじればtop画面が変わっていくという雰囲気がわかりました

# 変更前
<HelloWorld msg="You did it!" />

# 変更後
<HelloWorld msg="Welcome!!" />

さっそく

ではtop画面に変化をつけるにはApp.vueをいじれば良いということがわかったので、自分で手を加えていきたいと思います

今回はサンプル画面の右側の部分にいくつかの要素を表示して、画面を表示した時にフェードイン(もわっと)出てくるような感じにしてみたいと思います

調べてみるとフェードイン・アウトを実現するためにはtransitionというタグを使うと簡単にできるみたいです

使い方としては以下の通りで3つのコンポーネントに分けて必要なものが存在しています(デフォルトであったscriptタグのところは省略しています)

<template>
    <div class="container">
      <transition>
        <h1 v-if="show">list 1</h1>
      </transition>
      <transition>
        <h1 v-if="show">list 2</h1>
      </transition>
      <transition>
        <h1 v-if="show">list 3</h1>
      </transition>
      <transition>
        <h1 v-if="show">list 4</h1>
      </transition>
      <transition>
        <h1 v-if="show">list 5</h1>
      </transition>
      <transition>
        <h1 v-if="show">list 6</h1>
      </transition>
      <transition>
        <h1 v-if="show">list 7</h1>
      </transition>
    </div>
</template>

<script>
export default {
  data() {
    return {
      show: false, // 最初は非表示
    };
  },
  mounted() {
    // 画面表示後に `show` を `true` にしてフェードイン
    setTimeout(() => {
      this.show = true;
    }, 100); // 少し遅延させると自然なフェードインになる
  },
};
</script>

<style>
.v-enter-active {
  transition: opacity 2s;
}

.v-enter-from {
  opacity: 0;
}
</style>

templateの部分

こちらはHTMLの構造（画面の見た目）を定義する部分です
表示したい文などをHTMLタグを使用してコーディングしていきます
今回は大きくヘッダーで表示したものをフェードインさせようと思います

ここで注意しておかなければいけないところはtransitionタグの中には要素が一つしか入れられないということです

なので以下のような書き方はエラーになってしまいます

<!-- これはエラー -->
<transition>
    <h1 v-if="show">list 1</h1>
    <h1 v-if="show">list 2</h1>
</transition>

なのでh1それぞれを囲むようにしています

scriptの部分

ここにはデータやメソッド（処理）を記述します
今回実装した処理はtemplateで記載したh1タグの初期表示状態の設定と画面を開いた際にフェードインを有効にさせる処理を記載しています

mounted()というものが画面が表示された時に呼び出される関数のようです
なので画面が表示された際にはh1タグに設定しているshowフラグをtrueに変更し、フェードインができるようにするといった内容になっています

styleの部分

CSSでデザインを設定する部分です
今後は結構ここがポイントになってくる部分ですね

今回だとフェードインの表示具合などをどうするかここに記載しています(公式説明)
.v-enter-fromでフェードイン対象の初期状態を表し、.v-enter-activeでフェードイン・フェードアウト中の状態を表しているそうです

今回、初期状態は見えない状態でいて欲しいので.v-enter-fromないのopacity(不透明度)は0に設定しておきます
また、フェードイン中は徐々にopacityの値が増加していって欲しいのでtransition: opacityとし、2sごとに変化させているといった内容になります

おわりに

ということで、フェードイン処理を使用して実際に動く画面を作ることができました
まだまだ、変更を加えて良いものを作ってから完成系はこうなりましたというものを見せられたらなと思います

乞うご期待です