こんにちは！
スマレジテックファームのMichiです！

最近、何かと話題になっていますよね、ChatGPT。
うちの職場でもChatGPTを使って遊んだり、実装で分からないところを質問したりと、いろいろ活用しているのですが、そこでうちのマネージャーが

「これ、ChatGPTでブログ書けるんちゃうん？」

という、とんでもないことを言い出した(？)ので、今回は「ChatGPTに技術記事を書いてもらったらどうなるのか？」を検証したいと思います。

さっそくChatGPTにお願いしてみる
Vuexについてまとめてみた（著：ChatGPT）
検証してみる
感想

さっそくChatGPTにお願いしてみる

今回は、「Vuexの使い方をサンプルコードを示しながら説明してください」とChatGPTにお願いしてみました。近々、Vuexのまとめ記事を書きたいなと思っていたのですが、ChatGPTがやってくれるのなら俺いらんな...。

さっそく、ものすごい勢いで作ってくれました。
全文作成するのに、わずか1～2分。自分で書くとしたら調べる時間も含めて2～3時間はかかるので、本格的に自分オワコンフラグが立ちそうです。

Vuexについてまとめてみた（著：ChatGPT）

VuexはVue.jsの状態管理ライブラリであり、アプリケーションの状態を集中管理することができます。以下はVuexを使用して簡単なカウンターアプリケーションを実装する例です。

まず、Vue.jsおよびVuexをインストールします。

npm install vue
npm install vuex

次に、Vue.jsアプリケーションを作成し、Vuexストアを作成します。

// main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    },
    decrement(context) {
      context.commit('decrement')
    }
  },
  getters: {
    count: state => state.count
  }
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

上記のコードでは、VuexをインポートしてVue.jsアプリケーションに使用するように設定しています。次に、Vuex.Storeを作成し、stateオブジェクト、mutationsオブジェクト、actionsオブジェクト、およびgettersオブジェクトを含めます。これらはVuexストアの主要な要素であり、状態の管理、状態の変更、非同期処理、および状態の取得を担当します。

stateオブジェクトには、アプリケーションの状態を含むオブジェクトを定義します。上記の例では、単一のカウント変数を持つ状態オブジェクトを定義しています。

mutationsオブジェクトには、状態の変更を実行するミューテーション関数を定義します。上記の例では、incrementおよびdecrement関数を定義し、それぞれ状態オブジェクトのcount変数を増減させています。

actionsオブジェクトには、非同期処理を実行するアクション関数を定義します。上記の例では、incrementおよびdecrement関数を定義し、それぞれミューテーション関数を呼び出して状態の変更を行っています。

gettersオブジェクトには、状態オブジェクトの値を取得するためのgetter関数を定義します。上記の例では、count関数を定義し、状態オブジェクトのcount変数を返しています。

最後に、Vue.jsアプリケーションを作成し、storeオブジェクトを渡していることに注意してください。これにより、すべてのコンポーネントでstoreオブジェクトを使用できるようになります。

次に、Vue.jsアプリケーション内のコンポーネントでVuexストアを使用する方法を示します。以下は、カウンターコンポーネントの例です。

// Counter.vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.count
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment')
    },
    decrement() {
      this.$store.dispatch('decrement')
    }
  }
}
</script>

上記のコードでは、カウンターコンポーネントで状態の取得とアクションの実行を行うために、computedとmethodsオブジェクトを使用しています。computedオブジェクトでは、count関数を定義して、ストアのcountゲッターを呼び出しています。methodsオブジェクトでは、incrementおよびdecrement関数を定義して、ストアのincrementおよびdecrementアクションを呼び出しています。

以上がVuexの基本的な使い方の例です。Vuexを使用することで、アプリケーション全体で状態の管理を行うことができ、コンポーネント間で状態を共有することができます。また、非同期処理を含む複雑な処理も、ストア内で一元管理することができます。

検証してみる

いや～、すごいですね。日本語も自然だし、サンプルコードも分かりやすい。
解説を読む限り、特に間違っているところはなさそうです。一応、サンプルコードが動くかの検証もしておきましょう。

って、あれ..？環境を作ってコードをコピペしましたが、動きません。

調べてみると、ChatGPT君が言っているのは古い書き方なので、最新のVue.js3準拠の書き方に直してあげます。

// main.js 修正

import { createApp } from "vue"
import { createStore } from "vuex"
import App from "./App.vue"

const store = new createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
  },
  actions: {
    increment(context) {
      context.commit("increment")
    },
    decrement(context) {
      context.commit("decrement")
    },
  },
  getters: {
    count: (state) => state.count,
  },
});

createApp(App).use(store).mount("#app")

これで動くようになりました。

感想

素晴らしい技術記事を書いてくれたChatGPTですが、バージョンの違いにはまだ弱いみたいです。特に、Vueはまだまだ3系より2系の情報がネットに多いせいか、古い情報が紛れ込むことがあります。

まあ、これについてはChatGPTに命令するときにちゃんとバージョン指定してやれば解決します。試しに、「Vue.js3の書き方で」とChatGPTにリクエストしてみたら、さっきのコードの不備を改善したうえで、CompositonAPIを使って書いてくれました。

ていうかこれ、もう実はChatGPTで作った記事を自分で書いたことにして、Qiitaに上げてる人とかいそう…。
さすがにそれは自分の勉強にならないのでやりませんが、ChatGPTにサンプルコードだけ作ってもらうとかはありだと思います。分かりやすいサンプルコードを作るのって、本当に難しいし時間かかるんですよね。

ChatGPTが出た当初は、「なんてもの公開してくれたんや。こんなもん、プログラマーの仕事なくなるやないか！（特にジュニア層）」と思ったものですが、世に出たからには、うまく活用して自分の業務や学習に役立てていきたいですね。

Michi's Tech Blog

一人前のWebエンジニアを目指して

ChatGPTにお願いして技術記事を書いてもらった

さっそくChatGPTにお願いしてみる

Vuexについてまとめてみた（著：ChatGPT）

検証してみる

感想