ChatGPTとGitHub Copilotを活用しながらWebアプリケーションを作る【Vue.js】

ChatGPTとGitHub Copilotを活用しながらWebアプリケーションを作ってみます。

技術スタックは以下のようにします。

フロントエンド

Vue.js(Vue CLI)

バックエンド

Python(Django REST Framework)

DB

PostgreSQL

まずはusersテーブルを作成し、それに対してCRUD処理を実装したいと思います。

usersテーブルはnameとemailカラムのみの簡単なテーブルから始めます。

勉強のために今回は以下のようにルールを設けてみます。

技術記事のコードはコピペしない
公式ドキュメントは見てOK
ChatGPT、GitHub Copilotを使うのはOK
ChatGPT、GitHub Copilotをどう使うか書いてる技術記事を参考にするのはOK

コーディングは以下の順番で進めたいと思います。

Vue.jsを立ち上げる
Vue.jsでサンプル用に外部APIから情報を取得する関数を作成し、取得したデータを表示する画面を作成する
Docker-composeを用意して、PythonとPostgreSQLのコンテナを構築する
PythonコンテナでDjango REST Framework(DRF)を立ち上げる
DRFでUsersモデルを作成する
Usersモデルに対してCRUD処理を実装する
Vue.jsでUsersモデルに対してCRUD処理を実装する

1. Vue.jsを立ち上げる

Vue.jsのプロジェクトを作成します。 (フロントエンドはローカル環境で実装し、Dockerは使わないようにしました。) 公式ドキュメントで該当するページは以下だと思います。 https://cli.vuejs.org/guide/creating-a-project.html

ChatGPTで質問すると以下のような回答が返ってきました。

入力

Tell me how to create new Vue.js project on my local environment.

出力

Sure, here are the steps to create a new Vue.js project on your local environment:

First, you need to have Node.js installed on your machine. You can download it from the official website: https://nodejs.org

Once Node.js is installed, open a command prompt or terminal window and run the following command to install the Vue CLI globally:
npm install -g @vue/cli
This will install the Vue CLI tool, which you can use to create new Vue projects.

To create a new Vue project, navigate to the directory where you want to create the project in the command prompt or terminal window, and run the following command:
vue create my-project
Replace "my-project" with the name you want to give to your project. This will create a new Vue project with the default settings.

The Vue CLI will prompt you to select a preset. You can choose the default preset or manually select features that you want to include in your project.

Once the project is created, navigate to the project directory using the command prompt or terminal window:
cd my-project
Finally, run the following command to start the development server:
npm run serve
This will start a local server and your Vue.js application will be available at http://localhost:8080/ by default.

That's it! You now have a new Vue.js project running on your local environment.

公式ドキュメントのURLも確認してみました。

入力

Could you give me a URL for official document of Vue CLI which describes how to start a new project?

出力

Sure! You can find the official Vue CLI documentation on how to create a new project here:

https://cli.vuejs.org/guide/creating-a-project.html

This page provides a detailed guide on how to use the Vue CLI to create a new Vue.js project. It covers the different options and configurations you can use when creating a new project, such as choosing a preset or manually selecting features.

The documentation also includes information on how to customize your project using plugins, how to add dependencies, and how to run various development and production scripts.

I hope this helps!

ChatGPTの情報の正確さを確かめたい時は公式ドキュメントのURLを聞いて、自分でドキュメントまで読むとようにしようと思います。

ChatGPTの回答内容で問題なさそうなので、以下のコマンドを実行してみます。

npm install -g @vue/cli

vue create vue-app

cd vue-app

npm run serve

localhost:8080にアクセスすると以下のような画面が表示されました。

2. Vue.jsでサンプル用に外部APIから情報を取得する関数を作成し、取得したデータを表示する画面を作成する

ChatGPTに質問してみます。

入力

Tell me how to add new page on Vue CLI which fetches data from https://jsonplaceholder.typicode.com/users.

出力

Sure! Here are the steps to add a new page to a Vue CLI project that fetches data from https://jsonplaceholder.typicode.com/users:

First, open your Vue CLI project in your code editor of choice.

Create a new file in the src/views directory called Users.vue. This will be the new page that we'll create.

Open Users.vue and add the following code to the template section:
<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>
This creates a basic template with a heading and an unordered list that will display the name of each user fetched from the API.

Add the following code to the script section:
<script>
export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        this.users = data;
      })
      .catch(error => console.error(error));
  }
}
</script>
This code sets up a Vue.js component with a data property called users that will store the user data fetched from the API. The mounted lifecycle hook is used to fetch the data using the fetch() API and update the users data property when the component is mounted. The v-for directive in the template is used to loop through the users array and display the name of each user.

Finally, add a route to the new page in the src/router/index.js file. You can add a new route like this:
{
  path: '/users',
  name: 'Users',
  component: () => import('../views/Users.vue')
}
This code creates a new route to the /users path that will render the Users component we just created.

That's it! You can now navigate to the /users path in your Vue.js app to see the list of users fetched from the API.

上記の回答ではviews/Users.vueを新規追加してルーティングする方法も書かれていますが、そのままでは動作しませんでした。おそらくVue Routerのインストールとかルーティングの定義の仕方を公式ドキュメント読むかChatGPTにもっと詳細に聞く必要がありそうです。

ただ、今回は簡単なアプリケーションで良いので、ルーティングは実装せずデフォルトで作成されているcomponents/HelloWorld.vueを以下の内容に編集してみました。

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        this.users = data;
      })
      .catch(error => console.error(error));
  }
}
</script>

<style>

</style>

再度ローカルサーバーを立ち上げてlocalhost:8080にアクセスすると想定通りJSONqPlaceholderのデータが取得できていました。

ある程度フロントエンドはできてきたので、次回はバックエンドの構築を行います。