1日目

サイトの構想を練る

使う技術、内容、デザインを考えます。
技術に関しては、Vuetifyを試してみたかったのでVue.jsを使うことにしました。
TypescriptをかじっていたのでVue.tsで環境構築はしましたが、ロジックをほとんど書かずVuetifyに全てを委ねたのでTypescriptはおろかJavascriptを書いたという意識は全くありません。
せっかくなのでこれからアレンジを加えていきたいと思います。
内容、デザインに関しては、Figmaというデザインツールを使って構想をねりました。
4色を使い分けたシンプルなデザインと、ページのトップに、押したくなるようなボタンを設置したのがこだわりです。
デプロイは、github.ioを使おうと思っていたのですが、少し調べたらNetlifyがヒットしたので使ってみました。
NetlifyとGithubを連携させ、サイトのアップロード作業を自動化する方法という記事を参考にしたらすんなりデプロイできました。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をすると以下のようなエラーが出てしまいます。

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

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

まずは、HelloWorld.vueをルーティングの起点にするため、Base.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も変更します。

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>

Home.vue


<template>
    <h1>This is a home page</h1>
</template>

localhost で以下のような画面になっており、aboutを押して画面遷移ができていれば成功です。

これで、サイトを作る土台ができました。
あとはsrc/viewsにファイルを、src/routes/index.tsにルーティングを追加し、実装していくだけです！
ここまでのコード

2日目

Vuetifyで実装

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

Cards

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

これを用いて画面を整理することで、見やすくなるだけでなくレスポンシブにも対応しやすくなりました。

Expansion panels

自己紹介の一覧に使用しました。

初めはhタグで直接書いていたのですが、デザインやレスポンシブの面であまりよくありませんでした。
これを導入することで伝えたい項目が明確になり、クリックすると情報が得られるという構図ができて画面がスッキリしました。

Timelines

自分の経験を時間軸で表示するために使いました。

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

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

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

1日目