vueファイル内で、VuexのactionsのAPI通信が成功したことを確認した後で走らせる処理を書きたいことがあると思う。
実はdispatchでpromiseを受け取れる。

こんな感じにdispatchにthenを書いてあげて、

sample.vue

store.dispatch('actionA')
  .then(() => {
    // ...
  })

store側でreturnしてあげればよいだけ。

store.js

actions: {
  actionA() {
   return axios.get('/api/sample/')
     .then(() => {
       // ...
     })
  }
}

参考

公式ドキュメントに書いてあります。
https://vuex.vuejs.org/ja/guide/actions.html

laravel+Vue.jsで個人開発をしています。
今回、個人開発でVue CLIを利用したVue.js開発環境の構築をしたので、その手順を記録します。

【バージョン条件】
laravel:7.0
vue:2.6.11
bootstrap:4.5.0

前提条件

今回はパッケージ管理としてyarnを利用しました。
yarnを利用するためにはnode.jsとnpmがすでにインストールされている必要があったので確認。

コンソールで

node -v 
npm -v

と入力し、バージョンが表示されたらすでにインストールされています。
いつインストールしたか覚えてませんが、知らぬ間に入っていました笑

※もしインストールしていない場合は、node.js、npmの順番にインストールすれば大丈夫です。
インストール方法は調べてば分かりやすい記事がたくさんあります。

yarnインストール

yarnをインストールします。

brew install yarn

※npmも同様にパッケージ管理ソフトなので必ずしもyarnをインストールする必要はないそうです。

インストールが完了したら、yarnのパスを通します。（どのフォルダにいてもyarnコマンドが使えるようにする）

export PATH="$PATH:`yarn global bin`"

どこのフォルダでもいいのでyarnのバージョンを確認するコマンドを打ちます。

yarn -v

バージョンか表示されれば、インストール＆パスを通す作業は完了です。

Vue CLIをインストール

Vue CLI使ってVue.jsを使うってどうやってどういうこと？
と思うかもしれません。私がそうでした。

「そもそもVue CLIって何者よ？」

これに関しては、実際にやってみないと掴みにくいと思いますが、僕なりのイメージをお伝えします。

Vue.jsを使おうと思ったら実はとても簡単です。

Jqueryのように、scriptタグで下記のcdnを読み込むことで、普通にhtmlファイルで使うことができます。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue.jsの理解をする上では、まずはhtmlファイルに部分的にVue.jsを使ってみるという手順の方がいいかもしれません。

しかし、Vue.jsはJavaScriptのフレームワークです。
フレームワークというのは、プログラミング開発をより効率的に行うことができる「工作キット」のような存在です。

Vue.jsで効率よく開発するための「工作キット」を準備してくれる存在、それが「Vue CLI」ということ。

つまりは、Vue CLIを使うことでVue.jsの開発で役に立つライブラリ等を勝手に準備してくれる訳ですね。

参考までに公式の文章を和訳したものを載せておきます。

【引用】
Vue CLIは、Vueエコシステムの標準的なツールベースラインになることを目指しています。これにより、さまざまなビルドツールが適切なデフォルトとスムーズに連動し、構成に数日費やす代わりにアプリの作成に集中できます。

https://cli.vuejs.org/guide/

前置きが長くなりましたが、インストール手順はとても簡単でした。

npm install -g @vue/cli

もしくは

yarn global add @vue/cli

でインストール可能です。

インストールが完了したら、早速Vue CLIでプロジェクトを作成してみます。

Vue CLIでプロジェクト作成

プロジェクトを作りたいフォルダ内で下記コマンドを実行。
※インストールが完了するとプロジェクト名で指定した名前のフォルダが出来上がります。

vue create プロジェクト名

インストールが開始すると、色々設定条件について質問されます。

? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

ここは、Vue CLIを勉強するだけなら「 default（babel, eslint） 」を選択するのが無難らしいですが、、、

私はbootstrapをscssを通して使いたかったため、下記のように細かく自分で設定していきました。
設定についてはこちらの記事を参考にしました。

【Vue.js】Vue-CLI(4.1.1)でSCSSを読み込む手順

以下僕が今回の環境構築で設定した内容です。

? Check the features needed for your project: 
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

scssを使うためにはCSS Pre-processorsにチェックする必要があるそうです。
TypeScriptとRouter、Vuexも同時に勉強したいと思っていたのでチェックしました。

? Use class-style component syntax? (Y/n) Y

「クラススタイルのコンポーネント構文を使用しますか？」ということで、よく理解していませんが使ってみたいのでYes。
TypeScriptを使うとコンポーネントをクラススタイルで書くことができるそうです。

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? (Y/n) Y

TypeScriptを使うための設定でyesを選択。

? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) Y

※Vue routerはこれから勉強しますので、学習を追えたら更新します。
公式サイト
https://router.vuejs.org/ja/guide/essentials/history-mode.html#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A%E4%BE%8B

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): 
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus 

これが今回の本当の目的。
過去にnode-sassを使って、bootstrapを使った経験があり馴染みがあったのでnode-sassの方を選択。

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
  TSLint (deprecated) 

ESLintは記述したコードが構文にあっているかチェックをしてくれるライブラリ。
とりあえずエラーを防止できればいいので「ESLint with error prevention only」を選択。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i1
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

こちらも学習次第更新します。

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

「Babel、ESLintなどの設定をどこに配置するか」という質問ですが、設定するなら個別ファイルに設定したいので、「In dedicated config files」を選択。

? Save this as a preset for future projects? (y/N) N

この質問は、今回の設定を次回以降、選択肢として保存しておくかどうかなので、今回はnoを選択。

7割方理解していませんが、とりあえずだいたいYesで設定。
※今後更新していきます。

?  Successfully created project moma_front.
?  Get started with the following commands:

moma_frontは今回の僕のプロジェクト名です。

以上でVue CLIのインストールは終了。

BootStrap4をインストール

まず、作成したプロジェクトのフォルダ内に移動します。

cd プロジェクト名

続いてBootStrap4をインストールします。

yarn add bootstrap

BootStrapで使う可能性のあるライブラリも同時にインストール

yarn add jquery
yarn add popper.js

bootstrapの一部の機能でpopper.jsが必要らしく、そのpopper.jsを動かすためにjqueryが必要らしいです。
間違っていたらすみません、、、

インストールできたら、src/assetsの下にcsccフォルダを作成します。

※Vue CLIで大量のフォルダが生成されていますが、その中にsrc/assetsがあります。

csccフォルダを作成したらその中にmain.scssを作成

main.scss内で下記コードを記入

main.css

@import '../../../node_modules/bootstrap/scss/bootstrap.scss'

bootstrap.scssを読み込んでいます。

続いて、変数定義・mixinなど直接スタイル定義しないscssファイルをまとめるためのprepends.scssをsrc/assets/sassの中に作成。

ルートディレクトリ直下にvue.config.jsを作成

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "./src/assets/sass/prepends.scss";'
      }
    }
  }
};

以上でscssの準備はとりあえず完了。

※理解が浅いのでまた勉強したら更新します。

main.tsに下記コードを追記します。

main.ts

require('@/assets/sass/main.scss')

この状態でyarn buildをするとエラーが出ました。。。
どうやら、TypeScriptでrequierはデフォルトでは使えないらしく、@types/nodeをインストールする必要があります。

yarn add @types/node

-追記-

main.ts

import './assets/sass/main.scss'

基本的にTypeScriptではrequierは使わないのが一般的とのこで、上記のようにimportを使えば問題なく動作しました。

これでようやく環境構築が終了です。

あとは

yarn serve

と入力し、サーバーを立ち上げます。

  App running at:
  - Local:   http://localhost:8081/ 
  - Network: http://192.168.10.7:8081/

上記のように表示されるのでLocalで表示されているURLをコピーしてお好きなブラウザで表示します。

試しにApp.vueのtemplateタグ内を下記のコードに変更

App.vue

<template>
   <div>
      <button class="btn btn-info my-3">ボタン</button> 
   </di>
</template>

↓bootstrapで指定したbuttonが表示されたので、一応使えていることを確認。

以上で、Vue CLIにbootstrapをscssで使うための環境構築が完了です。

調べたろことVueには、bootstrapをより簡略化して記述することができるbootstrap-vueがあるそうです。
環境構築後、Vue.jsでbootstrapを使う方法について再度調べていたら見つけました。

導入次第、本記事も更新したいと思います！

今回の環境構築は、僕にとっても初めてのVue/CLI+bootstrapの環境構築だったため、もし間違っている点や、もっとこうした方がいいとう所がありましたがご指摘いただけると嬉しいです。

はじめに

ライブ動画再生がうまくいかなかったので、hls.jsで解決した話（IE11再生も）。

ライブ映像だとなぜかvideojsでうまく再生されない。しかも安定性にも欠ける部分があるらしい。

・https://www.techlive.tokyo/archives/4295
・https://ch.nicovideo.jp/skas-web/blomaga/ar1798847

ということでvideojsではなく、hls.jsを使用することにした結果、うまくいったのでメモ。

ちなみに、IE11再生もうまく行きます。
IE11再生させたい時には、開発者ツールを開いてネットワークタブにある「常にサーバから更新する」をオンにしてみてください。

・https://www.gitmemory.com/issue/video-dev/hls.js/2421/547774657

結論

videojs同様に、ドシンプル。

<template>
    <video id="video_id" controls webkit-playsinline autoplay></video>
</template>

<script>
import hlsjs from '' // hlsjsをnpmでインストール
export default ({
    data() {
        return {
            // hlsjsを機能させるための初期化処理を格納した変数
            hls: new Hls()
        }
    },
    methods: {
        // 動画再生時にこの関数を叩く
        playVideo: function(video_url){
            this.$nextTick(function () {
                var video = $('#video_id').get(0);
                if(Hls.isSupported()) {
                    var hls = this.hls;
                    hls.loadSource(video_url);
                    hls.attachMedia(video);
                    hls.on(Hls.Events.MANIFEST_PARSED,function() {
                        // 動画再生
                        video.play();
                    });
                } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                    video.src = video_url;
                    video.addEventListener('loadedmetadata',function() {
                        // 動画再生
                        video.play();
                    });
                }
            })
        },
        // 動画停止時にこの関数を叩く
        stopVideo: function(){
            // 動画停止
            this.hls.destroy();
        }
    }
})
</script>

ちなみに

videojsだと以下のように実装。

<template>
    <video id="video_id" controls webkit-playsinline autoplay></video>
</template>

<script>
import videojs from '' // videojsをnpmでインストール
export default ({
    methods: {
        // 動画再生時にこの関数を叩く
        playVideo: function(video_url){
            var player = videojs("video_id", 
              {
                flash: {
                  hls: {
                    withCredentials: false
                  }
                },
                html5: {
                  hls: {
                    withCredentials: false
                  }
                }
              }
            );
            player.src({
              src: video_url,
              type: 'application/x-mpegURL'
            });
            player.play();
        },
        // 動画停止時にこの関数を叩く
        stopVideo: function(){
            // 動画停止
            videojs('video_id').dispose();
        }
    }
})
</script>

Vue.jsについて必要な知識をまとめました。
自身の備忘録として記載します。

オブジェクト構文について

スタイルを指定する場合には「オブジェクト構文」と呼ばれる書き方をします。

v-bind:class="{ クラス名 : 変数 }"

クラス名の後に変数を指定することができます。

v-bind:classにオブジェクトを設定する

クラスの数が増えてくると、v-bind:class内に全て記述するのが難しくなってきます。なのでv-bind:classにはオブジェクトを値として設定することができます。

スタイルとオブジェクト構文

classにv-bindで値を設定する際にオブジェクト構文を使用して多数のクラスを用意することができました。このオブジェクト構文は他の所でも使用できます。その一つが「style」属性です。

v-bind:style=" オブジェクト構文 "

このようにv-bind:styleにオブジェクト構文を使用して値を設定することができます。style属性はスタイル名と値を必要なだけ記述していきます。

v-bind:styleにオブジェクトを指定する

このvi-bind:styleの場合も、v-bind:classと同様にオブジェクトを値に設定することが可能。設定したオブジェクトの中に、スタイル情報をプロパティとして組み込んでおくことができれば値の設定はもっと容易になります。

参考URL

Vue.js & Nuxt.js超入門
https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339

Vue(Nuxt.js)で、textarea・inputで入力したものをEnterで送信、Shift+Enterで改行する機能を実装する方法です。

チャット機能を実装する時に便利かと思います。

Vue(Nuxt.js)でEnterで送信、Shift+Enterで改行の機能を実装

<template>
  <div>
    <p>送信:</p>
    <p>{{ sendMessage }}</p>
    <textarea
      v-model="message" 
      @keydown.enter.exact="keyDownEnter"  <!--enterをkeydownした時のイベント-->
      @keyup.enter.exact="keyUpEnter"  <!--enterをkeyupした時のイベント-->
      @keydown.enter.shift="keyEnterShift" <!--enterとshiftをkeydownした時のイベント-->
    ></textarea>
  </div>
</template>

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

export default Vue.extend({
  data() {
    return {
      message: '',
      sendMessage: ''
    }
  },
  methods: {
    keyDownEnter(e: any) {
      e.preventDefault() //改行を無効化
    },
    keyUpEnter(e: any) {
      e.preventDefault() // 改行を無効化
      console.log(e.keyCode) // 13
      this.send() //送信
    },
    keyEnterShift(e: any) {
      console.log('shift,enter')
    },
    send() {
      this.sendMessage = this.message
      this.message = ''
    }
  }
})
</script>

@keydown.enter.exact
@keyup.enter.exact
のイベントに関しては、e.preventDefault()をすることでEnterで改行するのを防止しています。
また、.exactを連結させるとことで、Enterキーのみを押した時にイベントが発生するようにしています。

日本語変換時に送信しないように処理を追加

上記のコードでは、Enterで送信、Shift+Enterで改行することはできますが、日本語変換の確定をした時も送信されてしまいます。
日本語変換の確定時のEnterでは、送信しないように処理を追加します。

<template>
  <div>
    <p>送信:</p>
    <p>{{ sendMessage }}</p>
    <textarea
      v-model="message"
      @keydown.enter.exact="keyDownEnter"
      @keyup.enter.exact="keyUpEnter"
      @keydown.enter.shift="keyEnterShift"
    ></textarea>
  </div>
</template>

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

export default Vue.extend({
  data() {
    return {
      message: '',
      sendMessage: '',
      keyDownCode: 0 //追加
    }
  },
  methods: {
    keyDownEnter(e: any) {
      console.log(e.keyCode)
      this.keyDownCode = e.keyCode //enterを押した時のkeycodeを記録
      e.preventDefault()
    },
    keyUpEnter(e: any) {
      if (this.keyDownCode === 229) { //229コードの場合は処理をストップ
        return
      }
      e.preventDefault()
      console.log(e.keyCode)
      this.send()
    },
    keyEnterShift(e: any) {
      console.log('shift,enter')
    },
    send() {
      this.sendMessage = this.message
      this.message = ''
    }
  }
})
</script>

EnterキーのkeyCodeは13です。しかし、日本語変換確定時のEnterキーのkeyCodeは229になります。
if (this.keyDownCode === 229)で日本語確定時の時は処理を止めています。
これで、日本語変換時に送信しないようにする機能を追加できます。

node

options has an unknown property 'prependData'. These properties are valid

と表示されてvueの実行ができない

解決策

[Bug Report] release 1.0.1 Sass Loader does not match the API schema

上記のリンクを参考に、
npm install sass-loader
とした場所で、
npm -i -D sass-loader@7.3.1
とすると、解決する

※ブログ（ https://coincidence.netlify.app/#/post/vue-js-contentful ）からの転載です。

---

当ブログを作成するにあたって使用した技術、反省点を自分用にまとめておきます。
ソースコードはこちら→ https://github.com/AsazuTaiga/my-blog

環境・構成

当ブログの提供環境をざっくり図で表すと、下のような感じです。

vue-cliで作成したVue製サイトを、Netlifyでホスティングしています。GitHubと連携してmasterへのmergeごとにビルド・デプロイが自動的に走ります。
コンテンツ管理（バックエンド）には、Contentfulを使用しています。ContentfulはヘッドレスCMSであり、自身でコンテンツモデルおよびコンテンツを作成することができます。JavaScript用のSDKが用意されており、コンテンツを指定・フィルタリング・ソートして取得することができます。

各View・ComponetsはVue Routerに対してパスの変更を行い、また検知します。
他のView・Componentsによるパスの変更が変更された場合、dataプロパティに保持しているコンテンツを一旦削除したうえで、現在のパスで表示したいデータの取得をContentfulAdapterに依頼します。AdapterはContentful Delivery APIを叩いたレスポンスをPromiseの形でView・Componentsに渡します。
データの取得中、すなわちdataプロパティが空の場合はローディングを表示しておき、Promiseがresolveしたらレスポンス内容をdataに取り込んで表示します。

Vuexどこで使っているの？というと、唯一グローバルに管理する必要がありそうだったメニューの展開/非展開の状態だけです。これも冷静に考えればメニュー用のコンポーネントで閉じているので、あまり意味はない（むしろ良くない）使い方ですね……。使いたかっただけです。

図には出していませんが、見た目を整えるのにVuetifyを使っています。

反省点

①非同期処理＋ローディング表示のコンポーネントを作るべきだった
少なくとも、ローディング画面用のコンポーネント（ぐるぐる）を各Viewに配置して、同じCSSでセンタリングして、同じように非同期中はぐるぐるさせているのは、大変コスパが悪い気がしています。「コンポーネントは画面内での配置を意識しない」「Viewはコンポーネントの位置を決めて配置する」といった自分なりの方針でやっていたのですが、それにしたって同じコードを何度コピペしたかわかりません。こういった場合のベストプラクティスが何なのか、ご存じの方教えてください…。

②ストアを適切に使う、いらないなら削るべきだった
各記事の内容をキャッシュさせる必要はないとしても、最低限、タグのIDの一覧くらいは最初に控えておいたほうが効率的でした。現状、タグに紐づく記事の一覧表示には、次のステップが発生しています。
(1) 選択されたタグの名前をもとにタグのIDを問い合わせる
(2) タグのIDをもとにそれに紐づく記事を取得する

  async fetchBlogPostsByTagAtPage(tagName, pageNumber) {
    const tagResponse = await this.fetchTagsByName(tagName);
    if (tagResponse.total === 0) {
      throw new Error("タグが存在しません。");
    }

    const tag = tagResponse.items[0];

    return this.client.getEntries({
      content_type: "blogPost",
      "fields.tags.sys.id": tag.sys.id,
      order: "-fields.publishDate",
      skip: (pageNumber - 1) * POSTS_PER_PAGE,
      limit: POSTS_PER_PAGE
    });
  }

  async fetchTagsByName(name) {
    return this.client.getEntries({
      content_type: "tag",
      "fields.name": name,
      limit: 1
    });
  }

「タグのIDを問い合わせる」のひと手間を確実になくせて速度向上と通信量減が期待できるのにやらないのは、良くない怠慢です。そのうち直したいですね（こういう言い草をしてしまうときは、たいてい直さないパターンです）。
そもそも、各コンポーネントがContentful Adapterを直接使っているのもあまりよくない気がしています。Vuexで取得して保持、各コンポーネントは取得完了通知を受け取って表示を更新するだけなのが理想なのでしょうか。

もちろんコンポーネントが状態を持つこと自体は悪ではないと思います。状態を層で閉じるか、コンポーネントで閉じるかの違いで、それぞれのメリット・デメリットがあります。そして、システムの規模が大きくなればVuexの恩恵が大きくなってくるのだと思います。
このブログくらいのミニマムな機能であれば、基本的に各コンポーネントで状態を閉じておいてよさそうです。もし上述のようにタグのリストを別で保持しておくストアが必要があったとしても、Vuexではない普通のストアで十分かもしれません。

③CSSの共通定義を適切に管理するべきだった
開発中、何度もCSSで見た目をいじくりまわしながらあーでもないこーでもないとやっていたので、色定義やbox-shadowの定義がはちゃめちゃにハードコーディングされてしまいました。「自分用だから別にいいや……」という言い訳を開発中何度独り言ちたかわかりません。怖い。
序盤の手間を惜しむと、終盤・保守でかえって大変になります。Done is better than perfectといえど、限度はあります。

④Vuetifyは本当に必要だったのか？グリッドだけ使えばよかったのでは？
v-cardやv-btnあたりのコンポーネントのCSSを!importantしまくって色々弄ったので、果たしてこれが良い方針なのか？と問われるとモニョります。v-container, v-row, v-col, v-iconあたりだけ選んで入れればよかったような気がしますし、もっと最小のライブラリがあればそれでよかったのではないか、いっそflexbox最近覚えたのでなにもいらなかったのでは、という気がしてなりません。開発効率アップには間違いなく寄与したVuetifyですが、その改造に腐心して醜いコードが大きく増えたのもまた事実です……。

⑤Viewsに再利用性の低い部品を直接書くべきか、コンポーネント化すべきか
再利用が見込めないけどViewsが肥大化するのは防ぎたい、みたいな意味合いでコンポーネントを細かく分けるべきかどうか非常に悩みました。
色々試した結果、個人的には次のいずれかを満たす場合にコンポーネントとして切り出すべきだと思います。

1. 状態を持つatoms, moleculesである
2. 内部に複数のatoms, moleculesを抱えるorganismsである
3. 複数の場所で使用されている

「1か所でしか使われず、状態を持たないatomsである」くらいならコンポーネント化をわざわざする必要はないのかな、という印象です。となると、ほとんどの場合にコンポーネント化を検討することになりそうです。
今回に関してはこの原則に従えてない部分も多いです。反省。

良かった点

反省点だけ見ているとしんどいので、良かった点も。

①とにかく完成した、作っている最中もテンション高く臨めた
独りで何か作るときはとにかくこれが一番重要だと考えています。何かを作るときは、私の場合5割以上の場合で挫折します。今回はなんとかここまでこれたので、良かった…。

②触りながらVuexを覚えられた
やや無理に取り入れた形になってしまいましたが、コンセプト・便利さ自体は理解できた気がします。ファースト・ステップとしては良かったとポジティブにとらえています。

③コンポーネント設計をずっと考えながら生活できた
最終的にベストな形にもっていけたとは到底言えませんが、ブログ内のComponents(Atoms, Molecules, Organisims)とViews(Templates, Pages)をどうするかをずっとお風呂の中とかで考えていたので、このへんのコンポーネント志向の勘所みたいなものはだいぶつかめたのではないかと思います。お仕事中にデザイナーさんのカンプを見たときも、自然とコンポーネントの単位をどこにすべきかを、目で切り分けるようになってきました。

④Neumorphismに触れられた
最新のデザイントレンドっぽいやつで、Neumorphismというものがあります。私の理解ですが、単色の画面にbox-shadowで光・陰・影を当てることで浮き出たように見せるワザのようです。
自分でCSSを調整するのはしんどかったので、こちらを使わせていただきました。
https://neumorphism.io/

蛇足;ブログを自作した理由

そもそもなぜ機能も見た目も整っている既存のブログサービスを使用せずに、ヘッドレスCMSを使用してフロント周りを自作したか？という理由を一応メモしておきます:

• 自作のほうが愛着がわいてブログが継続できると思った
• カテゴリ・タグがブログの前提機能になっているが、どちらかだけで十分では？というのを検証したかった（このブログにはカテゴリはなく、タグだけです）
• Contentfulを利用して作成しておけば、将来的に移行する場合もスムーズだと思った

色々ありますが、結局一番大きいのは「作りたかったから作った」です。
作りたいベースではなく「ブログをやりたい」という理由であれば、既存のものを使ったほうが絶対良いと思います。