アルゴリズム概論2026オリエンテーション

今日の流れ

前半

  • 講師自己紹介
  • サポートメンバーのご紹介
  • 講座のコンセプト
  • 講義の構成
  • 提出ルールについて
  • 昨年との違いについて

後半

  • 環境設定
  • プラグインのインストール
  • VSCode の設定
  • 配布素材の取り扱い方
  • Live Server の設定
  • HTML/CSS/JavaScript の体験

この動画の見方について

この動画の内容を、4/16の初回講義までにすべて完了しなければいけないわけではありません。

  • どこが必須で、どこが任意なのかは都度説明しています
  • すでに指示された環境を持っている場合（例：Google Chromeをインストール済みなど）は、その部分は飛ばしてOKです

自分に必要なところだけ確認して、準備を進めてください！

講師自己紹介

講師自己紹介

コスゲタツヤ

埼玉生まれ、神奈川の湘南在住。ベンチャー企業でエンジニアを行う傍ら、G's ACADEMY・大学や専門学校での講師業をしている。自身も積極的に学び続けており、講師側・生徒側双方で関わった教育現場は 28 にのぼる。

経歴

  • 音楽活動
  • お好み焼き屋＋コールセンター
  • 民間学校スタッフ
  • フリーランス
  • 現在

講座のコンセプト

講座のコンセプト

「問題を構造的に捉えて、適切な手段で解決できる人を育てる」

講座のコンセプト

この講座で大切にしていること

  • アルゴリズム ≠ プログラミング。判断基準の設計や手順の構造化を学ぶ講座です。
  • 課題が先、技術は後。困り事の発見 → 解決策の考案 → 実現というプロセスを大切にします。
  • AIに丸投げできそうで、実は人間が判断すべきポイントがある題材を扱います。

「私には無理だ」 から 「どうしたらできるだろう？」 へ！

皆さんに身につけてほしい力

やりたいことを構造化して言語化できる力

豊かな発想をベースに、自分の考えを整理して人にもコンピューターにも伝えられるようになる。

AIの出力を検証・修正できる力

AIを使いこなす側になる。AIに使われない！

試行錯誤を恐れないマインド

正解は1つではありません。「なぜそうしたか」 を自分の言葉で説明できることを大切にします。

講義の構成

講義の全体構成

center

Phase1・プログラミングとAIの基礎を知る

1. お手本やテーマの確認

表現したいものを確認し、完成イメージを掴みます。

2. 必要な情報の選択と整理

ディスカッションも交えながら。デジタルで表現するために何が必要かを考え、情報を選び取ります

3. 手を動かしながら実装方法を学ぶ

プログラミングやAIを使って、実際に形にしていきます。

4. オリジナル表現への挑戦

学んだ方法を活かして、自分なりの表現に挑戦してみましょう！

中間演習（第7回・第11回）

各フェーズの間に設けた復習と定着のための演習時間です。
講義形式による新しい知識の習得は行わず、これまでの知識を活用した実践に集中します。

1. 学習内容の復習と統合

2. 実践を通じた知識の定着

3. 次のフェーズに向けた準備

中間演習を2回設けることで、つまづいてもしっかり追いつける構成にしています！

Phase2・課題解決演習

Phase1で学んだ思考をベースに、Google Apps Scriptを使って就職活動や社会人でも使えるスキル・考え方の獲得を目指します。

1. より実務的な課題の提示

業務効率化やデータ処理など、今後役立ちそうな課題にも挑戦します。

2. 解決策の検討とディスカッション

サポートメンバーの力も得ながら、多様な解決アプローチを考え、発表しあいます。

3. GAS を用いた解決事例の学習と実装

4. オリジナル解決策の実装

Phase3・AI（チャット）アプリケーション制作演習

これまで学んだ思考と課題解決力をベースに、Dify を使ってAIチャットアプリケーションの制作に挑戦します。

1. 業務フローの考察

解決したい課題や業務フローを整理し、AIで何ができるかを考えます。

2. 解決策の検討とディスカッション

サポートメンバーの力も得ながら、AIを活用した解決アプローチを考え、発表しあいます。

3. Dify を用いたAIアプリの構築と実装

Phase3で使用するツールについて

Phase3では現時点で Dify というツールを使用する予定です。

ただし、講義実施までに大きな仕様変更が生じた場合は、類似のツールに変更する可能性があります。

変更がある場合は事前にお知らせしますので、ご安心ください！

課題に関連して

課題について

課題が出る回があります

講義の内容に応じて課題を出します。毎回必ず出るわけではありません。

授業中から取り組めます

課題は授業の後半から手をつけられるように構成しています。授業中にできるだけ進めておきましょう！

完璧な正解を求める課題ではありません

課題では**「なぜそうしたか」「どう考えたか」**という論理性やプロセスを重視します。うまくいかなくても、自分なりに考えた過程をしっかり残してください。

課題の提出ルールについて

基本ルール

  • 各回の課題は次回授業開始までが提出期限
  • 提出方法や注意点、課題における細かい評価の基準は毎回の講義でお伝えします。

遅延提出について

期限後の提出は減点対象になることがあります。遅延は原則 提出期限の 2 週間後 まで。

やむを得ない事情がある場合は、事前に相談してください！！！

配点について

フェーズ 内容 配点
Phase1 プログラミングとAIの基礎を知る 23点
中間演習1 復習と定着 10点
Phase2 課題解決演習 18点
中間演習2 復習と定着 10点
Phase3 AI（チャット）アプリケーション制作演習 19点
最終課題 総合的な課題解決 20点
合計 100点

昨年との違いについて

AIを使うことを前提にした構成に

毎回の講義や課題でAIを使ってOKです。さらにPhase3ではDifyを使ってAIの挙動を自分で調整する体験も取り入れました。AIに使われるのではなく、AIを使いこなすことを意識してほしいと思っています。

「課題が先、技術は後」 を体験できる題材に

ゲームやテレビの企画をデジタルで再現するなど、まず「何を実現したいか」から始まる課題を用意しました。必要な情報を自分で選び取り、それを形にするプロセスを自然に体験できるようにしています。

中間演習を2回に増やしました

昨年の中間演習が好評だったので、今年は2回に。復習と追いつきの機会が増えるので、安心して取り組んでください！

講師からのお願い

コミュニケーションを大切にしてください

完璧な成果よりも、困ったときに相談できることを重視しています。就活での欠席など事情がある場合も、事前にしっかり連絡をもらえれば、できる限りの配慮をします。逆に、過剰な自己判断で黙って進めてしまうのはNGです。

「AIがこう言ったからこうしました」はNG

AIを使うのはOKですが、自分はどう考えたのかを大事にしてください。AIの出力をそのまま出すのではなく、自分の考えと向き合ったうえで活用すること。それがこの講座の趣旨です。

報告・連絡・相談。これが一番大事です！

ポータルページをご用意しました！

講義の情報を網羅したポータルページを用意しました！
過去の資料などもこちらから見返すことができます！

困ったときのお問い合わせ先を知ろう

講師にメールを送りましょう！

環境設定・練習

必要なツールのダウンロード

Google Chrome

Webブラウザ
https://www.google.com/intl/ja_jp/chrome/

Visual Studio Code

エディタ
https://code.visualstudio.com/

プラグインのインストール

プラグインは、VScode に機能を追加できる仕組みです！
まずは日本語化のプラグインを使ってプラグインのインストール方法を学びましょう！

  1. 入力欄に「Japanese language Pack」と入力。
  2. 検索結果にプラグイン一覧が出てくるので、一番上にある「Japanese language Pack」を選択。
  3. 画面中央部に「インストール」という青いボタンがあるので、ボタンを押す。
    （※上記画像では「アンインストール」と表示されていますがこの部分を指します）
  4. （場合により）Visual Studio Codeの再起動を行う。

（演習）プラグインインストールのトレーニング

いくつかのプラグインをインストールするトレーニングをしていきましょう！

「Japanese language Pack」の時と同様、 以下 7つのプラグインの名前を 1 つ 1 つ検索した上で、該当のプラグインを表示 → インストールするようにしてみてください！

  • ・Path Autocomplete
  • ・indent-rainbow
  • ・Auto Rename Tag
  • ・Highlight Matching Tag
  • ・zenkaku
  • ・Live Server
  • ・Prettier

自動保存の設定

プログラムはコードを書くたびにファイル保存をする必要がありますが、プログラミングに慣れないうちは保存を忘れてしまうことがよくあります・・・

なので今回は Visual Studio Code に自動でファイル保存をしてもらうように設定します！

VSCode の細かい設定を行う（Win）


コードフォーマッターを活用すると、コードの保存時にあっという間に自動でコードを整理整頓してくれます！
乱れたコードはプログラムが動かない原因になるので、コードフォーマッターを活用しましょう！

  1. ファイルからユーザー設定を選択
  2. 設定を選択
  3. 書式設定を選択し Format On Save にチェック!

VSCode の細かい設定を行う（Mac）

コードフォーマッターを活用すると、コードの保存時にあっという間に自動でコードを整理整頓してくれます！
乱れたコードはプログラムが動かない原因になるので、コードフォーマッターを活用しましょう！

  1. 基本設定を選択
  2. 設定を選択
  3. 書式設定を選択し Format On Save にチェック!

その他の設定をいじる

基本設定 → 設定から

  • Wrap Tabs を検索 → チェック入れる
  • Mouse Wheel Zoom を検索 → チェック入れる
  • Editor : smoothScrolling を検索 → チェック入れる

VSCode のテーマを変えてみよう

VSCode はカラーテーマを変えることで、見た目を自分好みに着せ替えできます！

やり方

  1. 基本設定 → 配色テーマ を選択
  2. 一覧から好きなテーマを選ぶだけ！

プラグインで追加のテーマをインストールすることもできます。自分が見やすい・気分が上がるテーマを探してみましょう！

Live Serverで規定ブラウザをChromeにしよう


1・設定を開き「Custom Browser」で検索


2・Live Server -> Custom Browser の設定を「Chrome」にする


3・ VSCode の右下あたりにある「Go Live」を選択

現在選択しているファイルを Google Chrome 上に表示させることができれば完了です！設定メニューの開き方も覚えておきましょう！

演習

講義用のフォルダを作ろう

毎回の講義で配布される素材を保存するためのフォルダを、あらかじめ作っておきましょう！

フォルダ名

algorithm2026

作成場所

デスクトップや、自分がわかりやすい場所でOKです。今後はこのフォルダの中に、毎回の配布素材を保存していきます。

配布素材を読み込みしてみよう

毎回の講義前には、以下の準備が発生します！

  • 講師：講義で使用する素材を配布
  • 皆さん：配布された素材をダウンロードし、素材を解凍・展開して VSCode で読み込みする

毎回やる操作になるので、慣れるために今のうちに練習をしましょう！

Windows で配布素材を読み込みしよう


1・ダウンロードした配布の場所を確認


2・ファイルを右クリックし
「すべて展開」を選択。


3・展開を選択。

展開した素材を Visual Studio Code にドラッグアンドドロップすれば読み込み完了です！

Macで配布素材を読み込みしよう


1・ダウンロードした配布フォルダをダブルクリック


2・ 同じ場所に同名のデータ（ .zip がついていない）ができるのを確認。


3・2 で展開されたフォルダを Visual Studio Code にドラッグアンドドロップする。

展開した素材を Visual Studio Code にドラッグアンドドロップすれば読み込み完了です！

課題提出の練習をしよう

課題提出用のフォームをご用意しました！

Zip にしたデータを提出フォームから送付してみましょう！データは重すぎないように注意です！
無事に提出ができると、自動返信メールが届くはずですので、確認しましょう！

提出データのZip化について

課題を提出するときは、フォルダをZip形式に圧縮してから送ります。

Windows

提出したいフォルダを右クリック → 「ZIPファイルに圧縮」 を選択

Mac

提出したいフォルダを右クリック → 「"フォルダ名"を圧縮」 を選択

できあがった .zip ファイルを提出フォームからアップロードしてください！

AIツールの準備

この講義でのAIツールについて

基本方針

  • 大学の授業である以上、課金を強いることはしません
  • 無料で使えるツールを案内しますので、そちらを準備してください
  • すでに自分でAIツールに課金していてお気に入りがある方は、そちらを使ってOKです

今日準備するもの

  1. Google AI Studio（Gemini が使える / Googleアカウントが必要）

任意で準備してもいいもの

  • GitHub Copilot Free（VSCode上でAIが使える / GitHubアカウントが必要）
  • Cursor（AIが組み込まれたエディタ / フリープランあり）

興味がある方は後ほど紹介しますので、ぜひ試してみてください！

Google AI Studio の準備

Googleアカウントの確認

Google AI Studio を使うには Googleアカウント が必要です。

すでに持っている方

そのアカウントでログインできればOKです！

持っていない方

  1. https://accounts.google.com/signup にアクセス
  2. 名前・メールアドレス・パスワードを入力
  3. 電話番号の確認を行い、アカウント作成完了

Google AI Studio にアクセスしよう

Google AI Studio とは

Googleが提供するAI（Gemini）を無料でブラウザから使えるツールです。
（とはいえ、無作為に無料というわけではないので注意）

アクセス方法

  1. https://aistudio.google.com/ にアクセス
  2. Googleアカウントでログイン
  3. チャット画面が表示されればOK！

GitHub Copilot Free の準備

GitHub Copilot Free とは

GitHub Copilot は、VSCode上で動くAIアシスタントです。

できること

  • コードの補完や提案をしてくれる
  • エディタ上でAIとチャットができる
  • コードの意味を質問できる

無料で使えます

GitHub Copilot にはFreeプランがあり、無料でも基本的な機能が使えます。

利用にはGitHubアカウントが必要です。次のスライドで作り方を説明します！

GitHubアカウントを作ろう

  1. https://github.com/signup にアクセス
  2. メールアドレスを入力
  3. パスワード・ユーザー名を設定
  4. メール認証を行い、アカウント作成完了

GitHubはエンジニアが世界中で使っている開発プラットフォームです。アカウントを持っておくと今後も役立つこともあるかも？

GitHub Copilot Free を有効化しよう

  1. GitHubにログインした状態で https://github.com/settings/copilot にアクセス
  2. Copilot Free プランを選択
  3. 利用規約に同意して有効化

これでGitHub側の準備は完了です！次はVSCodeに拡張機能をインストールします。

VSCode に GitHub Copilot をインストール

先ほどプラグインをインストールしたのと同じ手順です！

  1. VSCode の拡張機能（プラグイン）画面を開く
  2. 「GitHub Copilot」と検索
  3. インストールをクリック
  4. 右下に表示される Sign in to GitHub をクリックし、GitHubアカウントでログイン

ログインが完了すると、VSCode上でAIによるコード補完やチャットが使えるようになります！

Cursor について

Cursor という選択肢もあります

Cursor は、AIが最初から組み込まれたエディタです。見た目や使い方はVSCodeとほぼ同じです。

特徴

  • フリープランでもAIチャットやコード補完が使える
  • VSCodeの拡張機能や設定をそのまま引き継げる
  • GitHubアカウントがなくても使える

Cursor の導入方法

  1. https://www.cursor.com/ にアクセス
  2. ダウンロードしてインストール
  3. 起動時にVSCodeの設定をインポートするか聞かれるので、インポートすると楽です

VSCode + GitHub Copilot でも、Cursor でも、どちらを使っても大丈夫です！

エディタに触れてみる

HTML・CSS・JavaScriptの体験をする

以下のコードを指示に従い 1 つずつ貼り付けていきましょう！

HTML

<div id="room" style="width: 100vw; height: 100vh;"></div>
<button id="switch">電気をつける</button>

CSS

.on{
    background-color: #fff;
}
.off{
    background-color: #000;
}

HTML・CSS・JavaScriptの体験をする

JavaScript

let isLightOn = false; // 電気の状態を表す変数
const switchBtn = document.querySelector('#switch')
const room = document.querySelector('#room');

switchBtn.addEventListener('click', function() {
    if (isLightOn) {
      switchBtn.innerHTML = '電気を消す'
      room.classList.remove('on');
      room.classList.add('off');
    } else {
      switchBtn.innerHTML = '電気をつける'
      room.classList.add('on');
      room.classList.remove('off');
    }
    isLightOn = !isLightOn; // 状態を反転させる
});

演習：HTMLとCSSとJavaScriptの違いを言語化する

  • HTML
  • CSS
  • JavaScript
    はそれぞれどんな役割を表していると言えるでしょうか！？

考えて、「日本語で」 言語化をしてみましょう！

1 個 1 個コードを貼り付けをしながら、ブラウザに表示されるものの変化を確認してみよう

プログラミングやAIとは何か？

「人間がやりたいことをコンピューターに伝えるための手段」

  • プログラミングは 「コンピューターが理解できる言葉」
  • AI は「人間の言葉でもコンピューターが内容をより理解できるようになるためのもの」

プログラミングやAIを使いこなすには...？

  • 私たち人間がやりたいことを 「しっかりと言語化できる」 必要がある
  • コンピューターや AI がわかりやすい表現ができるようになると「より伝わる」

講義の中では「言語化トレーニング」もやっていきます！

初回現地講義までにやっておいてほしいこと

初回現地講義までの準備チェックリスト

項目 必須
Google Chrome のインストール ✅
Visual Studio Code のインストール ✅
VSCode の設定（フォーマッター・自動保存など） ✅
Googleアカウントの用意 ✅
Google AI Studio へのアクセス確認 ✅
ポータルページへのアクセス確認 ✅

すべて動画内で手順を説明しています。わからない場合は講師に相談してください！

できればやっておくと安心なこと

項目 推奨
配布素材の読み込み（Zipの展開方法）の確認 🔵
講義用フォルダ（algorithm2026）の作成 🔵

初回の講義でも改めて説明しますので、できなくても大丈夫です！

オリエンテーションおしまい！