海外カンファレンス登壇を通じて得た技術トレンド＋α


[NTTテクノクロス Advent Calendar 2024](https://qiita.com/advent-calendar/2024/ntt-tx) シリーズ2の23日目の記事です。

こんにちは。NTTテクノクロスで、プリンシパルエバンジェリストとして活動している神原([@korodroid](https://x.com/korodroid))です。当社では、[高度専門人材向けのキャリアパス](https://www.ntt-tx.co.jp/corporate/professionals/member.html)が準備されており、私はエバンジェリスト領域でキャリアを積んでいます。

本記事のタイトルに含まれる海外カンファレンスに関して、直近の活動をご紹介します。今年は、国内での講演活動(技術関連、キャリア教育、エンジニアキャリア形成、英語学習など)に加え、海外では、自身としては年間で最多となる4つのカンファレンスで講演の機会に恵まれました(Method Conference/DevFest Atlanta/DevFest Milano/AI Heroes)。今月登壇させていただいた「AI Heroes 2024」が海外講演で累計20回目となりました。国内外問わず、カンファレンス、セミナー、コミュニティイベントなどで講演のご依頼等ございましたら、お気軽にご連絡いただけますと幸いです。

![Activity2024](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/230d1423-4982-0584-911a-9b2c5c822987.png)

プライベートでは、趣味のランニングの延長で、人生初のフルマラソンに挑戦し、無事に何とか完走できました。実は途中で足が攣る→一時休止を2回繰り返したり、大変な目に遭いました。ただ、ゴールしたときの達成感がものすごく心地よくて、これからも定期的に大会へのエントリを考えています。

話を本題の技術トレンドに戻します。国内外のカンファレンスに参加すると、 **技術分野に関わらず、生成AIがエンジニアリングの世界において、当然の存在になっている** ことを実感します。 **AIに特化したカンファレンスでなくても、セッションのテーマとして見かけることも増えてきています。また、ネットワーキングとして現地のエンジニアとして意見交換すると、様々な業務で生成AIが実際に広く活用されている** 状況を改めて認識しました。

自身も **生成AI+アプリ開発** のテーマで、社内外で啓蒙しながら世界の技術革新に貢献すべく、今年度は主に以下の活動に取り組みました。

 - (1)生成AIを活用したアプリ開発研修の立ち上げ＆技術者育成
 - (2)↑の延長線で技術書執筆
 - (3)国内外のカンファレンスでの登壇

本記事では、これら活動に共通するテーマとして、 **アプリ開発へ生成AIを効果的に活用する方法** を具体的な例を交えご紹介します。


# アプリ開発への生成AI活用
## はじめに
アプリ開発において、生成AIを活用出来うるケースは多く存在します。幾つか例を挙げましょう。

![Overview](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/b84a59af-e4d0-bace-5770-17099168edca.png)

 **「コードの生成」「コードのレビュー」「リファクタリング＆モダナイジング」「デバッグ」「テストケースの生成」「パフォーマンス改善」など** あります。記事執筆時点において、 **生成AIだけで全てが完結する状況とは言えませんが、人間が手動で取り組んできたタスクのうち、それなりの内容を生成AIの力を借りることで、より効果的に進められるようになってきています。**

ここからは「コードの生成」に焦点を当て、生成AIを活用してコード生成を実際に行う流れを紹介します。生成AIは非常に強力なツールです。その一方で現時点で完璧とは言えません。期待通り、期待以上の振る舞いに驚くことは多いですが、うまくいかないこともまだまだあります。実際にやってみての気づきを交えて解説します。

## 本記事のレシピ

今回はクロスプラットフォームの開発フレームワークである[Flutter](https://flutter.dev/)を使って、次の時計アプリを作ってみましょう。

![Overview](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/ccc82c44-984b-b9e3-8560-3139d3aed68a.png)

ちなみに、Flutterは、モバイル(Android/iOS)だけでなく、デスクトップ、組み込み機器など向けアプリを共通のソースで開発できます。既に多くのプロダクトやサービスで採用されており、国内外を問わず、非常に人気があります。

## コード生成AIを活用したアプリ開発のステップ
次のように、3つのステップを踏むことになります。

![Overview](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/38c94202-1d5d-6180-8bcc-fd91b4ad48f3.png)

順番に進めていきましょう。

## Step1. ベースコードの生成
コードの生成に対応した生成AI環境は、[ChatGPT](https://chatgpt.com/)、Gemini、Claudeなど、色々あります。プラットフォーム毎に特徴の違いがあります。ただ、Flutter向けの簡単なアプリのコードを生成することに限定した場合、大きな優劣の違いはない印象を持っています。

![Step1-1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/e8dff836-bff2-6b02-95eb-4b1970a45664.png)

今回は、あくまで例として、ChatGPTを使います。もちろん、他の生成AI環境を使っても問題ありません。

テキストボックスに「Flutterでアナログ時計を表示するコードを作って。」と入力してみましょう( **画面キャプチャでは英語の実行例となっていますが、日本語で入力して問題ありません** )。ちなみに、この指示文は、 **プロンプト** と呼ばれています。対話型の生成AI環境を使ったことがある方にとってはお馴染みの内容だと思います。

驚くべきことに、そんなに待つこともなく、コードがあっという間に画面内に表示されるのではないでしょうか。

![Step1-2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/ddbf4ec1-b62d-157f-658d-6daf628e8a29.png)

生成されたコードを実際に実行してみましょう。

![Step1-3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/d9efe102-d25b-7579-6e0d-c41a57864fdc.png)

↑の左側はChatGPTのWebブラウザ画面です。この画面の右上に **「Copy Code」** というボタンがあるので押してください。これでクリップボードにこのコードがコピーされます。続いて、↑の右側は[DartPad](https://dartpad.dev)というサービスの画面です。DartPadはDartやFlutterのコードをその場(クラウド上)で実行して動作確認までできるという非常に便利な環境です。

今回はこれを使いましょう。(もちろん、ローカルにAndroid StudioやVS Codeなど開発環境をお持ちの方はそれを使って全く問題ありません。)先ほどのコードをDartPad(↑の右側の画面)にペーストしましょう。そして、この画面の右上に **「Run」** というボタンがあるので押してください。少し待つと、(運が良いと)アナログ時計の画面が表示されると思います。「運が良いと」と書いたのは、生成されたコードは必ずしも100%正解とは限らず、時にはビルドエラーになったり、実行できても、意図しない表示になることもあります。

参考までに、以前、検証した際に、生成AIの3つの環境を使って生成したアナログ時計の実行イメージはこちらです。

![Step1-4](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/4c1bb0d1-1f3b-794b-47a6-6d67d192601c.png)

私が実行した時はたまたま↑の結果となりましたが、実行する度に生成されるコード、および、それに伴って、実行結果が変わったりします。なぜそうなるかの理由は、本題から逸れるのでここでは割愛します。


## Step2. アプリの修正

めでたく、アナログ時計は生成されたものの、最初に紹介した「完成版のアナログ時計」とは乖離があります。 **読者の皆さんの環境では、全く異なる時計が表示されているかもしれません(むしろ、その可能性の方が高いです)。その際は、修正すべき問題も変わってきますので、適宜、読み替えてください(重要)。** 

![Step2-1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/f2866ab6-4af0-8af4-bee4-73687b1cda40.png)

 - 時計の色が違う
 - 時計が小さ過ぎる
 - 文字盤がない
 - その他色々...

これらのギャップを埋めるべく、再度、生成AIの力を借りてみましょう。

例えば、その最初の例として、背景色を薄い緑色に変えてみましょう。

![Step2-2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/53e4421a-6675-1633-4397-03aff7395a99.png)

↑のとおり、「時計の背景色を薄い緑色にして。」とプロンプトを入力してください。この指示に沿った修正版のコードが生成されるはずです。再度、DartPad側にコピー&ペーストしてください。(運が良いと(2回目))時計の背景色が変わったはずです。

次に時計が小さ過ぎる問題を改善してみましょう。

![Step2-3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/b7cb5395-de6b-7b20-8058-fd1de8fa59cc.png)

↑のとおり、「時計がスクリーンサイズに対して、小さ過ぎます。スクリーンいっぱいに表示してください。ただし、コードは差分だけを表示して。」とプロンプトを入力してください。コードが生成されたら、再度、DartPad側に、差分のコードをコピー&ペーストしてください。ちなみに、コードを差分のみ生成してもらったのは、 **「コード全体を再度作ってもらうと時間がかかってしまうため、その時間を節約するため。」** です。コード生成に生成AIを活用するときは役立つはずです。よかったら、活用してみてください。

(運が良いと(3回目))時計が大きくなったはずです。 ただ、もしかすると、針だけ短すぎる状態になっているかもしれません(なってないかもしれません)。私が実行した時は、このように針だけ短い、ユニークな時計が表示されました:-)。このように、生成AIを活用すると、うまくいくときもいかないときもあります。

![Step2-4](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/c0dd312c-2db3-1fbb-0dd4-c3ae2fd10b8e.png)

これまでと同様にギャップを埋めていきましょう。例えば、「時計の針が枠に対して短か過ぎます。修正して。」などとお願いしてみましょう。

![Step2-5](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/b75e9f4f-fe55-345e-3243-17242e103593.png)

(運が良いと(省略...))時計の針が長くなって、いい感じになったのではないでしょうか。 

## Step3. コードの段階的な修正の繰り返し

ただ、最終的に作りたいものとはまだまだ、色々とギャップがあります。Step2で紹介したように、「段階的なコード修正」を繰り返していくことで、最終版のアナログ時計に少しずつ近づけることができます。

![Step3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/cb5b5e1c-bce0-4e53-1a9a-ed930e61d1e0.png)

# (+α)アプリ開発における生成AI活用の考え方

私自身、アプリ開発に生成AIを当然のように活用するようになっています。取り組み始めた当初はうまくいかないことも多かったですが、生成AIの特性が分かるに連れ、考え方が変わってきました。現時点では、完全にAIに頼る訳でもなく、かたや、完全に否定する訳でもなく、AIと人間のそれぞれの知見を踏まえ、両者をバランスよく組み合わせた使い方が最適だと考えています。また、会社、業務内容や顧客によっては、そもそも生成AIの活用が全面禁止、一部禁止されていることもあります。生成AIを活用するときは、他にも幾つか考慮すべきことがあります。詳細は省略しますが、十分に注意が必要でしょう。


# 最後に宣伝
先日まで開催されていた技術書典17では当社の仲間と生成AIの書籍(本記事の冒頭で紹介した社内研修を本としてまとめたもの)を出しています。オンラインで入手いただけますので、ぜひこちらもご覧ください。

 [生成AIではじめるプログラミング体験ガイド](https://techbookfest.org/product/5aEpfLdzvmE04cNLGE6J2v)

[<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34766/35a9fd5b-b41d-c82c-797b-c97eb3c41616.png">](https://techbookfest.org/product/5aEpfLdzvmE04cNLGE6J2v)

# おわりに
今回は「海外カンファレンス登壇を通じて得た技術トレンド＋α」をご紹介しました。当社では、技術に関する様々な業務に加え、[ソフト道場研修講師](https://www.ntt-tx.co.jp/products/soft_dojyo/)、[技術ブログ](https://www.ntt-tx.co.jp/column/kambara_blog.html)、[サステナビリティ活動(学生向けIT/キャリア教育)](https://www.ntt-tx.co.jp/corporate/csr/)なども行なっています。よろしければ、リンク先もご参照ください。

最後に、様々な分野で多くのエンジニアが活躍しています。興味を持ってくださった方は、[NTTテクノクロス Advent Calendar 2024](https://qiita.com/advent-calendar/2024/ntt-tx)から気になる記事も読んでいただけますとうれしいです。

明日の記事(シリーズ1/シリーズ2)もお楽しみに！