Nuxt + Vuexでサクッとポートフォリオ作ってみた

2019.05.13

こんにちわ、ななきです。

GW中にNuxt＋Vuexでポートフォリオサイトを作ったので紹介をしようかなと思います。

ちなみに作ったサイトはこちらです。

可能ならPCで見ていただけるとすごく嬉しかったりします。

先日作ったポートフォリオサイト、PCで見るとかっこいいので是非見てくださいhttps://t.co/p4Hh7lUZM6 pic.twitter.com/qe1qNFvleC
— ななき/Futurize (@nanaki14) 2019年5月12日

技術的な話

技術的な話をしますと、今回Nuxtのgenerateを使ってみんな大好きNetlifyでホスティングしています。

Netlify何ぞって方はとりあえずこちらの本を読んどくといいと思います。

PC表示でのみあらわれるマウスに追従するあれは以前作った自作ライブラリ？を使ってます、みんな使ってね

ローディングアニメーションに関してはVuexで状態の管理をしてます。

const initialState = {
  loading: true
}

export const state = () => initialState

export const getters = {
  isLoading: state => state.loading
}

export const mutations = {
  endLoding(state) {
    state.loading = false
  }
}

export const actions = {
  endLoding({ commit }) {
    commit('endLoding')
  }
}

コンポーネントの実装は以下

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      isLoading: 'opening/isLoading'
    })
  },
  watch: {
    isLoading: async function(next, prev) {
      if (!next && prev) {
        // ここに好きなアニメーションとかの処理
      }
    }
  },
  mounted() {
    window.addEventListener('load', async () => {
      await this.$delay(1000) // PromiseでsetTimeOut返すプラグインです
      this.endLoding()
    })
  },
  methods: {
    ...mapActions({
      endLoding: 'opening/endLoding'
    })
  }
}
</script>

こうすることで初回のローディング時のみ任意の関数を発火出来ます。

オープニングのアニメーション作りたい場合などにいいですね。

次にページ遷移時のアニメーションです。

ページ遷移時のアニメーションはtransitionというライフサイクルが用意されているのでこれを利用します。

<script>
transition: {
    enter(el, done) {
      //フェードアウトさせる処理
      () => {
        // アニメーション完了時のコールバック
        done()
      }
    }
}
</script>

これだけです。

この辺のアニメーションに関しては新田というマッチョが書いた記事がとてもいいので読んでみることをおすすめです。

まとめ

Nuxtを使うとめんどくさいところを吸収してくれつつ簡単にリッチな実装ができるのでいいですね

ポートフォリオ作ってみたい！って方はNuxtを使って作ってみるといいと思います。

作ってみたいけどわからないことがあるなどなど、簡単なアドバイスだったりお手伝いはできるのでお気軽にメッセージ等もいただければと思います。

MasatoChiba

Frontend Developer