はじめに

はじめまして、NECソリューションイノベータ株式会社で技術探索チームとして日々業務をしております、茶碗谷廉太朗です。

入社4年目で、昨年度までコーディングに関わる業務はほとんどやっていない開発初心者です。

どんなコーディングをしてみたか

所属している組織で、仕事のやり方をより良くするには？どうすればいいかの施策を考えています。
その中で、組織内での仕事のスピードを早くする方法や日々の業務での悩み事が解決できるようなアイデアを出して、その中で○○な情報を可視化してみよう！となりコーディングをすることに！
（詳しいアイデアやどんな情報？の部分は割愛します）
※これ以降に登場するコードは実際に業務で作成した内容とは別物です。

今回使用した言語や環境、それに関する私の知識

Vue3

Vue.jsの最新バージョン（2024年12月25日時点）。VueはJavaScriptのフレームワーク。Webアプリの開発向けです。

Cytoscape

グラフ描画用のオープンソースのプラットフォーム
元々は、遺伝子ネットワーク分析が発端でソーシャルネットワーク分析などの可視化の目的で使用されています。

私の前提知識

Javascript聞いたことある！触ったことはない！開発なんて全くやったことないし出来ない！
まさに赤子状態でのスタートです。（笑）

Copilotを使用してコーディングを始めてみた！

1.まずは環境構築

ですが、、、初心者にはここのハードルが高い。。。
以下の公式サイトを参考にやってみます。

エラーが起きますが、copilotに聞くとすんなり答えてくれます。

一般的なエラーや、よくあるエラーの解決は早いし、的確でした。

2.実際に動く画面を作ろう！

初心者なので、どんな関数作るか、どういう処理がいるかわからない。。。
AIに丸投げしてみた！

※今回は、開発内容よりも、初心者がAIを使用してどれくらいコーディングができるのかをまとめた記事なので、実際の活動とは違う内容での記述です。

src/components/CytoscapeGraph.vue

<template>
  <div ref="cy" style="width: 100%; height: 600px;"></div>
</template>

<script>
import cytoscape from 'cytoscape';

export default {
  name: 'CytoscapeGraph',
  mounted() {
    const cy = cytoscape({
      container: this.$refs.cy,
      elements: [
        // ノードの定義
        { data: { id: 'microbe', label: 'Microbe' } },
        { data: { id: 'element1', label: 'Element 1' } },
        { data: { id: 'element2', label: 'Element 2' } },
        { data: { id: 'element3', label: 'Element 3' } },
        // エッジの定義
        { data: { source: 'microbe', target: 'element1' } },
        { data: { source: 'microbe', target: 'element2' } },
        { data: { source: 'microbe', target: 'element3' } },
      ],
      style: [
        {
          selector: 'node',
          style: {
            'background-color': '#666',
            'label': 'data(label)',
            'text-valign': 'center',
            'color': '#fff',
          },
        },
        {
          selector: 'edge',
          style: {
            'width': 3,
            'line-color': '#ccc',
            'target-arrow-color': '#ccc',
            'target-arrow-shape': 'triangle',
          },
        },
      ],
      layout: {
        name: 'circle',
      },
    });
  },
};

</script>

<style scoped>
/* 必要に応じてスタイルを追加 */
</style>

src/App.vue

<template>
  <div id="app">
    <CytoscapeGraph />
  </div>
</template>

<script>
import CytoscapeGraph from './components/CytoscapeGraph.vue';

export default {
  name: 'App',
  components: {
    CytoscapeGraph,
  },
};
</script>

<style>
/* 必要に応じてスタイルを追加 */
</style>

src/main.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

こんな感じで、あっさり作成してくれました。

ずらずらと○○な機能追加して。という風にどんどん書き進めていきます。

問題発生・・・

初心者なので、何も気にせずAIに指示して書いてもらってます。
もちろん、関数の命名や汎用性とか何も考えていません。

こんな感じで、雑に指示をしながら進めてました。
進めている内に、コードが長くなってきたので、リファクタリングをすることに。

そんな時、事件は起きました。
自分が書いていたはずのコードなのに全く意味がわからない！！

大まかに、ここでこういう処理をしてる。とかはわかります。

ただ、細かい意味が全くわからないし、ただ動けばいいコードが完成していました（笑）

具体的には、以下のような問題が起きました。

名前に意味があるようでない関数が多い。
- 処理の名前をそのまま英語にしたような関数がたくさんあり、その関数の出力が単数か複数かも分からない。
- 関数に使用する引数も整理されていない命名ですので、何を引数に指定しているのか一目で理解ができない

自分はリファクタリングしながら、なんとかコードを解読しましたがとても大変でした。

さぁ、気を取り直して命名には気をつけてコーディング再開！

色々な機能を追加しながら、同じ機能を複数の場所で使用することもちらほら出てきました。

そんな時に出てきたのが、コンポーネント化。

AIに聞いて、コンポーネント化することに。。

初心者なので、当然コンポーネント化したい！なんていう社会人としてしたら怒られるような質問をしました（笑）

今思うと、AIも大変だっただろうと。。。

何はともあれ、コンポーネント化して参照先に追加して進めていきます。

ここでも問題発生！

今振り返ってみると、コンポーネント化しよう。といったもののコードが汎用性のない形で書きすぎて、コンポーネント化しても他のとこに使えないじゃん！という壁にぶち当たりました。

AIには、とりあえず動けば良い精神でコードを書いてもらっていたので、そりゃあそうなりますよね。。。

ここでも結局コードの意味を理解しながら、汎用性のある関数や命名に書き換えることに。。。

コード書く時間よりも、修正の方が長いですね。。。

実際の画面とは違いますが、なんとかコードを修正して以下のようにお願いしたら手順なども教えてくれました。

こんな感じで、苦労しながらも日々コーディングをしていますし、coplilotにはとてもお世話になっています。

以下に今回開発初心者がcoplilotを使用して、分かった便利な点、不便な点、所感を書いていきます。

結論：初心者よりも、知識のある経験者が使用する方が生産性は高い！

見出しでも書いてますが、私が感じたのは初心者が使用するよりも、コード全体の構成や流れをイメージできる経験者の方が生産性は上がる！と感じました。

まずは、良かった点・悪かった点を書いていきます。
※悪かった点は、私の使い方のせいもあるので、一概にダメという訳ではないということは、ご了承ください。

良かった点
- 関数や構文の知識が全くなくても、しっかり動くコードを教えてくれる。
- 前後の処理から、次にしようとしているコードが勝手に出てくる。
  - この関数書いたら、次はこれ書こう。と思っていたらレコメンド機能みたいに書きたいと思っていたコードが出てくる。
- よくあるエラーの処理や一般的なファイル構成や環境の問題などの解決が格段に早い
- 複数ファイルを参照して、コーディングしてくれる。
- コード生成の時に、解説みたいな説明付きで教えてくれる。
悪かった点
- プロンプトによって、出てくるコードにかなりの差が出てくる
- 最新のフレームなどは、指示しないと古い情報で返ってくる
  - 今回はVue3を使用しましたが、「vue３で教えて」の文言を抜かすと、Vue2で帰ってきて大変でした。
- 何も考えずに作成してしまうと、コードの汎用性や命名規則などが、間違ってはいないが。。。みたいなコードになってしまう。
- 時々、嘘のコードを教えてくる。
  - 書いてみて、動かなくて調べると全然違ったりしました。
- 複雑なエラー処理は解決できない場合がある。

「初心者よりも、知識のある経験者が使用する方が生産性は高い」

に関して詳しく感じたことを書いていきます。

大前提、経験者がコーディングをするときは行き当たりばったりにはならない。
- 頭の中などで、全体の構成や関数や処理を関連づけながら、命名したりコーディングしていく。
  - これはつまり、この関数はこれをして、この後のこういう部分で使うためのもの。など構造的に考えれているということ。
    - 細かくプロンプトで指示すれば、それに沿った回答が返ってくるので自分のようにメチャクチャなコードにはならない。
  - 細かくAIに指示することで、実際のコーディングをする部分が省けてかなりの効率化になるし、書きたいコードが明確かつ論理的なので修正する際も難易度は下がる。
コンポーネント化や汎用性、保守性などを考慮した設計やコードの指示ができる。
- 経験のあるエンジニアは、上記にもあるように経験や知識からコンポーネントの考えや汎用性のある形での実装、保守性の高いコーディングができるし見て判断できる。
  - つまりは、それをAIに指示して出たものをベースに自分でしっかり完成系に持っていける。
  - 関数やコンポーネントごとに、必要な役割を適切に配置できる。
複雑な事例への対応
- 今回の私のコーディングではあまりなかったが、大規模になると複雑なケースのコーディングもある場合もある。
  - そんな時に、AIにベースを書かせつつもエラーを補完できる人間の力はまだまだ必要そうであると感じました。

Copilotとコーディングをしてみて

細かく指示しないで丸投げでも意図を汲み取って動くコードが生成される部分や、

前後の流れから、次に書くであろうコードが出てくるのは感動ものでした。

しかしながら、機能を追加しながら「良いコードを作っていく」という意味では、初心者エンジニアがAIを使う。ではまだまだ力不足でした。
AIもどんどん進化しているので、将来は変わるかも知れませんが、今の段階では「考えられるエンジニア」がAIの時代に必要なエンジニアの姿なのかなぁと感じました。

AIの時代に取り残されなように、「考えられるエンジニア」を目指して日々精進したいと思います。

プロンプトの工夫や、こういう使い方するともっと生産性上がる、などあれば教えていただけると幸いです。

※本記事は、個人の意見であり、所属組織の公式見解ではありません。