Node-REDで広がるプログラミング教育の可能性

Transcript

1. Node-REDで広がる プログラミング教育の可能性 大学3年目、実践から見えてきたこと 上田茂雄（@ueponx） Node-RED Con Nagoya 2025 2025.10.17 1
2. 2 ※本発表は個人の体験に基づく感想であり、 所属組織の意見を代表するものではありません
3. 上田 茂雄(Shigeo Ueda) 中京テレビ ICT推進グループ（休職中） 名古屋工業大学 知能情報分野 大学院生 名城大学・京都精華大学 非常勤講師 uepon.hatenadiary.com | X / Facebook / LinkedIn なごあず運営 IBM Champion 2019–2025 Node-RED UG Tokai SeeedJP UG 3 自己紹介
4. 本日お話しすること 1 大学教育と社会のギャップ 2 環境構築の課題 3 3年目の実践でみえてきたこと 4 Node-REDの教育的価値とは？ 5 今後の展望 4
5. 大学教育と社会のギャップ ChatGPT時代の 新たなギャップ 「何を作るべきか」 「どう設計するか」 依然として 人間の仕事 企業が求めるスキル ✓ 設計ができる人材 ✓ 問題を分解して解決策を組み立てる ✓ ツールが変わっても応用できる基礎力 大学教育の現実 • 文法を教えるだけで精一杯 • 理論は教えるが実践まで手が回らない • 最新技術の変化についていけない 5
6. 大学教育でのプログラミングの位置づけ アカデミックな思考力 実践的なスキル • 論理的思考 • 問題分析能力 • アルゴリズム理解 • 即座に動くシステム構築 • API連携の実装 • データ処理の実践 Node-REDの利点 シンタックスエラーに悩まされず、設計・ロジックに注 力できる。データフローを視覚的に理解し、プログラミ ングの本質に迫る 6
7. プログラミング教育の壁 壁1 文法の壁 セミコロン,括弧,インデント 一つのミスでエラー 壁2 環境構築の壁 OS差異、バージョン問題 個別対応で時間消費 壁3 抽象概念の壁 変数、関数、オブジェクト 目に見えないものの理解 壁4 モチベーションの壁 コンソールに"Hello World" 達成感が得られない 7
8. なぜNode-REDなのか ◎ ビジュアルプログラミング ノードを線でつなぐ直感的理解 ◎ 即座のフィードバック デプロイですぐ確認できる ◎ 実用的なアプリケーション Web API、IoT連携が簡単 ◎ 非同期処理の隠蔽 フロー構築時は同期的な考え方で理解可能 8
9. 1年目（2023）の実践 開発環境：enebular 実施内容 • 基本フロー（inject、debug、function） • HTTPを使ったネットワークプログラミング • 外部APIとの連携（天気予報など） • データの可視化（地図） 課題 環境設定に想定以上の時間を要した 9
10. 環境構築の課題 1年目：enebular使用 • 個別の開発環境の差異を解決する目的 • 設定に時間を取られる問題が発生 10
11. 環境構築の課題 1年目：enebular使用 • 個別の開発環境の差異を解決する目的 • 設定に時間を取られる問題が発生 2年目以降：GitHub Codespaces導入 • 統一された開発環境の即座の提供 • Linux環境に慣れる機会の提供 • 環境構築にかかる時間を大幅削減 11
12. GitHub Codespacesがもたらした変化 5分 全員が 同じ環境で開始 1 GitHubアカウントは全員所持 2 テンプレートリポジトリをクリック 3 "Create codespace"ボタンを押す メリット • 環境設定のトラブルからほぼ解放 • 授業時間を本質的な学習に活用 • 自宅でも同じ環境で復習可能 12
13. 2年目（2024）の実践 GitHub Codespaces導入による改善 ✓ 環境構築時間：40分 → 5分 ✓ トラブルシューティング時間の削減 ✓ 本質的な学習時間の確保 新たな学び • JSONデータ形式への理解が深まる • Linux環境への慣れ • クラウド開発環境の体験 • ローカルLLMの体験 13
14. カリキュラムの全体像 1 開発環境のセットアップ GitHub Codespacesを使用した環境設定 2 Node-REDの基礎 基本的なノード操作、データフローの理解 3 データの処理 JSONデータの理解と加工 4 Webサーバ HTTPリクエスト/レスポンスの実装 5 Webクライアント API連携とデータ取得 6 地図アプリ作成 位置情報の可視化 7 データベース連携 データの永続化と活用 8 AI活用（Ollama） 生成AIを組み込んだアプリ開発（2024～） 14
15. 15 1.開発環境のセットアップ 2.データの処理 3.Node-REDの基礎
16. 16 4. Webサーバ構築 5. Webクライアント
17. 17 6. 地図アプリ作成 7. データベース連携 8. AI活用（Ollama）
18. ローカルLLMの導入(2024～) 生成AI（Ollama）との連携 AIに触れてみる段階 • Ollamaの基本的な使い方 • Node-REDからの呼び出し アプリへの組み込み • AIを活用したアプリ開発 • 実用的なシステムの構築 重要な学び AIを「魔法の箱」ではなく 「プログラムの部品」として理解 設計力がより重要になることを実感 18
19. Node-REDの教育的価値 シンタックスから設計へ 文法エラーからの解放 セミコロンやインデントに悩まない 設計・ロジックへの注力 何を作るか、どう処理するかに集中 視覚的フィードバック データの流れを見て理解 非同期処理の適切な隠蔽 同期的な思考でフローを構築可能 19
20. 学生の声 Before "コードを書いてもエ ラーばかり" "変数とか関数とか実 感が湧かない" "黒い画面を見るだけ で緊張する" After "データの流れが見え て分かりやすい" "すぐに動くものが作 れて楽しい" "プログラミングへの 苦手意識が減った" 20
21. 21 Node-REDはほぼコードを書かずにプロ グラムを作ることができて，どのよう な制御をするのか視覚的にわかりやす くてやっていて楽しかった． 「ノーコード，ローコードの存在は知って いたが，実際の利用経験はなかったため， 良い経験になったと思いました．サーバー に対してQueryやAPIを送信して，手に入れ たJSONデータを加工する，というステップ を踏んだことはなかったので，実際に実践 することで多少なり解像度が上がったのか なと思います．また，デバッグする際には 一度出力してみるのも大事ですね．」 「はじめて実際に社会で使用されている ノーコードツールを触りました．今まで 教育用のScratchやPythonのブロック版し か触ってきませんでした．ノーコードで も実際にコーディングする場合に匹敵す るような処理が行えるとわかりました． 非常にわかりやすかったうえ，更にどの ような処理を行うことができるか調べて みようと思いました．」 学生の声
22. 22 ポジティブ・キーワード 出現回数 わかりやすい/分かりやすい 38回 楽しい/楽しかった 24回 簡単 22回 面白い/面白かった 15回 良い/いい 18回 便利 9回 使いやすい 8回 スムーズ 4回 新鮮 3回 感動 2回 学習体験に関するキーワード 出現回数 初めて 12回 視覚的 8回 理解 27回 授業/スライド 16回 課題 14回 学生の声
23. 今後の展望 Raspberry PiとのIoT連携 • センサーデータの収集と可視化 • 実世界とのインタラクション • ハードウェアとソフトウェアの統合的理解 • より実践的なプロジェクト学習 23 ダッシュボード • データの表示をみやすく • センサーデータにも対応可能
24. まとめ 1 GitHub Codespacesによる環境革新 環境構築の問題を解決し、本質的な学習に注力 2 Node-REDで設計力を育てる シンタックスエラーに悩まず、ロジック構築に集中 3 AI時代こそ設計力が重要 コード生成はAIに、設計は人間の仕事 24
25. 25 ご清聴ありがとうございました。