ChatGPTで作ったウェブアプリを公開しました！【ストレスフリーで快適ツリー構造】

あおい | AI&ウェルネス

2024年4月1日 17:20

論理的思考において階層構造は基本です。

今回は簡単にツリー構造がかけるツールを公開しました！

上記リンクが制作したウェブアプリです。
早速使用して、この記事のアウトラインを記述してみましたが、思い通りの操作が実現しましたので、解説します！

製作の動機

MicrosoftのSmartArtでアウトライン

最初にnoteで記事を書こうとおもい、SmartArtでアウトラインを作ろうとしたのですが、なんか使いづらいなと思っていました。

個人的に使いづらい理由

PowerPointやExcelを起動するのがめんどくさい
階層の深さに限りがある
表示領域がせまい
もっとシンプルでかるく使いたい

作ってみよう

軽く調べても、Notionだったり新しく使いはじめるには高機能すぎて抵抗があります。

そこでこれくらいの機能ならすぐ作れるんじゃないかと思いました。

構想

以前つくったホームページを活用

以前このアカウントでホームページ製作の流れを記事にしました。

このサイト、サーバー契約までしたのに全然更新しないで放置していましたが、いずれなにかに活用したいと思っていました。

なので、どうせならこのウェブアプリ（とまで言えないなにか）を公開して、以前のホームページにリンクを貼って公開しようと考えました。

つくる過程を記事に

そんでもってChatGPTを活用したい方々のために記事にすればもっといいよねってことで本記事を書くことにしました。

どうやってChatGPTでつくったか

製作のながれ

全体の製作の流れは以下のようになります。

罫線のロジックの生成
html, cssファイルのコードの生成
ロジックをjavascriptに翻訳
ローカル環境でテスト＆調整
サーバーにアップロード（公開）
本記事の作成！

ここからは特にChatGPTとのやり取りにしぼって流れを説明しますね。

ChatGPTに送るさいしょのプロンプト

まず以下のようにプロンプトして、罫線の場合分けを考えさせました。
入力例と期待される出力結果を添えます。

使いたい罫線は4つです。

"└"
"├"
"　"
"│"

```
1a
	2a
	2b
		3a
			4a
		3b
1b
	2a'
		3a'
			4a'
		3b'
```
このような入力を下記の様に出力するプログラムを記述したい

出力結果
```
1a
├2a
└2b
　├3a
　│└4a
　└3b
1b
└2a'
　├3a'
　│└4a'
　└3b'
```

入力されるタブの数を行ごとに管理し、入力されたタブの数だけ"└", "├", "　", "│"が現れる

上記の場合タブ入力数は以下のようになるため、行ごとに階層および罫線が以下の数で表されることとなる
```
0
1
1
2
3
2
0
1
2
3
2
```
---
まずは"└", "├", "　", "│"の場合分けをして判定基準を明確にして