こんにちは。jof-fumiです。

フロントエンド領域への挑戦について

私はこれまでバックエンドエンジニアとして経験を積んできたので、
フロントエンドについてはさっぱりでした。
Laravelでページを作る際におまけ程度にVueを触るくらいでした。

とはいえ、いつか勉強しないとな～と思っていたのですが、
その矢先、よりそうにて、フロントエンドをやる機会を頂けました。
軽微な保守案件ではなく、商用利用するシステムを作るプロジェクトメンバーの一人として参画だというのです!!!

経験値の激ローな私に対して、商用プロダクトの開発経験の機会を頂けるなんて。。
なんと太っ腹な会社でしょうか。。
よりそうは、メンバーのキャリアの要望は、できる限り相談に乗ってくれる会社です。

フロントエンドの始め方

さて、フロントエンドのお仕事をやることになったのは良いものの、賃金が発生しますので、さすがに初学者レベルの成果物を出してばかりではいけません。

自分のフロントエンドのスキルレベルを、よりそう側には伝えているとはいえ、
せめてジュニアクラスからミドルクラス直前くらいまでの成果物は出していかなければいけないと思っていました。
しかし、リソースやタスク量、期限などを鑑みて、他メンバーに手厚いサポートを求めるのは難しそうでした。
そんな状況だったため、chatGPTを利用しようという結論に至るまで、時間はかかりませんでした。

よりそうとAI

chatGPTを利用する結論に至るのは、状況もありましたが、
そもそも、よりそうでは業務でのAI活用ガイドラインが定められており、
結構な頻度で活用されていて、ある程度なじみがあったというのも影響しました。

様々な職種で利用されており、もちろんエンジニアも利用が認められています。

時代に置いていかれない、良い試みですね！

フロントエンドへの挑戦　～前提事項～

ちなみに、大前提として、プロジェクトのリーダー的な役割ではなく、飽くまでメンバーの１人としての参画となります。
私のほかにもフロントエンドエンジニアの人がいて、利用するフレームワークや設計方針など、ある程度決めてもらって、私に降りてくるのは「この機能作って～」というところからスタートになります。

それ以前の技術選定から何からをchatGPTとやっていくのは、さすがに骨が折れそうですね。。頑張ってください^^

chatGPTと開発を実践

さて、chatGPTにサポートしてもらうにあたり、どのように使っていたかをお伝えしていきます。

役割の定義

chatGPTに以下の呪文を唱えて役割を認識させました。

私：

あなたはフロントエンドエンジニアです。
vue3 nuxt3 vuetify typescriptの環境で開発を行っています。私の質問に答えてください。

ChatGPT：

もちろんです！お気軽に質問してください。どのようなご質問がありますか？

素直でよろしいですね。まだ人間に反旗を翻すような思想には到達していないようです。

ステップ1：何のコンポーネントで作るか指定する

chatGPTと開発を行う上でどのように実践したかを例を交えて説明します。

例：プロダクトに必要となる、斎場に関するカードコンポーネントを作成することにしました。

私：

斎場が保持しているホールのデータをカードコンポーネントで表示したいです。
なお、ホールの運営方式に沿って、タブを切り替える形で表示したいです。
（運営方式）
私営、公営

chatGPT:

理解しました。
ホールのデータをカードコンポーネントで表示し、
それを私営と公営の運営方式に基づいて
タブで切り替える形にしたいということですね。
これを実現するために、以下の手順に従ってコードを書くことができます。

まず、Vue.jsのコンポーネントを使用して、
ホールのデータを表示するカードコンポーネントを作成します。
次に、Vuetifyのタブコンポーネントを使用して、
私営と公営の運営方式に切り替えるためのタブを作成します。
最後に、適切な方法でデータを取得し、
運営方式に基づいて表示を切り替えるロジックを追加します。

以下は、簡単な例としてのコードの一例です。
実際のプロジェクトに合わせて調整が必要です。

<template>
  <div>
    <v-tabs v-model="selectedTab">
      <v-tab v-for="tab in tabs" :key="tab.value">{{ tab.text }}</v-tab>
    </v-tabs>

    <v-card v-if="selectedTab === 'private'">
      <v-card-title>私営のホール</v-card-title>
      <v-card-text>
        <!-- 私営ホールのデータ表示 -->
        <div v-for="hall in privateHalls" :key="hall.id">
          <!-- ホールのデータ表示のためのコード -->
        </div>
      </v-card-text>
    </v-card>

    <v-card v-else-if="selectedTab === 'public'">
      <v-card-title>公営のホール</v-card-title>
      <v-card-text>
        <!-- 公営ホールのデータ表示 -->
        <div v-for="hall in publicHalls" :key="hall.id">
          <!-- ホールのデータ表示のためのコード -->
        </div>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedTab: 'private', // 初期選択タブ
      tabs: [
        { text: '私営', value: 'private' },
        { text: '公営', value: 'public' },
      ],
      privateHalls: [], // 私営ホールのデータ
      publicHalls: [], // 公営ホールのデータ
    };
  },


（以下省略）

これは使えそうですね！
vuetifyでカードコンポーネントとタブの切り替えが簡単に実装できることがわかりました。
あとは公式を見つつ自分たちの詳細要件に合わせて実装すればよさそうです。

ちなみにこの記事で例示したchatGPTの回答は無課金のものなので、chatGPTが保持する情報がVue2の形式だったりします。

ちなみに、私はフロントエンドエンジニアではなかったですが、
フレームワークなどで「カードコンポーネント」なるものがあるのは知っていました。
そういう、「なんとなくだが、こういう機能があるというのは知っている」「フレームワークということしか知らないが、なんとなくこういうことが得意っぽい」というレベル感の知識は必要だと思っています。

そうでもないと、さすがに難しいと思います。最近は画面デザインを見せれば全部理解してくれるAIなど、そこまで精度が上がっているらしいですが、そうだとしても、それくらい知っていないと、大前提として、そもそも仕事を貰えないと思います。

ステップ2：念のため自分でも調べてみる

ステップ2と言いながら、ステップ1の方法で質問して、実装して調整。の繰り返しなのです。なので、ステップ2にしてテクニックとかではなく、マインド寄りの話になってきます。

一度質問をして、素直にそれを採用。でもよいのですが、そればっかりだと、自分に身につく知識が少なく、どこかで行き詰ってしまいます。

例として、アンカーリンクの実装を統一するため、リンクコンポーネントを作成したとします。

<template>
  <router-link v-if="to" :to="to" class="custom-link" :title="tooltip">
    <v-icon v-if="icon" />
    <span><slot /></span>
  </router-link>
  <a v-else :href="href">
    <v-icon v-if="icon" />
    <span><slot /></span>
  </a>
</template>

<script>
export default {
  props: {
    to: {
      type: [String, Object],
      default: null,
    },
    href: {
      type: String,
      default: null,
    },
    icon: {
      type: String,
      default: '',
    },
    tooltip: {
      type: String,
      default: '',
    },
  },
};
</script>

<style scoped>
（省略）
</style>

よさそうですね！

ただ、Nuxt3にはnuxt-linkという便利な機能があります。
無課金chatGPTだと情報が古く、nuxt3に関する情報が出てきません。

じゃあ課金すれば良いのでは？という話なのですが、課金しようがしまいが、出てきた回答について自分で調べて、知識を補強するというのは重要だと思います。

なぜかというと、そもそもフロントエンドの知識が少ないところがスタートなわけですから、Nuxt3が最新という話すら知らない可能性もあります。
Nuxtとかそういう大きいレベルの話なら、まだ気づけるかもしれませんが、パッケージなどは、古い情報がchatGPTから回答されても、気付けない可能性は高いです。

そういう理由から、自分で調べてみることは重要だと思います。

また、自分で調べることの副次的な効果として、その過程で様々な情報が目に入ってきて、都度調べていくたびに理解が深まり、次の機能開発の際に習熟効果により、chatGPTに対して、より適切な質問ができるようになっていきます。

そういう、「自分でも調べてみる」「知識を身につけたい」という根本的な学習マインドがないと、現時点では活用は難しいのではないでしょうか。
本当はもっと便利な機能があるのに、知識不足で正しく質問が出来ず、微妙なサンプルコードが出てきていることにすら、気付くことすらできません。

また、プロジェクトが進んでも、本人の知識の習得状況がイマイチだと、成長という軸での評価が低めになると思います。その時、chatGPTを使って実装していたからです。と言い訳にしますか？？

ステップ3：ちゃんとchatGPTを使いつづける

最後に、気を付けなければならないことです。

chatGPTとやっていると、「フロントエンド完全に理解した」という、フロントエンドハイがやってきます。
すると、次に開発する機能が、「この機能を使えば出来るな」とchatGPTに頼らなくてもわかるようになってきます。

しかし、「戦いの中で成長している！！」という漫画の主人公状態とはいえ、所詮ジュニアエンジニア程度。その知識でAIに勝てるわけがないのです！！

自分は、その状態で機能を実装した後、なんとなく気になってchatGPTに聞いてみると、もっと簡単に実装できるやり方を提示されてしまいました。

ちなみに、これに気付くには、開発経験がモノをいう気がしています。
フロントエンドの知識がなくとも、バックエンド開発経験の中で、車輪の再発明をしてしまったことがあれば、なんとなく「もしかして。。」と思って、途中で気付けるような、センスや勘所が身についていると思います。

つまり、現時点ではchatGPTを利用して開発をするには、ある程度の開発経験は必須なのではないでしょうか。
まったくの未経験エンジニアがchatGPTがあればなんとかなるというのは、無謀だと自分は思います。

もしかしたら、それすらもちゃんと理解して提示してくれるAIの時代が来るかもしれませんが。。

結論

自分の経験からだと、以下の素養がないと、AIの力があっても、なかなか未経験領域で、正しく活用するのは難しいのではないかと思いました。

その言語やフレームワークで何ができるかのざっくりした知識
自分の知識として身につけていくという学習意欲
何かしらの開発の経験

以上、私が実際に未経験領域でchatGPTと共に開発をやってみた感想となります。

ちなみに、社会人なのに、なぜ結論を先に書かなかったかって？？
頑張って書いたんだから、結論だけでなく全部読んでほしいじゃないですか！！！

chatGPTに要約を頼めば、全文読まなくても済んだかもしれませんね！！！

それを思いつかなかった時点で私の勝ちです。
対戦ありがとうございました。

BEエンジニアがFE開発をやることになったので、ChatGPTと協力してなんとかした話