ゆめさくコード

教材ライブラリ

授業で使うスライド、触って動かせる図解、レッスンの導入スライドをまとめています。 左のリストで絞り込むか、キーワードで検索してください。

スライド103触れる図解124レッスンの導入6

103 本のスライド集（1 / 9 ページ）

AI・先端技術

AIと呼ばれる由来やその性質

7 枚

AI(人工知能)について

1 - 2

AIと呼ばれる由来やその性質

1
AI(人工知能)について - AIと呼ばれる由来やその性質

AIとロボットの区別

内容
特徴
具体例

ルールベース

人間が事前に定義した明確なルールや条件に基づいてシステムやAIを動作させる

大量にルールを準備する必要があり管理が困難

患者の症状や検査結果に基づいて、可能性のある診断や推奨される検査を提示する医療診断システム等

機械学習

機械が大量のデータからパターンを見出し、予測と分類を行う

大量にルールを準備する必要がなく管理が簡単

小売で過去の販売データや季節性、イベントなどを考慮して商品の需要を予測し、在庫管理を最適化する需要予測システム等

2
AI(人工知能)について - AIと呼ばれる由来やその性質

機械学習の考え方

3
AI(人工知能)について - AIと呼ばれる由来やその性質

機械学習の手法

教師あり学習
  • 正解データで覚えさせる
  • 精度重視・業務向き
教師なし学習
  • 正解を与えない
  • 構造発見・分析向き
半教師あり学習
  • 正解は少量だけ
  • 学習コスト削減
  • 精度は少し落ちる
強化学習
  • 正解ではなく報酬
  • 行動最適化に強い
4
AI(人工知能)について - AIと呼ばれる由来やその性質

教師なし学習の手法

クラスタリング

  • 与えられたデータに似た特徴やパターンを持つグループに分類する

次元削減

  • データの次元(変数)を減らし、データの特徴を抽出する
5
AI(人工知能)について - AIと呼ばれる由来やその性質

人間の脳とニューラルネットワーク

ニューラルネットワーク

人間の脳の神経回路の構造を模倣することで実現される学習手法

・脳の神経細胞の仕組みをプログラミングで再現した人工ニューロンによって情報処理が行われるネットワーク

6
残り 1 枚を読む

コンピュータサイエンス

電気信号とデジタル

14 枚

データの表し方 - 0と1の世界

電気信号とデジタル

〜0と1の正体〜 コンピュータが電気で情報を扱うしくみ

1
データの表し方 - 0と1の世界

今日のゴール

このレッスンを終えると、こう言えるようになります。

  • コンピュータの中身は「電気」で動いている
  • その電気を 0 と 1 だけで表している
  • 文字も画像も、結局すべて 0 と 1 の集まり
2
データの表し方 - 0と1の世界

コンピュータの中身は電気

コンピュータの正体は、無数のスイッチが集まった電気の箱です。

  • 中身は「電気が流れる道」の集まり
  • 頭が良いのではなく、電気を超高速で切り替えているだけ
  • だから情報も「電気の状態」で表すしかない
3
データの表し方 - 0と1の世界

電気の「ある / なし」で表す

コンピュータが扱えるのは、たった2つの状態だけです。

電気が流れていない

  • スイッチ OFF
  • 電圧が低い
  • これを「0」とする

電気が流れている

  • スイッチ ON
  • 電圧が高い
  • これを「1」とする
4
データの表し方 - 0と1の世界

それが 0 と 1（ビット）

情報のいちばん小さい単位に名前がついています。

ビット（bit）

0 か 1 か、どちらか一方を表せる最小の情報のかたまり。

・1ビット = 電球1個の ON / OFF

・コンピュータの全データは、このビットの集まり

・ビットが増えるほど、表せる情報が増える

5
データの表し方 - 0と1の世界

アナログとデジタルの違い

・同じ情報でも「表し方」が根本的に違います。

アナログ（連続）

特徴
例
なめらかに変化
アナログ時計の針
値が無限にある
レコードの音の溝
中間の状態がある
水銀の温度計

デジタル（段階）

特徴
例
カクカク段階的
デジタル時計の数字
0と1で区切る
CD・音楽データ
中間がない
温度を数値で表示
6
残り 8 枚を読む

コンピュータサイエンス

2進数と10進数

14 枚

データの表し方 - 0と1の世界

2進数と10進数

〜コンピュータの数え方〜 0と1だけで数を表すしくみ

1
データの表し方 - 0と1の世界

今日のゴール

このレッスンを終えると、こう言えるようになります。

  • コンピュータは0と1だけで数えている
  • 2進数と10進数を行き来できる
  • 16進数が便利な理由がわかる
2
データの表し方 - 0と1の世界

普段使う10進数のしくみ

私たちは0から9の10個の数字で数を表しています。

  • 9の次は桁が増えて10になる
  • 右から1の位、10の位、100の位
  • 位が左へ進むと10倍になる
3
データの表し方 - 0と1の世界

なぜコンピュータは2進数？

コンピュータの中身は電気のスイッチだからです。

  • 電気はオン(1)とオフ(0)の2状態
  • 2状態なら間違えにくく作りやすい
  • だから数も0と1だけで表す
4
データの表し方 - 0と1の世界

2進数のしくみ（0と1だけ）

使える数字が0と1の2個しかない数え方です。

  • 1の次はもう桁が増えて10になる
  • 10進数の2を「10」と書く
  • 位が左へ進むと2倍になる
5
データの表し方 - 0と1の世界

桁の重み（1, 2, 4, 8 ...）

2進数は左の位へ進むごとに重みが2倍になります。

10進数での重み
計算

1の位

1

1

2の位

2

1×2

3の位

4

2×2

4の位

8

4×2

6
残り 8 枚を読む

コンピュータサイエンス

進数と補数

14 枚

データの表し方 - 0と1の世界

進数と補数

〜負の数の表し方〜 0と1だけでマイナスを表すしくみ

1
データの表し方 - 0と1の世界

今日のゴール

このレッスンを終えると、こう言えるようになります。

  • 0と1だけでマイナスも表せる
  • 「2の補数」という仕組みがある
  • 引き算が足し算に変わる便利さ
2
データの表し方 - 0と1の世界

復習 2進数のおさらい

コンピュータは数を0と1の並びで表していました。

  • 1桁が増えるごとに重みが2倍
  • 右から1・2・4・8と数える
  • 例 1011 は 8+2+1 で 11
3
データの表し方 - 0と1の世界

問題 マイナスはどう表す？

0と1しか使えないのに、マイナスの数はどう書けばいいのでしょう。

  • 紙の上なら「−5」と書ける
  • でも使えるのは0と1だけ
  • マイナス記号も0と1で表すしかない
4
データの表し方 - 0と1の世界

単純な方法とその欠点

・先頭1桁を符号に使う方法は、実はうまくいきません。

先頭で符号を表す案

やり方
結果
先頭が0ならプラス
+5 と表せる
先頭が1ならマイナス
−5 と表せる
でも0が2種類できる
+0 と −0 が別物に

計算でつまずく

やり方
結果
そのまま足し算する
答えがズレる
符号を別に処理
回路が複雑になる
もっと良い方法が必要
そこで補数の登場
5
データの表し方 - 0と1の世界

補数という考え方

時計の針を例に、引くかわりに進める発想を見てみましょう。

補数（ほすう）

ある数を引くかわりに、足して同じ結果にできる相手の数のこと。

・時計で3時間戻す=9時間進めるのと同じ

・「引く」を「足す」に置きかえられる

・この発想でマイナスを表す

6
残り 8 枚を読む

コンピュータサイエンス

誤差と浮動小数点

14 枚

データの表し方 - 0と1の世界

誤差と浮動小数点

〜小数のあつかい〜 コンピュータが小数を表すしくみと、そのクセ

1
データの表し方 - 0と1の世界

今日のゴール

このレッスンを終えると、こう言えるようになります。

  • コンピュータは小数を「近い値」で持っている
  • だから小さな誤差（ズレ）が出ることがある
  • お金の計算では、その誤差に注意が必要
2
データの表し方 - 0と1の世界

整数はできた、では小数は？

前回までで整数は0と1で表せました。問題はここからです。

  • 整数（1, 2, 3…）はぴったり表せる
  • 小数（0.1, 3.14…）は実はやっかい
  • 0と1だけで小数をどう表すかが今日のテーマ
3
データの表し方 - 0と1の世界

2進数での小数表現

10進数の小数点以下が「0.1の位」なら、2進数では「2分の1の位」です。

  • 小数点の右は 1/2, 1/4, 1/8… の位
  • 0.5 は 2進数で 0.1（2分の1）
  • 0.25 は 0.01（4分の1）でぴったり表せる
4
データの表し方 - 0と1の世界

固定小数点とは

まずは素朴な方法から見ていきます。

固定小数点（こていしょうすうてん）

小数点の位置をあらかじめ固定して数を表す方式。

・例えば下2桁は必ず小数と決める

・しくみが単純で分かりやすい

・大きい数と小さい数を同時に扱いにくい

5
データの表し方 - 0と1の世界

固定小数点と浮動小数点

・小数点を「固定」するか「動かす」かで、扱える範囲が変わります。

固定小数点（位置を固定）

特徴
イメージ
小数点の位置が決め打ち
いつも下2桁が小数
しくみが単純
計算が速い
扱える幅がせまい
桁が足りなくなりがち

浮動小数点（位置が動く）

特徴
イメージ
小数点を移動できる
桁を自由に合わせる
広い範囲を表せる
極小〜極大までOK
小さな誤差が出やすい
近い値で記録
6
残り 8 枚を読む

コンピュータサイエンス

文字コード

14 枚

データの表し方 - 0と1の世界

文字コード

〜文字を数字で表す〜 「あ」や「A」を数字に置きかえるしくみ

1
データの表し方 - 0と1の世界

今日のゴール

このレッスンを終えると、こう言えるようになります。

  • 文字も中身は番号（数字）でできている
  • なぜ文字化けが起きるのかわかる
  • Unicode や UTF-8 という言葉がわかる
2
データの表し方 - 0と1の世界

コンピュータは数字しか分からない

前回までで学んだとおり、中身は0と1の数字の集まりです。

  • 文字をそのまま覚えることはできない
  • 扱えるのは数字（0と1）だけ
  • だから文字も数字に置きかえる必要がある
3
データの表し方 - 0と1の世界

文字に番号を割り当てる

文字を数字で表すための「対応表」が文字コードです。

文字コード

どの文字をどの番号で表すかを決めた、約束ごとの対応表。

・1文字ごとに番号を割り当てる

・「A」は65、「a」は97 と決まっている

・表が同じなら誰でも同じ文字を読める

4
データの表し方 - 0と1の世界

ASCII（英数字の基本）

英数字と記号を番号で表す、いちばん基本の対応表です。

文字
番号（10進数）

スペース

（空白）

32

数字のゼロ

0

48

大文字

A

65

小文字

a

97

5
データの表し方 - 0と1の世界

日本語の難しさ（文字が多い）

日本語は文字の種類がとても多く、番号が足りません。

  • 英数字と記号は100個ほどで足りる
  • 日本語は漢字だけで数千〜数万種類
  • もっと大きな対応表が必要になる
6
残り 8 枚を読む

コンピュータサイエンス

論理回路

15 枚

データの表し方 - 0と1の世界

論理回路

〜0と1で計算する土台〜 コンピュータが考えるしくみの正体

1
データの表し方 - 0と1の世界

今日のゴール

このレッスンを終えると、こう言えるようになります。

  • 0と1を組み合わせて「判断」ができる
  • AND・OR・NOT の3つの基本がわかる
  • その積み重ねで足し算までできる
2
データの表し方 - 0と1の世界

0と1で何ができる？

0と1はただ記録するだけでなく、組み合わせて答えを出せます。

  • 0と1を入れると、別の0か1が出てくる
  • この「入力→出力」が判断のもと
  • 判断を重ねると計算になる
3
データの表し方 - 0と1の世界

論理とは（真・偽）

コンピュータの「正しい・正しくない」は、たった2つで表します。

論理（真・偽）

ものごとを「正しい（真）」か「正しくない（偽）」の2つだけで判断する考え方。

・真（正しい）= 1 とする

・偽（正しくない）= 0 とする

・曖昧なし、必ずどちらか一方

4
データの表し方 - 0と1の世界

AND（両方そろえば1）

AND は「両方そろって初めてOK（2つの鍵が必要な金庫）」です。

入力A
入力B
出力

1

0

0

0

2

0

1

0

3

1

0

0

4

1

1

1

5
データの表し方 - 0と1の世界

OR（どちらか1つで1）

OR は「どちらか1つでOK（2つある入口）」です。

入力A
入力B
出力

1

0

0

0

2

0

1

1

3

1

0

1

4

1

1

1

6
残り 9 枚を読む

コンピュータサイエンス

OS × アーキテクチャ入門

5 枚

CS理論 - アーキテクチャ & OS

OS × アーキテクチャ入門

コンピュータの「中身」がわかると、コードの見え方が変わる

1
CS理論 - アーキテクチャ & OS

コンピュータは「厨房」と同じ

コンピュータの部品構成をレストランの厨房に例えてみましょう。役割がハッキリ見えてきます。

CPU = コンロ
  • 計算（調理）を実行する心臓部
  • 毎秒数十億回の演算をこなす
メモリ = 調理台
  • 今使うデータを広げる作業スペース
  • 大きいほどマルチタスクに強い
ストレージ = 冷蔵庫
  • 電源を切っても消えない保管庫
  • HDD → SSD → クラウドと進化中
バス = 注文伝票
  • 部品同士をつなぐデータの通り道
  • ここが遅いと全体が詰まる
2
CS理論 - アーキテクチャ & OS

OSがない世界 vs ある世界

OSはハードウェアとアプリの間に立つ「通訳」。OSの有無でプログラミング体験がまるで違います。

OSがない世界

  • 画面に1文字出すにもハード命令が必要
  • 音楽再生中は他の操作ができない
  • メモリ番地0x7FFF…を自分で計算

OSがある世界

  • print('Hello') で画面に表示
  • Spotify聴きながらコードを書ける
  • ファイル名で保存、あとはOSにおまかせ
3
CS理論 - アーキテクチャ & OS

Webアプリのリクエストフロー

ブラウザからデータベースまで、データがどう流れるかを見てみましょう。

フロントエンド
サーバーサイド
データベース
リクエスト実行
取得結果を表示
一覧画面のURLにアクセス
取得結果
1じゃがいも
2にんじん
3たまねぎ
APIサーバーデータベースから メモを取得して 一覧画面に必要な 情報を返す
PostgreSQL
4
"

アーキテクチャ＝部品の設計図、OS＝それを動かす司令塔。 この2つがわかると「なぜ遅い？」「なぜ落ちた？」に自分で答えられるようになります。

— CS理論 — OS & アーキテクチャ編

5

Web 開発

HTMLとCSSって何が違うの？

10 枚

Web制作の基本

図解5分でわかる

HTMLとCSSって何が違うの？

1
Web制作の基本

Webページの仕組み

  • HTML — ページの「構造」を作る
  • CSS — ページの「見た目」を整える
  • JavaScript — ページに「動き」をつける
2
Web制作の基本

HTMLとは

  • HyperText Markup Languageの略
  • Webページの「骨組み」を作る言語
  • タグ（<h1>, <p>, <img>）で構造を記述
  • ブラウザがHTMLを読み取って画面に表示
  • HTMLだけだと白黒で味気ない見た目
3
Web制作の基本

HTMLのコード例

HTML
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>はじめてのWebページ</p>
    <img src="photo.jpg" />
  </body>
</html>
4
Web制作の基本

CSSとは

  • Cascading Style Sheetsの略
  • Webページの「デザイン」を担当する言語
  • 色・大きさ・配置・アニメーションを制御
  • HTMLの要素に「どう見せるか」を指定
  • レスポンシブ対応も可能
5
Web制作の基本

CSSのコード例

CSS
h1 {
  color: #05B45B;
  font-size: 32px;
}

p {
  line-height: 1.8;
  margin-bottom: 16px;
}

body {
  background: #F5F4ED;
}
6
残り 4 枚を読む

体験・イベント

Day1 「ググる」って裏で何が起きてる？

20 枚

Day1 「ググる」って裏で何が起きてる？

5日チャレンジ - 発見

1

目次

Day1 の流れ

今日の内容

１　検索ボタンの裏側

２　URL・ドメイン・DNS

３　クライアントとサーバー

４　体験コードとクイズ

2

Day1 - ググるの裏側

1

検索ボタンの裏側

3
Day1 - ググるの裏側

毎日やってるけど、知ってる？

検索ボタンを押した瞬間、何が起きているのでしょうか？

  • ブラウザがGoogleのサーバーに「検索したい」とお願いする
  • サーバーが検索結果を探して返してくる
  • ブラウザが結果を画面に表示する
  • これがわずか0.数秒で起きている
4
Day1 - ググるの裏側

検索の4ステップ

検索ボタンを押してから画面表示までの流れを分解します。

ブラウザが依頼
サーバー処理
結果を返す
画面に表示
5

Day1 - URLの仕組み

2

URL・ドメイン・DNS

6
残り 14 枚を読む

体験・イベント

Day2 LINEの「既読」ってどう動いてる？

17 枚

Day2 LINEの「既読」ってどう動いてる？

5日チャレンジ - 発見

1

目次

Day2 の流れ

今日の内容

１　既読がつく瞬間に何が起きるか

２　サーバーとリアルタイム通信

３　プッシュ通知の仕組み

４　体験コードとクイズ

2

Day2 - LINEの既読

1

既読がつく瞬間

3
Day2 - LINEの既読

メッセージを開いた瞬間

既読がつくまでに何が起きているのでしょうか。

  • あなたがメッセージを開く
  • アプリが「読んだ」とサーバーに送信
  • サーバーが送信者に「読まれた」と通知
  • 送信者の画面に「既読」が表示される
4
Day2 - LINEの既読

既読の4ステップ

メッセージを開いてから既読が相手に届くまでの流れです。

メッセージを開く
サーバーに通知
相手へプッシュ
既読を表示
5

Day2 - 通信の仕組み

2

リアルタイム通信

6
残り 11 枚を読む

体験・イベント

Day3 Amazonの「ログイン状態」はなぜ続く？

18 枚

Day3 Amazonの「ログイン状態」はなぜ続く？

5日チャレンジ - 理解

1

目次

Day3 の流れ

今日の内容

１　ログイン状態のふしぎ

２　Cookieとセッション

３　トークンによる認証

４　体験コードとクイズ

2

Day3 - ログインの裏側

1

ログイン状態のふしぎ

3
Day3 - ログインの裏側

なぜログインが続くのか

ブラウザを閉じてもログイン状態が残る理由を探ります。

  • HTTP通信は本来「毎回はじめまして」
  • でもAmazonは次回も自分を覚えている
  • これを実現する仕組みが「セッション」
  • 合言葉を交換することで成立している
4
Day3 - ログインの裏側

ログインの4ステップ

メール・パスワードを送ってから状態が維持されるまで。

ログイン情報送信
サーバーが照合
合言葉を発行
次回から自動認識
5

Day3 - 仕組み

2

Cookieとセッション

6
残り 12 枚を読む