見出し画像

ChatGPTで簡単なWEBアプリをたった一日で開発して4ヶ月が経ちました

無神論者の神話

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

今回は簡単にツリー構造に変換できるツールをChatGPTで作ったので、公開しました！

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



製作の動機

MicrosoftのSmartArtでアウトライン

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

個人的に使いづらい理由

  • PowerPointやExcelを起動するのがめんどくさい

  • 階層の深さに限りがある

  • 表示領域がせまい

  • もっとシンプルでかるく使いたい

作ってみよう

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

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

構想

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

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

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

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

つくる過程を記事に

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

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

製作のながれ

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

  1. 罫線のロジックの生成

  2. html, cssファイルのコードの生成

  3. ロジックをjavascriptに翻訳

  4. ローカル環境でテスト＆調整

  5. サーバーにアップロード（公開）

  6. 本記事の作成！

ここからは特に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
```
---
まずは"└", "├", "　", "│"の場合分けをして判定基準を明確にして

ロジックのすり合わせ

4つの罫線の判断基準を生成してもらったら、ロジックを検証していきます。

つい数日前ChatGPTにアップデートが入ったので、とてもスムーズに分析してくれるようになりましたね！

ロジックができた！

検証をくり返しながら都度指示をあたえるといい感じあってそうな出力結果がでました。

このロジックで最低限ウェブアプリに必要な3つのファイルを作成していきます。

  • html

  • css

  • js (Javascript)

調整とサーバーにアップロード

PCでつかうならTabキーでいいけど、スマホで使うときはめんどくさいので、半角スペースでも同じように処理してもらいたくなりました！

できたのがこちらです。
再掲します。

これから

広告とかってつけたほうがいいかな？

階層構造ビジュアライザーとして公開しているウェブアプリ？ツール？に関して、重大な過ちやアドバイス、その他の知見等がありましたら、ぜひコメント欄で教えていただけると嬉しいです。

さいごに

もしこの記事が良かったと感じましたら、スキしていただけると跳ねて喜びます。

他にも「こんなツールがあればいいのに」みたいなことがあればコメントで教えてください！

いくらAIが発達しても、血の通った人間はこれからも心をうごかし続けると思います。

あなたに届いただけでも嬉しいことですが、拡散していただけたらもっと嬉しいです。

これからもよろしくお願いいたします！


この記事が気に入ったらサポートをしてみませんか？