元素周期表3D

物理の日からの続き

橋本大也さんといえば，読書家であり海外の本を原語で読み漁っていた。ところが最近では，AIによるバイブコーディングの伝道師と化している。Claude（が一押しらしい）の周期表ウェブアプリが，たった5つのメッセージだけでできたというので追試した経緯が以下。

(1) Claudeにて

橋本さんの書いていたプロンプトはこれ。

【元素表を作って】

【各元素をクリックすると、その元素の用途の解説とイラスト（ピクトグラム）が表示されるようにして】

【詳細情報を下部ではなくてホバー表示させる。視覚効果を７つ追加】

【ホバー表示した詳細情報は音声読み上げする】

【Three.jsで回転可能な原子構造を表示する】

いちおうCaludeの画面上のインタラクティブ元素周期表はできたのだけれど，自分の環境ではどう移植すればよいかわからない。というのもThree.js という3Dライブラリを使う必要があるからだ。仕方がないので，ChatGPTに相談することにした。

(2) ChatGPTにて

最初はThree.jsを含む環境設定方法を聞いたのだけれど，自分が最新のウェブアプリ開発について何もわかっていない素人なので，答えを聞いてもチンプンカンプンである。そこで，Claudeの作ったWebアプリコードを直接入力して，自分のローカル環境で実行したいとお願いした。最初からそうすれば良かった。以下の段取りを指示された。

・Next.jsプロジェクトを作る

　% npx create-next-app@latest periodic-table-app

・Tree.jsをインストールする

　% cd periodic-table-app

　% npm install three

・コンポーネントファイルを作成（nanoは単なるエディタ）

　% mkdir -p app/components

　　nano app/components/PeriodicTable.tsx

・トップページから呼び出すように設定

　% app/page.tsx を編集（Reactコンポーネントの拡張子らしい）

・開発サーバを起動して確認

　% npm run dev

　⇒ http://localhost:3000 でアプリが立ち上がる。

Ｑ（koshix）：

ありがとうございます。 node も npm もbrew でインストールされていました。 自分は初心者であり，htmlとかcssとかjavascriptは何となくわかりますが， node, npm, mpx, Next.js + React + TypeScript + Tailwind + Three.js が何を意味しているかを概念的に把握できていません。申し訳ないのですが，よくわかるようにこれらの要点や注意点を解説していただけませんか。

Ａ（ChatGPT-5）：

（長々と説明された後）

あなたのための短いアナロジー

・HTML → 家の骨組み

・CSS → 壁紙・装飾

・JavaScript → 家の仕掛け（自動ドア・照明）

・Node.js → 家を作る工場のようなもの

・npm → 工場で使う工具や材料（React / Next / Three のパッケージ店）

・React → 家の“部品”をモジュール化して大量生産

・Next.js → 部品を組み合わせて「街」を作るシステム

・Tailwind → スタイルを一瞬で貼る装飾セット

・Three.js → 3D ホームシアター設備

わかったようなわからないような。とりあえず，あれこれ相当試行錯誤してローカル環境で周期表アプリは動いた。ががが・・・さらに修正を繰り返しているうちに ⇒ 「思考が停止しました。」（私がではない，ChatGPTがである）

次の日にやり直したものの，途中で再びエンストしたまま動かない。（大丈夫か）

(3) Geminiにて

昨日までに作られた PeriodicTable.tsx，elements.ts，PeriodicTableJSON.json の３つのファイルをインプットしてやり直しをお願いした。ChatGPT-5と違ってスイスイと話が進んでいく。もしかすると，プログラミング能力についてはChatGPTよりGeminiの方が優れているのではないか。ChatGPTにあっさり断られた 元素の発見者（発見年）や存在比などにも柔軟に対応してもらえた。その上親切にも元素発見の歴史を表す周期表の動画まで紹介してくれた。

さらに，これをさくらインターネットの公開サーバに移植する方法を尋ねたところ，

・設定ファイルの変更

　% next.config.ts

・ビルド（書き出し）の実行

　% npm run build

　⇒ out フォルダにNext.js アプリを公開する際に最も簡単で確実な「静的エクスポート（Static Export）」という機能を用いた結果が生成された。

・サーバーにアップロード

　outフォルダのディレクトリ構造全体をsftpで転送すればよい。

　https://nucleus.sakura.ne.jp/atom/

に結果（正確性は保証していませんので注意してください）が得られた。橋本さんの言うように5行でOKとは行かず，足掛け2日がかりだった。しかし，生成AIがなければ，1ヶ月勉強した上の1週間仕事だろう。

図：周期表ウェブアプリの表紙

P. S. まあ，3Dの怪しい電子軌道の絵にはあまり意味がないと思うんですけど。

P. P. S. なにやら新しいグーグル検索機能が追加されたようなので試してみた。