本記事では、 React のインストールから出力されたコードを確認するところまでの How to をお届けいたします。
まずは、本記事を書くきっかけになった出来事からをアウトラインとして紹介させていただきます。
目次
アウトライン
先日「Gemini 3 Pro Canvas 機能を使ってみたレポート」という記事をアップいたしました。
そうしましたら、想像以上にアクセスが集まっています。
「Gemini 3 Pro Canvas」系のキーワードで上位表示してる影響です。
ですが、書いている内容を考えると、そこまで大きな数字になるとは思っておりませんでした。
クライアントさんや身内スタッフの学習向けに・・・ということを考えた程度のことですので、技術的なハードルがそこまで高い内容にはしていませんでした。
技術的なハードルがそこまで高くない内容にそこまでアクセスが集まるとは思えません。
という違和感がありましたので、色々触ってたら、 Gemini Canvas が React を使うコードを吐き出していることを見つけました。
きっとこのことを探してるんじゃないかな・・・と察しました。
ということで、ノーコードな方でも少しコマンドを打つだけでこれらの問題を解決出来るので、 React に関する How toをお伝えすることにいたしました。
当方の作業環境は Mac （macOS Tahoe 26.1）で、ターミナルを使ってコマンドを打ってます。
特に難しいことはありません。
winとは少しコマンドが違うかもしれませんが、それに関しましては、 Gemini さんに聞いていただければと思います。
コマンドに出てきたエラーを Gemini さんに打ち込めばすぐに答えてくれると思います。
ということで、本題に入ってまいります。
知っておかなければいけないこと
この手の作業が初めての方は、念の為、以下のことを知っていただき作業をする必要があるかなと考えます。
- ローカル環境にサーバー機能が実装されるような、そんな作業をいたします。
- URLはドメインではありません。
- ローカル環境につくったファイル群は常時閲覧出来るわけではありません。コマンドを打ち込み、環境を閲覧可能な状態にして、ブラウザで閲覧をいたします。
- 一般的には、ローカルで作成したファイル群をバージョン管理システムなどに繋げて管理し本番環境まで持っていきますが、ここではあくまで確認するまでの作業としています。それ以上のことは、また Gemini さんかエンジニア・プログラマさんに聞いてみてください。
- ここで言う「インストール」とは、ソフトウェアとは異なり、レジストリに設定を書き込むタイプのインストールではありません。作成したディレクトリにインストールする・・・という意味ですので、特定のディレクトリにきっちりインストールをしてさえいれば、仮に失敗してもディレクトリを削除するだけで全ての作業がなかったことになります。ただ、ログなどは残るので、ログなどは探すなどして、挙動を把握するようにするとゴミファイルが減っていいと思います。
作業の流れ
大まかな流れは以下の通りです。
- Gemini にコードを書いてもらいます。
- Node.js をインストールします。
- React をインストールします。
- css のフレームワーク「Tailwind CSS」をインストールします
- Gemini で出されたコードを、ローカルのファイルにコピペします
- ブラウザでチェックします
- 無事に閲覧が出来て、コマンドなどを終了いたします
- もう一度、ブラウザでチェックいたします
という流れになると思います。
環境によってはエラーが出ると思います。
React のインスト中、バージョンの違いなどで覚えのないエラーが出ることはしょっちゅうですので、何かエラーが出た時は、 Gemini さんかエンジニア・プログラマさんに聞いてみてください。
では、進めてまいります。
作業解説
作業を一つずつ書いていきます。
細かい文字列が多いので、ご注意ください。
Gemini にコードを書いてもらいます
今回、ぼくはエクステリアの LP を参考にコードを生成してくれ・・・とお願いをしました。
エクステリアの LP を選んだ理由について、一切、他意はありませんでして、実務にも全く関係ございません。
パッと思いついて選んだキーワードで検索して見つけた LP を参考にしてみただけです。
そして、出てきたコードは以下のドキュメントにコピペしておきます。
今回の諸々は、こちらのコードをブラウザ上で確認することを目的としています。
Node.js をインストールします
まず最初に、 React を動かす環境にするため、 Node.js をインストールします。
コマンドを打ち込んでインストールすることもできますが、パッケージをダウンロードしてインストールすることもできますので、そっちを選びましょう。
以下のリンクから適宜、必要なパッケージをダウンロードしてインストールしてください。
ターミナルを立ち上げてコマンドを打ち込みます
まずは、ターミナルを立ち上げてコマンドを打ち込みます。
特に画面を触ってなければ以下のようなウィンドウが開きます。
上記の画面で、以下のコマンドを打ってください。
以下は、デスクトップに移動して、デスクトップにディレクトリ（ahaha）を作って、作ったディレクトリ（ahaha）に移動して、そのディレクトリ（ahaha）に npm をインストールします・・・というコマンドです。
好きなところに設置してもらえたらと思いますので、デスクトップでないところを指定していただいても構いません。
cd ~/Desktop
npm create vite@latest ahaha -- --template react
cd ahaha
npm install
そうしましたら、以下のような画面が出てきて幾つか質問されてると思いますので、「Yes」を選択して enter を押してください。
でそのまま続くと以下のような画面になると思います。
現時点で、デスクトップに「ahaha」というフォルダが出来て、その中にたくさんのファイル群が出来ていませんか？
以下のような感じなっていれば成功です。
（インストールしたもののバージョンによって、多少の差異はあると思いますので、細かいことは気にせず進めてみてください。）
上記のキャプチャの中にある
Local : http://localhost:5173
が、確認用の URL となります。
css のフレームワーク「Tailwind CSS」をインストールします
ちょっとややこしいんですが、以下のコマンドを続けて打ってください。
（command + cのコピペのような感じで打ってください。）
control + c
そうしますと、デスクトップに戻ってきましたので、以下のコマンドを打ってください。
cd ~/Desktop/ahaha
目的のディレクトリ（ahaha）の戻ってきたかと思います。
不安でしたら、以下のコマンドを打ち込んで、どこにいるかご確認ください。
pwd
何もエラーが出ていなければ、これから「ahaha」にフレームワークをインストールしますので、以下のコマンドを打ち込んでください。
npm install -D tailwindcss postcss autoprefixer
ぼくの環境では上記では上手くいかなかったので、バージョンを変更してインストールしました。
その際に使ったコマンドは以下です。
npm install -D tailwindcss@3 postcss autoprefixer
で、続けて以下のコマンドを打ちます。
npx tailwindcss init -p
そうしますと、通常であれば css のフレームワークのインストールは完了です。
およそ、以下のようなコマンド画面になってるかなと思います。
その流れで以下のコマンドを打ってください。
npm install lucide-react
このコマンドに関してはエラーが出ることもなく進んでると思いますので、エラーらしき文言が出なければ次の項に進んでください。
この時点で、インストールに成功していましたら、ブラウザで確認をすると以下のような画面になっていると思います。
Local : http://localhost:5173
Gemini で出されたコードを、ローカルのファイルにコピペします
以下のahahaに入っているファイルを探してコピペをしてください。
＊＊＊＊＊＊＊＊＊＊
tailwind.config.js
こちらは、全部上書きをしてください。
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
＊＊＊＊＊＊＊＊＊＊
src/index.css
こちらは、先頭行に追記してください。
@tailwind base;
@tailwind components;
@tailwind utilities;
＊＊＊＊＊＊＊＊＊＊
src/App.jsx
こちらは、先ほどのドキュメントにコピペしたソースコードをコピペしてください。
＊＊＊＊＊＊＊＊＊＊
諸々のコピペが完了いたしましたら、以下のコマンドを打ち込んでください。
npm run dev
この一文が、サーバーが起動するかの如く、閲覧環境が動き出しすことを指令するコマンドとなります。
ブラウザでチェックします
では、前述の通り、以下の url をブラウザに入力してください。
Local : http://localhost:5173
ひとまず正常に稼働していましたら、以下のような感じで出力されたコードを確認することができます。
上記のテスト用のページはブラウザバグが残っているようです。
後のデバッグは各々でよろしくお願いいたします。
無事に閲覧が出来て、コマンドなどを終了いたします
無事に閲覧が出来ましたので、綺麗にコマンドを終わらせましょう。
ftp にしても、データベースにしても、正常に稼働が終了しないと、何が起こるか分かりません。
ということで、現時点では以下のような画面になっていると思います。
そこに、以下のコマンドを打って、 run を止めましょう。
control + c
止めたら、ブラウザ上ではエラーが出て閲覧が出来なくなります。
サーバーが止まっている状態と同じ状態になるんですね。
そうしましたら、以下のような画面になったと思います。
で、あとは以下のコマンドを打ち込むと、プロセスが完全に終了します。
exit;
以下のような流れになります。
↓↓↓
これにて正常に完了しました。
ターミナルを閉じて作業終了です。
もう一度、ブラウザでチェックいたします
で、正常に閲覧が完了したからといって、ページの修正が完了したわけではありませんよね。
翌日なり、また作業を引き続き進めたりするには、ターミナルを立ち上げてコマンドを打つ必要があります。
cd ~/Desktop/ahaha
で、その流れで、以下のコマンドを打ちます。
npm run dev
キャプチャは掲載していませんが、見覚えのある画面に戻ってきましたよね。
で、 localhost を打ち込んで無事に閲覧が出来ているはずです。
で、正常に完了するように、
control + c
exit;
と打ち込んで終了してください。
Gemini Canvas で出力されたコードで React と Tailwind CSS が必要だった場合の How to まとめ
いかがでしたでしょうか。
これで、 Gemini 3 Peo Canvas が出力した難し目のコードも正常に閲覧することが出来るようになったのではないでしょうか。
React 自体の挙動や動作については、色んなコラムや記事でアップされていますので、そちらもご覧ください。
Gemini 3 Pro Canvas が他のライブラリやフレームワークなどで出力するようなことがありましたら、随時、 How to を出していこうと思います。
リクエストがございましたら、コメントをいただくか、お問い合わせくださいませ。
社内の学習用にするためにも、積極的にアップしてまいります。
ただ、難しすぎる場合はアップしないこともありますので、その点についてはご了承ください。
ということで、以上です。
コメント