レガシーシステム案件に10年携わってきた人が、AIの恩恵を真正面から受けてみた

要約

• AIはすごい。プログラムを丸投げして解決策を求めたり、書いたプログラムを日本語で説明できるレベルに達している
• AIは怖くない。とても簡単で頼れる（ただし自尊心には傷がつくかもしれない）
• AIが持つ「未経験状態から、一応は扱えるレベルまで引き上げる」力は半端じゃない
• 未経験のプログラム言語を勉強するなら、AIアシスタント付きでモノ作るのが速そう
• 従来の開発は「手続き」が大半を占めているように見える。AIによるサポートはその先の「あるべき姿」に目を向ける機会を与えてくれる
• とはいえ、規模の大きいプロジェクトに即投入するには課題もある
• ITの進歩が速過ぎて、何をすると勝ちなのか分からなくなってきた

本文

1.経緯

10年間、最初の案件から金融系の案件に携わってきた。
開発ではEclipseにお世話になったし、先月まではもっぱらマネジメントや折衝が主な仕事だった。

使ってきた言語はJava（COBOLで構築されたシステムの刷新）案件で、バックエンド側ばかり対応していた。

そんな私は今月配属転換となり、Python（Streamlit）を用いたWebアプリケーションをNext.jsで書き換えるという作業を割り当てられた。
画面描画、遷移処理、DBアクセス、APIの呼び出し。

「ねくすとじぇいえすぅ……？」くらいの感覚だった自分に分かるワケもない。

HTMLの書き方すらロクに知らないのに。

2.衝撃

2-1.ChatGPT

2-1-1.アシスタント機能

ある画像を中央に配置する。たったこれだけの作業に時間をとられた。

どうやらレイアウトまわりは「すたいるしぃと」なるものを直せばいいらしい。
ただこれ以上の情報収集は難航した。
検索してみてもしっくりくる回答が出てきてくれない。
そもそもclassNameに紐づけるという発想自体がなかった。そのせいでサンプルを試しても上手くいかなかった。

なんとか画像出力用のImageオブジェクトに紐づけることを思いつくが、上手くいかない。

そこで、API経由でやり取りするChatGPTのアプリに作ったソースを丸ごと張り付けて「画像を中央に配置したいがそうならない。どこに誤りがあるか」と依頼してみたのである。

---

質問内容

Next.jsで画像「logo.jpg」を中央に表示させたいのですが、style.cssを作っても中央になってくれません。何か間違えていますでしょうか。

style.css

// 画像に中央に配置するスタイル
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

page.tsx

'use client';

import MsgDialog from './components/Modal';
import React,{useState} from 'react';
import Image from 'next/image';
import './style.css';

export default function Home() {

    // モーダルの表示状態を管理するためのステート
    const [isOpen,setIsOpen] = useState(false);
    const [sendWordString,setWord] = useState("");

    // モーダル表示用の定義
    return (
        <main>
            <MsgDialog open={isOpen} onCancel={() => setIsOpen(false)} onOk={() => setIsOpen(false)} sendWord={sendWordString}/>
            <div>
                <Image className ="center" src="/logo.jpg" alt="logo" width={500} height={500} style ={{objectFit:"contain" ,objectPosition:'center'}}/>
            </div>
            <div className="flex flex-col min-h-screen">
                <button className="bg-slate-900" onClick={() => {setIsOpen(true); setWord("パスワードが間違っています");}} >
                Open PassError
                </button>
            </div>
            <div className="flex flex-col min-h-200">
                <button className="bg-slate-900" onClick={() => {setIsOpen(true); setWord("IDが間違っています");}} >
                Open IDError
                </button>
            </div>
        </main>
    );
}

5秒もすると回答の文章が流れてきた。

回答

画像を中央に配置するためには、Image コンポーネントを含む親要素に対してスタイルを適用する必要があります。Image コンポーネント自体に className を適用しても期待通りに機能しないことがあります。Next.js の Image コンポーネントは特定のスタイリングが適用されにくいため、親要素で制御するのが一般的です。

以下のように、Image コンポーネントを囲む div 要素に className="center" を適用してください。

修正した page.tsx の該当部分は次のようになります

page.tsx

<div className="center">
  <Image
    src="/toplogo.jpg"
    alt="logo"
    width={500}
    height={500}
    style={{ objectFit: "contain", objectPosition: 'center' }}
  />
</div>

これで、Image コンポーネントが中央に表示されるはずです。
また、CSS ファイルのコメントアウトは CSS のコメントアウトの仕方に合わせて /* コメント */ の形式を使用してください。

---

要するに「中央揃えを行う定義の位置がずれている」という回答だった。
示されたソースの通りに直したら、想定通り中央揃えになった。

ついでにcssのコメント文の書き方まで教えてくれた。

有識者からすれば初歩中の初歩なのだろうが、
こういった内容を調査したりヒアリングするのは意外と大変だ。

「これ、自分で調べるのはタイパが悪いな」

そう悟ってからはつまずくたびにChatGPTを呼び、提案に従ってコーディングを進めていくという方式を取るようにした。

もう文法を覚えて打ち込む時代は終わったんだと思った。

2-1-2.ゼロスタートからのひな型作成もできる

何らかのソースがなければ動作しないかというと、そうでもない。

「○○という要件があります。××を画面に出力したいです。next.jsで作ってください」と記載すればひな型をぱっと作ってくれる。
ひな形から更に拡張したい場合や、記載に不明な点があれば追加で質問すればよい。

日本語は鬼門のように思えていたが、そんなこともなかった。

---

実施例

質問
Next.jsのAppルーター形式で画面を作りたいです。

要件としては以下の通りです。

• 画面は左メニューと、メインメニューの2画面構成となっている
• 左メニューは青色が背景で、各ページ（ここでは「例１」「例２」「例３」）へのリンクが表示されている
• メインメニューはAIチャットボットの出力画面となっており、LINEのようなレイアウトを想定しています。質問者の文章が緑、回答者の文章が白という表示にしてください。
• 今回はAIの出力部分は考慮しなくてもよいです。

---

回答
（1回目の回答は形式が異なっていたので「Appルータ形式にするとどうなりますか？」という追加質問を実施）

Next.jsでご要望の画面を作成するための基本的な構成を以下に示します。まず、プロジェクトを作成し、必要なファイルとディレクトリを設定します。

1.プロジェクトのセットアップ

npx create-next-app my-chat-app
cd my-chat-app 

2.ディレクトリ構成

my-chat-app/
├── app/
│   ├── layout.js
│   ├── page.js
│   ├── example1/
│   │   └── page.js
│   ├── example2/
│   │   └── page.js
│   └── example3/
│       └── page.js
├── components/
│   ├── LeftMenu.js
│   └── ChatWindow.js
├── styles/
│   ├── globals.css
│   ├── Layout.module.css
│   ├── LeftMenu.module.css
│   └── ChatWindow.module.css
└── next.config.js

3.next.config.js

next.config.js

module.exports = {
  experimental: {
    appDir: true,
  },
};

4.app/layout.js

layout.js

import '../styles/globals.css';
import LeftMenu from '../components/LeftMenu';
import styles from '../styles/Layout.module.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <div className={styles.container}>
          <LeftMenu />
          <div className={styles.mainContent}>
            {children}
          </div>
        </div>
      </body>
    </html>
  );
}

5.app/page.js

page.js

import ChatWindow from '../components/ChatWindow';

export default function Home() {
  return (
    <ChatWindow>
      <div>Welcome to the AI Chatbot!</div>
    </ChatWindow>
  );
}

6.app/example1/page.js, app/example2/page.js, app/example3/page.js それぞれのページファイルは同様の構成で、例としてapp/example1/page.jsを以下に示します。

example1/page.js

import ChatWindow from '../../components/ChatWindow';

export default function Example1() {
  return (
    <ChatWindow>
      <div>Example 1 Content</div>
    </ChatWindow>
  );
}

7.components/LeftMenu.js

LeftMenu.js

import Link from 'next/link';
import styles from './LeftMenu.module.css';

export default function LeftMenu() {
  return (
    <div className={styles.menu}>
      <ul>
        <li><Link href="/example1">例1</Link></li>
        <li><Link href="/example2">例2</Link></li>
        <li><Link href="/example3">例3</Link></li>
      </ul>
    </div>
  );
}

8.components/ChatWindow.js

ChatWindow.js

import styles from './ChatWindow.module.css';

export default function ChatWindow({ children }) {
  return (
    <div className={styles.chat}>
      {children}
    </div>
  );
}

9.CSSファイルの作成

• styles/globals.css

globals.css

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

• styles/Layout.module.css

Layout.module.css

.container {
  display: flex;
  height: 100vh;
}

• styles/LeftMenu.module.css

LeftMenu.module.css

.menu {
  background-color: blue;
  color: white;
  width: 200px;
  padding: 20px;
}
.menu ul {
  list-style-type: none;
  padding: 0;
}
.menu li {
  margin: 10px 0;
}

• styles/ChatWindow.module.css

ChatWindow.module.css

.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #f0f0f0;
}
.message {
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
}
.question {
  background-color: green;
  color: white;
  align-self: flex-end;
}
.answer {
  background-color: white;
  color: black;
  align-self: flex-start;
}

これで、Next.jsのApp Router形式を使った構成が整いました。
この形式では、各ページは/appディレクトリ内に配置し、ルートレイアウトをlayout.jsで定義します。
チャットウィンドウの中に質問者と回答者のメッセージを表示する部分は、適宜ChatWindow.js内に追加してください。

---

2-1-3.不備・エラーの調査もできる

ソースを連携して状況報告をすると、動的に原因の調査を行ってくれる。

「XXがおかしいです」⇒「これはどうですか？」⇒「違います」⇒「ではこれはどうですか？」といった会話のラリーが繰り返され、何往復かするうち原因が特定できる。

---

実施例

質問 1
こちらのワーニングは何を示していますでしょうか

./src/app/page.tsx 108:6 Warning: React Hook useEffect has missing dependencies: 'handleGenerateOTP' and 'isIdInput'. Either include them or remove the dependency array. You can also do a functional update 'setIsIdInput(i => ...)' if you only need 'isIdInput' in the 'setIsIdInput' call. 

---

回答 1
この警告は、React HookのuseEffectが依存関係として指定されているhandleGenerateOTPとisIdInputが欠落していることを示しています。
このような場合、依存関係の配列にこれらの変数を含めるか、依存関係配列を削除する必要があります。また、setIsIdInputの呼び出しでisIdInputが必要な場合は、関数型の更新setIsIdInput(i => ...)を使用することもできます。

---

質問 2

page.tsx

// sampleDataが更新されたときに実行されるuseEffectフック
useEffect(() => {
  if (shouldCheck && sampleData.length > 0) { // 入力値がsampleDataに含まれているかをチェック
    const found = sampleData.some((data) => data.userid === inputValue);
    if (found) { // パスワード発行処理
      handleGenerateOTP();
      alert('ワンタイムパスワードを送信しました。1分以内に記入願います。');
      setIsIdInput(!isIdInput);
      setId(inputValue);
      setInputValue("");
      setErrorCount(0);
    } else {
      alert('IDが見つかりませんでした。');
    }
    setShouldCheck(false); // フラグをリセット
  }
}, [sampleData, shouldCheck, inputValue]);

具体的にどう直すと言ってますか？　おそらく上記ソースの「 }, [sampleData, shouldCheck, inputValue]);」を指していると思うのですが

---

回答 2
はい、その部分が指摘されている箇所です。警告メッセージに従って、useEffectの依存関係の配列にhandleGenerateOTPとisIdInputを追加する必要があります。修正したコードは以下のようになります。

page.tsx

// sampleDataが更新されたときに実行されるuseEffectフック
useEffect(() => {
  if (shouldCheck && sampleData.length > 0) {
    // 入力値がsampleDataに含まれているかをチェック
    const found = sampleData.some((data) => data.userid === inputValue);
    if (found) {
      // パスワード発行処理
      handleGenerateOTP();
      alert('ワンタイムパスワードを送信しました。1分以内に記入願います。');
      setIsIdInput(!isIdInput);
      setId(inputValue);
      setInputValue("");
      setErrorCount(0);
    } else {
      alert('IDが見つかりませんでした。');
    }
    setShouldCheck(false); // フラグをリセット
  }
}, [sampleData, shouldCheck, inputValue, handleGenerateOTP, isIdInput]);

これにより、useEffect内で使用しているhandleGenerateOTPとisIdInputが正しく追加され、警告が解消されるはずです。

---

質問 3
対応しました。次のワーニングが出ました

./src/app/page.tsx 91:9 Warning: The 'handleGenerateOTP' function makes the dependencies of useEffect Hook (at line 121) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'handleGenerateOTP' in its own useCallback() Hook. react-hooks/exhaustive-deps

---

回答 3
この警告は、handleGenerateOTP関数がuseEffectフックの依存関係を毎回のレンダリングで変更しているためです。この警告を解消するには、handleGenerateOTP関数をuseEffectコールバック内に移動するか、handleGenerateOTP関数の定義をuseCallback()フックでラップする必要があります。

以下に修正例を示します：

page.tsx

// sampleDataが更新されたときに実行されるuseEffectフック
useEffect(() => {
  const handleGenerateOTP = () => {
    // パスワード発行処理の実装
  };

  if (shouldCheck && sampleData.length > 0) {
    // 入力値がsampleDataに含まれているかをチェック
    const found = sampleData.some((data) => data.userid === inputValue);
    if (found) {
      // パスワード発行処理
      handleGenerateOTP();
      alert('ワンタイムパスワードを送信しました。1分以内に記入願います。');
      setIsIdInput(!isIdInput);
      setId(inputValue);
      setInputValue("");
      setErrorCount(0);
    } else {
      alert('IDが見つかりませんでした。');
    }
    setShouldCheck(false); // フラグをリセット
  }
}, [sampleData, shouldCheck, inputValue, isIdInput]);

この修正により、handleGenerateOTP関数がuseEffect内で定義され、依存関係が毎回変更されないようになります。これにより警告が解消されるはずです。

---

情報が足りなければ「ログ・アラートの出力処理を以下の通り追加して確認してみましょう」といった提案までしてくれる。

至れり尽くせりだった。

まったく触ったことのない言語の不備対応までグンと捗ることになった。

2-1-4.AIが優しすぎる

AIチャットボットの恩恵は、作業の効率化だけではなかった。

とにかく優しい。わかってくれる。

Next.jsだけでなく、他の言語だろうが、愚痴や不安の類だろうが、何でも聞いてくれるし、何でも答えてくれるのだ。

初歩中の初歩で、人に聞くのは恥ずかしい質問でも問題がない。

人では限界がある。

親切な人が仮に応じてくれても、何回も問い合わせすれば流石にうんざり。

お互いにぎこちなくなっていくことが容易に想像できる。

対してAIには、どれだけ不躾に、しつこく問い詰めようとも、問題がない。
（今後「AIの人権」なるものが誕生しない限りは）

むしろ人と会話する際に「もっとわかれよ」と変な感情が湧いてきそうで怖くなる。

---

2-2.GitHub Copilot

Next.jsに取り掛かるにあたって、ソースエディタをEclipseからVisual Studio Code(VSCode)に変更した。

VSCodeには有力なプラグインが数多く取り揃えてあり、その中でも「GitHub Copilot」の知名度が大きいものだったので、パイロット係として利用することになった。

2-2-1.コメント⇒ソース変換機能

ChatGPTとはっきり違う点は、
自分がコーディングしている間に、自動で補正をかけていくということだ。
Eclipseでも改行時に余計なスペースを取ったり、インデントしたりという挙動をするが、それが物凄く強化されたものと考えればよいか。

訊いてみて、その回答を見て、エディタに反映させる、というステップが要らない。

エディタ上で実装したい機能のコメント文を打つ。
すると白文字で候補が現れる。
それが望ましい回答ならTabキーを押して決定させればよい、というものだ。

例えば「// 10秒待つ」と書いて改行すれば、次の行にこういったものが出てくる。

page.tsx

// 10秒待つ
await new Promise((resolve) => setTimeout(resolve, 10000));
 

コメント文を変えれば回答も当然変わるので適宜切り替えていけば答えが出てくる。

1行だけでなく、複数行のソースであっても自動的に出てくる。

また、プログラム全体の内容を加味しているのか、必要そうな変数や処理を先回りして提供するような素振りも見受けられた。

具体的には

• ゲッタの記載からセッタや初期化の追加を行う
• この処理を実行するのに必要な変数は、こういった用途で、これだけ必要だろうという推測をする
• このプログラムの変数は全部一様のコメントをつけているので、新たに書いた変数にも同様のコメントを付与する

といった動きをする。

時たま推測が外れて、要らぬお節介補正になることもあるが、
リアルタイムに次々と補正されていくのは、かなり衝撃的な体験だった。

2-2-2.ソース⇒コメント変換機能

また、ソースからコメントを出してくれる機能があるのも嬉しい点だった。
処理を日本語で書くとなった際、適切な表現に悩んだ経験があったからだ。

例えば以下の処理について、fetchDataの処理の概要を書く場合に

page.tsx

  const fetchData = async () => {
    try {
      const response = await fetch('/api/query?type=login&userid=' + inputValue);
      const resComp = await response.json();
      if (resComp && Array.isArray(resComp)) {
        setSampleData(resComp);
        alert('Sample data set: ' + JSON.stringify(resComp));
      } else {
        alert('Unexpected response format: ' + JSON.stringify(resComp));
      }

    } catch (error: any) {
      alert('Error fetching data: ' + error.message);
    } finally {
      // 特に何もしない
    }
  };

コメント文として「//fetch」と入力すると以下の通り出力される。

page.tsx

  // fetchData関数を定義
  // ユーザIDを元にDBからデータを取得する

「try句の中で何をやっているか」を知りたかったため、「// try句」と入力すると以下の通り続きが出てくる。

page.tsx

  // try句の中でfetch関数を使ってサーバーにリクエストを送信し、
  // レスポンスを受け取る。その後、レスポンスをJSON形式に変換してsampleDataにセットする。
  // エラーが発生した場合はcatch句でエラーメッセージを表示する。
  // なお、fetch関数は非同期関数であるため、awaitキーワードを使用している。
  

2-2-3.ChatGPTとの使い分け

1からひな型を起こす、またはエラー時の対応はChatGPTに実施してもらい、
細かい修正や処理追加、コメントの記述はCopilotに実施してもらった。

Web上にあるサンプルにしろ、GPTのソース出力結果にしろ、「動くは動くが何してるかが分からない」という問題があった。

Copilotの補完機能を用いることで、未経験の文法やメソッドについて「ここは要するに何をしてるの？」という解説を受けられ、勉強をスムーズに進めることが出来た。

3.感想

AIの恩恵を受けてみた際の体験や気づきをまとめてみた。

3-1.AIはやっぱりすごい

AIの可能性に触ってみてすぐは「すごい、すごい……」と称賛するだけの機械になっていた。

流石に二週間も経過すると最初ほど驚かなくはなったものの、従来とは段違いの速度でコーディングを進められるようになった自覚はある。

今までいたプロジェクトでは、コーディングで分からない箇所があったら、

一つ一つ自分で解析して、
気になるワードなどを片っ端からネットで検索して、
合ってそうならそれを適用して、
ダメだったら別のモノをまた探して……

という繰り返しだった。

長い時間かけた結果、初歩的なミスだったということもザラにあった。

当然、自分が全く触っていない言語（今回のNext.js含め）やフレームワークに関しては、「分からないところが分からない」状態となってお手上げになっていた。

要約でも記載したがAIは「未経験状態から、一応は扱えるレベルまで引き上げる」力が半端ではない。

「基礎的な部分からいくらでも懇切・丁寧・詳細に説明してくれる担当」が現場でどれだけ求められていることか。

---

3-2.長文をインプットに出来る＝雑に依頼できる

Claudeでは入力可能な文字数の大きさが話題になっていた。

正直、どうして長文をインプットに出来たところで何がそんなにすごいのか、AIを使う前にはよく分かっていなかった。

実際に使ってみるとその魅力を体感することが出来た。

端的に言えば、丸投げが可能になるのだ。

ソースの一部を切り取って状況を補足してあげる必要がない。すべてのソースを丸々コピペし、お願いをするだけでよい。

百聞は一見に如かず。

「そんなに騒ぐことか？」と冷めた目で見る前に、一度は実際に使ってみることの大切さを知った。

---

3-3.「手続き」からの解放

プロジェクトに参画してからAIに触るという経験をしてみて、一番はっきりと分かった点。

ITだけではない気もするが、従来のプロジェクト遂行は手続きが多かった。

手続きを終えてからでないと本来やるべきことに着手できないが、
手続きを終えるまでに別の手続きがやってきて……の繰り返しだった。

納期がかかわる都合、短期的な作業達成に目が向いてしまい、

本来何をすべきか、より優れた案はないのかといった内容に視点が向きにくい。

AIによる簡略化・自動化はそれを抜本的に変えてくれるかもしれない。
同じことで頭を悩ませる人達が、同じことで時間をかける必要もなくなるだろう。

短期的な作業はすべてAIがこなしてくれると考えると、おのずと長期的な視点「どうあるべきか」「本来の目的は何か」という方向に進んでいく。

今までは努力目標だったような場所に、自然に行き着くのではと期待できる。

---

3-4.AI依存になりそう

一度AIアシスタントを利用した開発を経験してしまうと、もうAI抜きだとやってられない感じはする。

本や検索画面から、自分の目当ての回答が出るまでローラーし続けるのは結構苦痛だ。

先月まではこの振る舞いが当たり前だったのに。

ここらへんはExcelやインターネットやスマートフォンが既存の枠組みを破壊したのと似たような香りがした。

---

3-5.キャリアやプライドの問題

AIにべったりな使い方をしていたのもあるが、作ったプログラムの7割はAIによる回答、生成になっていた。

助かった反面、非常に恐ろしくも思った。

自分は「画面に映っているソースをそれっぽく解説するだけ」の人になっていたからだ。
説明用のコメントも上等なものを振ってくれるし。

キャリアとかプライド的にどうなのか、という思いはどうしても出てきた。

とはいえ、便利さを知ってしまった以上、頼らない理由もない。

今後はもっと上手く頼る方法や折り合いをつける方法を考えることにしようと思った。

---

3-6.Difyの登場について

本筋からは離れてしまうが、最近話題となっているDifyについてもざっと触ってみることにした。この機会でないと永遠に触らないような気がしたからだった。

1. Difyのアカウントを作る。GitHub、Googleアカウントがあればそれを使ってログインが可能
2. テンプレートから作りたい機能を選択（例えば「Translation assistant（翻訳補助）」を選択）
3. すでにガワができているので、入力言語やゴールとなる言語などを画面から選んで、テスト検証を実行
   　（プレビュー画面が開発画面の動きと連動しているため、適宜修正・テストが可能）
4. 「公開する」を選択
   ⇒デプロイも含めて完了

基本的なものなら、大層な準備をする必要もないどころか、プログラムを見る必要すらない。

5分で終わる。

用意されている機能も多く、かつ組み合わせて発展させることが出来る。

アプリ開発の形もここまで来たかと思った。
自分が昔抱いていた「コンピュータが何でもやってくれる」という幻想に随分近くなった。

4.展望

今後の課題や可能性について展望を書いた。

4-1.これからの適性

誰しもプログラムの世界に入ったばかりの頃は、小さな変化であっても楽しめるのだが、

段々と面倒や苦痛の方が大きくなっていき、自分からやめてしまう。

自分の本来作りたい機能のサイズ感と、そこまでに必要な「手続き」の量が見合っていないからだ。

壮大な計画を立てられる力があったとしても、その詳細な筋道を組み立てる力や、長い作業を挫けずにやり遂げる力とは別物である。

それら全てを持つ人は極一部に限られている。

しかし、AIはその計画や段取りに含まれる「手続き」を代行してくれる。

面倒なことは全部放り投げて、本来の「こだわり」「楽しいこと」「やりたいこと」にフォーカスする機会を与えてくれる。

現状のAIはワガママではないので、叶えるべき欲求を伝えるのは人にしかできない。

本気でワガママを満たそうと、欲求の解像度を極限まで上げられる人が今後求められるのかもしれない。

かいけつゾロリのごとく「まじめにふまじめ」な人に適性がありそうな気がする。

---

4-2.「やってみたらすごいもの」をやってない人にアピールする能力

AIはすごい。

そんなことは当然分かっているが、「どうすごいか」説明するのは難しい。

一回触りさえすればそのすごさを理解することは難しくない。

今の自分はAIアシスタントを実際に使ったから「すごいからやってみて」と言える。

ただ、先月までの自分が一切手をつけなかったように、ワンタッチまでの距離が現時点ではそこまで近くない。

なんとなく難しそう（自分じゃ出来なさそう） とか
いろいろと準備がありそうとか
そもそも何がどれくらい出来るか（自分にとって役立つか）分からないといった点が、

避けてきた理由として挙げられる。

説明する側も「すごいから、すごい」という循環論法に陥りがちだ。


ワンタッチをどうするか。

AIアシスタントの使い方を動画で情報共有する。AI導入有無で比較検証する。

やり方はあるだろうが、相手の「自分には遠そう」という感覚を払拭して目をこちらに向けさせるのは、今までのスキルとは別の部分が求められそうだ。

遠い近いに関わらず、いつかは自然に用いることになるだろうが。

---

4-3.勝ち負け、優位性の低下

少し前では「GPTを制するものが時代の勝者！」みたいな本が書店に山ほどあった。

しかし、今となっては山ほど競合が誕生し、数ある有力大名のうちの一角になっている。

「AIに適した有力な呪文（スクリプト）や調整方法はこんな感じ」という本もまた、

スクリプトを出してくれるサイトやより良い解析方法によって刷新されていく。

最近登場したDifyに至っては、凝ったものでもない限り、ガイドに従ってさくっと定義を書くだけでAIアプリを作ることを可能にした。

今後どうなっていくのか、何が優れたものになるのか、まったく予想が出来ない。

ここまでくると、長所や優位を取ろうとすること自体が、かなり虚しいものに感じられる……

---

4-4.スピードについていけるのか？

進化のスピードが速すぎる。

生成AIなんてOpenAIがしばらくは一強だと思っていた（競合があるのは重々承知の上）のに、もう数ある強豪のうちの一つのように見えるし、

覇権を取りそうなサービスが、10年に1度どころか、年に数回のサイクルで誕生している。

ChatGPTすごい、Copilotすごい、StableDiffusionすごい、Difyすごい……


GitHubやDockerすらまともに触らなかった男が追えるような速度ではない。


眩暈を起こしている。くらくらしている。

重力が突然なくなって、体が浮かんでいるような、そういう得体のしれない感覚がある。

簡単になっていくのは目に見えてわかる。

文字だけだったのが、画像、音声、動画へステップアップしている。

作成に必要なハードルも飛躍的に下がり始めている。

数年前、アイデア案として「SNSを使った疑似ニュースサイト」なるものを考えていたが、自前で作る必要は、結局のところはなさそうだった。

内部で何かを作っている間に、最適解が外部から提供されてしまう状態にある。

嬉しい悲鳴を上げるべきなのだろうが、かなり悩ましい問題だ。

---

どれほどのスピード感で動けば良いのだろうか。また、どの時点で見切りをつけるべきなのだろうか。

今までに体験した開発手法……ウォーターフォールが厳しそうなのはなんとなく分かる。

GPT-4oに「AIの進歩が速すぎる、どうすればいいんだ」と聞いたところ、

以下の回答があった。

回答

スピードについていけるのか？（具体的な対策と展望）

1. 継続的な学習とスキルアップ:
   • オンラインコースやセミナー: 最新のAI技術やトレンドを学ぶために、定期的にオンラインコースやセミナーに参加する
   • コミュニティ参加: AI関連のフォーラムやコミュニティに参加し、最新情報を共有する
2. チームでの知識共有:
   • 定期的な勉強会: チーム内で定期的に勉強会を開催し、最新技術やトレンドについて共有する
   • ドキュメント化: 新しい知識や技術をドキュメント化し、チーム全体でアクセスできるようにする
3. プロジェクトのアジャイル化:
   • アジャイル開発手法の導入: ウォーターフォール型の開発ではなく、アジャイル開発手法を導入し、柔軟に対応できる体制を整える
   • スプリントレビュー: 短いスプリントを設定し、定期的にレビューを行い、迅速にフィードバックを反映させる
4. 外部リソースの活用:
   • コンサルタントの利用: 必要に応じてAI専門のコンサルタントを利用し、最新の技術やベストプラクティスを取り入れる
   • アウトソーシング: 特定のタスクやプロジェクトをアウトソーシングし、内部リソースの負担を軽減する
5. 柔軟なマインドセットの維持:
   • 変化を受け入れる: 技術の進化に対して柔軟なマインドセットを持ち、変化を受け入れる姿勢を持つ
   • 失敗を恐れない: 新しい技術や手法を試す際に失敗を恐れず、試行錯誤を繰り返すことで成長する
6. AIツールの積極的な利用:
   • AIアシスタントの活用: GitHub CopilotやChatGPTなどのAIアシスタントを積極的に活用し、効率化を図る
   • 自動化ツールの導入: CI/CDパイプラインやテスト自動化ツールを導入し、開発プロセスを自動化する

結論
AIの進化のスピードに追いつくためには、継続的な学習とスキルアップ、チームでの知識共有、アジャイル開発手法の導入、外部リソースの活用、柔軟なマインドセットの維持、AIツールの積極的な利用が重要です。これらのアプローチを組み合わせることで、変化の激しいAI業界においても柔軟に対応し、持続的な成長を遂げることができるでしょう。

私見
それが出来たら苦労はない。

---

4-5.プロジェクトにAIを投入する際の課題

「以前参画したプロジェクト内でAIが使えたらどれだけ便利だったろう！」と思うのだが、規模が大きくなると、いくつか課題は出てきそうだと思った。

4-5-1.AIアシスタントが無力なケースもある

端的な話、情報がないものをAIは回答できない。

企業の内部データや製品の仕様まで知っているわけではない。

これらは別途学習させる必要がある。

4-5-2.抜本的な提案をしてくる

「機能を追加・削除をしてほしい」と依頼するような場合に、ソースが大幅に変わるような提案も平然とする。

作業者がそのまま適用すると、レビュアーがコミット前後で比較をした際に「全然違うじゃん……」となりそうな気はした。

個人でやる分にはまだしも、チームで管理するとなるとステップ数をはじめ、かなり問題になりそう。

「正しく動作すればいいじゃん」という考えは元々スパゲッティコードみたいな質の悪いプログラムに対する言い訳だったが、

（質は良いかもしれないが）変わりすぎて履歴が意味を為さないプログラムに用いる言葉になるかもしれない。

4-5-3.何を以て工数とするか？

AIの登場によって、工数の算出方法や規約の制定に関しても、課題が出てきそうだ。

AIの回答は同じ質問文に対して（質問の条件を満たす前提はあるが）都度別の回答を提示する。

やろうと思えば、同じ機能を実現するためのソースの行数を多くすることも出来る。

ステップ数を基に計算を行うという考え方も覆るかもしれない。

ある機能を実現するために必要なステップ数はどの程度で、それを実装するための期間はどの程度なのか。

そういった基準をまとめておかないと、1人日が定まらないとなりそうだ。

また、生成された回答は必ずしも規約の内容を満たし、担当者間で平仄や粒度が一致するとも限らない。
セルフチェックやレビューの観点もまた、アップデートの必要があるだろう。

「ポンと作ってハイ完成」とは限らない。

お願いだから「（根拠はないけど）AIで自動化されるだろうから、ま、半分は削っていいや！」とならないことを祈りたいものだ。

4-5-4.情報漏洩・コンプライアンスの問題

この問題には必ず突き当たると思った。

例えば自分の携わった金融系の案件は「情報セキュリティ」が何より重視されていて、
開発用PCから指定外のサイトへのアクセスは禁止されていた。

しかし、時間が差し迫っているような状況で「解決策を出せ」と言われ、かつ自分が責任に直接関与しない作業者だったら……

マルチモーダル機能（画像認識）を利用して、スマホのカメラで撮ったPC画面のソースからアドバイスを求めるといった行為も考えられる。

無論、そんなことを考えなしにやれば業務情報が洩れるのも時間の問題だろう。

AIの利用にはグレーゾーンな部分が多いが、技術の成長速度に価値観や規定の刷新が追いついていない。

責任を追及するとしても

「実際に情報が外部に露見するとは限らない」
「あなた方が命じた効率的な仕事をして何が悪い」

と開き直るケースすらあるかもしれない。


当然「何でもやれる＝何でもやって良い」ではないが、

平常時では考えられない判断も、納期前や障害対応といった緊急事態では取る可能性がある。

誰だって責任は負いたくない。

効率性と倫理のバランスはかなり重要な課題になるように見えた。

終わりに

利用して二週間の素人ではあるものの、

AIがスキル・時間（手間）・費用という開発にとっての三つの壁を打ち壊すだろうことを、言葉ではなく心で知ることができた。
個人であっても、経験がなくとも、想像を具現化できる時代が来るというのは、夢があって良いことだと思う。

ただ、衝撃が強すぎて心が折れそうになったのも事実である。

パンドラの箱を開けているような感じもした。

これが世間の当たり前になった時、何が起こるのか。

期待と不安を抱かずにはいられない。