Twitterクローンを作ります #20 プロフィール画面(1)

# 画面

画面から作っていきましょう。プロフィール画面は /profile ならログイン済みユーザーの、/profile/hoge ならユーザー名が hoge のユーザーのプロフィールを表示することにしましょう。

ルーターの設定からしていきます。

```javascript:client/src/router/index.js
import { createRouter, createWebHistory } from "vue-router";

import HomeView from "../views/HomeView.vue";

const routes = [
  {
    path: "/",
    name: "home",
    meta: { loginRequired: true },
    component: HomeView,
  },
  {
    path: "/profile/:username?",
    name: "profile",
    meta: { loginRequired: true },
    component: () => import("../views/ProfileView.vue"),
  },
  {
    path: "/register",
    name: "register",
    meta: { layout: "simple-layout" },
    component: () => import("../views/RegisterView.vue"),
  },
  {
    path: "/login",
    name: "login",
    meta: { layout: "simple-layout" },
    component: () => import("../views/LoginView.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;
```

本家ではログインしていなくてもプロフィール画面を表示できますが、ここではログイン必須にしてしまいましょう。

プロフィール画面を作っていきます。

```vue:client/src/views/ProfileView.vue
<template>
  <div class="uk-width-1-1 uk-position-relative">
    <h3 class="uk-margin-small-top uk-margin-small-bottom">Hoge</h3>
    <div class="cover uk-margin-right"></div>
    <img
      src="https://ui-avatars.com/api/?name=?"
      class="uk-position-absolute uk-border-circle uk-margin-small-left avatar"
    />
    <div class="uk-width-1-1 uk-position-absolute">
      <div
        class="uk-flex uk-flex-row uk-flex-top uk-margin-right uk-margin-small-top buttons"
      >
        <div class="uk-flex-1"></div>
        <button
          class="uk-button uk-button-default uk-button-small uk-text-bold"
        >
          プロフィールを編集
        </button>
      </div>
      <div class="uk-flex uk-flex-column uk-flex-left uk-margin-small-left">
        <div class="uk-text-large uk-text-bold">Hoge</div>
        <div>@hoge</div>
        <div class="uk-margin-small-top">あいうえお</div>
        <div class="uk-margin-small-top">
          <span class="uk-text-bold">100</span>
          <span class="uk-margin-right">フォロー中</span>
          <span class="uk-text-bold">50</span>
          <span>フォロワー</span>
        </div>
      </div>
      <div class="uk-margin-top uk-margin-right">
        <ul class="uk-child-width-expand" ref="tabs" uk-tab uk-switcher>
          <li><a>ツイート</a></li>
          <li><a>ツイートと返信</a></li>
          <li><a>いいね</a></li>
        </ul>
        <ul class="uk-switcher">
          <div>ツイートです</div>
          <div>ツイートと返信です</div>
          <div>いいねです</div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import UIkit from "uikit";

import { ref, onMounted } from "vue";

export default {
  setup() {
    const tabs = ref(null);
    onMounted(() => {
      UIkit.tab(tabs);
    });
  },
};
</script>

<style scoped>
.cover {
  background-color: lightslategray;
  height: 180px;
}

.avatar {
  width: 132px;
  height: 132px;
  bottom: -66px;
  border: 4px solid #fff;
}

.buttons {
  height: 60px;
}
</style>
```

ダミーデータでざっと作ってみました。

![スクリーンショット 2022-03-19 11.33.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2536525/53fcd4f7-f5ef-5db5-a7aa-ad61432df826.png)

次回から機能を作っていきましょう。