ChatGPT使ってみた

はじめに

最近AI周りの動向が目まぐるしく変化しており、自分自身でもキャッチアップが追いついていないと感じていたので、備忘録としてAIについてまとめます。

強いAIと弱いAI

AIでよく話に聞くのが強いAIと弱いAIです。弱いAIは特定のタスクに特化して処理を行うAIであり、現在でも少なからず実装されています。囲碁や将棋の対戦AI、自動運転、iphoneのSiriなど最近ではだいぶなじみが出てきました。それに対して強いAIは限りなく人間に近いAIです。2023年3月現在では具体例として挙げられるような実例はありませんが、強いAIが実装されれば弱いAI以上に多くの作業がAIで代替可能になります。

ところが強いAIとまでは言えないものの、今までの中では強いAIに近い（一見そのように見える）AIがツールとして公開されました。それがChatGPTです。

ChatGPTのすごさ

ChatGPTはコンテンツを自動的に生成するAIの一種であり、質問などを文章として入力するとその回答を人間のように文章として出力するというものです。特定のものに特化しているAIに比べて出来ることの幅が広く、小説の執筆、プログラミングコードの生成、就活のESなど様々なことが出来ます。具体的な例を見ていきましょう。

小説の執筆

実際に小説を書く場合は入力方法を工夫し、複数回に分ける必要はあるでしょうが少なくとも今回の例では特徴を抑えたそれっぽいあらすじをかけてはいます。

プログラミングコードの作成

長いため画像は省略します

入力
私はフロントエンドエンジニアとして働いていますが、転職をしたいです。そのために自分をアピールするポートフォリオサイトが欲しいです。そのポートフォリオサイトをReactで以下の条件に従って記述してください。
・TypeScriptを使用してください
・ウェブサイトのスタイリングをstyled-componentsを用いて行ってください
・関数コンポーネントのみを使用してください
・スキルと経歴のタブがあるメニュータブを作成を作成してください
・背景は水色としてください
・出力するのはコードのみでよいです

出力

import React, { useState } from 'react';
import styled from 'styled-components';

const Container = styled.div`
  background-color: #a1caf1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
`;

const Menu = styled.div`
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
`;

const MenuItem = styled.button`
  border: none;
  background-color: inherit;
  color: white;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: white;
    color: #a1caf1;
  }
`;

const TabContent = styled.div`
  width: 80%;
  background-color: white;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  line-height: 1.5;
`;

const SkillsContent = () => (
  <TabContent>
    <h2>Skills</h2>
    <ul>
      <li>React</li>
      <li>TypeScript</li>
      <li>JavaScript</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </TabContent>
);

const ExperienceContent = () => (
  <TabContent>
    <h2>Experience</h2>
    <ul>
      <li>Front-end engineer at Company A (2018-2020)</li>
      <li>Front-end engineer at Company B (2020-2022)</li>
      <li>Freelance front-end engineer (2022-present)</li>
    </ul>
  </TabContent>
);

const App = () => {
  const [activeTab, setActiveTab] = useState('skills');

  const handleTabClick = (tab: string) => {
    setActiveTab(tab);
  };

  return (
    <Container>
      <h1>My Portfolio</h1>
      <Menu>
        <MenuItem onClick={() => handleTabClick('skills')}>
          Skills
        </MenuItem>
        <MenuItem onClick={() => handleTabClick('experience')}>
          Experience
        </MenuItem>
      </Menu>
      {activeTab === 'skills' ? (
        <SkillsContent />
      ) : (
        <ExperienceContent />
      )}
    </Container>
  );
};

export default App;

今回生成されたコードを用いたウェブサイトを下記ＵＲＬで公開しました。

実際にcreate-react-appで作成したテンプレート内のApp.tsxを修正したところ、一切修正することなく動作しました。何回か試したところ多少修正が必要なものもあるようですが、少し修正すれば動くものばかりです。今回はReact,TypeScript,styled-componentsというフロントエンドエンジニアが実際に使っていそうな構成でコードを書くように指示しましたが、動作するという点では全く申し分のない出来です。コードの生成まで試行錯誤含めて3分ほどだったので、簡単なポートフォリオサイトならすぐにできるでしょう。

就活のES

多少薄っぺらいですが、さらに細かな条件指定をすればよりそれっぽいものになるでしょうし、そうでなくても最初のESのベースにするのならばなしではないクオリティです

例を見てもらえば分かる通り、いままでのAIと比べて様々な状況に対応でき、人間のように回答しています。必ずしも正しい回答というわけではなく、分からないことなども多いようではありますが、そこそこの信用性とクオリティの回答を人間っぽく回答するということは出来ていると言えるでしょう。

AIと今後の展開

先ほどまではChatGPTに焦点を当ててきましたが、生成系AIを中心として他のAIも注目されています。画像生成であればNovelAI,Stable Diffusion、文章生成ではCatchy,AIのりべすとなどがあります。文章生成は画像生成に比べると盛んではない印象ですが、AIのべりすとを用いた作品を対象とする文学賞の開催などおもしろい試みも行われています。

生成系AIをはじめ、これからもAIは確実に進歩していくでしょう。しかし、それに伴って問題も多く発生することが予想されます。生成系AIが作成もしくは作成を補助した作品の著作権の扱いや、AIへの強い嫌悪感を持つ人の増加、フェイクニュースやネット情報の質の低下など考えられるだけでたくさんあります。今後は情報の質を適切に見抜き、正しい場面で注意してAIを使いこなせることが必要になるのではないかと感じました。