Vue初心者が2日でポートフォリオサイトを作る

2日でポートフォリオサイトを作ったのでまとめておこうと思います。
[田川裕隆のポートフォリオサイト](https://tagawa.netlify.com/)

環境/技術

- macOS
- Vue / Vue Router
- Vuetify
- (Typescript)
- Figma
- Netlify
- GitHub

# 1日目

## サイトの構想を練る

使う技術、内容、デザインを考えます。
技術に関しては、Vuetifyを試してみたかったのでVue.jsを使うことにしました。
TypescriptをかじっていたのでVue.tsで環境構築はしましたが、ロジックをほとんど書かず**Vuetifyに全てを委ねた**のでTypescriptはおろかJavascriptを書いたという意識は全くありません。
せっかくなのでこれからアレンジを加えていきたいと思います。
内容、デザインに関しては、[Figmaというデザインツールを使って構想をねりました](https://www.figma.com/file/lVXlNW7zZVYxHxiA1IsoWl/portfolio?node-id=0%3A1)。
4色を使い分けたシンプルなデザインと、ページのトップに、押したくなるようなボタンを設置したのがこだわりです。
デプロイは、github.ioを使おうと思っていたのですが、少し調べたらNetlifyがヒットしたので使ってみました。
[NetlifyとGithubを連携させ、サイトのアップロード作業を自動化する方法](https://rightcode.co.jp/blog/information-technology/netlify-github-up)という記事を参考にしたらすんなりデプロイできました。Netlify最高です。

## 環境構築

まずはVue CLIをインストールし、プロジェクトの作成をします。

```
npm  install -g @vue/cli
vue create vue-typescript
```

```? Please pick a preset: ``` では、 ```Manually select features```を選択し、```? Check the features needed for your project:``` では、後々使うかもしれないので全てを選択しておくとよいでしょう。(スペースキーで選択できます)
他の質問には```Yes```で答え、他の項目では、自分の好みのものを選択するとよいでしょう。

プロジェクトが作成されたら、ローカルサーバーを立てます。

```
cd vue-typescript
npm run serve
```
localhostで ``Welcome to Your Vue.js App`` の画面が出ていれば成功です。

次に、Vuetifyの導入をしていきます。

```
vue add vuetify
```

再び```npm run serve```をすると以下のようなエラーが出てしまいます。
<img width="1430" alt="スクリーンショット 2020-04-05 10.49.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/f7e9a10e-8207-0724-df36-47efd1499466.png">

このエラーは、``ts.config.json``の``compilerOptions.types``に``"vuetify"``を追加するだけでなおりました。(参考: [Vuetify と TypeScript を使用した環境を構築してサンプルプロジェクトを立ち上げるまでの手順](https://qiita.com/Nossa/items/3860e55551697bb46e38))
localhost で ``Welcome to Vuetify`` の画面が出ていれば成功です。

次に、フォルダを整理してhomeのページとaboutのページにルーティングできるようにしていきます。

まずは、``HelloWorld.vue``をルーティングの起点にするため、``Base.vue``に改名して既存のコードを書き換えます。

```vue:Base.vue
<template>
  <v-container>
    <p><router-link to="/">home</router-link></p>
    <p><router-link to="/about">about</router-link></p>
    <router-view></router-view>
  </v-container>
</template>

<script lang="ts">
  import Vue from 'vue'

  export default Vue.extend({
    name: 'Base'
  })
</script>
```

ルーティングはあらかじめ``src/router/index.ts``で定義されています。

``Base.vue``への変更に伴って``App.vue``,``Home.vue``も変更します。

```vue:App.vue
<template>
  <v-app>
    <v-content>
      <Base/>
    </v-content>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue';
import Base from './components/Base.vue';

export default Vue.extend({
  name: 'App',

  components: {
    Base,
  },

  data: () => ({
    //
  }),
});
</script>
```

```vue:Home.vue

<template>
    <h1>This is a home page</h1>
</template>
```
localhost で以下のような画面になっており、aboutを押して画面遷移ができていれば成功です。
<img width="603" alt="スクリーンショット 2020-04-05 11.35.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/c142f60b-323b-29a2-7524-9ec71f93c3a6.png">

これで、サイトを作る土台ができました。
あとは``src/views``にファイルを、``src/routes/index.ts``にルーティングを追加し、実装していくだけです！
[ここまでのコード](https://github.com/wafuwafu13/vue-typescript)

# 2日目

## Vuetifyで実装

使ったコンポーネントなどを紹介していきます。

#### [Cards](https://vuetifyjs.com/en/components/cards/#cards)

全てのページで使いました。
HOME画面ではボタンとしての機能を持たせ、それ以外の画面では、背景として用いました。

<img width="1218" alt="スクリーンショット 2020-04-05 11.58.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/d2db3659-a814-bbf2-7018-ada5fdbf95ee.png">
<img width="302" alt="スクリーンショット 2020-04-05 11.58.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/a5230c37-a58d-9da0-14b1-b94aa58f3fb4.png">
これを用いて画面を整理することで、見やすくなるだけでなくレスポンシブにも対応しやすくなりました。

#### [Expansion panels](https://vuetifyjs.com/en/components/expansion-panels/#expansion-panels)

自己紹介の一覧に使用しました。
<img width="1138" alt="スクリーンショット 2020-04-05 11.51.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/7fc1a343-c18d-45d7-e46b-69db8a9ab438.png">
初めはhタグで直接書いていたのですが、デザインやレスポンシブの面であまりよくありませんでした。
これを導入することで伝えたい項目が明確になり、クリックすると情報が得られるという構図ができて画面がスッキリしました。

#### [Timelines](https://vuetifyjs.com/en/components/timelines/#timelines)

自分の経験を時間軸で表示するために使いました。
<img width="1015" alt="スクリーンショット 2020-04-05 12.01.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/2d81c70a-d2a3-6f12-ca45-daad533793fc.png">

denseで左側に寄せ、Cardsと併用することでそこでの経験を説明するのに十分なスペースが確保できました。


以上です。
とりあえずポートフォリオを作りたいっていう方はVuetifyを使うことをおすすめします。
Bootstrapを使った経験のある方は学習コストがほとんどかからず、レスポンシブ対応のスッキリしたポートフォリオサイトが2日で作れます。
デプロイに関しては、masterにpushすればNetlifyが自動デプロイしてくれます。
個人的には、Typescriptの練習をしたいので今後はもっとサイトに動きをつけていこうと思っています。