5days インターンシップ 2024 を開催しました (その4) #internship
はじめに
9月16日(月) ~ 9月20日(金) の 5 日間、クリエーションラインでのソフトウェア開発を知っていただくためのインターンシップ (4回目) を開催しました！参加していただいた 4 名の学生さんには、成果の報告と感想を以下のブログにまとめてもらいましたので、ここに公開させていただきます。
インターンシップ概要
クリエーションライン富山事業所にて、5日間、モブプログラミングをベースとしたチーム開発体験をしました。
開発環境は以下の通りです。
- VSCodeベースのAIコーディングアプリ Cursor
- DevContainer
- フロントエンド：React、TypeScript
- バックエンド：Springフレームワークを使用したJava
- DB：MongoDB
- メッセージングシステム：Kafka
作業に取り組んだアプリは、今回のインターンシップ用に設計された、TripAgentと呼ばれるAIエージェントアプリです。ユーザーが、旅行の出発地と目的地、旅行日数を入力すると、天気情報のデータとともに、API接続されたChat-GPT4oが最適な旅行プランを考え、出力するというもの。
今回の体験の目的は、このアプリにおけるユーザーの入力値を増やし、精度を高めるというものでした。それに伴い、コードの一部改変をチームで行うことがメインの作業です。
事業所内はゆとりを持った部屋の設計となっており、四人で十分に活動可能な広さでした。モブプログラミングは左下の画像のスペースで行います。
下の画像は、メインの部屋の隣にある、フリーで使用可能な給茶機(茶、コーヒー、味噌汁対応)です。作業中の水分補給も可能で、助かりました。
1日目
午前中は、今回使用する環境やその構築方法等についての講義がありました。実際に手を動かしながら、CursorでテトリスのコードをAIに生成してもらい、その実力や信頼性を確認しました。また午後には、開発環境で使用する、要となるコンテナの概念を学習し、開発環境用のコンテナ、DevContainerの構築をハンズオン形式で行いました。
Cursorとは、VisualStudioCodeをベースに開発されたコーディングアプリ。AIへ質問するチャット欄があり、チャット形式でコードの修正や提案、質問ができます。
AIでテトリスの作成
CursorのチャットAIに、「HTMLとJavaScriptでテトリスを作ってください。ファイルはひとつにまとめてください。」と送信して、送られてきたコードを実行します。
一発目のコードを実行した結果、黒い背景と白い四角のみが生成され、ゲームは実行されませんでした。(左下の画像)
毎度同じ結果になることはない様ですが、コードをよく見ると、とあるidの要素を表示する文が抜けています。それを踏まえて、修正案をAIに送ると、無事に実行ができるコードが返ってきました。(右下の画像)
この様に、AIの書くコードは不完全であるケースもあること、適切な使いどころやプロンプトの渡し方を考えることが大切であることを実感しました。
DevContainer(Docker)の構築、実行
そもそもコンテナとは、開発用のリソース(DBなど)を、サービス単位で管理できるシステムのことです。コンテナ自体を管理するOS上で動くアプリをコンテナエンジンと呼び、コンテナはコンテナエンジンによって動かされています。コンテナはコンテナエンジンにのみ依存するため、OSに干渉されることなく自由に追加、削除が可能です。
例えば、C++の開発環境を追加したい、となったとき、手持ちのOS(Windowsなど)にMinGWをインストールして、パスを環境設定に追加して……と、普通は、比較的面倒な作業が必要です。
しかし、コンテナを使用した場合、かなり楽かつ効率的になります。上の例の場合、C++のコンテナを追加するだけで、OSの面倒な設定なしにして、開発環境をセットアップすることができます。
今回は、Dockerと呼ばれるコンテナエンジンを起動した状態で、Cursorからコンテナエンジンにアクセスし、httpd(webサーバーのデーモン)のDevContainer(開発環境が入ったコンテナ)の追加、削除をハンズオンで体験しました。
2日目
2日目は、実際にモブプログラミングをやってみました。
順列を計算するアプリケーションの作成
午前中は、順列を計算するアプリケーションの開発を行いました。まずは、単独のプログラムだけで順列の計算ができるよう実装しました。これが上手くいったので、次にレイヤードアーキテクチャを意識したプログラムにするために書き換えを行いました。
レイヤードアーキテクチャとは、ソフトウェアを複数の層(レイヤー)に分けて設計するという伝統的な手法のことを言います。主にプレゼン層、アプリ層、ドメイン層、インフラ層の4つの層に分けて設計します。メリットとして、保守性、開発の効率化、スケーラビリティ、セキュリティの向上が挙げられます。デメリットとして、構造が複雑になり、依存関係の管理が難しくなることが挙げられますが、実際の開発では、上記のメリットがあるため用いられることが多いです。今回のインターンでは、アプリケーションの設計にこれを用いており、非常に実践的な手法を学ぶことができました。
AIエージェントを用いたアプリケーションの開発
午後からは、メインであるアプリケーションの開発に入りました。まず最初に行ったのは、どのようなアプリケーションのデザインにするか全員で考えました。それぞれが個別で様々な案を考えた後、全員でその案を分類してまとめ、どれを実装してみたいか、現実的に実装できるのは何かを相談して決めました。ユーザーの視点に立ってどれが必要なのか考えることは4人で取り組んでも非常に難しいと感じました。しかし、それぞれ違った考え、視点を持って考えていることによって、自分一人では辿り着けない、思いもよらないものを考えることができたと感じました。
次に実装を行いました。本日行ったのは、Frontend側の設計です。Reactを用いてUIの設計とJavaを用いてOrder側のAPIに対して入力した値を正しく送信できるように設計しました。Reactは、JavaScriptライブラリの一つで、UIの設計に特化しており、同じソースコードの中にTypeScriptの部分とHTMLの部分が存在しています。今回初めて触ったときには驚きと新鮮さを覚えました。UIの作成は大変でしたが、初期値の設定や、入力上限の設定を作成することができました。
APIへの値の受け渡しの設計では、目的の部分の設計に苦労しました。他の新たに設定した入力部分は数字の入力であるため、int型での処理で十分でしたが、目的の入力は複数の単語、つまりList<String>型で受け渡す必要があり、難易度が高かったと感じました。時間はかかりましたが、きちんと実装することができました。
3日目
３日目は、２日目に引き続きモブプログラミングでOrderの設計を行った後、AIProcessingの設計を開始しました。
Order＜テストコードの作成＞
テストコードは、自分が書いたコードが正しく動作するのか確認するためのもので、ソフトウェア開発において必要不可欠な作業です。テストには、Unit Test（単体テスト）とIntegration Test（統合テスト）があります。これについて学んだ後、実際に順列 nPr のテストコードをMockを使用して作成し、動作の確認を行いました。作成したテストコードが下図になります。
Unit Testは、Arrange（テストに使用する入力と出力の作成）・Action（実行）・Assert（結果の確認）の3ステップでコードを作成します。Assertでは、assert.Equals()を使用して出力値と実際の値が一致しているかを確認しました。同様にIntegrationTestもコードを作成しテストしました。チームメンバー全員が初めてテストコードについて知ったため、コードの作成には時間を要しましたが、学ぶことも多くありました。
kafkaに関する座学
kafkaは、リアルタイムでデータを受け渡すことができるメッセージングシステムです。今回開発するTripAgentでは、kafka Connectを使用してOrderのMongoDBのデータが更新されるごとにこれを検知し、message hubなどにデータを渡す中継役を担っています。実際にkafkaを扱うことはありませんでしたが、kafkaの使用方法などについて学びました。
AIProcessing＜天気情報の取得＞
TripAgentで使用する天気情報は、下図にあるOpen MeteoのWeather Forecast API（ https://open-meteo.com/en/docs ）を利用して取得しました。このAPIでは、Hourly（1時間ごと）とDaily（1日ごと）に天気や降水量、気温など様々なデータを取得することができます。
今回取得するデータはメンバーで議論し合い、以下の5つに決定しました。
- Hourly
- Precipitation（降水量）
- Daily
- Weather code（天気）
- Maixmum Temperature（最高気温）
- Minimum Temperature（最低気温）
- Wind Speed（最高風速）
1時間単位と1日単位でどのデータを使用するのか、AIに渡す情報に過不足がないよう意識しましたが、AIの返答が必ずしも予想したものとは限らないため、選択した情報が適切なのかは実際にAIに渡して確認するしかありませんでした。AIを効果的に利用するためには、きちんとAIについて学び知識を身につける必要があると感じました。
4日目
主にAI-prosessingに関する実装やテストを行い、アプリを完成させました。
APIの実装
Weather Forecast APIから取得した7日分の最高気温と最低気温のデータを、一日の天気の配列に入れる方法を考えました。候補として、「二次元配列」、「ListのList」という2つがあげられ、試行錯誤した結果、最終的にListのListをつくることしました。
プロンプトの作成
プロンプトに渡すための変数を指定するプログラムを書いた後、プロンプトに入力する文章を作成しました。そのなかで次に示す4つの課題を解決することに力を注ぎました。
- 出発地に戻ってきたときは、観光やアクティビティを行わず、帰るだけのプランを出力させること
最終日に出発地点に戻ることだけを指定した場合、AIは戻ってきた地点でも観光やアクティビティを行うことを提案します。そのため、「戻ってきたところでは何もぜず、家に帰るだけです」と指示することで解決しました。 - 出発地点から目的地までの交通手段と移動時間を出力し、移動の金額を予算から支出すること
移動手段と時間を提案するよう指定した場合、旅行先での移動手段しか表示されませんでした。そのため、「旅行先までの移動手段と移動費、旅行先での移動手段と移動費を表示してください」と指示することで解決しました。 - 移動を無駄なく行うこと
旅行の目的地を複数指定した場合、それらの場所を行ったり来たりするプランが提案されることがありました。そのため、「目的地が複数ある場合は移動効率を考えてください」と指示することで解決しました。 - 旅行日数における宿泊の問題
旅行日数を1日と指定した場合に宿泊のプランを提案したり、複数日指定した場合、宿泊なしの日帰り旅行を複数回提案されることがありました。そのため、「旅行日が一日の場合は、日帰り旅行であり、複数日である場合は宿泊してください」と指示することで解決できました。
より良い提案ができるよう、AIが一度作成した旅行プランを精読させ、条件にあったものかを確認させるようにしました。
アプリの動作と課題
「入力したプロンプト」の図に示すように、いくつかの条件を☆で指定し、これらの条件を満たさない場合は、AIに最適な条件を考えさせるようにしました。しかし、正確にこの動作をするとは言えないため、このアプリの課題として残りました。たとえば、「北海道から沖縄まで4日間の予算が5000円」というユーザーからの無理な要望に対して、「5000円で行ける」ととらえられる回答を出力することがあります。
完成したアプリを、社員の方に使っていただきました。「宮城県へ4日間、予算20万円で家族旅行を行う」というものでした。AIはおおむね良い提案をしました。ただ、移動時間においては正確であるとは言えないものが提案されました。
入力例
- 出発地：富山県富山市花園町
- 目的地：北海道札幌市
- 旅行日数：4日
- 人数：4人
- 許容歩数：15000歩
- 目的：観光、グルメ、自然
アプリ入力画面
アプリ出力画面
インターンシップの様子
インターンシップ感想
K.K
自身にとって、初めての長期インターンシップの参加となりました。また、チーム開発(モブプログラミング)、Reactなども初めての経験で、つまずく事もありましたが、学びのある5日間となりました。
個人で開発を趣味程度にしていたのですが、実際の現場を体験すると、何もかもが違いました。
まず、今回改修したWebアプリ、TripAgentは、Client(Frontend)、Order(Backend)、AI-Processing(Backend)という３つの構造に分かれており、使用する言語もシステムもクラスも各所で異なります。プログラムを書く際に、すべての仕様を単一のファイルにひとまとめにして書いていた私にとっては、このアーキテクチャになぞらえて書くことが新鮮でした。
また、このコーディングをチーム開発として執り行う上での考え方も学びになりました。複数人で書くからには、全員にとって分かりやすいルールや書き方(関数や変数の名前など)を意識して書かなければなりません。
さらに、モブプログラミングの形式も私にとっては初めての経験で、ナビゲーターとしては、指示を出すときの的確さ(具体的な行数の指定など)、ドライバーとしては、ナビゲーターに干渉しすぎず、プロジェクトを前に進めるためのアイデア出しなど、難しく感じることが多々ありましたが、日を追うごとに少しずつ改善することができました。
この5日間の経験を通して、チーム開発の難しさや楽しさ、言葉の扱い方など、自身のコミュニケーション能力の現状を感じました。
また、ほぼ初対面であるにも関わらず、一同が富山にあつまり、ここまでコミュニケーションをとって連携できるようになった、という事にも感銘を受けています。
実際、このような業種についた暁には、このような経験を何度もすることになると思います。相手を信頼すること、されること、ペースを合わせてもらうこと、合わせることなど、基本的な人と人との関わりを大切にしていくことが何よりも大事だと感じました。
特に、チーム開発は、自身が思いつきもしなかったようなアイデアがメンバーから出てきたり、逆に提案をしたりと、一丸となって進めていくプロセスに楽しさと団結を感じました。開発を予定通り完遂できたのは、チームメンバーの方々、クリエーションラインの担当者さんのおかげです。ありがとうございました。
今回の経験を糧に、よく復習し、蓄えたスキルや思想を自分のものにしていきたいと思います。
R.N
今回のインターンシップでは、初めてチームでのアプリケーションの開発を行いました。私は、プログラミングの経験はあるものの、アプリケーションの開発自体の経験はなく、JavaやReactなどを使用したことがなかったため、知らないことばかりでの開発経験でした。しかし、丁寧なご指導の下、今回用いる技術の説明やアプリケーション開発において必要な知識を教えていただき、悩みながらもアプリを完成させることができ、大変勉強になりました。
また、今回のチーム開発では、モブプログラミングという手法を用い、チームで考えながらプログラムを組むという経験をしました。モブプログラミングを行っている中で多くの気づきがあり、どうすれば仲間に上手く伝えられるのか、どうすればチームとして良い開発が行えるのかなど試行錯誤を重ねながら取り組むことができました。最終的に、全員で完成させることができたときは、とても達成感がありました。今回の課題である開発は非常に難易度が高く、おそらく自分一人では今回のアプリケーションの開発は完遂することができなかったと思います。一緒にチーム開発をしてくれた仲間のみなさんには大変感謝しております。
改めて今回のインターンシップでは、実際にアプリケーション開発を行うことができ、実践的なことを多く学ぶことができたと感じています。チーム開発もすばらしい経験だったと感じています。
最後に今回お世話になったクリエーションライン株式会社のみなさまに感謝を述べたいと思います。5日間大変お世話になりました。今回の経験を活かして、これから学業や就活を頑張りたいと思います。
R.T
今回のインターンシップでは、Webアプリ開発について開発環境の構築など1から学び、実際にアプリを開発しました。Javaの経験はあまりない状態だったうえに初めてのアプリ開発だったのですが、今回のインターンシップを通じて企業で行う開発を体験できたことは、今後自身がIT業界で働く際に大いに役立つと思いました。Devcontainerを用いたコンテナやレイヤードアーキテクチャなどアプリ開発に必要な知識だけではなく、「チームで1つのアプリを開発する」ために必要となるモブプログラミングなどの開発プロセスや取り組む姿勢を学ぶことができました。また、チームメンバーのほとんどがアプリ開発の経験がなかったのですが、モブプログラミングを用いてチーム全員で試行錯誤することで1つのアプリを完成させることができました。これは自分1人ではできないことだと思いました。この5日間でWebアプリの開発をチームで行うことの楽しさを実感することができました。今回一緒に開発に取り組んでくれたチームの皆さんから学ぶことも多く、大変感謝しております。
Webアプリ開発を通じて、これからの自分に足りないことにたくさん気づくことができました。また、アプリ開発の面白さを体感し、今後ともアプリ開発についての勉強をしていこうと思いました。今回開発したアプリについてもさらに改良したりして実践にも取り組み、さらにスキルなどのレベルアップに努めていきたいと思います。
最後に今回お世話になりましたクリエーションライン株式会社の皆様に感謝申し上げます。
N.A
今回のインターンシップで初めてＷebアプリ開発を体験しました。アプリの構造について知らないことが多く理解することが大変でしたが、座学とコーディングを繰り返し行うことで身に着けることができました。また、チームで開発することのメリットをモブプログラミングを通して学ぶことができました。モブプロでは、はじめほかの人の足を引っ張らないか不安でしたが、分からないことを仲間と助け合うことができたため、未経験でも焦らず開発に取り組むことができて良かったです。また、モブプロで発言する時やAIに指示するときには、考えを論理的にまとめる必要があると感じました。特にAIには人間が望むことを細かく分かりやすく伝えなければ、間違った回答が得られるため、正しい使い方をしなければいけないと思いました。知識や経験が少ない分、発言ができずに悩むことがありましたが、AIをうまく利用することで、だんだんと改善できました。
また、自分にはプログラミング言語の知識が不足していることに気が付きました。下流工程のみならず、上流工程においてもプログラミングの知識はより良い製品を開発するために必要であるため今後学習して補っていこうと思います。
全体を通して、AIを使ったアジャイル開発や最近使われている開発ツールに触れることができ、時代に乗った開発方法を使うことができたため良い経験になりました。5日間お世話になりました。
