この記事の概要

日頃 AI を使ってコードを書くことはありますが、あくまで補助具として使っています。

非常にざっくり分ければ、次のようなタイミングで使います。

自分でも時間をかければ作れそうだけど、手っ取り早くプロトタイプを作りたいとき
細かな書式を忘れてしまって、補完してほしいとき
より良い書き方が無いか探しているとき

ただ、逆に自分がまったく分からないジャンルのコードを書くときに AI を使ったらどうなるのだろう？と気になったので実験してみた記事です。

最初は試していただけだったのですが、日頃の自分の使い方のスタンスとして気をつけたい箇所も見えてきたので、記事として投稿しました。

前提

私が書くコードはマークアップが大半、少しだけフロントエンド、という具合です。
業務では React を触ることが多く、個人的な趣味では Astro が多いです。

バックエンドはまったくと言って良いほど分かりません。

というわけで、バックエンドっぽい処理のあるものを作ろうと思いました。

作ったもの

Word ファイルを Markdown に変換する仕組みです。

非常に素っ気ない見た目ですが、今回の取り組みとしては「自分ができることはやらない」という感じなので、あえて触らないでいます。

できることは単純で、次の 2 つだけです。

Choose Fileを押す → Word ファイルをアップロードできる
Upload and Convertを押す → 変換された Markdown ファイルをダウンロードできる

作った流れ

Chat GPT 4o を使いました。

最初のプロンプト

Webアプリケーションとして、Wordファイルをmarkdownへ変換する仕組みを提供したいです
ユーザーが.docxファイルをアップロードしたら、.mdファイルがダウンロードされるようにしたいです
どのようなアプローチが良いでしょうか

そもそもどんなやり方があるかすら検討がついていないので、質問がアバウトです。

返答

WebアプリケーションとしてWordファイルをMarkdownに変換する仕組みを提供するためには、以下のようなアプローチが考えられます：

技術スタックの選定
バックエンドフレームワーク：Node.js（Express）、Python（Flask、Django）など
フロントエンドフレームワーク：React、Vue.js、Angularなど
ファイル変換ライブラリ：
Python: python-docxとmarkdownライブラリ
JavaScript: mammoth.js（Word文書をHTMLまたはMarkdownに変換）
ステップバイステップのアプローチ
1. フロントエンド
ユーザーインターフェースを設計し、ファイルアップロードフォームを提供します。

ファイル選択ボタン
アップロードボタン
2. バックエンド
アップロードされたファイルを受け取り、変換を処理するAPIエンドポイントを作成します。

Pythonの場合:
（以下コードが続く）

Python でのアプローチを勧められましたが、Python の開発環境すらありません。

Node が良いな……と思って、そのリクエストを出すことにします。

ただこの時点で、普段だったら「React + TypeScript を使う予定です。バンドラーは Vite です。」など、もう少しはマシな情報を入れられていると気がつきました。

知らないジャンルは、それだけで指示が曖昧になるということを実感しています。

次のプロンプト

Nodeを使いたいです
その場合どうなりますか？
プロジェクトのセットアップや依存関係のインストールから含めて教えてください

いつもはプロジェクトをセットアップするといったらcreate viteやらcreate-next-appやらばかりでした。

ただ、今回はどうなるのか全然分からなかったために「本当に 1 から教えてください」という気持ちでいっぱいでした。

返答

Node.jsを使用してWordファイルをMarkdownに変換するバックエンドを構築する手順を以下に示します。

プロジェクトのセットアップ
プロジェクトのディレクトリを作成:

sh
mkdir word-to-markdown
cd word-to-markdown

Node.jsプロジェクトの初期化:

sh
npm init -y

必要な依存関係のインストール:

sh
npm install express file-upload mammoth

（具体的な内容が続く）

多少は理解できる内容が出てきて良かった……と思ったのですが、提案されたライブラリに馴染みが無さすぎることに気がつきました。
（express はさすがに聞いたことはありましたが、その程度です）

普段だったら「これは最近更新されていないから、後から差し替えるかも」なんて予想がつくのですが、今回はまったくつきません。

恐怖です。

案の定調べていったら

Version: 0.0.0
Last publish: 10 years ago

これはダメです。
ただ、似た名前のライブラリがあるのかどうかも分からず……。

何度か聞いていたら「すみません express-fileupload でした」という具合で今もメンテナンスされて使用されている度合いも高いライブラリが出てきて事なきを得ましたが、危うく終わるところでした。

何度かのやり取りを経て

ライブラリについて問いただしている間もコード全文が送られてはきていて、express-fileupload とともに出されたコードをコピー＆ペーストしたら無事動きました。

もう少し修正のやり取りが発生するかと思ったのですが、今回は上手くいったようです。

ひとしきりやってみて

理解していないジャンルで使うのがこんなに難しいとは、と初めて実感しました。

まともなプロンプトが書けない
- 回り道の末に辿り着くことはできたものの、ちゃんとした知識があればもっと速く完了しただろう感がすごい
提案されたコードの質が分からない
- とりあえず動いているだけなのか、パフォーマンス的な面が考慮されているのか、判断できない
代替となるコードやライブラリの当てがなく、AI が良いものを返してくれるまで問答を続ける必要がある
- 自分の分かる箇所でいうと、例えば momentjs が提案されたらシレッと dayjs や date-fns に変えることもありそう
- しかし、この場合は判断できない
この後改修や運用できる気がしない
- どこがどのように動いているのか、雰囲気しか分からない
- 全文を AI に渡す以外の手段がない

「具体的な実装は AI に任せて、人間はディレクションなどに注力した方が良いのかも」と概念的に思っていましたが、指示をする内容についての知識は人並み以上に必要そうです。

巷では 100 万回くらい言われている内容だと思いますが、実体験を伴ったおかげで自分の無知にも向き合うことができました。

分からない部分・難しい部分をちゃんと認識してこそテクノロジーを活かせる気がして、自戒の念を込めて投稿しました。