転職したらスマレジだった件

スマレジのエンジニアやまてのテックブログです。マジレス大歓迎です。

実務2年目のジュニアエンジニアのChatGPT活用法

スマレジの テックファーム(SES 部門) でWebエンジニアとして働いている やまて(@r_yamate) と申します。

実務では、2023 年 3 月末で SES の派遣先で、テーブルオーダーシステムの機能改修業務の設計などを担当していた業務を終えたところです。

4月からは、スマレジの関連アプリの開発業務を担当しています。触ったことのなかった Flutter での開発で、日々奮闘中です。

はじめに

今回は、今やプログラムを書く上で無くてはならない存在となった ChatGPT について、ジュニアエンジニア(実務 2 年目)である私の現時点での活用方法と感想を書きます。

とはいえ活用方法については、現状は基本的な使い方しかしていません。

目次

ChatGPT 使用歴

  • 2022 年 12 月、ChatGPT を使い始めました。
    • 2022 年 11 月に ChatGPT が公開されて、間もなく Twitter では「こんなことができる!」「すごい!」「ヤバい!」「エンジニアの仕事なくなるwww」と沸き立っていたため、触らないわけにはいかないな、という感じで触ってみておこう、という感じでした。
    • まだ回答への信頼度も低く、この頃はググる方が優先だったと思います。
  • 2023 年 3 月、ChatGPT Plus(4.0が使えるやつ)を利用し始めました。
    • 4.0 を使えるようになってからはみるみる使用頻度が高くなりました。毎日利用回数上限にかかるくらい使っていました。(一時期は上限が 25回/3h だった)
    • かといって、プロンプト(指示文)をどのようにすればより良いかについては、感覚的に使っているため、一度向き合ってスキルアップしたいなと思っています。

ちなみに、サブスクの費用としては Plusが公開されてから今のところ「USD $20/mo」(日本円で大体2700〜3000円)なので、現時点でトータルで 15,000 円くらい払ってる感じです。

ChatGPT の活用方法

ChatGPT の私の現時点での活用方法についてですが、利用する場面としては、学習時でも就業時間中でも常にブラウザで画面表示できるようにしています。

利用目的については、アプリ開発に関連しての質問や作業依頼をすることがメインです。アプリ開発に関することなら何でもかんでも質問や作業依頼をしています。

業務での利用でも社内ルールを守っていれば使ってもいいため、社内ルールに触れない範囲で使い倒しています。

オプトアウト(データをトレーニング利用されないようにする)

まず前提として、学習時以外に就業時間中にも利用しているため、個人情報や機密情報はプロンプトに入れないようにしてはいますが、 ChatGPT にデータをトレーニング利用されないようにするためのオプトアウトをするようにしています。 オプトアウト申請、または「Chat history & training」のチェックを外すとChatGPT にデータをトレーニング利用されないようにできるようです。

help.openai.com

yuryoweb.com

よく聞いている質問、お願いしている作業依頼の例

以下、よく聞いている質問、作業依頼の例です。

「エラーの内容、解決方法を教えてください。」

「こんな機能を実装する場合の設計を教えてください。」

「この命名(クラス名、メソッド名、変数名、ブランチ名など)を提案してください。」

「このコードをコードレビューしてください。」

「このコードをリファクタリングしてください。」

「このコードの処理内容を教えてください。」

「シーケンス図を Mermaid 記法で書いてください。」

「エラーの内容、その解決方法を教えてください。」

こんな感じをベースにしています。

以下のエラーの内容の説明と解決方法を教えてください。

(エラー文の貼り付け)

ちょうど以下の記事で、エラーの調査をChatGPT(GPT-4)に聞いて、それをきっかけに解決しています。

qiita.com

ChatGPT の回答を鵜呑みにせずにエビデンスは確認するにしても、エラー原因の当たりをつけるまでの時間は、ネット検索で調べるところから着手するよりも短縮されると感じています。

「この機能を実装する場合の設計を教えてください。」

ChatGPT でどこまでできるかの練習として、 ChatGPT に基本設計 → 詳細設計 → 具体的なコードを聞きまくってアプリを開発をしてみようとしたことがあります。

全く慣れていない Flutter で、自分一人ではできないレベルのスピード感で開発を進めることができました。

ChatGPT へのプロンプトについては手探り状態で、知りたい回答を得られるまで粘り強くプロンプトを調整する、という感じです。

以下のように対話を始めて、開発を進めたところ、ある程度はシューティングゲームっぽく動くようになりました。

あなたはFlutterアプリ開発者です。作るものはスマホゲームです。昔ながらのシューティングゲーム(下にプレイヤーで、上から敵が次々と現れる)を作ります。ただ、舞台は混んでいる大阪駅の構内です。敵として現れるのは、前を見ずに進んでくる人です。その人にぶつからずに避けたり打ったりするゲームです。作るための設計書を作ってください。

実務で実装するときも同じように詳細設計→具体的なコードについて聞きまくっています。

もちろん回答をそのまま貼り付けるようなことはしませんが、ベースにして編集することで、時間に余裕ができて集中して考えるべきことに時間をかけられています。

「このコードをコードレビューしてください。」

以下の記事で一つ実験をしてみます。

qiita.com

以下のコードレビューをしてください。

記事内のコード

のように質問してみて、レビューで指摘してもらったことが、 ChatGPT からのコードレビューの提案に含まれているか確かめてみます。

ChatGPT(抜粋)「

SQLインジェクションのリスク: 現在のSQL文は、ユーザーからの入力をそのままSQL文に埋め込んでいます。これはSQLインジェクションという脆弱性を引き起こす可能性があります。ユーザーが特定の悪意ある入力を行うと、意図しない動作を引き起こす可能性があります。

修正方法としては、パラメータバインディングまたはプリペアドステートメントを使用することで、SQLインジェクションのリスクを軽減することができます。

$stmt = $link->prepare("SELECT product_name, color, price FROM products WHERE product_name LIKE ?");
$searchValue = '%'.$searchValues['productName'].'%';
$stmt->bind_param("s", $searchValue);

という、レビューで指摘してもらった内容を含む回答がありました。

ChatGPT からのコードレビューをはさむことで、考慮できていないコードの改善が可能です。

「このコードをリファクタリングしてください。」

実装したコードのリファクタリングについては頻繁に提案してもらっています。実装経験の浅い自分にとっては、毎回何かしらの気づきを得ることがあるので、とても勉強にもなっています。

以下のコードをリファクタリングしてください。

記事内のコード

のように質問したところ、

ChatGPT「

コードは非常に良く書かれていますが、以下にいくつかのリファクタリングと改善提案を行います。

  1. エラーハンドリングの改善: prepareメソッドやexecuteメソッドはエラーが発生したときにfalseを返すことがあります。これらの戻り値をチェックし、エラーがあった場合は例外を投げるようにしましょう。
  2. 接続解除の安全性向上: 例外が発生した場合にもデータベースの接続を確実に解除するために、finallyブロックを使用します。
  3. 関数の単一責任原則: 現在のsearchProducts関数はデータベースに接続し、クエリを準備し、実行し、データを取得し、接続を解除するという複数の責任を持っています。これらの責任を別の関数に分割して、各関数が一つの責任だけを持つようにすると、テストやデバッグが容易になります。

リファクタリングしたコードは以下のようになります。

function prepareQuery($link, array $searchValues) {
    $sql = <<<SQL
    SELECT
        product_name,
        color,
        price
    FROM
        products
    WHERE
        product_name LIKE :productName
        AND
        price >= :price
    ORDER BY
        created_at DESC,
        product_id ASC
    LIMIT
        :limit
    ;
    SQL;

    $stmt = $link->prepare($sql);

    if ($stmt === false) {
        throw new Exception('Failed to prepare the statement.');
    }

    $stmt->bindValue(':productName', '%'.addcslashes($searchValues['productName'], '\\_%').'%', PDO::PARAM_STR);
    $stmt->bindValue(':price', $searchValues['price'], PDO::PARAM_INT);
    $stmt->bindValue(':limit', $searchValues['limit'], PDO::PARAM_INT);

    return $stmt;
}

function executeQuery($stmt) {
    $result = $stmt->execute();

    if ($result === false) {
        throw new Exception('Failed to execute the statement.');
    }

    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

function searchProducts(array $searchValues):array
{
    // データベースに接続する
    $link = dbConnect();

    try {
        // Prepare the SQL query
        $stmt = prepareQuery($link, $searchValues);
        // Execute the query and fetch the result
        $products = executeQuery($stmt);
    } finally {
        // データベースの接続を解除する
        dbDisconnect($link);
    }

    return $products;
}

このように分割することで、各関数が単一の責任を持つようになり、コードのテストやデバッグが容易になります。

という回答でした。ジュニアエンジニアとしては、見落としがちな素晴らしい提案だと感じます。

「シーケンス図を PlantUML 記法で書いてください。」

ブログ記事を書く際に最近、シーケンス図を加えてみているのですが、その図については、ChatGPTにベースを書いてもらって、そこから編集するようにしています。

以下のブログ記事では、

ryamate.hatenablog.com

以下の図を作成しました。

このブログ記事の内容について、処理フローのイメージ(PlantUMLのシーケンス図)を書いてください。登場させるのはユーザーとFlutterとWebViewとWebページのみにして、動作については日本語でお願いします。

のようにプロンプトを送信したところ、

ChatGPT「

ユーザー、Flutter、WebView、およびWebページのみを対象にした処理フローのシーケンス図を作成しました。

@startuml
actor ユーザー

ユーザー -> Flutter : アプリを起動
activate Flutter

Flutter -> WebView : WebView を作成
activate WebView

WebView -> Webページ : Webページをロード
activate Webページ

Webページ -> WebView : Webページを表示
note over WebView : WebView内でWebページが表示される

@enduml

この図では、ユーザーがアプリを起動し、FlutterがWebViewを作成します。次に、WebViewがWebページをロードします。最後に、WebページがWebView内で表示されます。

という回答でした。

業務でも「複雑なリクエストとレスポンスの処理を図でまとめてほしい」という依頼があって、 Mermaid 記法でシーケンス図を作成することがあり、 ChatGPT がとても役立ちました。


その他「このメソッドの処理内容を教えて」「この用語の意味を教えて」「メソッドにドキュメンテーションコメントを日本語で書いて」など、何でもかんでも質問や作業依頼しています。

以下の記事の活用方法が目指す使い方に近いなと思います。

qiita.com

使ってみての感想

こんな便利なアプリが存在していることに感謝の念がわくくらいすごいです。笑

課金した方がいいかどうか聞かれたとしたら、 3.5 より断然 4.0 が高性能と感じているので、課金をおすすめします。私は 3,000 円/月払っていることは全く惜しみないくらいには満足していて、 4.0 を知ったら、 3.5 には戻れなくなりました。

以下の記事に、

qiita.com

GPT-4は適切なプロンプトを与えれば、ほとんどのエンジニアを凌駕するコーディング能力を持っています。

また、人間では真似できないコーディング速度や事務処理速度を併せ持つ非常に優秀な存在です。

全エンジニアに「年収10万ドル以上の市場価値があるスキルを持った優秀なメンター/部下」が常についているイメージです。

そのため、AIとのペアプログラミングは今後、全てのエンジニアにとって必須技能となるでしょう。

という記述がありました。

私の場合、 4 ヶ月前から参画しているプロジェクトで、実務で初めてのコーディング業務、かつ、初めての Flutter での開発、という状況でも食らいつけているのは、間違いなく GPT-4 のおかげです。

ChatGPT ばかり使っていては成長していないのではないか?と自問自答しても、そんな感覚はなくエンジニアとして成長していると感じています。エラーに詰まって時間が溶けることが減り、大事なことを考えることに時間を使えていて、むしろ成長は加速していると思います。

ChatGPT についての Qiita 記事

ChatGPT についての記事でとても参考になったQiitaの記事リンクです。

qiita.com

qiita.com

qiita.com

qiita.com

qiita.com

おわりに

今回は、ジュニアエンジニアである私の ChatGPT の活用方法と感想を書きました。現状は基本的な質問→回答、という活用方法で満足してしまっていますが、工夫して利用することでより便利に使えるなら習得していきたいです。

ありがとうございました。



仕事が楽しくて仕方ありません。