はじめに
NRI Hackathon に今年も参加してきました。早いもので11年目、ハッカソン参加は長く続けている趣味の一つです。毎年新しい発見と学びがあります。
NRIハッカソンとは？
みんなで楽しむアプリ開発イベントです！
ハッカソンとは、決められた期間内にアプリ開発をするイベントです。NRIハッカソンは、NRIの有志メンバー「Arumon」によって企画しており、 毎年「楽しく課題解決する」ことを目標にかかげています。
出典） https://bitconnect.nri.co.jp/
昨年の様子はこちら。
ハッカソンに参加する時には「新しいことに挑戦する」ことを意識しています。新しい技術に触れることは楽しく、学びがあります。これからも続けていきたいです。
2014年 : CakePHP MySQL Apache Linux
2015年 : Node.js Express MongoDB
2016年 : Swift MongoDB
2017年 : Angular Firebase
2019年 : React Amplify
2021年 : ノーコード
2022年 : React CDK
2023年 : Flutter Dart ChatGPT
2024年 : 生成AI Cody Claude3.5Sonnet
今年のテーマは「関係人口」
「茨城県鉾田市・千葉県銚子市・静岡県掛川市」の3拠点に分かれて地域の魅力を味わい、交流し、課題を発見しながらアイデアを形にしていきました。
なぜ「関係人口」？
「関係人口」とは、住民票を持つ定住人口でも、観光で訪れる交流人口でもなく、地域経済に継続的に貢献する人々のことを指します。この層の創出・拡大が地方創生において重要と考えられています。
副業で週末だけ地域の企業で働く、地域のお祭りに定期的に参加する、ふるさと納税で支援するーー。地域とは様々な関わり方があります。
実際に地域で地元の方と交流しながらアイデアを考え、社会課題の解決に挑戦しませんか？
出典）https://bitconnect2024.peatix.com
私は静岡県掛川市に行ってきました。掛川市は静岡市と浜松市の間にあり、東海道新幹線のこだまが止まります。お茶が有名で深蒸し茶は美味しかったです。東経137度にあり日本の東西の文化が交流する観光の街でもあります。
お昼に食べたうな重は絶品でした。
掛川の方のお話を聞き、地域の特徴やそこに住み働いている方と対話しました。キウイフルーツカントリーJapanの方の農業に対する向き合い方が印象に残っています。ふるさと納税もされているそうなのでいつか食べてみようと思います。
掛川の会場は素敵な邸宅でした。「松ヶ岡」旧山﨑家住宅 掛川市指定文化財を市の方が利用させてくださり、貴重なハッカソン体験でした。ありがとうございます。
ハッカソンでつくったもの
今年のハッカソンでは技術提供されていた生成AI Cody をハックしました。
掛川市には大学が無く、若者は掛川を離れてしまうそうです。掛川でITを学び、実践できる場があればUターン就職の一助になるのでは無いかと考えました。
そこでプログラミングを教え、採点・評価してくれる先生となる生成AIを準備しました。GitHubリポジトリを登録することで、企業向けのレジュメも生成されます。ただ学んで終わりではなく、その後のインターン参加へとつながるよう、このようなサービス設計にしています。
生成AI Cody とは
ハッカソンの技術協賛で Cody が提供されていたので使ってみました。本記事ではハッカソン期間内で Cody を触ってみた学んだ Tips をまとめていきます。
※あくまでハッカソン期間内で触った範囲のものとなります。個人の見解であり公式の見解では無いことをご留意ください。
Cody 開発者のコーディング体験を変革するコードアシスタント
Codyは、開発者がコードを書いている際に、適切な構文や関数、変数名をリアルタイムで提案します。 これにより、タイプミスの減少やコーディング速度の向上に寄与します。
出典）https://aslead.nri.co.jp/products/cody/
Cody でできること
Cody は生成AIと対話、VSCodeプラグインを用いたコーディング支援、テスト支援ができます。いわゆる GitHub Copilot や ChatGPT と類似のプログラミングツールです。
Cody 自体は生成AIではなく、Claude3.5 sonnet などの生成AIエンジンを選択できるツールです。以下の記事の Genie AI と同じような立ち位置のものです。
ソースコードの生成・レビュー、テストコードの生成・レビュー、ドキュメントの作成などの機能は当たり前のように準備されています。
Codyが特徴的だなと思うのはカスタムコマンドの定義やコードベースの文脈理解ができることです。
カスタムコマンドの定義
Cody や Genie AI などのツールは、要するにソースコードとプロンプトを生成AIに API 経由で渡しているものです。
カスタムコマンドというものは、プロンプトを自由に作成できて、コマンドとしてチームで共有できる機能です。キャプチャの 01-Tutorial-React-Programming などがカスタムコマンドです。
VSCode プラグインで Cody をインストールして Prompt タブを開くと Create Prompt ボタンがあります。これをクリックします。
Cody のページが開くのでカスタムコマンドを作れます。
Cody のページで右上のアイコンからSetting→Organizationを選んでいくとチームを作れます。チームを作るとカスタムコマンドを共有できます。
今回のハッカソンでは初心者がCodyと対話しながらプログラミングを学習する教材や採点・評価、レジュメ生成プロンプトを作りました。Cody はかなり汎用性がありますよね。
初心者向け React プログラミング講座プロンプト
# 初心者向け React プログラミング講座プロンプト
## 目的
初心者が React の基本を理解し、簡単な Web アプリケーションを作成できるようになるためのステップバイステップの講座を提供します。コード例や演習も盛り込み、実際に手を動かしながら学べるようにします。
---
## プロンプト
あなたは React の講師であり、初心者のためのプログラミング講座を行います。次のステップに従いながら、React の基本を解説し、理解度を深められるようにします。以下の手順で説明を行ってください。
### 1. React の基本概念を説明
- React とは何か、React を使うメリットについて説明してください。
- JSX の概念をわかりやすい例を用いて説明してください。
- コンポーネントの基本構造について、シンプルなコード例とともに説明します。
### 2. 環境構築
- Node.js と npm をインストールする手順を示してください。
- Vite を使った React プロジェクトの作成方法を説明し、セットアップ後のプロジェクトのディレクトリ構造について簡単に紹介してください。
### 3. 基本的な React のコンポーネント
- 関数コンポーネントとクラスコンポーネントの違いを説明し、関数コンポーネントを用いた簡単な Hello World アプリを作成するコード例を提供してください。
- コンポーネントの再利用性と分割のメリットについて簡潔に説明してください。
### 4. Props と State の使い方
- Props の基本概念と使い方をわかりやすい例を使って説明してください。
- State の概要と、`useState` フックを使った State の管理方法を示し、シンプルなカウンターアプリを実装する例を紹介してください。
### 5. イベントハンドリング
- React におけるイベントの扱い方について説明し、ボタンを押すとカウンターが増えるようなシンプルなインタラクティブ要素を作成する方法を紹介してください。
- イベントハンドラの設定方法や、コールバック関数の扱い方も含めて解説します。
### 6. React Hooks の基礎
- `useEffect` の概要と基本的な使用例を紹介し、コンポーネントのライフサイクルを意識したデータ取得の例を示してください。
- `useState` との違いを解説しながら、`useEffect` を使った実例を交えて説明します。
### 7. 演習と応用
- 小さなアプリケーション（例えば、ToDo リストやカウンターアプリなど）を完成させるための演習問題を提示し、学んだ内容を実際にコードに反映させる機会を提供してください。
- 各演習にはヒントを与えつつ、解答例も提供して理解を深めさせます。
---
このプロンプトは、React の基礎から始め、最終的に簡単なアプリケーションを作成できるように段階的に進む構成です。
プログラミングの評価プロンプト
# インターン生向けReact プログラミングの評価
## 目的
インターン生であるReact初学者が、実際に企業に入社してエンジニアとして活躍するためにReactプログラミングのコードの評価をする。
評価においては、以下の点を重視する。
- 複数名で開発するプロジェクトとして、スムーズな開発に寄与するコードとなっているか
- 数年間の運用保守をするにあたって、変更容易性や理解容易性を十分にもったコードとなっているか
## 評価の出力テンプレート
以下は、よりわかりやすい表現に置き換えた評価テンプレートです。このテンプレートでは、専門用語を避け、誰にでも伝わりやすいように表現しています。
コード評価テンプレート
【評価内容】
この評価は、コードが「どれくらい理解しやすいか」と「どれくらい手を加えやすいか」に焦点を当てています。ITに詳しくない方でも理解できるように説明をしています。
【評価項目と結果】
1. わかりやすさ（このコードがどれくらいスムーズに理解できるか）
• 評価基準: コードの整理整頓の具合、説明やコメントがあるか、言葉の使い方がわかりやすいか
• 評価結果: {5段階評価、具体的に「どこがわかりやすい」「ここが難しい」などの理由も含めて説明}
2. 修正しやすさ（このコードに手を加えるのがどれくらい簡単か）
• 評価基準: ひとつひとつの部分が独立しているか、他の部分に影響せずに修正や追加ができるか
• 評価結果: {5段階評価、具体的な理由も含めて説明}
3. エラーや問題が起きやすいポイント（操作が複雑で間違いやすいところ）
• 評価基準: 条件分けや同じ部分の繰り返しが多くないか、ややこしい組み合わせがないか
• 評価結果: {5段階評価、もし問題が起きやすい箇所があれば説明}
4. 改善した方がよい点（わかりにくい、または修正しにくい部分についての提案）
• 提案内容: {具体的に何をどのようにするとさらにわかりやすく、修正しやすくなるかを提案}
【総合評価】
• わかりやすさ: {5段階評価、例: ⭐⭐⭐⭐☆}
• 修正しやすさ: {5段階評価、例: ⭐⭐⭐☆☆}
• 改善した方がよい点: {一言でまとめると、どう改善すればさらに良くなるか}
• 複数名で開発するプロジェクトの一部としてみたときの評価：{一言でまとめる}
• 今後５年運用保守をするプロジェクトの一部としてみたときの評価：{一言でまとめる}
使用方法
このテンプレートに沿って、コードが「どれくらい理解しやすいか」と「手を加えやすいか」を評価してください。
レジュメ生成プロンプト
# インターン生向け React プログラミング評価及び就職斡旋用レジュメ生成
## 目的
インターン生が 書いたReact のコードを分析し、中小企業の仕事をするために必要な能力をどの程度備えているかを評価する。
その評価をインターン生を雇う可能性のある企業に対して見せて、インターン生とのマッチングを図るために使用する。
---
以下の評価軸とテンプレートは、ITに詳しくない中小企業でも理解しやすく、学生がコードの運用保守を3年間担当できるかを判断する助けとなります。特に、企業が「この学生が長期間、安定的に貢献できるか」を知るための観点を設けています。
評価軸
1. 日々の使いやすさ（コードが日常的な運用に支障なく機能するか）
• 評価基準: このコードは特別な知識がなくても問題なく動作し続けるか、また予期しないトラブルが少ないか。
• 評価コメント例: {コードがどれだけシンプルで、手間なく運用できるかを説明します。}
2. トラブル対応のしやすさ（万が一問題が発生した場合に対応が難しくないか）
• 評価基準: エラーメッセージやコメントがわかりやすく、対応すべき箇所がすぐに把握できるか。
• 評価コメント例: {トラブル発生時の対応のしやすさについての説明を記載します。}
3. 定期的なメンテナンスの負担（定期的な更新やメンテナンスの必要性が少なく、負担が小さいか）
• 評価基準: コードが安定しており、頻繁に手を加えなくても良い状態であるか。
• 評価コメント例: {コードのメンテナンス負担がどれくらいかを具体的に説明します。}
4. 将来の拡張性（今後、新しい機能追加や変更に柔軟に対応できるか）
• 評価基準: 必要なときに機能追加や改良が簡単にできるか、また他のコードに影響を与えずに変更できる設計か。
• 評価コメント例: {将来の拡張がどれほど簡単かについて説明します。}
5. 安心感（この学生が3年間運用保守を担っても大きな問題なく続けられるか）
• 評価基準: コード全体が信頼できる安定性を持っており、長期間にわたって運用を安心して任せられるか。
• 評価コメント例: {安定性と長期運用の安心感について説明します。}
レジュメ出力テンプレート
【コード評価】
• 日々の使いやすさ: {評価結果と理由}
• トラブル対応のしやすさ: {評価結果と理由}
• メンテナンスの負担: {評価結果と理由}
• 将来の拡張性: {評価結果と理由}
• 安心感: {評価結果と理由}
【総合コメント】
この学生は、3年にわたり貴社のIT運用を安定してサポートできる資質があるかと思われます。
コードベースの文脈理解
次にコードベースの文脈理解。これもかなり良いなと思いました。
生成AIを使ったコーディングで、難しいなと感じることが「文脈」を生成AIに伝えることです。実際に開発する上ではプログラマー同士の「暗黙知」があるものですが、生成AIは都度記憶がリセットされてしまう、毎回別の新人担当者と会話するようなものなので、深い話はできない印象があります。
しかし Cody は GitHub のリポジトリを読み込ませることができるため、リポジトリ全体の「暗黙知」も含めて生成AIに伝えられるらしいです。
上記くらいのリポジトリであれば Cody に読み込ませても全体を見た上でのやり取りができていると感じました。日常的に生成AIは利用していますが、チャット欄やVSCodeで選択したコードの範囲のみをインプットにして生成AIと対話するのは少し物足りないものがあるなと感じていましたがのでリポジトリを読んでくれるのはありがたいです。
ハッカソンの範囲では小さなリポジトリだったので、大きなリポジトリになったらどうなっていくのかは少し気になりますね。
おわりに
今年は掛川を知り、生成AIが教育に活かせることを実感したハッカソンでした。嬉しいことに Cody 技術賞も頂きました。掛川は味わい深い街だと思いましたので今後も機会を持って関わっていきたいと思います。