投稿者 投稿日: カテゴリー EC・WEBノウハウ
AI JS とは、生成AIにJavaScriptのコードを書かせたり直させたりする使い方のことです。
自社ECやShopify、楽天GOLDのページを触っていると、ちょっとした動きを足したい、計測タグがうまく動かない、フォームの挙動を変えたい、といった「JavaScriptに関わる用事」が次々と出てきます。エンジニアが社内にいない店舗ほど、その都度外注したり、見よう見まねでコードをいじって動かなくなったりしがちです。この記事では、ChatGPT・Claude・Geminiといった生成AIにJavaScriptを書かせたり修正させたりする方法を、コードが読めない店舗担当者でも安全に使える形で整理します。2026年5月時点の最新AIツールの違い、非エンジニアがJSをAIで扱うための導入手順、そのまま使えるプロンプト例までをまとめ、旧版を実務目線で全面的に書き直しています。
AIでJavaScriptを書くとは、現場では何を意味するのか
JavaScriptは、Webページに動きやインタラクションを与えるためのプログラミング言語です。ボタンを押したら表示が切り替わる、入力欄に文字数のカウンターを出す、ページを開いたら計測タグが発火する、カートに入れたら確認のメッセージが出る。こうした「ページが読み込まれた後の振る舞い」の大半はJavaScriptが担っています。HTMLがページの骨組み、CSSが見た目の装飾だとすれば、JavaScriptは動きと判断を受け持つ層だと考えると分かりやすいです。
AIでJavaScriptを書くというのは、この振る舞いの部分を、自分でゼロからコードを組むのではなく、生成AIに日本語で要件を伝えて書いてもらう、という進め方を指します。「この入力欄に半角数字以外が入ったら警告を出すコードを書いて」と頼めば、AIがJavaScriptのコードを返してくれます。返ってきたコードを自社ECのテーマやページに貼り付ければ、その動きが実装される、という流れです。
EC事業者の現場でこれが効いてくる場面は、思っているより多く存在します。Shopifyのテーマ（Liquidテンプレート）にカスタムの動きを足す時、Googleタグマネージャーやアナリティクスの計測タグを設置・調整する時、お問い合わせフォームや注文フォームに入力チェックを入れる時、楽天GOLD（楽天市場内の独自ページ領域）でちょっとしたUIを作る時。いずれもJavaScriptが絡みます。
ALSELが支援する店舗群でも、「外注に出すほどではないけれど自分では書けない、数行のJavaScript」で止まっているケースは珍しくありませんでした。そうした隙間を、生成AIが埋められるようになったのが2026年の状況です。一方で、貼り付ける場所を間違えたり、規約に触れるコードを入れてしまったりするリスクもあるため、ツールの選び方と手順を先に押さえておく価値があります。
2026年5月時点、JavaScript生成に使える主要AIの違い
コードを書かせる用途で実用に耐える生成AIは、大きく三つに整理できます。それぞれ性格が異なるため、用途に合わせて選ぶのが現実的です（モデル名・仕様は2026年5月時点の確認値であり、最新情報は要確認です）。
OpenAIのChatGPTは、フラッグシップがGPT-5.5、軽量・高速版がGPT-5.5 Instantという構成です。月額の有料プランChatGPT Plusは20米ドルが目安で、コード生成では汎用性の高さが強みになります。要件を曖昧に伝えても文脈を補ってコードを返してくれる傾向があり、JavaScript初心者が「こういう動きにしたい」とふんわり頼む使い方と相性がよいです。コードを書いて実行結果を確認しながら直していく対話にも向いています。
Anthropicのクラウドは、フラッグシップがClaude Opus 4.7、バランス型がClaude Sonnet 4.6です。有料プランClaude Proは20米ドルが目安で、長いコードや複数ファイルにまたがる文脈を崩さずに扱う力に定評があります。既存のJavaScriptを大きく渡して「ここのバグを直して」「この処理を壊さずに機能を足して」と頼むような、既存資産を尊重した修正で力を発揮しやすいです。返ってきたコードに対して「なぜこう書いたのか」を丁寧に説明させると、コードが読めない担当者でも内容を把握しやすくなります。
GoogleのGeminiは、高速版がGemini 3.5 Flash、上位版がGemini 3.5 Proという構成です。有料プランGemini Advancedは20米ドルが目安で、Google系のサービスとの連携や、検索で拾った最新情報を踏まえた回答に強みがあります。GoogleタグマネージャーやGoogleアナリティクス、Google広告まわりの計測タグを扱う場面では、関連ドキュメントの文脈を踏まえた回答を得やすい点が利点です。
このほか、コーディングに特化した支援ツール群も存在します。エディタに組み込んで、書きかけのコードを補完したり、選択した範囲を自然言語で書き換えたりするタイプのものです。こうしたコーディング支援は、ある程度コードを自分で触る前提の道具なので、非エンジニアの店舗担当者がまず使うべきは、対話形式で完結するChatGPT・Claude・Geminiのいずれかだと考えてよいです。三つとも無料枠でもJavaScriptの生成は試せるため、まず無料で触り、頻繁に使うなら月20米ドル前後の有料プランへ上げる、という順序が無理のない入り方です。
楽天市場のページや施策をAIで動かす全体像については、楽天市場をAIで運営する完全ガイドで運営工程ごとのプロンプトを整理しているので、JavaScript以外の作業も含めて自動化を考えたい場合はあわせて読んでください。
EC事業者向け、AIでJavaScriptを安全に扱う導入手順
コードが読めない店舗担当者でも、手順を踏めば生成AIでJavaScriptを実務に使えます。事故を避けるための順番を含めて、五つのステップで整理します。
第一に、何を実現したいのかを日本語で具体的に決めます。「フォームをよくしたい」では曖昧すぎて、AIも的確なコードを返せません。「注文フォームの電話番号欄に、半角数字とハイフン以外が入ったら赤い警告文を出したい」というところまで言語化します。どのページの、どの要素を、どういう条件で、どう動かしたいか。この四点を文章で書ければ、半分は終わったようなものです。
第二に、貼り付ける環境がどこかを把握します。Shopifyならテーマのどのセクションか、Liquidテンプレートのどこにスクリプトタグを置くのか。楽天GOLDなら独自ページのHTML編集領域のどこか。自社のワードプレスならテーマのフッターか、専用のプラグインか。Googleタグマネージャー経由でタグを管理しているなら、コードはタグマネージャーに入れるのが基本です。この「置き場所」を間違えると、正しいコードでも動きません。AIに頼む時は、この環境情報も一緒に伝えます。
第三に、生成AIにコードを書かせます。後述するプロンプト例のように、ロール（どんな立場で答えてほしいか）、前提（どの環境か）、要件（何をしたいか）、出力形式（コードと貼り付け場所の指示）を明示して依頼します。返ってきたコードには、たいてい「ここに貼ってください」という説明が付くので、それも一緒に受け取ります。意味が分からない部分は遠慮なく「これは何をしているコードですか」と追加で質問してください。AIに説明させること自体が、安全に使うための工程です。
第四に、本番ではなくテスト環境やコピーで試します。Shopifyならテーマを複製してプレビューで確認する、ワードプレスならステージング環境を使う、というように、いきなり公開中のページに貼らないのが鉄則です。テスト環境がない場合でも、まず営業時間外に貼って動作を確認し、問題があればすぐ元に戻せるよう、貼り付け前のコードを必ず控えておきます。AIが返すコードは大半が正しく動きますが、環境差で意図しない挙動になることはあり得ます。
第五に、プラットフォームの規約に触れていないかを確認します。ここがEC特有の注意点です。たとえば楽天市場のページに置くJavaScriptで、楽天市場の外のサイトへユーザーを飛ばす処理や、外部のフォーム・計測サービスへデータを送る処理を入れると、楽天市場の店舗運営規約に抵触する可能性があります。楽天GOLDで動かすスクリプトは、楽天市場内で完結する動きにとどめるのが安全です。Amazonの商品紹介コンテンツ（A+）には原則そもそもスクリプトを入れられず、外部URLへの誘導も認められていません。自社ECやShopifyは自分のドメインなので外部連携の自由度は高いものの、入力された個人情報を外部へ送る処理を入れる場合は、特定商取引法やプライバシーポリシーとの整合を確認する必要があります。AIはこうした規約を完全に把握しているとは限らないため、最終判断は人が行ってください。
この五つの手順を踏めば、外注するほどではない小さなJavaScriptを、店舗担当者の手元で安全に回せるようになります。検索計測やSEOに関わるタグの扱いを深めたい場合は、楽天市場のSEOをAIで攻略する方法で計測と改善の考え方を整理しているので参考になります。
AIでJavaScriptを生成・修正するプロンプト例
実務でそのまま使えるプロンプトを、用途別に三本用意しました。ChatGPT、Claude、Geminiのいずれの最新版でも同様に動作します。波カッコの部分を自分の状況に置き換えて使ってください。
プロンプト1・フォームの入力チェック用JavaScriptを生成する
あなたはWebフロントエンドに詳しいエンジニアです。
コードが読めない店舗担当者でも貼り付けて使えるよう、シンプルなJavaScriptを書いてください。
環境: {Shopifyのテーマ / WordPress / 楽天GOLD など}
対象ページ: {注文フォームのあるページ}
やりたいこと: {例: 電話番号の入力欄に半角数字とハイフン以外が入ったら、欄の下に赤い文字で「半角数字で入力してください」と表示する}
条件:
- 外部サービスへのデータ送信は行わない（その場で完結する処理にする）
- 既存の他のスクリプトを壊さないよう、変数名は衝突しにくい名前にする
- 対象の入力欄をどう特定するか（idやnameの指定方法）が分かるよう、設定箇所をコメントで明示する
出力フォーマット:
1. 完成したJavaScriptコード
2. このコードをどこに貼り付ければよいかの説明
3. 各行が何をしているかの簡単な解説
プロンプト2・動かないJavaScriptをデバッグ（修正）する
あなたはJavaScriptのデバッグに慣れたエンジニアです。
以下のコードが意図どおりに動きません。原因を特定して直してください。
実現したい動作: {例: ボタンを押すと隠れている説明文が表示される}
実際に起きていること: {例: ボタンを押しても何も起きない / エラーが出る}
動かしている環境: {ブラウザ名 / Shopify / WordPress など}
エラーメッセージ（あれば）: {コンソールに出ている文言を貼る}
現在のコード:
{ここに今のJavaScriptを貼り付ける}
出力フォーマット:
1. 何が原因だったかの説明（専門用語は噛み砕いて）
2. 修正後の完成コード
3. 同じミスを防ぐための注意点
プロンプト3・計測タグ用のJavaScriptを安全に整える
あなたはGoogleタグマネージャーと計測に詳しいアナリストです。
ECサイトに設置する計測用のJavaScriptについて、安全に使える形で助言してください。
環境: {Googleタグマネージャー経由 / テーマに直接設置 など}
計測したいこと: {例: 特定ボタンのクリック数 / 特定ページの到達 など}
プラットフォーム: {自社EC（Shopify等） / 楽天GOLD など。楽天の場合は楽天市場内で完結させる必要がある旨を考慮}
条件:
- 個人情報を外部へ送る処理は含めない
- 楽天GOLDの場合、楽天市場の規約上、楽天市場外へデータを送る処理は使わない前提で構成する
- 設置場所と発火タイミングを明示する
出力フォーマット:
1. 推奨する設置方法（タグマネージャーかコード直書きか）と理由
2. 必要なコードまたはタグマネージャーの設定手順
3. 設置後の動作確認の方法
生成されたコードは、必ず一度テスト環境やページのコピーで動かしてから本番に反映してください。特に楽天市場のページに置くスクリプトは、楽天市場外への誘導やデータ送信を含んでいないかを最終チェックする運用にします。楽天の店舗運営そのものをAIで効率化する具体策は楽天市場をAIで運営する完全ガイドに詳しく、RMS（楽天の店舗管理システム）の操作と合わせて読みたい場合は楽天RMSへのログイン方法も参考になります。
AIでJavaScriptを使い始めたEC事業者の例
具体的なイメージを持ってもらうため、ALSELの支援先で見られた使い方を、業種を一般化した形で紹介します。
ある食品系の自社EC事業者は、ギフト用途の注文が多く、のし（贈答用の表書き）の入力欄に自由記述で長文を書かれてしまい、印字の幅に収まらないトラブルが続いていました。社内にエンジニアはいません。担当者がChatGPTに「のし書きの入力欄に最大20文字までの制限と残り文字数カウンターを付けるJavaScript」を依頼し、返ってきたコードをShopifyテーマのコピーで検証してから本番に反映しました。外注見積もりでは数万円規模だった改修が、半日ほどの自走で完了したケースです。
別のアパレル系事業者は、楽天GOLDで作っていた特集ページのタブ切り替えがスマートフォンで崩れる、という不具合を抱えていました。元のコードを書いた外注先とは契約が切れており、誰も中身を把握していない状態です。担当者がClaudeに既存のJavaScriptをそのまま渡し、「この動きを壊さずにスマホ表示の崩れだけ直して」と依頼したところ、原因の説明とともに修正版が返ってきました。楽天市場内で完結する処理だったため規約上の懸念もなく、その日のうちに差し替えられたといいます。
いずれも、AIが完璧なコードを一発で出したというより、「人が要件と環境を正しく伝え、返ってきたコードをテストしてから反映する」という手順を守ったことで成果につながった例です。AIに丸投げして本番にそのまま貼る使い方は、規約と動作の両面でリスクが高いため避けてください。
よくある質問
コードが読めなくてもAIでJavaScriptを使えますか
使えます。やりたいことを日本語で具体的に伝えれば、ChatGPTやClaude、GeminiがJavaScriptのコードを生成します。返ってきたコードには貼り付け場所の説明が付くことが多く、意味の分からない部分は「これは何をしていますか」と質問して説明させられます。ただし本番に反映する前に、テスト環境やページのコピーで動作を確認する手順は省かないでください。
ChatGPTとClaudeとGeminiのどれがJavaScript生成に向いていますか
用途で選ぶのが現実的です。曖昧な要件から汎用的にコードを出させたいならChatGPT、既存のコードを壊さずに修正したいならClaude、Google系の計測タグやアナリティクスに関わる作業ならGeminiが扱いやすい傾向があります（2026年5月時点の確認値）。三つとも無料枠でJavaScript生成を試せるため、実際に同じ依頼を投げて比べてから決めるのが確実です。
AIに有料プランは必要ですか
最初は無料枠で十分試せます。簡単な入力チェックや表示の切り替え程度のJavaScriptなら無料版でも生成できます。日常的に使う、長いコードを扱う、応答速度を上げたいといった段階になったら、ChatGPT Plus・Claude Pro・Gemini Advancedのいずれも月20米ドル前後が目安なので、必要に応じて切り替えてください。
生成されたJavaScriptをそのまま本番ページに貼って大丈夫ですか
おすすめしません。AIが返すコードは多くの場合正しく動きますが、環境差で意図しない挙動になることがあります。Shopifyならテーマのコピー、ワードプレスならステージング環境で先に動作確認し、問題がなければ本番に反映してください。テスト環境がない場合でも、貼り付け前のコードを控え、すぐ元に戻せる状態で営業時間外に試すのが安全です。
楽天市場のページにAIで作ったJavaScriptを入れても問題ありませんか
楽天市場のページ（楽天GOLD含む）に置くスクリプトは、楽天市場内で完結する動きにとどめてください。楽天市場の店舗運営規約では、楽天市場の外のサイトへユーザーを誘導したり、外部のサービスへデータを送ったりする処理が制限されています。AIに依頼する時点で「楽天市場外への誘導やデータ送信は行わない」という条件を明示し、最終的に人が規約との整合を確認する運用にしてください。
Shopifyのテーマ（Liquid）にAIで作ったコードを足せますか
足せます。Shopifyのテーマはセクションやテンプレートにスクリプトタグを置けるため、AIに「Shopifyのテーマに貼る前提で」と環境を伝えれば、適切な形でコードを返してくれます。Liquidの変数とJavaScriptを組み合わせたい場合は、その旨も依頼に含めてください。反映前にテーマを複製してプレビューで確認する手順は必ず踏んでください。
AIが書いたコードでサイトが壊れたらどうすればよいですか
貼り付け前のコードに戻すのが第一です。だからこそ、変更前の状態を必ず控えておく運用が重要になります。そのうえで、何が起きているか（画面のどこが、どう崩れたか、エラーメッセージが出ているか）をAIに伝えれば、原因の特定と修正版の提案を受けられます。デバッグ用のプロンプトに、実現したい動作・実際の挙動・エラー文言を添えると、的確な修正にたどり着きやすくなります。
JavaScriptとHTML・CSSの違いをAIで扱う時に意識すべきことはありますか
役割の違いを意識して依頼すると精度が上がります。HTMLはページの骨組み、CSSは見た目、JavaScriptは動きと判断を担う層です。「見た目の色やサイズを変えたい」のはCSS、「クリックで表示を切り替えたい」のはJavaScript、というように、やりたいことがどの層の話かを切り分けて伝えると、AIも適切なコードを返しやすくなります。分からなければ「これはHTML・CSS・JavaScriptのどれで実現しますか」と最初に聞いてしまうのも有効です。
著者：齋藤竹紘（株式会社オルセル 編集長／5,000社以上のEC支援実績／書籍3冊）
うるチカラ編集長。これまで5,000社を超えるEC事業者の出店・運営・改善に関わり、楽天市場・Amazon・Shopify・Yahoo!ショッピングの実務支援と、生成AIを使った運用効率化の現場知見を蓄積してきました。EC×AIをテーマにした書籍を3冊上梓しています。本記事のJavaScript活用手順とプロンプトは、社内にエンジニアを抱えない店舗が自走で改善を回せるよう、支援現場で実際に使われている考え方をもとに構成しています。
※うるチカラでは、生成AIの導入支援から運用最適化まで、貴社のEC事業に合わせたカスタマイズ提案を行っています。無料相談（30分）も実施中ですので、お気軽にお問い合わせください。
https://uruchikara.jp/contact/
株式会社オルセル代表取締役 / うるチカラ編集長。19年・5,000社以上のEC支援実績を持ち、楽天市場・Amazon・Yahoo!ショッピング・Shopify・Shopee越境ECの実装ノウハウを保有。AI×ECに関する書籍を3冊執筆。「現場で使えるAI実装」を一次情報として発信しています。
この記事を読んだ人は、こんな記事も読んでいます
