技術力ゼロ？問題なし！Azure OpenAIが描くスキルアップの道のり

技術力のない人間がAzure OpenAI Studioを使用するとどうなると思いますか？
開発力は向上すると思いますか？それともAIに使われる人間になるでしょうか。

1.Azure OpenAI Studioとは　- OpenAIと何が違う？

Azure OpenAI Studio（以下AOAI）は、Microsoft Azureが提供する、OpenAIの技術を利用した人工知能開発環境であり、ユーザーがAIモデルを効率的に訓練、デプロイ、管理することを可能にします。
OpenAIと違い、Azure AD認証やAzure仮想ネットワークで保護されているため、企業情報の漏洩を気にすることなく使用できます。

設定の詳細やデプロイ方法は以下の記事を参考にしてください！

Azure OpenAI StudioとOpenAIの違い

使用環境：OpenAIは基本的にAPIとして提供され、ユーザーは自身のシステムやアプリケーションに組み込む形で利用します。一方、Azure OpenAI Studioは、クラウドベースの統合開発環境（IDE）として提供され、AIモデルの開発からデプロイまでを一元的に管理できるプラットフォームです。
機能とサービス：OpenAIはGPTなどのAIモデルを提供しています。Azure OpenAI Studioでは、これらのモデルを活用したアプリケーションの開発をサポートするための各種ツールやサービスが提供されています。
サポートとリソース：Azure OpenAI Studioは、Microsoft Azureの広範なリソースとサポートを利用できます。これには、スケーラブルなコンピューティングリソース、データストレージ、セキュリティ、およびコンプライアンスツールが含まれます。一方、OpenAIはAPIとしての提供が主であり、利用者が自身で環境を設定し管理する必要があります。

2.初学者が陥りがちな開発体験

私が今のチームにアサインした時は自身に技術的な要素が全くなく、人に聞くにしてもそもそも何から聞いたらわからないといった感じでした。有識者はいつも手が空いているわけではないし、タスクが進まず手持ち無沙汰になることが多々ありました。

AOAIと出会う前の状況

・自分の実装に自信がない（細かく正解を確認したい）
・実装方法がわからず有識者に質問したいが忙しく質問できない
・ググり方がわからず調べても欲しい回答が得られない

3.AOAIに出会って起きた変化

素早く解答に近付ける

AOAIは文章形式で質問できるためググるのに必要なキーワードがわからなくても会話感覚で質問することができ、開発スキルがなくてもAOAIがそのブリッジとなってくれました。
例えば、エラー解析と解決策に悩んでいた時にもAOAIであれば複数の案を出してくれるので検索回数が減り楽でした！

Azureのセキュリティで保護されているため、ソースコードをベタ張りして質問できるところが大きなメリットに感じます。

AIに使われる人間になる

AOAIを使うと実装スピードが向上した一方でAI頼りの人間になり、実装方針を決定する理由がAOAIがこう言ってたから、、となっていました。

より適切な応答を得るためのプロンプトを考えるようになる

実装にかかる調査を行っていく中で、プロンプトが大切である気づきを得ました。プロンプトのスクショを取るなどし、応答メッセージの変化を確認することでどのようにプロンプトを構成すればより適切な応答を得られるかを考えるようになりました。

チームメンバとも技術的な会話ができるようになる

AOAIとの会話の中で出てきたキーワードは適宜検索しながら進めることで技術的理解の深耕を図ることができました。この頃には積極的に仕様に関してコミットできるようになったと感じています。

初学者が陥りがちな問題

・AOAIがソースコードを書いてくれるので技術を習得せずに実装できるようになってしまう
・適切なプロンプトの設定やデプロイ・パラメーターの構成ができずうまく応答を得られない

4.GPTを使いまくって気がついたこと

AOAIに頼りきりにならず開発スキル向上に努める必要はある

ただ実装をするだけの人間であれば、開発スキルはなくてもAIに実装してもらうことは可能だと思いますが、仕様の決定や調査を行う上では、自身の頭の中に技術的な側面がないと難しいと感じます。さらに、技術的素養を持つことでより適切なプロンプトを入力できるようになり、より素早く解答に近づくことができると感じました。
また、AOAIが必ずしも正解を出してくれるわけではないということも念頭に入れておく必要があります。

プロンプトの設定が大事

プロンプトはできるだけ簡潔に命令することで要求に近い応答を得られます。特に応答形式が決まっている場合はシステムメッセージの記入やユーザー、アシスタントを入れておくと応答が定型化されます。（システムメッセージに「あなたは〇〇を教える先生です」などと入れておくと簡潔で丁寧な説明をしてくれる印象がありました。）

GPTの設定や使い分けも必要

デプロイ
調査系など会話ベースで考えさせたいときはGPT４を使用する一方で、GPT3.5turboは文章要約やコード生成、コメント生成を得意とするため実装作業などで一問一答想定の答えを聞きたいときに使用しています。（GPT4は応答に時間がかかる場合があることも注意）
パラメーター（温度だけ変更してた）
温度を下げると断定的な解答を得られるため、何度聞いても同じ解答を得られる可能性が高いです。また、プロンプトに対して実直な解答を得られるためコード生成の場合は0.30-0.40くらいで設定しています。
一方で温度を上げるとGPTの考える幅が広がるため、調査のような何度も応答を繰り返すような作業の場合は0.70以上に設定しています。

温度の違いによる応答メッセージの違い

摂氏と華氏の表示を変更させたい旨のコメント部分をAOAIにコーディングしてもらう場合、設定によってどんな違いがあるかみてみましょう！
システムメッセージには以下の文言を入れておきました。
「日本語で記載したコメント部分のコードを完成させてください。」

用意したコード

<div class="top-nav">    
      <div class="thumbs">    
        <div class="thumb" v-for="(item, i) in nextWeather" :key="i">    
          <p class="day">{{ i !== 0 ? getDate(item.dt_txt) : 'Tomorrow' }}</p>    
          <img :src="`img/weather-icons/${item.weather[0].icon}.png`" alt="">    
          <p class="temp">    
            <span class="max">    
              <!-- 摂氏だったら「°C」華氏だったら「°F」で表示できるように変更し、正しく温度が表示できるように変更 -->    
            </span>    
            <span class="min">    
              <!-- 摂氏だったら「°C」華氏だったら「°F」で表示できるように変更し、正しく温度が表示できるように変更-->    
            </span>    
          </p>    
          <p class="humidity" :style="{ color: item.main.humidity <= 50 ? 'red' : '' }">    
            Humidity: {{ item.main.humidity }}%    
          </p>    
        </div>    
      </div>    
    </div>

温度を低く設定
摂氏と華氏をTure／Falseで判定させるようなコードが返ってきました！

実際に返ってきたコード

<div class="top-nav">  
  <div class="thumbs">  
    <div class="thumb" v-for="(item, i) in nextWeather" :key="i">  
      <p class="day">{{ i !== 0 ? getDate(item.dt_txt) : 'Tomorrow' }}</p>  
      <img :src="`img/weather-icons/${item.weather[0].icom}.png`" alt="">  
      <p class="temp">  
        <span class="max">  
          {{ item.main.temp_max }}{{ isCelsius ? '°C' : '°F' }}  
        </span>  
        <span class="min">  
          {{ item.main.temp_min }}{{ isCelsius ? '°C' : '°F' }}  
        </span>  
      </p>  
    </div>  
  </div>  
</div>  

data() {  
  return {  
    isCelsius: true, // true: 摂氏, false: 華氏  
    // ...  
  }  
},  

温度を高く設定
こちらはもとのコードで定義していないconvertToFahrenheit関数が作られています。
別途摂氏と華氏を変換するconvertToFahrenheit関数を作成する必要がありそうです。

実際に返ってきたコード

<div class="top-nav">  
  <div class="thumbs">  
    <div class="thumb" v-for="(item, i) in nextWeather" :key="i">  
      <p class="day">{{ i !== 0 ? getDate(item.dt_txt) : 'Tomorrow' }}</p>  
      <img :src="`img/weather-icons/${item.weather[0].icon}.png`" alt="">  
      <p class="temp">  
        <span class="max">  
          {{ isCelsius ? `${item.main.temp_max.toFixed(1)}°C` : `${convertToFahrenheit(item.main.temp_max).toFixed(1)}°F` }}  
        </span>  
        <span class="min">  
          {{ isCelsius ? `${item.main.temp_min.toFixed(1)}°C` : `${convertToFahrenheit(item.main.temp_min).toFixed(1)}°F` }}  
        </span>  
      </p>  
      <p class="humidity" :style="{ color: item.main.humidity <= 50 ? 'red' : '' }">  
        Humidity: {{ item.main.humidity }}%  
      </p>  
    </div>  
  </div>  
</div>  

ちなみに、convertToFahrenheit関数を実装してというと実装してくれます。

このようにパラメーターを変更するだけでも応答が変化するので、GPTでうまく応答を得られない場合は仕様目的に応じて設定を見直してみるのもいいかもしれません！

・大前提として開発スキルは必要
・ググったほうがいい時もある（情報が古い場合があるため）
・プロンプトがめっちゃ大事！！！
・GPTの使い分けも必要

GenieAIの活用も

VSCodeの拡張機能Genie AIを使用するとコーディング速度を上げることができます。

例えば、不明なコードの説明をさせたり・・・

或いは、コメントコードからコード生成させたり・・・

新規にアサインしたメンバにプロダクトをソースコードレベルで説明する際にもこういった機能を使うと便利かもしれないですね！

ちなみに・・・
GenieAIは英語で返してくるので設定に以下を入れると日本語で返却してくれて便利です。

コピー用に用意しておきましたので活用ください！

  "genieai.openai.model": "gpt-4",
  "genieai.azure.url": "{your-endpoint-base}/openai/deployments/gpt-4/chat/completions?api-version=2023-03-15-preview",
  "genieai.promptPrefix.addComments": "このコードに日本語のコメントを追加してください。",
  "genieai.promptPrefix.addTests": "このコードのテストを実装してください。",
  "genieai.promptPrefix.findProblems": "このコードのバグを見つけてください。",
  "genieai.promptPrefix.optimize": "このコードを最適化してください。",
  "genieai.promptPrefix.explain": "このコードを日本語で説明をしてください。",
  "genieai.promptPrefix.completeCode": "このコードを完成させてください。"

genieai.azure.urlの{your-endpoint-base}にはエンドポイントを入れてください。

GenieAIについては以下の記事でも紹介しているので是非！