Nuxt3で作ってみた！

今回できるもの

今回はYouTubeのよく見るトップページを、Nuxt3で実装してみました。この記事を見れば、・Webサイトのページがどんなふうにできるのか・Htmlから作るのとNuxtでやる時の違い・10分で１ページできてしまうぐらいのNuxt ✖️ Bulmaの相性の良さ ...etc を紹介できればなと思います！

phase.0 まずは構造理解

最初はまず、なにをやるかをはっきりさせましょう。よく見ると、というか一般的にサイトは、・ヘッダー・サイドメニュー・メインに分かれています。なので今回この三つの部分ごとにソースも含めて解説します。 ※BulmaとPugを使用しています。

phase.1 ヘッダーを作ろう

ヘッダー部分は左右と真ん中の三箇所に分かれていて、・左のロゴ・真ん中に検索・右にプロフィールなどのアイコンをそれぞれ配置します。

 <template lang="pug">
header#mainHeader
  nav.navbar.pb-2.content-row-space-between
    .content-row-space-left
      .navbar-item.navbar-burger(:class="{'is-active':bugerActive}" @click="bugerClick")
        span
        span
        span
      .navbar-item
        NuxtLink(:to="'/'")
          img.image(src="/logo_yp.png")
      
    .content-row-space-left
      .navbar-item.control.has-icons-right
        input.input#inputLeftRounded(placeholder="検索")
        button.button#searchLightRounded
          span.icon
            i.fas.fa-lg.fa-solid.fa-magnifying-glass
      .navbar-item
        button.button.is-rounded
          span.icon
            i.fas.fa-lg.fa-solid.fa-microphone

    .content-row-space-left
      .navbar-item
        button.button.is-rounded
          span.icon
            i.fas.fa-lg.fa-solid.fa-video
      .navbar-item
        button.button.is-rounded
          span.icon
            i.fas.fa-lg.fa-regular.fa-bell
      .navbar-item
        button.button.is-primary.is-inverted.is-rounded
          img(src="/channelImg.png")
</template>

<script setup lang="ts">
const props = defineProps<{
  bugerActive: boolean;
}>();

interface Emits {
  (e: "update:bugerActive", value: any): void;
}
const emit = defineEmits<Emits>();

function bugerClick() {
  emit("update:bugerActive", !props.bugerActive);
}
</script>

<style lang="scss" scoped>
#mainHeader {
  position: fixed;
  height: 70px;
  width: 100%;
  z-index: 99990;
}
#inputLeftRounded {
  border-radius: 40px 0 0 40px;
}
#searchLightRounded {
  border-radius: 0 40px 40px 0;
  width: 64px;
}
</style>

phase.3 サイドメニューを作ろう

サイドメニューはもっとシンプル！縦に並べるだけ。チャンネル登録者の部分はv-forを使って表現できます！

 <template lang="pug">
.modalBack(v-if="bugerActive")
  .modal-background(@click="bugerClick")
  .modal-content#modalMainSideber
    .content-row-space-left
      .navbar-item.navbar-burger.p-2.m-0(:class="{'is-active':!bugerActive}" @click="bugerClick")
        span
        span
        span
      .navbar-item
        NuxtLink(:to="'/'")
          img.image(src="/logo_yp.png")

    ul.menu-list.border-bottom-light.m-3
      li.pl-3.pr-3
        NuxtLink.p-2
          .content-row-space-left 
            span.icon
              i.fas.fa-lg.fa-regular.fa-house
            p.subtitle.is-size-7.m-0.pl-5 ホーム

      li.pl-3.pr-3
        NuxtLink.p-2
          .content-row-space-left 
            span.icon
              i.fas.fa-lg.fa-regular.fa-circle-play
            p.subtitle.is-size-7.m-0.pl-5 ショート

      li.pl-3.pr-3
        NuxtLink.p-2
          .content-row-space-left 
            span.icon
              i.fas.fa-lg.fa-tv
            p.subtitle.is-size-7.m-0.pl-5 登録チャンネル
        
    ul.menu-list.border-bottom-light.m-3
      li.pl-3.pr-3
        NuxtLink.p-2
          .content-row-space-left 
            p.subtitle.is-size-7.m-0 マイページ 
            span.icon
              i.fas.fa-lg.fa-solid.fa-angle-right

      li.pl-3.pr-3
        NuxtLink.p-2
          .content-row-space-left 
            span.icon
              i.fas.fa-lg.fa-regular.fa-address-card
            p.subtitle.is-size-7.m-0.pl-4 登録チャンネル


    
    ul.has-text-left.m-3
      p.subtitle.is-size-7.m-0.p-3 登録チャンネル
      li.pl-3.pr-3(v-for="ch in subscedChannelList" :key="ch.channelID")
        NuxtLink
          ChannelCard(:ch="ch")
            

aside.sidebar.is-fullheight.is-hidden-mobile#mainSideber
  ul.menu-list
    li.pt-5
      NuxtLink.p-1(:to="'#'" @click="changeActiveLink(0)")
        span.icon
          i.fas.fa-lg.fa-house(:class="[activeNum == 0 ? 'fa-solid':'fa-regular']")
        p ホーム

    li.pt-5
      NuxtLink.p-1(:to="'#'" @click="changeActiveLink(1)")
        span.icon
          i.fas.fa-lg.fa-circle-play(:class="[activeNum == 1 ? 'fa-solid':'fa-regular']")
        p ショート

    li.pt-5
      NuxtLink.p-1(:to="'#'" @click="changeActiveLink(2)")
        span.icon
          i.fas.fa-lg.fa-tv(:class="[activeNum == 2 ? 'fa-solid':'fa-regular']")
        p 登録チャンネル

    li.pt-5
      NuxtLink.p-1(:to="'#'" @click="changeActiveLink(3)")
        span.icon
          i.fas.fa-lg.fa-photo-film(:class="[activeNum == 3 ? 'fa-solid':'fa-regular']")
        p マイページ


</template>

<script setup lang="ts">
const props = defineProps<{
  bugerActive: boolean;
}>();
interface Emits {
  (e: "update:bugerActive", value: any): void;
}
const emit = defineEmits<Emits>();

function bugerClick() {
  emit("update:bugerActive", !props.bugerActive);
}

const activeNum = ref(0);

function changeActiveLink(n: number) {
  activeNum.value = n;
}

const subscedChannelList = [
  {
    channelID: 1,
    thumbnail: "/channelImg.png",
    name: "チャンネル名１",
  },
  {
    channelID: 2,
    thumbnail: "/channelImg.png",
    name: "チャンネル名２チャンネル名２",
  },
  {
    channelID: 3,
    thumbnail: "/channelImg.png",
    name: "チャンネル名３チャンネル名３チャンネル名３",
  },
  {
    channelID: 4,
    thumbnail: "/channelImg.png",
    name: "チャンネル名４",
  },
  {
    channelID: 5,
    thumbnail: "/channelImg.png",
    name: "チャンネル名５チャンネル名５",
  },
  {
    channelID: 6,
    thumbnail: "/channelImg.png",
    name: "チャンネル名６チャンネル名６",
  },
  {
    channelID: 7,
    thumbnail: "/channelImg.png",
    name: "チャンネル名７チャンネル名７チャンネル名７",
  },
];
</script>

<style lang="scss" scoped>
#openedSideber {
  min-width: 120px;
}
.sidebar {
  position: fixed;
  top: 70px;
  order: 1;
}
#mainSideber {
  width: 68px;
  p {
    font-size: 10px;
  }
}
#modalMainSideber {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: white;
  width: 240px;
  min-height: 100%;
}
</style>

phase.4 メイン部分を作ろう

メイン部分はほぼなし。一番重要なのは「動画のサムネイルカード」をコンポーネントでv-forすること。若干のスペースを開けつつ、タイトルなどを並べましょう。再生回数や「●日前」などは別途ソースを見てみてください！

 <template lang="pug">
#homeView
  .tabs.content-row-space-left.p-3.m-0.janruTab
    button.button.is-small.mr-3(v-for="janru in janruList" :key="janru.cd" :class="[janru.cd == nowJanru ? 'is-black':'is-light']") {{ janru.title }}
    
  ul.columns.is-multiline.p-4.pt-6
    li.column.is-one-third(v-for="mv in TopMovieList")
      MovieCard(:movie="mv")

</template>

<script setup lang="ts">
const janruList = [
  { title: "すべて", cd: 0 },
  { title: "ゲーム", cd: 1 },
  { title: "ライブ", cd: 2 },
  { title: "音楽", cd: 3 },
  { title: "ミックス", cd: 4 },
];

const nowJanru = ref(0);

// AIPから取得ならこんな感じ
// const TopMovieList = ref([]);
// const { data, error } = await useFetch(
//   ここurl,
//   {
//     method: "GET",
//     headers: {
//       "content-type": "application/json",
//     },
//     body: {
//       パラメーター
//     },
//   }
// );
// if (!error.value) {
//   TopMovieList.value = data.value.~~
// }

const TopMovieList = [
  {
    movieID: 1,
    title:
      "タイトル１タイトル１タイトル１タイトル１タイトル１タイトル１タイトル１タイトル１",
    movie: "/movies/movie_1.mp4",
    thumbnail: "/movies/thumbnail_1.png",
    views: 33000,
    publishedAt: new Date("2023-11-01 12:15:01"),
    channel: {
      channelID: 1,
      name: "チャンネル名１チャンネル名１チャンネル名１チャンネル名１チャンネル名１",
      thumbnail: "/channelImg.png",
    },
  },
  {
    movieID: 2,
    title:
      "タイトル２タイトル２タイトル２タイトル２タイトル２タイトル２タイトル２タイトル２",
    movie: "/movies/movie_2.mp4",
    thumbnail: "/movies/thumbnail_2.png",
    views: 11289019,
    publishedAt: new Date("2023-01-01 9:15:01"),
    channel: {
      channelID: 2,
      name: "チャンネル名１チャンネル名１チャンネル名１チャンネル名１チャンネル名１",
      thumbnail: "/channelImg.png",
    },
  },
  {
    movieID: 3,
    title:
      "タイトル３タイトル３タイトル３タイトル３タイトル３タイトル３タイトル３タイトル３",
    movie: "/movies/movie_1.mp4",
    thumbnail: "/movies/thumbnail_3.png",
    views: 827365189,
    publishedAt: new Date("2023-11-30 11:15:01"),
    channel: {
      channelID: 3,
      name: "チャンネル名１チャンネル名１チャンネル名１チャンネル名１チャンネル名１",
      thumbnail: "/channelImg.png",
    },
  },
  {
    movieID: 4,
    title:
      "タイトル４タイトル４タイトル４タイトル４タイトル４タイトル４タイトル４タイトル４",
    movie: "/movies/movie_2.mp4",
    thumbnail: "/movies/thumbnail_4.png",
    views: 9810,
    publishedAt: new Date("2000-01-01 10:15:01"),
    channel: {
      channelID: 4,
      name: "チャンネル名１チャンネル名１チャンネル名１チャンネル名１チャンネル名１",
      thumbnail: "/channelImg.png",
    },
  },
  {
    movieID: 5,
    title:
      "タイトル５タイトル５タイトル５タイトル５タイトル５タイトル５タイトル５タイトル５",
    movie: "/movies/movie_1.mp4",
    thumbnail: "/movies/thumbnail_5.png",
    views: 33000,
    publishedAt: new Date("2022-3-01 12:15:01"),
    channel: {
      channelID: 5,
      name: "チャンネル名１チャンネル名１チャンネル名１チャンネル名１チャンネル名１",
      thumbnail: "/channelImg.png",
    },
  },
  {
    movieID: 6,
    title:
      "タイトル６タイトル６タイトル６タイトル６タイトル６タイトル６タイトル６タイトル６",
    movie: "/movies/movie_2.mp4",
    thumbnail: "/movies/thumbnail_6.png",
    views: 11289019,
    publishedAt: new Date("2023-11-01 10:15:01"),
    channel: {
      channelID: 6,
      name: "チャンネル名１チャンネル名１チャンネル名１チャンネル名１チャンネル名１",
      thumbnail: "/channelImg.png",
    },
  },
];
</script>

<style lang="scss" scoped>
#homeView {
  min-height: 88vw;
}
.janruTab {
  position: fixed;
  z-index: 10;
  width: 100%;
  background-color: white;
}
</style>

 <template lang="pug">
NuxtLink(:to="`/watch?v=${movie.movieID}`")
  .card-image
    figure.image.is-16by9
      img(:src="movie.thumbnail" alt="Thumbnail")

.media.pt-2
  
  .media-left
    NuxtLink(:to="`/channel/${movie.channel.channelID}`")
      figure.image.is-32x32
        img.is-rounded(:src="movie.channel.thumbnail" alt="Channel image")

  .media-content.has-text-left
    NuxtLink(:to="`watch?v=${movie.movieID}`")
      p.subtitle.is-6.m-0.mb-2 {{ movie.title  }}
    NuxtLink(:to="`/channel/${movie.channel.channelID}`")
      p.subtitle.is-7.has-text-grey.m-0 {{ movie.channel.name }}
    p.subtitle.is-7.has-text-grey.m-0 {{ $common.millBillUnit(movie.views) }} 回視聴・{{ $common.dateAgo(movie.publishedAt) }}

</template>

<script setup lang="ts">
const props = defineProps<{
  movie: any;
}>();
</script>

phase.5 まとめ

今回はYouTubeのトップページのみ解説しました。他にも、動画ページやチャンネルページも作ってみる予定ですのでお楽しみに！

全体のソースはこちら! https://github.com/yamu-studio/Nuxt3-YouTube/tree/phase_1