ChatGPT✖️アスキーアート🖼️：ChatGPTに古(いにしえ)のアスキーアートでプログラミングや技術を作図してもらうの巻(´∀｀*)
アスキーアートとは、5ちゃんねる（旧2ちゃんねる）で主に使われている作画方法である。
記号や文字を組み合わせて趣深い絵を描くことができる。
今回はそのアスキアート文化と最新技術であるChatGPTの知られざる活用方法を後世に伝えていきたい。
馬鹿め！それは残像だ！
-＝ ∧ ∧
-＝と( ･∀･)
-＝/ と_ノ
-＝_/／⌒ｿ
補足：
この記事は、図解力を高める！LLMとmermaidで楽しむテキストベースの図作成術というZenn記事に感銘を受け、15分で書いた駄文である。
そして、筆者ヌギーのZennでの記念すべき初めての投稿でもある。
一見は百聞にしかず
Dockerとはなんぞや？ 〜アスキーアートを添えて〜
まずはChatGPTへプロンプトを伝えないとお話にならない。
// prompt
プログラマーの間では環境構築にDockerが使用されていると聞きます。
Dockerに関する概念や用語や全体像を知りたいので、
それらをアスキーアートで関係性や構造などを図示し、
わかりやすく教えてください。
↓
それに対する彼（ChatGPT）の答えがこれだ。
Dockerは、アプリケーションの開発、配布、実行を容易にするためのプラットフォームです。Dockerを使用することで、アプリケーションとその依存関係をコンテナという軽量な実行環境にパッケージ化できます。これにより、異なる環境間でのアプリケーションの実行が容易になります。
以下は、Dockerの主要な概念や用語、及びそれらの関係性をアスキーアートで図示したものです。
-
イメージ (Image): アプリケーションとその実行に必要な環境を含む静的なファイル。Dockerfileからビルドされます。
-
コンテナ (Container): イメージを実行したもので、アプリケーションの実行環境。複数のコンテナは同じイメージから作成されることができます。
-
Dockerfile: イメージをビルドするための指示が書かれたテキストファイル。アプリケーションのビルド方法と実行方法を定義します。
-
Docker Hub/Registry: イメージを保存、共有するためのサービス。公開されているイメージをダウンロードしたり、自分のイメージをアップロードして共有することができます。
-
Docker Engine: Dockerの実行環境。イメージのビルド、コンテナの実行を行います。
アスキーアートでの図示:
[ Dockerfile ]
|
v
[ Docker Engine ] -----> [ Docker Hub/Registry ]
|
v
[ Image ]
|
| (run)
v
[ Container ]
- Dockerfileは、Docker Engineを使ってImageにビルドされます。
- ビルドされたImageは、Docker Hub/Registryにアップロードされることがあります。そこから他のユーザーがダウンロードして利用することができます。
-
Imageから、
docker runコマンドによってContainerが作成され、アプリケーションが実行されます。
この図は、Dockerの基本的なワークフローと各要素の関係性を示しています。アプリケーションの開発から配布、実行に至るまでの過程を、Dockerはシンプルかつ効率的にします。
何ということでしょう–––
文章では何にも頭に入ってこない殺伐とした文章に「アスキーアート」が入ることで、「Dockerfile」から何やかんやあってとにかく「Container」というものができることが丸わかり。
手前味噌で恐縮だが、筆者はさらに発展させて、Go + DB + Docker でAPIサーバー構築（作成）（at "Ask Nugey"ブログ）という記事にも、アスキーアートを添えて解説を行なっている。
Reactのメンタルモデル？ 何それおいしいの？ をアスキーアートで解説
手慣れてつきでプロンプトを書きます。
reactのメンタルモデルが文章だけではわかりづらくてわかりません。
アスキーアートを用いて、コンサルの人が解説するように分かりやすく教えてください。
↓
それに対する彼（ChatGPT）の答えがこれだ。
Reactのメンタルモデルを理解するために、アスキーアートと簡単な説明を用いて解説します。Reactはユーザーインターフェースを構築するためのJavaScriptライブラリであり、コンポーネントベースのアーキテクチャを採用しています。基本的なメンタルモデルを以下のステップで説明します。
- コンポーネントの概念:
[App]
/ \
[Header] [Main]
/ \
[Sidebar] [Content]
- Appは全体のアプリケーションを表すルートコンポーネントです。
- Header, Main, Sidebar, Contentは子コンポーネントで、Appによって組み合わされます。
- このツリー構造は、Reactアプリケーションのコンポーネント階層を示しています。
- PropsとState:
- **Props（プロパティ）**は、コンポーネントに渡されるデータで、主に固定の値や関数が含まれます。親コンポーネントから子コンポーネントへのデータの流れを表します。
[Parent]
↓ props
[Child]
- Stateは、コンポーネント内で管理される状態（データ）で、コンポーネントの振る舞いや表示内容を動的に制御するために使われます。
[Component]
↑ ↓
[ State ]
- データフロー:
- Reactでは、データは上から下へ（親から子へ）流れます。これを"単方向データフロー"と呼びます。
[Parent] --props--> [Child]
↑ ↓
[setState] [State]
- 親コンポーネントが持つstateを更新するには、setState関数を使用します。これにより、関連する子コンポーネントも再レンダリングされます。
- 再レンダリングの流れ:
- stateまたはpropsが変更されると、関連するコンポーネントは自動的に再レンダリングされます。
[Component] --update--> [State or Props]
↓
[Re-render]
このアスキーアートと説明を通じて、Reactの基本的なメンタルモデル、特にコンポーネント構造、propsとstateの役割、単方向データフロー、そして再レンダリングのメカニズムについて理解を深めることができます。Reactでは、これらの概念が組み合わさることで、効率的かつ宣言的にユーザーインターフェースを構築できます。
あぁ、図を見るだけで理解していなくても理解した気になれる。
最後に
日本の最高文化であるアスキーアートを忘れてはいけない。
これに共感した同士はぜひ、この記事をツイートで私ヌギーにメンション（@ask_nugey）付きで（テレ屋さんは無しでもおk）ツイートし普及活動に励んでほしい。
ヌギーのSNS（連絡先など）
Discussion