会員サイト

このレポートは Google Gemini 2.5 Pro Deep Reseachに以下プロンプトを与えて作ったものです。

AIを使ったプログラミングが企業で急速に普及してきているにも関わらず、大学などの教育機関ではAIを使ったプログラミング教育は進んでいないらしい。このままでは卒業生が就職できたとしても仕事ができなくなるのではないか？こういった現状で学生はどうしたらいいのか？

App Inventorを勉強中の学生へのアドバイスはある？

1. App Inventorを「思考の訓練場」として最大限に活用する

App Inventorの最大の利点は、複雑な文法に煩わされることなく、プログラミングの本質である「問題解決」と「論理的思考」を鍛えられる点にあります 。Google Blocklyのようなビジュアルプログラミングツールは、教育支援の現場でも活用されています 。  

• 目的意識を持つ: 重要なのは、App Inventorというツールを使いこなすこと自体が目的ではなく、それを通じて、大きな問題を小さなタスクに分解する能力や、物事を順序立てて考える論理的思考力を養うことです 。  
• 普遍的なスキルを磨く: これらのスキルは、将来どのプログラミング言語を使うことになっても通用する、普遍的な能力となります 。ブロックを組み合わせながら、「どうすればこの機能は実現できるか」「もっと効率的な処理はないか」と試行錯誤するプロセスそのものが、あなたの財産になります。  

2. 「作りたいもの」を形にし、ポートフォリオを構築する

採用担当者は、言語を知っていること以上に、その技術を使って実際に問題を解決した経験を重視します。App Inventorはアイデアを迅速に形にできるため、ポートフォリオ構築に最適です。

• オリジナルアプリを開発する: チュートリアルを終えたら、ぜひ自分だけのオリジナルアプリ開発に挑戦してください 。身の回りの小さな不便を解決するツールでも、自分の趣味に関するアプリでも構いません。重要なのは、企画から開発、可能であれば一般公開までの一連のプロセスを経験することです 。  
• 経験をアピールする: このような実践的なプロジェクト経験は、あなたのポートフォリオを豊かにし、「プロダクトを創れる」人材であることを証明する強力な武器になります 。  

3. AI時代への架け橋として利用する

App Inventorは、AIを学ぶ上での入り口としても非常に有効です。AI開発の最前線ではPythonなどが主流ですが 、多くのAIサービスはAPI（外部サービスと連携するための窓口）を通じて機能を提供しています。  

• AIと連携させる: App Inventorを使って、例えば画像認識AIや翻訳AIのAPIに接続するアプリを作ってみましょう。これにより、ユーザーがどのようにAIと対話し、AIがどのようにプロダクトに組み込まれるのかを実践的に理解できます 。  
• 目的意識を明確にする: AIを使って「何を作りたいか」という目的意識を持つことが、学習を継続する上で最も重要です 。App Inventorでのプロトタイピングは、その目的を見つけるための素晴らしい手段です。  

4. 次のステップへ：テキストベース言語への移行を見据える

App Inventorでプログラミングの楽しさと論理構築に自信がついたら、次のステップとしてPythonのようなテキストベースの言語に挑戦することをお勧めします 。  

• スキルの応用: App Inventorで培った問題解決能力があれば、新しい言語の文法を覚えることは、それほど難しいことではありません 。  
• 効果的な学習法: 一度App Inventorで作ったアプリをPythonで再現してみる、というアプローチは、目的が明確なため非常に効果的な学習方法です。ロジックはすでに頭の中にあるため、純粋に「文法の学習」に集中できます。

App Inventorは、コーディングの技術的なハードルを下げ、開発の楽しさや問題解決の本質に集中させてくれる素晴らしい学習ツールです。そこで得た論理的思考力と「アイデアを形にする経験」を土台に、より高度な技術へとステップアップしていくことで、AI時代に活躍できるエンジニアへと成長できるでしょう。

このレポートは Google Gemini 2.5 Pro Deep Reseachに以下プロンプトを与えて作ったものです。

AIを使ったプログラミングが企業で急速に普及してきているにも関わらず、大学などの教育機関ではAIを使ったプログラミング教育は進んでいないらしい。このままでは卒業生が就職できたとしても仕事ができなくなるのではないか？こういった現状で学生はどうしたらいいのか？

エグゼクティブサマリー

本レポートは、企業のソフトウェア開発におけるAIの急速な統合と、大学のカリキュラムの遅々とした進展との間に存在する、看過できないほど拡大しつつある乖離について論じる。企業がAIコーディングアシスタントを活用して前例のない生産性向上を実現する一方で、学生たちは自らの正規教育が現代の職場の現実に即していないのではないかという懸念を強めている。本分析は、これらの懸念を実証し、「AI拡張エンジニア」に不可欠なスキルセットを再定義し、学生のための包括的かつ実行可能な青写真を提供する。本レポートの核心的なメッセージは、エンパワーメントである。すなわち、積極的な自己学習、実践的なプロジェクトワーク、そしてコミュニティへの参加という戦略を能動的に採用することにより、学生はこの溝を埋めるだけでなく、次世代のテクノロジーリーダーとして自らを位置づけることが可能となる。

第1章 新たな産業革命：AIによる企業ソフトウェア開発の変革

本章では、このパラダイムシフトの現実を確立する。誇大広告を超え、AIがプロフェッショナルなソフトウェア開発をいかに根本的に変えつつあるか、具体的な証拠を提示する。これにより、利用者の前提を検証し、状況の緊急性を明確にする。

1.1 オートコンプリートを超えて：AI駆動開発への深掘り

現代のソフトウェア開発は、単なるコード補完機能の進化を超えた、根本的な変革の渦中にある。この変革を牽引しているのが、GitHub Copilotに代表されるAI搭載の開発ツール群である ¹。これらのツールは、開発者のワークフローに深く統合され、従来は人間の手作業に依存していた多くのタスクを自動化・支援する。

その中核機能は多岐にわたる。リアルタイムでのコード補完は言うまでもなく、開発者が自然言語（日本語を含む）でコメントを記述するだけで、その意図を汲み取ったコードブロック全体を生成する能力を持つ ²。さらに、既存のコードからテストケースを自動生成したり、関数やクラスのドキュメンテーションを作成したりすることも可能である ²。GitHub Copilot Chatのような対話型インターフェースを通じて、実装前の設計思想についてAIに相談したり、書き終えたコードのレビューを依頼したり、あるいは特定の機能を実現するための複数の実装パターンを提案させることさえできる ²。これはもはや単なる「ツール」ではなく、開発プロセス全体にわたる「協働パートナー」と呼ぶべき存在である。

この変革は、大手企業において戦略的に推進されている。例えば、日立製作所はGitHub Copilotを単なる生産性向上ツールとしてだけでなく、特定のベンダーに依存しないグローバルスタンダードな開発環境へ移行するための中核的な要素と位置づけている ⁴。同社が実施した社内アンケート調査では、利用者の83%が「タスクを迅速に完了できる」と回答しており、その効果は定量的に証明されている ⁴。

さらに衝撃的なデータは、Accenture社とGitHubの共同調査によってもたらされた。この調査では、Copilotの導入によりタスク完了までの時間が平均で55%も短縮され、コードレビューの合格率が15%向上したことが確認されている ¹。また、法人向けにサービスを提供するZoomInfo社では、400名以上のエンジニアが日常的にCopilotを利用しており、1日あたり約6,500件の提案のうち33%が受け入れられているという事実は、AIが単なる補助機能ではなく、開発ワークフローの根幹に深く組み込まれていることを示している ¹。

1.2 影響の定量化：生産性と品質の新たな指標

AIがもたらす影響は、個々の開発者の主観的な感想にとどまらない。それは、企業の競争力を左右する測定可能なビジネス上の優位性となっている。日立製作所が掲げる「2027年までにシステム開発の生産性を30%向上させる」という野心的な目標は、AI活用が経営戦略そのものであることを物語っている ⁴。この生産性向上の本質は、コーディングや単体テストといった反復的で時間のかかるタスクをAIに委譲し、人間である開発者をより高度な問題解決やアーキテクチャ設計といった創造的な業務に集中させることにある ⁶。

従来の開発現場では、「1日に書いたコードの行数」が生産性の一つの指標とされることもあった。しかし、タスク完了時間が55%短縮される世界では、この指標は意味をなさなくなる ¹。価値の源泉は、コードを「書く」行為そのものから、AIを駆使して複雑な問題を効率的かつ堅牢に「解決する」能力へと移行している。1日かけて手作業でコードを書くエンジニアよりも、洗練されたプロンプトと検証作業を通じて1時間で問題を解決するエンジニアの方が、たとえ一行もコードを「書かなかった」としても、はるかに高い価値を持つ。これは、特に若手人材の評価や育成方法に根本的な見直しを迫るものである。開発者が費やす時間は、能動的なコーディングから、プロンプト入力、レビュー、そしてAIの応答を待つ時間へとシフトしている ⁸。

さらに、AIツールは速度だけでなく、品質とセキュリティの向上にも大きく貢献している。リアルタイムでのエラー検出や、SQLインジェクションのような脆弱なコード提案を自動的にブロックする機能は、開発サイクルの早期段階で欠陥を排除し、手戻りを削減する ¹。複雑なコードのリファクタリング（構造改善）を支援することで、より保守性が高く、長期的に維持可能なソフトウェア資産の構築を可能にする ⁶。

見過ごされがちだが極めて重要なのが、開発者体験（Developer Experience）の向上である。Accenture社の調査で、開発者の90%がCopilot導入後に仕事への充実感が増したと回答した事実は、AIが開発者を退屈な作業から解放し、創造性を刺激する存在であることを示している ¹。満足度の高い開発者は、より質の高い仕事をし、組織への定着率も高まる傾向にある。

1.3 再構築されるソフトウェア開発ライフサイクル（SDLC）

生成AIの影響は、コーディングという一工程に限定されない。それは、アイデアの着想から設計、実装、テスト、デプロイメントに至るソフトウェア開発ライフサイクル（SDLC）の全段階に及んでいる ⁶。

従来、ビジネス担当者が持つ漠然としたアイデアを、エンジニアが詳細な要件定義に落とし込むプロセスには、多くのコミュニケーションコストと時間を要した。生成AIは、自然言語で記述された高レベルのアイデアを、具体的な機能要件やユーザーストーリーに変換する支援を行う ⁶。さらに、AIを用いてUIデザインのプロトタイプを生成し、対話形式で要件との整合性を確認するといった活用も始まっている ⁵。

テスト工程においても、AIは手動テストではカバーしきれない広範なシナリオのテストケースを自動生成し、重要なテストを優先順位付けすることで、リソースを効率的に配分する ⁶。これにより、テストカバレッジの拡大と品質保証の高度化が両立される。

この変革は、「開発の民主化」とも呼ばれる現象を引き起こしている。AIツールが技術的な障壁を一部取り払うことで、従来は専門的なエンジニアでなければ関与が難しかったプロセスに、非技術系のビジネス担当者もより深く参加できるようになる ⁶。これにより、部門間のコラボレーションが促進され、ビジネスニーズと技術的実装の間のギャップが埋まり、イノベーションが加速される。

1.4 明確な軌道：AIエージェントの台頭

現在主流のAIコーディングアシスタントは、この変革の序章に過ぎない。技術の進化が示す明確な軌道は、「コード提案」から「自律的なアクション」へと向かっている。次世代のAIは、単一の指示に応答するだけでなく、複数のステップからなる複雑なタスクを自律的に計画し、実行する「AIエージェント」へと進化していく ¹¹。

この進化は、開発者の役割をさらに一段階引き上げる。開発者は、もはやコードを書く職人ではなく、複雑なビジネス課題を解決するために、これらのインテリジェントなエージェントを設計し、監督し、指導する「AIアーキテクト」としての役割を担うようになる ¹¹。企業の競争力は、いかに優秀なAIエージェントを構築し、ビジネスプロセスに組み込めるかにかかってくる。

日立のような企業が「Generative AIセンター」を設立し ⁴, NTTデータが生成AIを競争力獲得のための「ゲームチェンジングテクノロジー」と位置づけているのは ¹²、この未来を見据えた戦略的な動きに他ならない。彼らは単にツールを導入しているのではなく、AIを中核に据えた次世代の開発体制と組織文化を構築しようとしている。学生にとって、この事実は極めて重要である。AIスキルは、もはや選択科目ではなく、これからの技術者にとって必須の基礎教養となりつつある。このトレンドを無視することは、1990年代後半にインターネットの重要性を無視するに等しく、キャリア形成において致命的な判断ミスとなりかねない。

一方で、この生産性の飛躍は新たなリスクも生み出す。AIが生成した高品質なシステムであっても、その内部コードが過度に複雑で人間には解読困難な「ブラックボックス」と化す可能性がある ⁵。もしそのコードを理解し、保守できる人材がいなければ、将来的に深刻な問題を引き起こしかねない。これは、AIを使いこなす能力と、その出力物を批判的に評価し管理するために不可欠な、コンピュータサイエンスの普遍的な原理原則を学ぶことの重要性を逆説的に示している。

第2章 象牙の塔のジレンマ：大学のカリキュラムはなぜ追いつけないのか

本章では、教育現場が産業界の急速な変化に追いつけていない背景にある、構造的・教育的な課題を探る。現実的な制約と教育哲学上のジレンマを認識した上で、この変革期を巧みに乗り越えつつある先進的な大学の事例を紹介し、学生が何を求め、どこに希望を見出すべきかを示す。

2.1 変化のペース vs 制度の慣性

大学という組織が、産業界の指数関数的な技術進化のペースに追随することが困難な理由は、根深い構造的問題に起因する。第一に、カリキュラムの改訂プロセスは、多くの場合、数年単位の時間を要する慎重な審議と承認を必要とする ¹³。これは教育の質と一貫性を担保するためには不可欠な仕組みであるが、数ヶ月単位で状況が激変する生成AIの分野では、著しい足枷となる。

第二に、教員自身のAIリテラシーの問題がある。生成AIは専門家でさえその全貌を理解しきれていない新しい技術であり ¹⁴、多くの教員が自ら学びながら手探りで指導方法を模索しているのが現状である。AIを効果的に活用できる教員の育成が追いついていないという「教師のAIリテラシー不足」は、教育の質のボトルネックとなっている ¹³。この問題は、AIスキルを持つ人材が産業界に高待遇で吸収され、学術界から人材が流出しやすいという構造によってさらに悪化する。結果として、大学は自らをアップデートするために必要な専門知識を外部から獲得することも、内部で育成することも困難な状況に陥っている。

第三に、物理的なインフラの問題がある。GIGAスクール構想以前の日本の教育現場におけるICT環境が国際的に見ても著しく遅れていた事実は ¹⁵、教育機関におけるインフラ投資が常に課題であったことを示している。生成AIを本格的に教育に導入するには、安定したネットワーク環境や、学生全員が利用できる十分な計算リソースが必要となり、これには多大なコストが伴う ¹³。

2.2 教育哲学上の論争：ツールか、それとも思考の松葉杖か

構造的な問題に加え、教育者たちの間では「生成AIを教育にどう取り入れるべきか」という、より本質的な教育哲学上の議論が続いている。

その中心にあるのが、「思考力の低下」への懸念である。プログラミング教育の本来の目的は、単にコードを書く技術を教えることではなく、論理的思考力、問題解決能力、創造性といった「プログラミング的思考」を育成することにある。もし学生が、アルゴリズムの原理を理解することなくAIにコードを生成させるだけで課題を完了できてしまうなら、それは本来育成すべき能力を阻害する「思考の松葉杖」になりかねない ¹⁶。研究によれば、学習者が安易に生成AIを利用すると、試行錯誤の機会が失われ、期待された学習効果が得られない可能性が指摘されている ¹⁷。

また、AIの出力が常に正しいとは限らないという「ブラックボックス問題」も存在する。AIは学習データに含まれるバイアスを反映したり、事実に基づかない情報（ハルシネーション）を生成したりすることがある。そのため、学生にはAIの出力を鵜呑みにせず、その限界を理解し、批判的に評価する能力（AIリテラシー）を身につけさせることが不可欠である ¹⁴。東京大学の議論でも、AIリテラシーとは「個人が批判的にAI技術を評価する能力のセット」と定義されており、その育成が急務であるとされている ¹⁴。

一方で、この技術は教育のあり方を根底から変える可能性を秘めている。東京大学の専門家パネルでは、生成AIがアイデアを形にする技術的なハードルを劇的に下げることで、教育の重点を従来の「思考力重視」から、実際に何かを「作ること重視」へとシフトさせるべきだという提言がなされている ¹⁴。AIがコーディングを代行してくれる時代において、人間に残される最も重要な役割は、何を「つくりたい」かという創造的な欲求やビジョンを持つことである。この視点に立てば、AIは思考を奪う脅威ではなく、創造性を解放する強力なツールとなる。

この論争の核心は、学生がAIが生成したコンテンツをただ受け入れるだけの「消費者」になるか、AIを駆使して自らのアイデアを形にする「創造者」になるかの分岐点にある ¹⁴。先進的な教育機関は、後者の育成を目指し、単にAIの使い方を教えるのではなく、「AIと共に思考する方法」を教えるという、より高度な教育モデルを模索している。

2.3 進歩の灯火：教育におけるAI活用のパイオニアたち

こうした困難な状況の中にあっても、一部の先進的な大学はAI時代に対応するための革新的な取り組みを始めている。これらの事例は、学生が自らの大学を評価し、あるいは学外に求めるべき学習機会がどのようなものであるかを知る上で、重要な指標となる。

2.3.1 国内のイノベーター

• 東北大学: 日本の大学におけるAI活用の先駆者であり、全国に先駆けてChatGPTを大学の公式業務に導入した ¹⁸。単に導入するだけでなく、会議の議事録要約アプリを内製開発したり、学内データと連携した独自のチャットボットを構築したりと、実践的な活用を推進している ¹⁹。さらに重要なのは、学生と教職員それぞれに向けた詳細な利用ガイドラインを策定・公開し、AIのリテラシー教育と並行して導入を進めている点である ¹⁸。
• 東洋大学: 情報連携学部において、GPT-4を活用した教育システム「AI-MOP」を導入 ¹⁸。このシステムはSlackと連携しており、学生がプログラミングやシステム開発に関する疑問をボットに質問することで、自学自習を促進することを目的としている。大学として「生成AIとの対話を繰り返すことが自分の考えを深める」という見解を示し、積極的な活用を推奨している ¹⁸。
• 立命館大学: 英語学習ツール「Transable」の試験導入において、極めて示唆に富んだルールを設けた。それは、「生成された英文をそのまま使用することを禁止する」というものである ¹⁸。これにより、学生はAIを単なる答えを出す機械としてではなく、自らの思考の「叩き台」や「壁打ち相手」として利用することを強いられる。AIの生成物を批判的に検討し、修正・改善するというプロセスを通じて、より高度な学習効果を狙っている。これは、「AIと共に思考する方法」を教える優れた教育実践例と言える。
• 会津大学: コンピュータ理工学に特化した大学として、以前から徹底した実践的プログラミング教育で知られている ²¹。3Dプリンタなどを備えた工作室「Aizu Geek Dojo」のような「ものづくり」を奨励する環境や、アクセンチュア、富士通、NECといった大手企業との強固な産学連携体制が特徴である ²³。学生は共同研究プロジェクトなどを通じて、現実世界の課題解決に直接関わる機会を豊富に得られる。

2.3.2 世界のリーダー

• カーネギーメロン大学（CMU）: コンピュータサイエンスの名門校であり、米国で初めてAIの学士課程を設立した ²⁶。そのカリキュラムの最大の特徴は、倫理と社会貢献を重視している点にある。社会学部や公共政策学部の教員がAIの倫理的・社会的側面について教鞭をとり、運輸や医療といった分野でのAI活用法を探求する独立した学習機会が設けられている ²⁶。
• スタンフォード大学: 機械学習やAIに関する基礎的なオンラインコースを早期から無償で公開し、世界中の何百万人もの学習者に門戸を開いたパイオニアである ²⁷。同大学のAndrew Ng教授による講義は、この分野のデファクトスタンダードとなっている。近年では、AIが生徒の学習を支援するだけでなく、チューター（指導者）に助言を与えることで教育の質そのものを向上させる研究にも取り組んでいる ²⁹。
• プロジェクトベース学習（PBL）モデル: ハーバード大学の「CS50’s Introduction to Artificial Intelligence with Python」やフロリダ大学の「AI Across the Curriculum」構想のように、AI時代における効果的な教育手法として、プロジェクトベース学習（PBL）が再評価されている ³⁰。PBLでは、学生は現実世界の問題を解決するためのプロジェクトにチームで取り組み、その過程で必要な知識やスキルを能動的に学んでいく。AIツールは、このPBLにおいて、アイデアのブレインストーミングや情報収集、プロトタイピングを加速させる強力な触媒として機能する ³³。

これらの先進事例から浮かび上がるのは、大学がAIを単なる業務効率化ツールとして導入する（例：事務作業の自動化）だけでなく、それを教育・研究の中核にどう組み込むかという戦略的な視点を持っていることである。東北大学や近畿大学のように、まず事務部門でAI活用を進めることで、組織全体のAIへの習熟度を高め、安全な利用ポリシーを確立し、その上で教育への展開を図るというアプローチは、教育現場へのAI導入をスムーズに進めるための有効な戦略と言えるだろう ¹⁸。

第3章 AI拡張エンジニア：現代のスキルセットの再定義

本章は、本レポートの理論的な核心である。従来のプログラマーから、現代のAI拡張エンジニアへと移行するために学生が習得すべき新たな能力を明確に定義する。

3.1 コーダーから指揮者へ：根本的な役割の変化

ソフトウェアエンジニアの役割は、コードを手作業で記述するという労働集約的なタスクから、AIツールが生み出す成果物を指揮し、検証し、統合するという、より高度で監督的な役割へと進化している ⁶。これは、オーケストラの演奏者が、自ら楽器を演奏するだけでなく、各パートの音を調整し、全体のハーモニーを創り出す指揮者へと役割を変えるのに似ている。エンジニアの仕事は、構文の正確さよりも、戦略の妥当性が問われるようになる ³⁶。

この変化に伴い、エンジニアの価値の源泉もシフトする。単純な繰り返し作業や定型的なコーディングはAIによって自動化されるため ⁷、人間の価値は、より抽象的で創造的なタスクへと移行する。具体的には、システムの全体像を描くアーキテクチャ設計、ビジネス上の曖昧な課題を技術的に解決可能な問題へと落とし込む能力、そして最終的な製品がビジネス目標とユーザーのニーズを満たしているかを保証する責任などが、これまで以上に重要になる ⁶。

3.2 新たなコアコンピテンシー

AI時代に求められるスキルは、従来のプログラミングスキルを置き換えるものではなく、それを土台とした上で、新たな能力を積み上げるものである。

• 高度なプロンプトエンジニアリング: これは、機械との新たな対話方法である。単に平易な言葉で質問を投げかけるのではなく、生成AIから望ましい、高品質かつ安全な出力を引き出すために、指示（プロンプト）を体系的に設計し、改良し、最適化する一連の技術を指す ⁴⁰。これには、タスクの背景情報（コンテキスト）の提供、出力形式の厳密な指定、少数の例を提示してAIの挙動を誘導するフューショット・プロンプティング、そしてAIに思考のプロセスを段階的に記述させる思考の連鎖（Chain-of-Thought）プロンプティングといった、多様なテクニックが含まれる ⁴⁰。これはもはや単なる「質問力」ではなく、それ自体が高度な専門スキルとして認識されている ⁴⁴。
• システム思考とアーキテクチャの完全性: AIが個々の部品（コード）を効率的に生成してくれるようになるからこそ、それらを組み合わせて一つの堅牢な建築物（システム）を構築する、全体論的な視点が極めて重要になる ¹¹。システム思考とは、個々のコンポーネントがどのように相互作用し、システム全体としてどのような特性（パフォーマンス、スケーラビリティ、回復力など）が生まれるかを理解する能力である ⁴⁶。複雑なシステムにおけるトレードオフを管理し、ある部分への変更が他に予期せぬ影響を及ぼさないかを見通すこの能力は、現時点のAIには模倣できない、人間に固有の価値である ³⁶。
• 人間参加型ループ：批判的なコードレビューと倫理的検証: AIが生成したコードは、決して完璧ではない。それは、微妙なバグやセキュリティ上の脆弱性を含んでいる可能性があり、また、その学習データに内在する偏見を反映することもある ⁵。したがって、人間であるエンジニアは、AIの生成物を無批判に受け入れるのではなく、それを精査し、デバッグし、改良するための最後の、そして最も重要な品質保証の関門として機能しなければならない ³⁷。この役割は、最終的な成果物に対する「説明責任」を伴う。AIは責任を取ることができないため、この責任は常に人間が負うことになる ⁵⁷。この責任を果たすためには、付け焼き刃の知識ではなく、コンピュータサイエンスの揺るぎない基礎知識が不可欠である。
• 強化されたソフトスキル: AIが実装の詳細、すなわち「何を（What）」作るかを担うようになるにつれて、人間は「なぜ（Why）」それを作るのかという、より上流の問いに関わるスキルセットの価値を高めることになる。
  • 問題の分解能力: 曖昧で大規模なビジネス課題を、AIが処理可能な、明確に定義された小さなタスク群へと分解する能力 ³⁹。
  • コミュニケーションと協調: 技術的な要件をAIに正確に伝える言語能力と、AIの出力とその意味合いを非技術系の関係者に分かりやすく説明する能力 ⁵⁸。
  • 創造性とイノベーション: AIの新たな応用分野を見つけ出したり、AIの学習データに含まれる既存のパターンを超えた、斬新な解決策を考案したりする能力 ³⁹。

表1：ソフトウェアエンジニアの進化するスキルセット

このセクションの中心的な議論を明確にするため、以下の表で従来のスキルとAI拡張時代のスキルを対比する。これは、学生が自らの学習の方向性を評価するための思考の枠組みを提供する。

この比較から明らかなように、求められるスキルはより戦略的、全体論的、そして人間中心的なものへとシフトしている。「コードが書ける」から、「AIを使って問題を解決し、その結果に責任を持てる」へと、エンジニアに求められる価値の定義そのものが変化しているのである。

第4章 意欲的な学生のための戦略的青写真

本章は、本レポートの中で最も実践的な部分であり、学生が自らの手で未来を切り拓くための、具体的かつ段階的な行動計画を提示する。

4.1 フェーズ1：基礎の強化（自己主導型学習）

AIツールは既存の知識を増幅させる「アンプ」のようなものである。したがって、強力な基礎知識は、これまで以上に重要であり、交渉の余地のない必須条件である ⁷。大学の授業だけに頼るのではなく、自らの手でパーソナルなカリキュラムを構築する必要がある。

4.1.1 オンラインプラットフォームの活用

質の高い学習コンテンツが、かつてないほど容易に入手可能になっている。これらを戦略的に活用することで、大学のカリキュラムを補完し、最先端の知識を習得することができる。

• Coursera: スタンフォード大学のAndrew Ng教授のようなAI分野のパイオニアによる講座や、IBM、Googleといった業界の巨人が提供するプログラムが豊富に存在する ⁶²。これらのプラットフォームは、AIの基礎理論、機械学習、プロンプトエンジニアリングなどを体系的に学べる専門講座（Specialization）やプロフェッショナル認定（Professional Certificate）を提供しており、基礎固めに最適である ⁶⁴。
• Udemy: より実践的で、特定の技術に焦点を当てたハンズオン形式のコースを手頃な価格で受講できるプラットフォームとして位置づけられる ⁶⁵。「AI for Everyone」のような概論的なコースから、特定のPythonライブラリを深く学ぶコースまで、幅広い選択肢がある。
• 国内のプラットフォーム: 日本語での学習を好む学生には、「Aidemy」や「Chainerチュートリアル」といった国内サービスも有力な選択肢となる ⁶⁹。

4.1.2 AI時代の必読書

構文の学習を超え、より高度な思考法を身につけるためには、良質な書籍から学ぶことが不可欠である。

• システム思考: 第3章で論じた全体論的・構造的な思考法を養うために、『実践システム・シンキング』のような書籍は、エンジニアとしての視野を広げる上で非常に有益である ⁷¹。
• ソフトウェア設計原則: AIが生成したコードを批判的に評価する「目」を養うためには、『リーダブルコード』や『良いコード／悪いコードで学ぶ設計入門』といった、ソフトウェア設計の原理原則を解説した古典的・現代的な名著を読むことが推奨される ⁷²。

4.1.3 AIをパーソナルチューターとして活用する

学習プロセスそのものにAIを組み込むことで、学習効率を飛躍的に高めることができる。これは、AI時代に必須の「メタスキル」である ⁷⁵。

• コード解説: 理解できないコード片をAIに提示し、「このコードの目的と仕組みを初学者向けに一行ずつ解説してください」と依頼する。
• エラー解決: プログラム実行時に発生したエラーメッセージをそのままAIに渡し、考えられる原因と具体的な対処法を尋ねる。
• 概念の明確化: 再帰やポリモーフィズムといった抽象的な概念について、「小学生にもわかるように、たとえ話を使って説明してください」など、理解できるまで様々な角度から質問を繰り返す。
• 学習ログの構築: AIとの有益な対話は、Notionなどのツールに記録しておく。これにより、自分だけのカスタマイズされたQ&A集が構築され、後から容易に復習できる ⁷⁵。

4.2 フェーズ2：検証可能な実世界経験の構築（実践的応用）

理論的な知識だけでは不十分である。採用担当者が最も重視するのは、その知識を応用して実際に問題を解決した経験である。

4.2.1 競争を通じたスキルアップ（データサイエンスとヒューリスティクス）

• KaggleとSIGNATE: これらは単なるコンペティションサイトではない。現実世界の不完全でノイズの多いデータセットを扱うための実践的な訓練場である ⁷⁶。他の参加者が公開しているコード（Notebook）を読むことで、多様なアプローチを学ぶことができる。特にSIGNATEは、日本語で参加できるため、日本の初心者にとって参入障壁が低い ⁷⁹。
• AtCoder Heuristic Contest: 従来の競技プログラミングとは異なり、唯一の正解が存在しない複雑な最適化問題に対して、「できるだけ良い解」を見つけ出す能力を競う ⁸⁰。これは、現実のビジネスや工学における多くの問題設定に近く、実用的な問題解決能力を鍛えるのに適している。

4.2.2 協働と創造（ソフトウェア開発）

• ハッカソンとアイデアソン: 短期間で集中的にチームを組み、アイデアの着想からプロトタイプの開発、そしてプレゼンテーションまでを経験する絶好の機会である ⁸²。チームワーク、迅速な開発、そしてAIを活用したアイデアを他者に説得力をもって伝える能力が試される。
• オープンソースへの貢献（例：Google Summer of Code）: これは、学生が積める経験の中でも特に評価が高いものの一つである。実際の巨大なコードベースに触れ、世界中のエンジニアと英語でコミュニケーションを取りながら、経験豊富なメンターの指導のもとで開発を進める ⁸⁵。過去に参加した日本人学生の体験談は、技術力だけでなく、語学力や国際的な協業能力を証明する強力な材料となる ⁸⁵。

4.2.3 専門分野の選択と探求

AIは広大な分野であるため、早い段階で自身の興味や強みに合った専門領域（例：自然言語処理、コンピュータビジョン、ロボティクス）を見つけることが重要である ⁸⁸。大学の研究室を選ぶ際には、「スタビキ」のようなサービスを活用して、自分の関心分野に合致する教員や研究室を事前に調査することが、有意義な研究活動につながる ⁹⁰。

4.3 フェーズ3：スキルの市場価値化（ポートフォリオと面接）

習得したスキルと経験は、採用担当者に伝わらなければ意味がない。

4.3.1 AI時代に響くポートフォリオの作り方

現代のポートフォリオは、単なる成果物のギャラリーではない。それは、自身の問題解決能力を物語るストーリーでなければならない。採用担当者は、完成品の完璧さよりも、その背後にある思考プロセスや学習能力を重視する ⁹¹。

各プロジェクトには、以下の要素を明確に記述することが求められる。

• 課題設定（The Problem）: どのようなビジネス上またはユーザーの課題を解決しようとしたのか ⁹³。
• プロセス（The Process）: AIをどのように活用したか。具体的なプロンプトの例や、なぜその技術・設計を選択したのかという意思決定の過程を説明する ⁹¹。
• 人間の貢献（The Human Contribution）: AIの出力をどのように評価し、改良したのか。AIの提案のどこに問題があり、それをどう修正したのか。「AIによる初期出力（Before）」と「人間による改善後のコード（After）」を並べて示すことで、自身の付加価値を明確にアピールできる ⁹²。
• 成果（The Outcome）: プロジェクトの結果、何が達成されたのか。「処理速度をX%改善した」のように、可能な限り定量的に示す ⁹⁴。

チュートリアルを単に模倣しただけのプロジェクトよりも、たとえ小規模であっても、このような思考の過程が丁寧に文書化されたプロジェクトの方が、はるかに高く評価される ⁹⁵。

4.3.2 AI中心の技術面接を乗り切る

面接で問われる内容も変化する。従来のアルゴリズムに関する知識に加えて、新たな能力を問う質問に備える必要がある ⁹⁶。

• 想定される質問例:
  • 「この設計課題に対して、AIアシスタントをどのように活用してアプローチしますか？」
  • 「ここにAIが生成したコードがあります。これをレビューして、問題点を指摘してください。」
  • 「AIツールの出力が間違っていた経験について教えてください。どのようにしてその誤りを発見し、修正しましたか？」

これらの質問は、候補者がAIを単なるツールとして使うだけでなく、その限界を理解し、主体的にコントロールできるかを試すものである。

4.4 フェーズ4：成長の加速（コミュニティとネットワーキング）

孤立した学習は非効率であり、モチベーションの維持も困難である。コミュニティに参加することで、学習は加速し、新たな機会が生まれる ⁹⁸。

• 学生技術コミュニティの力: 「PlayGround」や「GeekSalon」のような学生主体の技術コミュニティは、同じ志を持つ仲間との出会いの場である ⁹⁸。ピアラーニング（仲間同士の学び合い）、メンターからの助言、チームでのプロジェクト開発、さらには提携企業からのインターンシップや就職のオファーといった、多くの利点がある ⁹⁹。
• 最先端に追いつき続ける戦略: AI分野の進化は非常に速いため、継続的な情報収集が不可欠である。
  • X（旧Twitter）での情報収集: 深津貴之氏やチャエン氏といった、国内外のAI分野における第一人者や影響力のあるインフルエンサーをフォローすることで、最新のトレンドやツールに関する情報を効率的に得ることができる ¹⁰⁰。
  • トップカンファレンスの動向把握: NeurIPS、ICML、ICLRといった世界トップクラスの学術会議で発表される論文は、数年後の技術トレンドの源泉である ¹⁰⁴。これらの動向を追うことで、技術の潮流を大局的に理解できる。
  • 情報収集の自動化: AIを活用して、最新情報を収集するプロセス自体を自動化することも有効である。特定のキーワードに関するニュースを要約して定期的にメールで送信するようAIエージェントに指示するなど、情報収集の負担を軽減することができる ¹⁰⁷。

学生が今、身につけるべき最も重要な「メタスキル」は、AIを活用して他のすべてをより速く学ぶ能力である。KaggleコンペのコードをAIにデバッグさせ、専門書の新しい設計パターンをAIに解説させ、トップカンファレンスの研究論文の要約をAIに作成させる。このスキルを習得した学生は、そうでない同級生を指数関数的に凌駕するだろう。これは、学生が目指すべき究極の戦略目標である。

第5章 結論：AI拡張エンジニアとしてのあなたの未来

ソフトウェア開発の世界は、手作業によるコーディングが中心だった時代から、人間とAIが協働する新たな時代へと、不可逆的なパラダイムシフトを遂げた。この変化は、一部の仕事を陳腐化させる脅威であると同時に、エンジニアがこれまで以上に複雑で意義深い課題に取り組むことを可能にする、またとない機会でもある。

本レポートで明らかにしたように、大学教育システムがこの急速な変化に適応するには、まだ時間を要するだろう。しかし、それは学生がただ手をこまねいて待つべきだということを意味しない。むしろ、自らのキャリアの主導権を握り、未来を形作る力が、これまで以上に学生自身の手に委ねられている。

本レポートで提示した4つのフェーズからなる戦略的青写真は、そのための具体的な道筋である。基礎知識を主体的に学び、実践的なプロジェクトを通じて経験を積み、その成果を効果的に伝え、コミュニティと繋がりながら常に学び続ける。このサイクルを回すことで、学生は産業界と学術界の間の溝を埋めるだけでなく、AIを自在に操る次世代のエンジニアとして、自らを差別化することができる。

未来のソフトウェアエンジニアリングは、人間の創造性、批判的思考、そして強力なAIツールの間のシナジーによって駆動される。あなたがこれから歩む道は、単に「就職するための準備」ではない。それは、この刺激的な新時代の最前線に立ち、前例のないイノベーションを創出し、人類が直面するより大きな問題を解決していくための、第一歩なのである ¹⁰。

このチュートリアルでは、Google Gemini APIを使って手書きで描いた絵の説明をして改善点を教えてくれるアプリを作ります。

Google Gemini APIの呼び出しにはGoogle Apps Script(GAS)を使います。GASのスクリプトはGoogle Gemini 2.5 Proで書いています。バイブコーディングです。

Google AI Studio で作るGemini APIは課金方法を登録しなくても以下の範囲ならば無料で使えます。

• 1 分あたりのリクエスト数: 5
• 1 日あたりのリクエスト数: 250,000
• 1 分あたりのトークン数（入力）: 100

Google Apps Scriptの設定

API呼び出し処理を行うサーバー側のプログラムをGoogle Apps Scriptに設定します。

Gemini 2.5 Pro を使って Google Apps Script を書く

無料のアカウントでもこちらからGemini 2.5 Proが使えます。

プロンプト

App inventorのキャンバスに描いた絵に説明をつけて改良点を提案させたい。Google apps script とGoogle ai studio を使う。キャンバスに描いた絵はエクステンションでbase64エンコードしてJSONでアップロードする。結果はJSONで戻す。APIキーはスクリプトプロパティから読む。App inventor部分は自分でやるから、それ以外の部分を教えて。

返答

Google Apps Scriptだけではなく、Gemini APIの設定からウェブアプリとしてのデプロイ方法、使い方まで詳しく教えてくれます。

はい、承知いたしました。
App Inventorで描いた絵をGoogle AI（Gemini）で分析し、説明と改善点を返すGoogle Apps Scriptのウェブアプリケーションを作成します。

App Inventor側の実装はご自身でされるとのことですので、Google Apps Script側の設定方法とコードを提供します。

全体の流れ
App Inventor:

Canvasに絵を描く。

描いた絵をBase64形式でエンコードする。

Base64文字列をJSONに含めて、Google Apps Scriptで作成したウェブアプリのURLにPOSTリクエストを送信する。

Google Apps Script (今回作成するもの):

App InventorからのPOSTリクエストを受け取る。

JSONからBase64形式の画像データを取り出す。

スクリプトプロパティに保存したAPIキーを読み込む。

Google AI (Gemini Pro Vision) APIに画像データとプロンプトを送信する。

Geminiから返ってきた「説明」と「改善点の提案」をJSON形式で整形する。

整形したJSONをApp Inventorに返す。

App Inventor:

Google Apps Scriptから返ってきたJSONを解析し、結果をアプリに表示する。

それでは、Google Apps Scriptの設定とコードを以下に示します。

Google Apps Script (GAS) の設定手順

Google AI (Gemini) APIを利用するためのGoogle Apps Scriptプロジェクトの設定手順です。

1. Google Apps Script プロジェクトの作成

1. Google Drive を開きます。
2. 「+ 新規」 > 「その他」 > 「Google Apps Script」 をクリックして、新しいプロジェクトを作成します。
3. プロジェクトに名前を付けます（例：「画像分析AI」）。

2. APIキーの保存

APIキーをコードに直接書き込むのはセキュリティ上好ましくありません。代わりにスクリプトプロパティに保存します。

1. GASエディタの左側メニューから「プロジェクトの設定」（歯車のアイコン）をクリックします。
2. 「スクリプト プロパティ」のセクションにある「スクリプト プロパティを追加」をクリックします。
3. 以下の情報を入力します。

   • プロパティ: GEMINI_API_KEY
   • 値: ご自身のGoogle AI StudioのAPIキー

4. 「スクリプト プロパティを保存」をクリックします。

3. ウェブアプリとしてデプロイ

作成したスクリプトを外部（App Inventor）から利用できるように、ウェブアプリとして公開します。

1. GASエディタの右上にある「デプロイ」ボタンをクリックし、「新しいデプロイ」を選択します。
2. 「種類の選択」の横にある歯車アイコンをクリックし、「ウェブアプリ」を選択します。
3. 設定を以下のように変更します。

   • 説明: （任意）画像分析用のAPIなど
   • 次のユーザーとして実行: 「自分」
   • アクセスできるユーザー: 「全員」

4. 「デプロイ」ボタンをクリックします。
5. 初回は「アクセスを承認」を求められます。ご自身のアカウントを選択し、詳細画面で「（安全でないページに）移動」をクリックして、アクセスを許可してください。
6. 承認が終わると、ウェブアプリのURLが表示されます。このURLをコピーしてください。App Inventorからリクエストを送信する先のURLになります。

重要: コードを修正した場合は、再度「デプロイ」 > 「デプロイを管理」から、新しいバージョンを公開する必要があります。その際、「バージョン」を「新バージョン」にしてデプロイしてください。ウェブアプリのURLは通常変わりません。

これで、Google Apps Script側の準備は完了です。次に示すコードをGASエディタに貼り付けて保存してください。

Code.gs – 画像分析スクリプト

/**
 * App InventorからのPOSTリクエストを処理する関数
 * @param {Object} e - App Inventorから送信されるイベントオブジェクト
 * @return {ContentService.TextOutput} - Gemini APIからの結果をJSON形式で返す
 */
function doPost(e) {
  // エラーハンドリング
  try {
    // 1. App Inventorから送信されたJSONデータを解析
    const postData = JSON.parse(e.postData.contents);
    const base64Image = postData.image; // App Inventor側で "image" というキーに設定

    // 2. スクリプトプロパティからAPIキーを読み込む
    const API_KEY = PropertiesService.getScriptProperties().getProperty('API_KEY');
    if (!API_KEY) {
      return createErrorResponse('APIキーが設定されていません。');
    }

    // 3. Gemini APIのエンドポイントURL
    const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro-vision:generateContent?key=${API_KEY}`;

    // 4. Gemini APIに送信するリクエストボディを作成
    const payload = {
      "contents": [{
        "parts": [{
          "text": "この絵を説明して、改善点を提案してください。説明と提案は明確に分けて記述してください。"
        }, {
          "inline_data": {
            "mime_type": "image/png", // App InventorのCanvasはPNG形式
            "data": base64Image
          }
        }]
      }]
    };

    // 5. Gemini APIにリクエストを送信するための設定
    const options = {
      'method': 'post',
      'contentType': 'application/json',
      'payload': JSON.stringify(payload),
      'muteHttpExceptions': true // エラーレスポンスを例外ではなくオブジェクトとして取得
    };

    // 6. APIにリクエストを送信
    const response = UrlFetchApp.fetch(API_URL, options);
    const responseCode = response.getResponseCode();
    const responseBody = response.getContentText();

    if (responseCode !== 200) {
       return createErrorResponse(`APIリクエストエラー: ${responseCode} ${responseBody}`);
    }
    
    // 7. APIからのレスポンスを解析
    const resultJson = JSON.parse(responseBody);
    
    // レスポンスの構造をチェックし、テキスト部分を取得
    let generatedText = "解析結果を取得できませんでした。";
    if (resultJson.candidates && resultJson.candidates.length > 0 &&
        resultJson.candidates[0].content && resultJson.candidates[0].content.parts &&
        resultJson.candidates[0].content.parts.length > 0) {
      generatedText = resultJson.candidates[0].content.parts[0].text;
    } else {
       // Geminiからのレスポンスが期待した形式でない場合
       return createErrorResponse(`予期しないAPIレスポンス形式です: ${responseBody}`);
    }

    // 8. App Inventorに返すJSONを作成
    const output = JSON.stringify({
      "status": "success",
      "result": generatedText
    });

    // 9. 結果をJSON形式で返す
    return ContentService.createTextOutput(output).setMimeType(ContentService.MimeType.JSON);

  } catch (error) {
    // スクリプト全体で発生したエラーをキャッチ
    return createErrorResponse(`スクリプトエラー: ${error.toString()}`);
  }
}

/**
 * エラーレスポンスを生成するヘルパー関数
 * @param {string} message - エラーメッセージ
 * @return {ContentService.TextOutput} - エラー情報を格納したJSONオブジェクト
 */
function createErrorResponse(message) {
  const errorOutput = JSON.stringify({
    "status": "error",
    "message": message
  });
  return ContentService.createTextOutput(errorOutput).setMimeType(ContentService.MimeType.JSON);
}

プロンプト

Gemini APIのAPIキーの取り方が無かったので、追加で尋ねます。

APIキーの取り方教えて

返答

このチュートリアルでは、Google Cloud Vision APIを使って手書き文字の文字認識を行うアプリを作ります。クラウド光学文字認識(OCR)アプリでは写真で撮影した文字の光学文字認識を行いましたが、このアプリでは画面に手書きした文字を認識します。

Google Cloud Vision APIの呼び出しにはGoogle Apps Script(GAS)を使います。GASのスクリプトはGoogle Gemini 2.5 Proで書いています。バイブコーディングです。

Google Cloud Vision APIは1月1,000回まで無料ですが、それ以降は1,000回 あたり$1.50課金されます。

Google Apps Scriptの設定

API呼び出し処理を行うサーバー側のプログラムをGoogle Apps Scriptに設定します。クラウド光学文字認識(OCR)アプリで使ったものとまったく同じなので、すでに設定済みの場合は同じものを使ってください。

Gemini 2.5 Pro を使って Google Apps Script を書く

無料のアカウントでもこちらからGemini 2.5 Proが使えます。

プロンプト

Google Apps ScriptでVision APIを使ってOCRするウェブアプリを作りたい。JSONでBase64画像をPOSTで受け取り、返すJSONには、認識したテキスト全文と、Vision APIからの生のレスポンスデータの両方を含める。Vision APIのAPIキーはスクリプトプロパティから読み込む。

返答

Google Apps Scriptだけではなく、Vision APIの設定からウェブアプリとしてのデプロイ方法、使い方まで詳しく教えてくれます。わからないところはGeminiに聞けば詳しく説明してくれます。たとえばこんな感じに。「コードをもっと詳しく説明して」

はい、承知いたしました。Google Apps Script (GAS) を使用して、Base64エンコードされた画像をJSON形式で受け取り、Google Cloud Vision APIでOCR処理を行うウェブアプリの作成方法を解説します。

完成したウェブアプリは、以下の仕様を満たします。

  * HTTP POSTリクエストで動作します。
  * `{"base64Image": "..."}` という形式のJSONを受け取ります。
  * Vision APIのAPIキーは、コードに直接書き込まず、安全なスクリプトプロパティから読み込みます。
  * 処理結果として、認識したテキスト全体 (`text`) と、Vision APIからの生のレスポンス (`rawResponse`) を含むJSONを返します。

-----

## 1\. Google Apps Script コード

まず、GASプロジェクトに記述するコードです。以下のコードをスクリプトエディタにコピー＆ペーストしてください。

```javascript
/**
 * POSTリクエストを受け取り、Vision APIでOCRを実行するメイン関数
 * @param {Object} e - GASがPOSTリクエスト時に自動的に渡すイベントオブジェクト
 * @returns {ContentService.TextOutput} - JSON形式のレスポンス
 */
function doPost(e) {
  try {
    // 1. リクエストボディからBase64画像データを取得
    if (!e.postData || !e.postData.contents) {
      return createJsonResponse({ error: 'Invalid request body.' }, 400);
    }
    const postData = JSON.parse(e.postData.contents);
    const base64Image = postData.base64Image;

    if (!base64Image) {
      return createJsonResponse({ error: 'The "base64Image" key is missing in the JSON payload.' }, 400);
    }

    // 2. スクリプトプロパティからAPIキーを読み込む
    const apiKey = PropertiesService.getScriptProperties().getProperty('VISION_API_KEY');
    if (!apiKey) {
      return createJsonResponse({ error: 'Vision API key is not set in Script Properties.' }, 500);
    }

    // 3. Vision APIへのリクエストを作成
    const visionApiUrl = `https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`;
    const payload = {
      requests: [
        {
          image: {
            content: base64Image,
          },
          features: [
            {
              // 高精度なOCRのためにDOCUMENT_TEXT_DETECTIONを推奨
              type: 'DOCUMENT_TEXT_DETECTION', 
            },
          ],
        },
      ],
    };

    const options = {
      method: 'post',
      contentType: 'application/json',
      payload: JSON.stringify(payload),
      muteHttpExceptions: true, // APIからのエラーレスポンスを正しく受け取るため
    };

    // 4. Vision APIを呼び出し
    const response = UrlFetchApp.fetch(visionApiUrl, options);
    const responseCode = response.getResponseCode();
    const visionResponse = JSON.parse(response.getContentText());

    // Vision APIからのエラーをハンドリング
    if (responseCode !== 200) {
      return createJsonResponse({
        error: 'Vision API returned an error.',
        details: visionResponse,
      }, responseCode);
    }
    
    // 5. レスポンスからテキスト全体を抽出
    // ?. (オプショナルチェイニング) を使い、プロパティが存在しない場合でもエラーを防ぐ
    const fullText = visionResponse.responses[0]?.fullTextAnnotation?.text || '';

    // 6. 成功レスポンスを生成
    const result = {
      text: fullText,
      rawResponse: visionResponse,
    };

    return createJsonResponse(result, 200);

  } catch (error) {
    // JSONのパース失敗など、その他の予期せぬエラーをハンドリング
    return createJsonResponse({
      error: 'An unexpected error occurred.',
      details: error.message,
    }, 500);
  }
}

/**
 * JSON形式のレスポンスを生成するヘルパー関数
 * @param {Object} data - レスポンスとして返すオブジェクト
 * @param {number} statusCode - HTTPステータスコード (GASでは直接設定不可だが、ログ等のため)
 * @returns {ContentService.TextOutput}
 */
function createJsonResponse(data, statusCode) {
  // GASではHTTPステータスコードを直接設定できないため、
  // 返却するJSONデータにエラー情報を含めることでクライアント側で処理を分岐させます。
  console.log(`Response (Status ${statusCode}): ${JSON.stringify(data)}`);
  return ContentService.createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}
```

-----

## 2\. セットアップ手順

コードを動作させるには、いくつかの準備が必要です。

### ステップ1: Cloud Vision APIの有効化とAPIキーの取得

1.  **Google Cloudプロジェクト**に移動し、Vision APIを使用したいプロジェクトを選択または新規作成します。
2.  ナビゲーションメニューから **[APIとサービス] \> [ライブラリ]** を選択します。
3.  「**Cloud Vision API**」を検索し、**[有効にする]** をクリックします。
4.  次に、**[APIとサービス] \> [認証情報]** に移動します。
5.  **[+ 認証情報を作成]** をクリックし、**[API キー]** を選択します。
6.  作成されたAPIキーをコピーしておきます。セキュリティのため、このキーには適切な制限（IPアドレス制限やAPI制限など）をかけることを強く推奨します。

### ステップ2: スクリプトプロパティにAPIキーを設定

APIキーをコードに直接書き込むのは危険です。GASのスクリプトプロパティ機能を使って安全に管理します。

1.  GASのスクリプトエディタ画面で、左側のメニューから**歯車アイコン (プロジェクトの設定)** をクリックします。
2.  「**スクリプト プロパティ**」のセクションで、**[スクリプト プロパティを追加]** をクリックします。
3.  以下の通りに設定し、**[スクリプト プロパティを保存]** をクリックします。
      * **プロパティ:** `VISION_API_KEY`
      * **値:** 先ほどコピーしたAPIキー

-----

## 3\. ウェブアプリとしてデプロイ

スクリプトを外部から呼び出せるように、ウェブアプリとしてデプロイします。

1.  スクリプトエディタの右上にある **[デプロイ]** ボタンをクリックし、**[新しいデプロイ]** を選択します。
2.  種類の選択で**歯車アイコン**をクリックし、**[ウェブアプリ]** を選択します。
3.  以下の通り設定します。
      * **説明:** (任意) Vision API OCR Web App など
      * **次のユーザーとして実行:** **自分**
      * **アクセスできるユーザー:** **全員**
4.  **[デプロイ]** をクリックします。
5.  初回デプロイ時には「承認が必要です」というポップアップが表示されるので、指示に従ってアカウントへのアクセスを許可してください。
6.  デプロイが完了すると「**ウェブアプリのURL**」が表示されるので、このURLをコピーします。これがAPIのエンドポイントになります。

-----

## 4\. 使い方 (curlでのテスト例)

デプロイしたウェブアプリをテストするには、`curl` コマンドや他のAPIテストツール（Postmanなど）が使用できます。

まず、テストしたい画像をBase64形式にエンコードします。macOSやLinuxでは以下のコマンドでエンコードできます。

```bash
base64 -i path/to/your/image.png -o image.txt
```

次に、`curl` を使ってPOSTリクエストを送信します。

```bash
# ウェブアプリのURLをあなたのものに置き換えてください
WEB_APP_URL="ここにデプロイしたウェブアプリのURLを貼り付け"

# Base64エンコードされた画像データをファイルから読み込み、JSONを作成して送信
curl -L -X POST "${WEB_APP_URL}" \
-H "Content-Type: application/json" \
-d '{ "base64Image": "'"$(cat image.txt)"'" }'
```

### 成功時のレスポンス例

```json
{
  "text": "これはテスト用の\n画像です。\nGoogle Cloud Vision\n",
  "rawResponse": {
    "responses": [
      {
        "fullTextAnnotation": {
          "pages": [
            // ... Vision APIからの詳細なレスポンスデータ ...
          ],
          "text": "これはテスト用の\n画像です。\nGoogle Cloud Vision\n"
        },
        "textAnnotations": [
            // ... 各単語の位置情報など ...
        ]
      }
    ]
  }
}
```

App Inventorアプリ

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"HandOCR"と名前を付けます。

デザイン編集

このチュートリアルでは、Google Cloud Vision APIを使って光学文字認識を行うアプリを作ります。

光学文字認識(OCR)アプリではウェブビューでJavaScriptのTesseract.jsを使って光学文字認識を行いましたが、日本語の認識精度があまりよくありませんでした。Google Cloud Vision APIを使うとはるかに精度の良い光学文字認識が行えます。

Google Cloud Vision APIの呼び出しにはGoogle Apps Script(GAS)を使います。GASのスクリプトはGoogle Gemini 2.5 Proで書いています。バイブコーディングです。

Google Cloud Vision APIは1月1,000回まで無料ですが、それ以降は1,000回 あたり$1.50課金されます。

Google Apps Scriptの設定

API呼び出し処理を行うサーバー側のプログラムをGoogle Apps Scriptに設定します。

Gemini 2.5 Pro を使って Google Apps Script を書く

無料のアカウントでもこちらからGemini 2.5 Proが使えます。

プロンプト

Google Apps ScriptでVision APIを使ってOCRするウェブアプリを作りたい。JSONでBase64画像をPOSTで受け取り、返すJSONには、認識したテキスト全文と、Vision APIからの生のレスポンスデータの両方を含める。Vision APIのAPIキーはスクリプトプロパティから読み込む。

返答

Google Apps Scriptだけではなく、Vision APIの設定からウェブアプリとしてのデプロイ方法、使い方まで詳しく教えてくれます。わからないところはGeminiに聞けば詳しく説明してくれます。たとえばこんな感じに。「コードをもっと詳しく説明して」

はい、承知いたしました。Google Apps Script (GAS) を使用して、Base64エンコードされた画像をJSON形式で受け取り、Google Cloud Vision APIでOCR処理を行うウェブアプリの作成方法を解説します。

完成したウェブアプリは、以下の仕様を満たします。

  * HTTP POSTリクエストで動作します。
  * `{"base64Image": "..."}` という形式のJSONを受け取ります。
  * Vision APIのAPIキーは、コードに直接書き込まず、安全なスクリプトプロパティから読み込みます。
  * 処理結果として、認識したテキスト全体 (`text`) と、Vision APIからの生のレスポンス (`rawResponse`) を含むJSONを返します。

-----

## 1\. Google Apps Script コード

まず、GASプロジェクトに記述するコードです。以下のコードをスクリプトエディタにコピー＆ペーストしてください。

```javascript
/**
 * POSTリクエストを受け取り、Vision APIでOCRを実行するメイン関数
 * @param {Object} e - GASがPOSTリクエスト時に自動的に渡すイベントオブジェクト
 * @returns {ContentService.TextOutput} - JSON形式のレスポンス
 */
function doPost(e) {
  try {
    // 1. リクエストボディからBase64画像データを取得
    if (!e.postData || !e.postData.contents) {
      return createJsonResponse({ error: 'Invalid request body.' }, 400);
    }
    const postData = JSON.parse(e.postData.contents);
    const base64Image = postData.base64Image;

    if (!base64Image) {
      return createJsonResponse({ error: 'The "base64Image" key is missing in the JSON payload.' }, 400);
    }

    // 2. スクリプトプロパティからAPIキーを読み込む
    const apiKey = PropertiesService.getScriptProperties().getProperty('VISION_API_KEY');
    if (!apiKey) {
      return createJsonResponse({ error: 'Vision API key is not set in Script Properties.' }, 500);
    }

    // 3. Vision APIへのリクエストを作成
    const visionApiUrl = `https://vision.googleapis.com/v1/images:annotate?key=${apiKey}`;
    const payload = {
      requests: [
        {
          image: {
            content: base64Image,
          },
          features: [
            {
              // 高精度なOCRのためにDOCUMENT_TEXT_DETECTIONを推奨
              type: 'DOCUMENT_TEXT_DETECTION', 
            },
          ],
        },
      ],
    };

    const options = {
      method: 'post',
      contentType: 'application/json',
      payload: JSON.stringify(payload),
      muteHttpExceptions: true, // APIからのエラーレスポンスを正しく受け取るため
    };

    // 4. Vision APIを呼び出し
    const response = UrlFetchApp.fetch(visionApiUrl, options);
    const responseCode = response.getResponseCode();
    const visionResponse = JSON.parse(response.getContentText());

    // Vision APIからのエラーをハンドリング
    if (responseCode !== 200) {
      return createJsonResponse({
        error: 'Vision API returned an error.',
        details: visionResponse,
      }, responseCode);
    }
    
    // 5. レスポンスからテキスト全体を抽出
    // ?. (オプショナルチェイニング) を使い、プロパティが存在しない場合でもエラーを防ぐ
    const fullText = visionResponse.responses[0]?.fullTextAnnotation?.text || '';

    // 6. 成功レスポンスを生成
    const result = {
      text: fullText,
      rawResponse: visionResponse,
    };

    return createJsonResponse(result, 200);

  } catch (error) {
    // JSONのパース失敗など、その他の予期せぬエラーをハンドリング
    return createJsonResponse({
      error: 'An unexpected error occurred.',
      details: error.message,
    }, 500);
  }
}

/**
 * JSON形式のレスポンスを生成するヘルパー関数
 * @param {Object} data - レスポンスとして返すオブジェクト
 * @param {number} statusCode - HTTPステータスコード (GASでは直接設定不可だが、ログ等のため)
 * @returns {ContentService.TextOutput}
 */
function createJsonResponse(data, statusCode) {
  // GASではHTTPステータスコードを直接設定できないため、
  // 返却するJSONデータにエラー情報を含めることでクライアント側で処理を分岐させます。
  console.log(`Response (Status ${statusCode}): ${JSON.stringify(data)}`);
  return ContentService.createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}
```

-----

## 2\. セットアップ手順

コードを動作させるには、いくつかの準備が必要です。

### ステップ1: Cloud Vision APIの有効化とAPIキーの取得

1.  **Google Cloudプロジェクト**に移動し、Vision APIを使用したいプロジェクトを選択または新規作成します。
2.  ナビゲーションメニューから **[APIとサービス] \> [ライブラリ]** を選択します。
3.  「**Cloud Vision API**」を検索し、**[有効にする]** をクリックします。
4.  次に、**[APIとサービス] \> [認証情報]** に移動します。
5.  **[+ 認証情報を作成]** をクリックし、**[API キー]** を選択します。
6.  作成されたAPIキーをコピーしておきます。セキュリティのため、このキーには適切な制限（IPアドレス制限やAPI制限など）をかけることを強く推奨します。

### ステップ2: スクリプトプロパティにAPIキーを設定

APIキーをコードに直接書き込むのは危険です。GASのスクリプトプロパティ機能を使って安全に管理します。

1.  GASのスクリプトエディタ画面で、左側のメニューから**歯車アイコン (プロジェクトの設定)** をクリックします。
2.  「**スクリプト プロパティ**」のセクションで、**[スクリプト プロパティを追加]** をクリックします。
3.  以下の通りに設定し、**[スクリプト プロパティを保存]** をクリックします。
      * **プロパティ:** `VISION_API_KEY`
      * **値:** 先ほどコピーしたAPIキー

-----

## 3\. ウェブアプリとしてデプロイ

スクリプトを外部から呼び出せるように、ウェブアプリとしてデプロイします。

1.  スクリプトエディタの右上にある **[デプロイ]** ボタンをクリックし、**[新しいデプロイ]** を選択します。
2.  種類の選択で**歯車アイコン**をクリックし、**[ウェブアプリ]** を選択します。
3.  以下の通り設定します。
      * **説明:** (任意) Vision API OCR Web App など
      * **次のユーザーとして実行:** **自分**
      * **アクセスできるユーザー:** **全員**
4.  **[デプロイ]** をクリックします。
5.  初回デプロイ時には「承認が必要です」というポップアップが表示されるので、指示に従ってアカウントへのアクセスを許可してください。
6.  デプロイが完了すると「**ウェブアプリのURL**」が表示されるので、このURLをコピーします。これがAPIのエンドポイントになります。

-----

## 4\. 使い方 (curlでのテスト例)

デプロイしたウェブアプリをテストするには、`curl` コマンドや他のAPIテストツール（Postmanなど）が使用できます。

まず、テストしたい画像をBase64形式にエンコードします。macOSやLinuxでは以下のコマンドでエンコードできます。

```bash
base64 -i path/to/your/image.png -o image.txt
```

次に、`curl` を使ってPOSTリクエストを送信します。

```bash
# ウェブアプリのURLをあなたのものに置き換えてください
WEB_APP_URL="ここにデプロイしたウェブアプリのURLを貼り付け"

# Base64エンコードされた画像データをファイルから読み込み、JSONを作成して送信
curl -L -X POST "${WEB_APP_URL}" \
-H "Content-Type: application/json" \
-d '{ "base64Image": "'"$(cat image.txt)"'" }'
```

### 成功時のレスポンス例

```json
{
  "text": "これはテスト用の\n画像です。\nGoogle Cloud Vision\n",
  "rawResponse": {
    "responses": [
      {
        "fullTextAnnotation": {
          "pages": [
            // ... Vision APIからの詳細なレスポンスデータ ...
          ],
          "text": "これはテスト用の\n画像です。\nGoogle Cloud Vision\n"
        },
        "textAnnotations": [
            // ... 各単語の位置情報など ...
        ]
      }
    ]
  }
}
```

App Inventorアプリ

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"CloudOCR"と名前を付けます。

デザイン編集

JavaScriptにQRCode.jsというライブラリがあってこれを使うと簡単にQRコードが作れるらしいです。App Inventor 2 ではウェブビューにJavaScriptを含むhtmlファイルをアセットとして登録すればJavaScriptを呼び出してデータのやり取りができます。App Inventor 2 には直接QRコードを作る機能は無いので、QRCode.jsを使ってQRコードを作るApp Inventor 2 アプリを作ることにしました。

作り方はChatGPTとGemini、最近賢くなったと噂に聞くClaude 3.7 Sonnetに相談してみました。

1. MIT App Inventor 2 App Maker
2. ChatGPT-o1
3. Gemini 2.0 Flash Thinking
4. Claude 3.7 Sonnet

• １は大体はいいみたい。
• ２も大体はいいみたい。
• ３はJavaScript関数を呼ばずにwindow.postMessageを使っているのでうまく動くか分からないので却下。
• ４はブロック編集部分が間違っているので却下。

１と２で作ってみます。

MIT App Inventor 2 App Maker

JavaScriptのQRCode.jsを使ってApp Inventor 2 アプリを作りたい。ただし、ウェブビューは見えなくし、App Inventor 2 からウェブビューに文字列を渡して、できたQRコードはApp Inventor 2 に渡してキャンバスコンポーネントに表示して保存できるようにしたい。作り方を教えて。

### **MIT App Inventor 2でQRCode.jsを使ったQRコード生成アプリの作成方法**

MIT App Inventor 2 で `QRCode.js` を使い、ウェブビューを非表示にしながらQRコードを生成し、キャンバスに表示して保存するアプリを作成する手順を説明します。

---

### **🔹 概要**
1. **ウェブビューコンポーネントを利用するが非表示にする**
2. **App Inventor 2 から WebViewer に文字列を送信**
3. **QRCode.js を使用してQRコードを生成**
4. **生成したQRコードをApp Inventor 2に渡し、Canvasに表示**
5. **Canvasの画像として保存**

---

## **📌 手順**

### **❶ MIT App Inventor 2 でのコンポーネント設定**
まず、以下のコンポーネントを **デザイナー画面** で追加します。

| **コンポーネント名** | **種類** | **説明** |
|-----------------|---------|----------------------------|
| `WebViewer1` | WebViewer | QRコードを生成するための非表示Webコンポーネント |
| `Canvas1` | Canvas | 生成したQRコードを表示するキャンバス |
| `Button1` | Button | QRコードを生成するボタン |
| `TextBox1` | TextBox | QRコードに埋め込むテキスト入力欄 |
| `File1` | File | 画像を保存するためのファイルコンポーネント |

---

### **❷ `QRCode.js` を利用するHTMLファイルを作成**
App Inventor 2 の **WebViewer** に QRコード生成処理をさせるために、外部HTMLを作成し、それをアプリ内で利用します。

#### **📄 `qrcode.html` の作成**
以下のHTMLファイルを作成し、`Assets` にアップロードしてください。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>
        function generateQRCode(data) {
            document.getElementById("qrcode").innerHTML = ""; // QRコードをリセット
            new QRCode(document.getElementById("qrcode"), data);
        }

        function getQRCodeImage() {
            var canvas = document.querySelector("canvas");
            if (canvas) {
                var imageData = canvas.toDataURL("image/png");
                AppInventor.setWebViewString(imageData); // App Inventorに送信
            }
        }
    </script>
</head>
<body>
    <div id="qrcode"></div>
</body>
</html>
```
✅ `generateQRCode(data)` 関数で QRコードを生成し、  
✅ `getQRCodeImage()` 関数で `base64` 画像を App Inventor 2 に渡します。

---

### **❸ App Inventor 2 のブロックエディタ設定**
次に、MIT App Inventor の **ブロックエディタ** で以下のようにブロックを作成します。

#### **🟢 ボタンを押したらQRコードを生成**
1. **`Button1.Click`**
   - `WebViewer1.GoToUrl` を実行し、以下のようにURLをセット：
   ```
   file:///android_asset/qrcode.html
   ```
   - **`WebViewer1.EvaluateJavaScript`** を呼び出し、以下のスクリプトを実行：
   ```
   generateQRCode("入力されたテキスト")
   ```
   - ここで `TextBox1.Text` を利用して QRコードを作成します。

2. **QRコード画像を取得**
   - **`Clock1.Timer`** を設定し、一定時間後に以下を実行：
   ```
   WebViewer1.EvaluateJavaScript("getQRCodeImage()")
   ```

---

### **❹ QRコード画像をCanvasに表示**
- `WebViewer1.WebViewStringChanged` イベントを利用し、以下を設定：
  ```
  Canvas1.BackgroundImageinBase64 = WebViewer1.WebViewString
  ```

---

### **❺ 画像を保存**
1. **キャンバスの画像を保存するための処理**
   - `Button2.Click` に以下を設定：
   ```
   File1.SaveAs(Canvas1.SaveAs("QRCode.png"))
   ```
   - これで、QRコード画像が `QRCode.png` として保存されます。

---

## **📌 完成イメージ**
**📷 UIデザイン**
```
[TextBox1]（ここにQRコードに変換する文字を入力）
[Button1]  （QRコード生成ボタン）
[Canvas1]  （生成したQRコードを表示）
[Button2]  （QRコード画像を保存）
```

---

## **✅ まとめ**
1. **WebViewer を非表示** にして `QRCode.js` を利用
2. **App Inventor 2 から WebViewer にデータ送信**
3. **QRコードを生成し、base64 画像として取得**
4. **Canvas に QRコードを表示**
5. **生成した QRコードを保存**

これで、ウェブビューを見せずに QRコードを作成し、App Inventor 2 で表示・保存するアプリが完成します！

ChatGPT-o1

最近特に賢くなってきている生成AIで簡単なアプリを作れるか、GoogleのGemini 2.0 Flash Thinking Experimentalで試してみました。結果は予想以上でGeminiは作り方のチュートリアル を出力してくれました。まだ100%これだけでOKというわけにはいきませんが、少しの調整で動くアプリを作れました。調整した点は以下です。

• バーコードスキャナーで外部スキャナーの使用のチェックを外す
• BarcodeScanner1.AfterScanで「format」は渡されない

実際に作ったQRコード読み取りアプリのチュートリアルはこちらです。実験日: 2025年2月6日

App InventorでQRコードを読んで内容を表示するアプリ作れる？

QRコードを読み取ってその内容を表示するアプリを作ります

このチュートリアルでは、QRコードを読み取ってその内容を表示するアプリを作ります。このチュートリアルのほとんどはGemini 2.0 Flash Thinking Experimentalが書きました。詳細はこちらです。

ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"QRCodeReader“と名前を付けます。

コンポーネントの配置

画面左側の「パレット」からコンポーネントをドラッグ＆ドロップして、アプリの画面（Viewer）に配置します。最低限必要なコンポーネントは以下の通りです。

• バーコードスキャナー (BarcodeScanner): 「センサー」カテゴリの中にあります。これを画面上の見えない場所に配置します。画面には何も表示されません。プロパティ―の外部スキャナーの使用のチェックは外します。
• ボタン (Button): 「ユーザーインターフェース」カテゴリの中にあります。これを画面上の好きな場所に配置します。このボタンをタップしてQRコードの読み取りを開始します。ボタンのテキストは「QRコードを読み取る」など、分かりやすい名前に変更しておきましょう。
• ラベル (Label): 「ユーザーインターフェース」カテゴリの中にあります。これを画面上のボタンの下など、内容を表示したい場所に配置します。ラベルの初期テキストは空白にしておくと良いでしょう。

ブロックエディタでのプログラミング