岐阜のホームページ制作｜sober design › ブログ › 【プログラミング初心者でも簡単】ChatGPTでトランスパイルする方法。

【プログラミング初心者でも簡単】ChatGPTでトランスパイルする方法。

公開日:2023/04/11
最終更新日:2023/04/11

初めに
ChatGPTとは？
Vue JSのプログラム
ChatGPTへのプロンプト
ChatGPTがトランスパイルした、Vanila Jsのプログラム
最後まで読んでいただきありがとうございました。

初めに

本記事では、ChatGPTを使いプログラミング初心者の方でも簡単にコードを変換（トランスパイル）する方法を紹介します。今回は、Javascriptのライブラリの「Vue js」をJavascriptのみで動く「Vanila Js」へトランスパイルします。また、実際にプログラミングの動作確認まで行いましたので、そちらも紹介したいと思います。

ChatGPTとは？

ChatGPTは、OpenAIが開発した自然言語処理技術を用いた対話型AIです。ChatGPTの説明は別記事に詳しく書いてありますので、気になる方は下記のリンクをクリックください。

また、今回の使用方法では、ChatGPTを使うと、プログラミングをコンピュータが理解して、目的のプログラムコードを生成することができます。

ChatGPTとは？については下記記事をご確認ください。

ChatGPTにWebデザインの習得方法を聞いてみた。

Vue JSのプログラム

例題となるVue jsの簡単なプログラムが以下となります。

このコードは、Vue.jsを使ってボタンのクリックイベントを制御するプログラムです。しかし、Vue.jsを使うことができない場合や、別のフレームワークを使いたい場合など、このコードを変換して使いたい場合があります。そこで、ChatGPTを使ってこのコードをトランスパイルしてみましょう。

それでは、以下のVue jsのプログラムをVanila Jsへトランスパイルしてみましょう。



<pre class="line-numbers"><code class="language-js html">

  <section id="user-goals">
  <input type="text" v-model="enteredGoalValue" />
  <button @click="addGoal">Add Goal</button>
  <li v-for="(goal, index) in goals" @click="removeGoal(index)">{{ goal }} - {{ index }}</li>
  </ul>
  </section>
  
  <script>
  const app = Vue.createApp({
    data() {
      return { 
        enteredGoalValue: '',
        goals: [],
      };
    },
    methods: {
      addGoal(){
        this.goals.push(this.enteredGoalValue);
      },
      removeGoal(idx){
        this.goals.splice(idx,1);
      }
    }
  });
  app.mount('#user-goals'); 
  </script>

ChatGPTへのプロンプト

ChatGPTの入力欄へ、Vue JSのプログラム（上記プログラム）を貼り付けます。その後、同じ入力欄にて、「上記のVue jsのコードを Vanila Jsへ変換してください。」と命令します。

その後、ChatGPTが説明文と共に、Vanila JSのプログラムを書いてくれます。

ChatGPTがトランスパイルした、Vanila Js

ChatGPTから最初に返ってきた、プログラムは、動作しませんでした、そのため、ChatGPTへ「上記のコードでは、動作しません。バグを見つけて修正してください。」と伝えたところ、以下のプログラムが返ってきました。



  <div id="user-goals">
      <input type="text" id="goal-input">
      <button id="add-goal">Add Goal</button>
      <ul id="goal-list">
        <!-- goals will be added dynamically using JavaScript -->
      </ul>
  </div>
  
  
    <script>
      const goals = [];
    
      function addGoal() {
        const enteredGoalValue = document.querySelector('#goal-input').value;
        if (enteredGoalValue.trim() !== '') {
          goals.push(enteredGoalValue);
          renderGoals();
        }
      }
    
      function removeGoal(idx) {
        goals.splice(idx, 1);
        renderGoals();
      }
    
      function renderGoals() {
        const goalList = document.querySelector('#goal-list');
        goalList.innerHTML = '';
        goals.forEach(function(goal, index) {
          const goalItem = document.createElement('li');
          goalItem.textContent = goal;
          const removeButton = document.createElement('button');
          removeButton.textContent = 'Remove';
          removeButton.addEventListener('click', function() {
            removeGoal(index);
          });
          goalItem.appendChild(removeButton);
          goalList.appendChild(goalItem);
        });
      }
    
      const addButton = document.querySelector('#add-goal');
      addButton.addEventListener('click', addGoal);
    
      renderGoals();
    </script>

動作するか確認したところ、Vue JsとVanila Jsでほぼ同じ動作になりました。

実際の検証動画は以下で確認いただけます。

今回は、ChatGPTを使いトランスパイルを行う実験をしてみました。ChatGPTが作ったプログラム内おうの検証は必要ですが、ChatGPTを使いコーディングのアシスタントとして様々な場面で使う事は間違いなく増えていきそうです。効率も良くなるので今後も使っていこうと思います。

最後まで読んでいただきありがとうございました。

最後まで記事を読んでいただきありがとうございました。

sober designは、主にWebサイト制作を行なっております。気になる方はWebサイトを拝見していただけると嬉しいです。Webサイトを作りたい方はお気軽にご相談ください。

前へ次へ