ただコードを出すだけじゃない、chatGPTの使い方

image

はじめに

皆さんは普段、chatGPTを使用していますか?

chatGPTはコードを出力させるのに用いられがちですが、開発を行う上で他にも有用な使い方があります。
今回は私が実際に試してみて、便利だなと思った使い道を紹介します。

chatGPTの活用法

正規表現を出力してもらう

ログインフォームのバリデーションなど、正規表現を用いることがあると思います。
そんな時はchatGPTに出力してもらいましょう。


>>> アルファベット大文字、小文字、半角数字、記号の.~_を用いた6文字以上20文字以内のパスワードを正規表現で出力してください。

↓返答

以下は、アルファベット大文字、小文字、半角数字、および記号.~_を用いた6文字以上20文字以内のパスワードを生成するための正規表現パターンです:

^[A-Za-z0-9.~_]{6,20}$

この正規表現は、指定された文字セット内で6文字以上20文字以内のパスワードを許容します。特定の文字が少なくとも1つ含まれる必要はありません。

このように、条件を指定するだけで正規表現を出力してくれます。

ダミーデータを出力してもらう

apiとやりとりできない、したくない時にUIの調整をしているときは、ダミーのデータが欲しくなる時があります。
1件だけならまだ楽ですが、10件、それ以上欲しい時は面倒なのでchatGPTに頼んで出力してもらいましょう。

>>> ダミーデータを作成してください。5件お願いします。データの値はランダムに変更してください。

{
    "users" : [
        {
            "id": 1,
            "name": "John Doe",
            "age" : 25,
        }
    ]
}

↓返答

以下は、5件のダミーユーザーデータをランダムに生成したJSON形式のデータです:

{
  "users": [
    {
      "id": 1,
      "name": "John Doe",
      "age": 25
    },
    {
      "id": 2,
      "name": "Jane Smith",
      "age": 30
    },
    {
      "id": 3,
      "name": "Michael Johnson",
      "age": 28
    },
    {
      "id": 4,
      "name": "Emily Davis",
      "age": 22
    },
    {
      "id": 5,
      "name": "William Wilson",
      "age": 35
    }
  ]
}

このように、見本を提示してあげると好きなだけ出力してくれます。

変数名、関数名をつけてもらう

プログラムを書くとき、適切な変数名や関数名がわからなくなる時があります。
そんな時はコードを貼り付けて適切な命名のヒントをもらうことができます。

プログラムの解説をしてもらう

チームで開発をしているときや、ネット上で見つけたコードはどの部分で何をしているかわからないことがあると思います。
そんな時はchatGPTに質問して解説してもらいましょう。
1行ずつ解説してとお願いすると、より詳しい解説を聞くことができます。

>>>このコードの解説をしてください。
int fibonacci(int n) {
  if (n <= 0) {
    return 0;
  } else if (n == 1) {
    return 1;
  } else {
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
}

void main() {
  int n = 10;
  for (int i = 0; i < n; i++) {
    print(fibonacci(i));
  }
}

↓返答

提供されたDartコードは、再帰的な方法を使用してフィボナッチ数列を計算し、最初の10個のフィボナッチ数を表示するものです。以下ではコードの解説を行います:

// フィボナッチ数を再帰的に計算する関数
int fibonacci(int n) {
  if (n <= 0) {
    return 0; // nが0以下の場合、0を返す
  } else if (n == 1) {
    return 1; // nが1の場合、1を返す
  } else {
    // nが2以上の場合、fibonacci(n - 1)とfibonacci(n - 2)を再帰的に呼び出して
    // それらの結果を足してフィボナッチ数を計算する
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
}

void main() {
  int n = 10; // フィボナッチ数列の長さを設定

  // 最初の10個のフィボナッチ数を計算して表示
  for (int i = 0; i < n; i++) {
    print(fibonacci(i));
  }
}
このコードの要点は次のとおりです:

fibonacci関数は、引数として整数 n を受け取り、フィボナッチ数列の第 n 項を計算して返す再帰関数です。
n が0以下の場合、関数は0を返します。
n が1の場合、関数は1を返します。
n が2以上の場合、関数は fibonacci(n - 1)fibonacci(n - 2) を再帰的に呼び出して、それらの結果を足してフィボナッチ数を計算します。
main関数では、最初の10個のフィボナッチ数を計算して表示します。n の値を変更すれば、より多くの数を計算できます。
ただし、この実装は再帰呼び出しを多数行いますので、大きな n に対しては計算時間が指数的に増加します。効率的なアルゴリズムを使った非再帰的な方法を検討することが重要です。

おまけ 自分のコードの添削させる

こちらは半分遊びのようなものですが、chatGPTにコードを添削してもらうこともできます。
試しに、私が書いたユーザー設定ページのコードを採点してもらいます。

以下のReactで書かれたコードについて、可読性、保守性、拡張性、完全性それぞれについて5段階で評価し、最終的な点数を100点満点で採点してください。
(以下コード省略)

↓返答

提供されたReactコンポーネントであるUserSettingに対して、可読性、保守性、拡張性、完全性の観点から5段階で評価します。各評価の詳細を示し、最終的な点数を採点します。

1. 可読性 (Readability) - 5/5:
   - 変数、関数、コンポーネントなどに適切な名前が使われており、コードの理解が容易です。
   - インデントやスペースの使用が整理されており、コードの構造が明瞭です。
   - コメントが不足しているように見えますが、関数や変数の役割は比較的明確です。

2. 保守性 (Maintainability) - 4/5:
   - コードは単純で、コンポーネントが小さく分割されています。コンポーネントの再利用性が高いです。
   - イベントハンドラー(`handleLogout`、`handleContact`など)が関数として抽象化され、コンポーネントの中で繰り返し使用されているため、保守性が高いです。
   - ただし、関数内で直接URLを生成するなど、ビジネスロジックとビューが混在している箇所もあるため、もう少し切り分けておくと良いでしょう。

3. 拡張性 (Scalability) - 4/5:
   - 新しい機能を追加するために、コンポーネントの追加や既存コードの修正が比較的容易です。
   - ただし、ページ内のリンクやダイアログボックスがハードコードされているため、変更が必要な場合に手動で変更する必要があります。これをより動的に設定できるようにすると拡張性が向上します。

4. 完全性 (Completeness) - 4/5:
   - ユーザー設定画面を表示し、ログアウト、お問い合わせ、利用規約、プライバシーポリシーへのリンクが含まれています。
   - ダイアログボックス(ログアウト確認用、お問い合わせ遷移確認)も提供されており、ユーザーエクスペリエンスを向上させています。
   - ユーザー名などの情報がローカルストレージから取得され、URLの生成が行われています。

総合的に、このコードはかなり良い形で書かれており、可読性が高く、保守性と拡張性も十分です。ただし、URLの生成などのビジネスロジックをより切り分けてコードを整理し、ページ内リンクを動的に管理できるようにするとさらに向上します。最終的な点数は90/100です。

意外にもいい点数でした☺️
きちんと指定した項目について評価が行われており、改善点も指摘してくれています。
なんちゃってペアプロな感じに使えます。
(chatGPTが扱える情報がある程度古いため、その言語最新の仕様や新しく追加された機能などに対応していない可能性がある点には注意です。)

終わりに

最後まで見ていただいてありがとうございました!
chatGPTの活用法ということで、いくつか紹介しましたが、まだまだ面白い使い方はあると思うので探していきたいです!

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More

タグ

Flutter (110)初心者向け (28)イベント (18)Google Apps Script (15)Nextjs (12)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)vscode (5)デザイン (5)新卒 (4)就活 (4)Figma (4)Dart (4)JavaScript (4)お知らせ (4)FlutterWeb (3)Prisma (3)NestJS (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)設計 (2)線型計画法 (2)事例 (2)Git (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)Google (1)Web (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)DeepLeaning (1)深層学習 (1)Google Colab (1)コード生成 (1)GitHub Copilot (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)permission_handler (1)flutter_local_notifications (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More