ゆめさくコード

教材ライブラリ

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

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

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

OS・Linux

ファイルシステム

23 枚

ファイルシステム入門

ファイルシステム

データの整理の仕組み 〜棚と目録〜

1

目次

今日の流れ

1. ファイルシステムとは

2. ディレクトリとパス

3. 実体と管理情報

4. 形式とアクセス権・バックアップ

5. まとめと振り返り

2
ファイルシステム入門 - イントロ

今日のゴール

この時間で身につけてほしいことです。

  • ファイルシステムの役割が分かる
  • ディレクトリ構造とパスを理解できる
  • ファイルの実体と管理情報の違いが分かる
  • 代表的な形式の違いをイメージできる
  • バックアップと完全削除の意味が分かる
10
ファイルシステム入門 - イントロ

ファイルシステム とは

ディスクの中のデータを、探しやすく整理して管理する仕組みです。

ファイルシステム（File System）

ストレージに保存したデータを、名前のついたファイルとフォルダで整理し、どこに何があるかを管理する仕組み。図書館の棚と目録のように、どこに何を置いたかを記録する。

・データをファイル単位で扱う

・名前をつけて探しやすくする

・どこに保存したかを記録する

・読み書きの順番を管理する

11
ファイルシステム入門 - イントロ

ファイルシステムの役割

整理・記録・保護という3つの大切な役割があります。

整理する
  • フォルダで分類する
  • 探しやすく並べる
記録する
  • 保存場所を覚えておく
  • 目録で位置を管理
守る
  • 権限で守る
  • 壊れにくく管理
12
ファイルシステム入門 - イントロ

棚と目録のたとえ

本そのものが実体、どの棚にあるかを書いた目録が管理情報にあたります。

  • 本そのものがファイルの中身
  • 棚の場所を記した目録が管理情報
  • 目録を見れば本の場所が分かる
  • 目録が壊れると本を探せなくなる
  • 以前学んだブロックストレージの上で動く
13
残り 17 枚を読む

セキュリティ

ファイアウォール

22 枚

ファイアウォール入門

ファイアウォール

通信を許可・遮断するしくみ 〜通信の関所〜

1

目次

今日の流れ

1. ファイアウォールとは何か

2. パケットフィルタリングの考え方

3. 許可と拒否のルール

4. ステートフルとポート制御

5. まとめと振り返り

2
ファイアウォール入門 - イントロ

今日のゴール

この時間で身につけてほしいことです。

  • ファイアウォールが「通信の関所」だと分かる
  • パケットを条件で許可・遮断するしくみが分かる
  • ホワイトリストとブラックリストの違いが分かる
  • インバウンドとアウトバウンドを区別できる
  • 設定ミスのこわさをイメージできる
10
ファイアウォール入門 - イントロ

なぜファイアウォールが必要か

インターネットにつながると、外から望まない通信も届きます。その仕分けが要ります。

  • ネットには善意でない通信もまぎれ込む
  • 必要な通信だけ通し、それ以外は止めたい
  • 出入口で一括して見張るのが効率的
  • この見張り役がファイアウォール
  • 家庭用ルーターにも標準で入っている
11
ファイアウォール入門 - イントロ

ファイアウォール とは

あらかじめ決めたルールに従って、通信を通すか止めるかを判断するしくみです。

ファイアウォール（Firewall）

ネットワークの出入口に置き、通信内容を事前のルールと照らして許可または遮断する仕組み。建物の関所のように、通る相手を仕分けする。

・通信の出入口に立つ関所

・ルールに合う通信だけを通す

・合わない通信はその場で遮断

・内側のネットワークを守る役割

12
ファイアウォール入門 - イントロ

ファイアウォール ＝ 通信の関所

関所で通行手形を確かめるように、条件を満たす通信だけを通します。

出入りを見張る
  • 全ての通信を確認
  • 怪しいものを止める
手形を確かめる
  • ルールに合うか照合
  • 合えば通す
門を閉ざす
  • 合わなければ遮断
  • 内側を守る
13
残り 16 枚を読む

Web 開発

Gitとバージョン管理

25 枚

Git入門

Gitとバージョン管理

変更を記録する 〜歴史をたどれる〜

1

目次

今日の流れ

1. バージョン地獄とその解決

2. Gitとリポジトリ・コミット

3. ブランチとマージ

4. リモートとチーム開発

5. まとめと振り返り

2
Git入門 - イントロ

今日のゴール

この時間で身につけてほしいことです。

  • バージョン管理が必要な理由が分かる
  • Gitとリポジトリの役割が分かる
  • コミットで履歴を残す価値が分かる
  • ブランチとマージをイメージできる
  • リモートとチーム開発の流れが分かる
10
Git入門 - イントロ

バージョン地獄

ファイル名に版数を足し続ける管理は、すぐに収拾がつかなくなります。

  • 最終版というファイルがいくつもできる
  • 最終版の本当の最終という名前が生まれる
  • どれが最新か誰も分からなくなる
  • 誰がどこを直したかも追えない
  • 古い状態に戻すのも難しい
11
Git入門 - イントロ

バージョン管理 とは

ファイルの変更の歴史を記録し、いつでも過去にさかのぼれるようにする仕組みです。

バージョン管理（Version Control）

ファイルをいつ・誰が・どう変えたかを記録し、過去の状態に戻したり違いを比べたりできる仕組み。ゲームのセーブデータのように、好きな時点に戻れる。

・変更の歴史を記録する

・いつ誰が直したか分かる

・過去の状態に戻せる

・版が1本にまとまり混乱しない

12
Git入門 - イントロ

Git とは

いま最も広く使われている、バージョン管理のための代表的なツールです。

Git

ファイルの変更履歴を記録・管理するためのツール。手元で素早く動き、過去への巻き戻しや、複数人での同時作業を安全に進められる。

・変更を細かく記録できる

・手元で素早く動く

・過去のどの時点にも戻せる

・大勢での共同作業に強い

・以前学んだCI/CDの起点にもなる

13
残り 19 枚を読む

Web 開発

GraphQL

20 枚

GraphQL入門

GraphQL

欲しいデータだけを取りに行くAPIの形

1

目次

今日の流れ

1. GraphQLって何のためにあるの？

2. RESTで困ること

3. クエリ — 欲しい形で取得する

4. ミューテーション と スキーマ

5. まとめと振り返り

2
GraphQL入門 - イントロ

今日のゴール

この時間で身につけてほしいことです。

  • GraphQLが「必要なデータだけ取る仕組み」だと分かる
  • RESTで起きがちな困りごとを説明できる
  • クエリで欲しい項目を指定する感覚をつかむ
  • ミューテーションが書き込み用だと分かる
  • RESTとの使い分けをイメージできる
10
GraphQL入門 - イントロ

GraphQL とは

クライアントが「欲しいデータの形」を指定して取りに行くAPIの仕組みです。

GraphQL（グラフキューエル）

1つの窓口に対して「どの項目が欲しいか」を問い合わせ文（クエリ）で指定し、必要なデータだけを受け取れるAPIの仕組みやクエリ言語。

・欲しい項目を自分で指定できる

・エンドポイントは基本1つだけ

・必要なデータをまとめて1回で取れる

・RESTとは別の設計思想のAPI

11
GraphQL入門 - イントロ

GraphQL ＝ 必要な料理だけ頼める注文

決まったセットではなく、欲しいものだけを指定して頼むイメージです。

あなた（クライアント）
  • 「名前とメールだけ欲しい」
  • 欲しい項目を自分で選ぶ
クエリ（注文票）
  • 欲しい形をそのまま書く
  • 余計なものは頼まない
サーバー
  • 頼まれた項目だけ返す
  • ぴったりの形で応える
12

GraphQL入門 - RESTの課題

2

第2部 RESTで困ること

なぜGraphQLが生まれたか

20
残り 14 枚を読む

Web 開発

gRPC

20 枚

gRPC入門

gRPC

サービス同士を高速につなぐ通信のしくみ

1

目次

今日の流れ

1. gRPCって何のためにあるの？

2. RPCという考え方

3. Protocol Buffers — 約束ごとの設計図

4. RESTとの違いと使いどころ

5. まとめと振り返り

2
gRPC入門 - イントロ

今日のゴール

この時間で身につけてほしいことです。

  • gRPCが「サービス間を高速につなぐ仕組み」だと分かる
  • RPC（遠隔の関数呼び出し）の発想をつかむ
  • Protocol Buffersの役割を説明できる
  • RESTとの違いをイメージできる
  • どんな場面で使われるか思い浮かべられる
10
gRPC入門 - イントロ

gRPC とは

離れたサーバーの機能を、まるで手元の関数のように呼び出せる通信の仕組みです。

gRPC（ジーアールピーシー）

Googleが作ったRPCの仕組み。離れたサービスの関数を呼び出す形で通信し、Protocol Buffersという効率的な形式でデータを高速にやり取りする。

・関数を呼ぶ感覚でサーバーの処理を実行できる

・データを小さく速く送れる（バイナリ形式）

・HTTP/2を土台にしている

・マイクロサービス間の通信でよく使われる

11
gRPC入門 - イントロ

gRPC ＝ 内線で直接お願いするイメージ

離れた担当者に内線で「これお願い」と直接頼む感覚に似ています。

呼ぶ側（クライアント）
  • 手元の関数を呼ぶように頼む
  • 裏で通信しているのを意識しない
約束ごと(.proto)
  • 関数名と引数を事前に定義
  • 両者が同じ設計図を共有
応える側(サーバー)
  • 頼まれた処理を実行
  • 結果を効率よく返す
12

gRPC入門 - RPC

2

第2部 RPCという考え方

遠くの処理を関数のように呼ぶ

20
残り 14 枚を読む

セキュリティ

ハッシュ関数

20 枚

ハッシュ関数

ハッシュ関数

変換して指紋を作るしくみ

1

目次

今日の流れ

1. ハッシュ関数って何のためにあるの？

2. 性質 — 一方向で、同じ入力は同じ出力

3. 暗号化との違い

4. 使いどころ — パスワード保存・改ざん検知

5. まとめと振り返り

2
ハッシュ関数 - イントロ

今日のゴール

この時間で身につけてほしいことです。

  • ハッシュ関数が「データの指紋を作る仕組み」だと分かる
  • 一方向（元に戻せない）という性質をつかむ
  • 暗号化との違いを説明できる
  • パスワード保存や改ざん検知での使い方が分かる
  • 身近にどう使われているかイメージできる
10
ハッシュ関数 - イントロ

ハッシュ関数とは

どんなデータも、決まった長さの短い値（指紋）に変換する関数です。

ハッシュ関数（Hash Function）

任意の長さのデータを、決まった長さの短い値（ハッシュ値）に変換する仕組み。同じ入力からは必ず同じ出力が出るが、出力から入力には戻せない。

・入力の大きさに関わらず出力は固定長

・同じ入力 → 必ず同じハッシュ値

・出力からは元データを復元できない

・データの「指紋」のようなもの

11
ハッシュ関数 - イントロ

同じ入力は同じ指紋、少し違えば全く別物

・1文字変わっただけで、ハッシュ値はまったく違うものになります（雪崩効果）。

text
hash("hello")  -> 2cf24dba5fb0a30e...
hash("hello")  -> 2cf24dba5fb0a30e...   同じ入力なら同じ

hash("hellp")  -> 9c1185a5c5e9fc54...   1文字違うだけで激変
hash("Hello")  -> 185f8db32271fe25...   大文字でも全く別物
12
ハッシュ関数 - イントロ

ハッシュ ＝ 指紋やシュレッダーに似ている

人ごとに違う指紋のように一意で、シュレッダーのように元へは戻せません。

短くまとまる
  • どんなデータも固定長に
  • 長い文章も画像も同じ長さ
一意の指紋
  • 内容が違えば値も違う
  • 同じ内容なら必ず同じ値
戻せない
  • 出力から入力は復元不可
  • シュレッダーのように一方向
13
残り 14 枚を読む

体験・イベント

AI時代に学ぶべき プログラミング言語

15 枚

AI時代に学ぶべき プログラミング言語

2026年版・初心者のための言語選びガイド

1

目次

AI時代に学ぶべきプログラミング言語

学習内容

１　なぜ今プログラミングなのか

２　おすすめ言語TOP5

３　AI時代の新常識

４　まとめとネクストステップ

2

プログラミング言語

1

なぜ今プログラミングなのか

3
プログラミング言語

IT人材の需要予測（2024〜2030年）

DX推進とAI活用の加速により、IT人材不足はさらに深刻になると予測されています。

110 万人不足886644220
43万人不足
55万人不足
68万人不足
79万人不足
88万人不足
110万人不足
2024年
2025年
2026年
2027年
2028年
2030年

出典: 経済産業省「IT人材需給に関する調査」をもとに推計

4
プログラミング言語

Webアプリの仕組み

あなたが作るWebアプリは、こんな仕組みで動いています。

フロントエンド
バックエンド
データベース
POST /login
認証確認
トークン発行
GET /data
SQL
ログイン画面
ダッシュボード
認証APIログイン処理
データAPIデータ取得・更新
ユーザーDB
データDB
5

プログラミング言語

2

おすすめ言語TOP5

6
残り 9 枚を読む

体験・イベント

エンジニアの年収リアル

15 枚

エンジニアの年収リアル

データで見る、エンジニアという選択肢

1

目次

エンジニアの年収リアル

今日わかること

１　IT業界の年収事情

２　未経験からのリアル

３　女性エンジニアの年収

４　理解度チェック＆まとめ

2

エンジニア年収

1

IT業界の年収事情

3
エンジニア年収

年代別エンジニア平均年収

経験を積むほど年収は上がりやすく、30代で500万円台に乗るケースも多く見られます。

平均年収
レンジ目安

20代

約370万円

280〜480万円

30代

約530万円

400〜700万円

40代

約640万円

500〜900万円

50代

約680万円

550万〜1,000万円超

5
エンジニア年収

職種別の平均年収比較

エンジニアは他の職種と比べて年収水準が高い傾向にあります。転職先として注目される理由がここにあります。

520 万円4163122081040
520万円
420万円
350万円
310万円
ITエンジニア
営業職
事務職
販売・サービス

出典: 各種求人データ・厚生労働省資料をもとにした概算値

4
エンジニア年収

年収が高いエンジニア職種 TOP4

スキルの希少性が高い職種ほど市場価値も高まります。需要の伸びも見込める分野ばかりです。

フルスタックエンジニア
  • フロント〜バックを横断
  • 平均年収 約650万円
  • スタートアップで特に需要大
データエンジニア
  • データ基盤の設計・構築
  • 平均年収 約700万円
  • AI活用の波で急成長中
クラウドエンジニア
  • AWS / GCP / Azureが主戦場
  • 平均年収 約680万円
  • 資格で年収UP狙いやすい
セキュリティエンジニア
  • サイバー攻撃対策の専門家
  • 平均年収 約720万円
  • 人材不足で高待遇が続く
6
残り 9 枚を読む

体験・イベント

プログラミングスクール選びで失敗しない5つのポイント

15 枚

スクール選び

プログラミングスクール選びで失敗しない5つのポイント

後悔しないための選び方ガイド

1

このスライドの内容

ポイント1 — カリキュラムの実践度

ポイント2 — サポート体制

ポイント3 — 受講生の口コミの読み方

ポイント4 — 料金と給付金

ポイント5 — 無料体験で確認すること

まとめ・無料カウンセリングのご案内

2
スクール選び

スクール受講者の満足度調査

受講経験者500名に聞いた「入学前に重視すればよかった」ポイントの調査結果です。

10 点（10点満点）86420
8.7点（10点満点）
8.4点（10点満点）
7.9点（10点満点）
7.5点（10点満点）
7.1点（10点満点）
カリキュラムの実践度
サポート体制
就職支援の質
コストパフォーマンス
受講生コミュニティ

出典: LuaGate 受講生アンケート 2025年

3

スクール選び

1

ポイント1 — カリキュラムの実践度

座学だけでは現場で通用しない

4
スクール選び

座学中心 vs 実践中心

カリキュラムの中身を見れば、そのスクールの本気度がわかります。

座学中心のスクール

  • 動画視聴・テキスト読み込みが中心
  • 手を動かす課題が少ない
  • 現場で使えるスキルが身につきにくい
  • 修了後に実務イメージが湧かない
  • ポートフォリオが作りにくい

実践中心のスクール

  • 毎回コードを書いて課題を提出
  • チーム開発・成果物制作あり
  • 現場で使うツール（Git等）を習得
  • 修了時にポートフォリオが完成
  • 即戦力として評価されやすい
5
スクール選び

実践度を確認する3つの質問

無料説明会や体験授業でこの3点を必ず聞いてみましょう。

  • 「卒業制作はありますか？どんな成果物が作れますか？」
  • 「チーム開発やペアプロの機会はありますか？」
  • 「Gitやデプロイなど現場ツールは使いますか？」
6
残り 9 枚を読む

体験・イベント

女性エンジニアのリアルな1日

15 枚

女性エンジニア

女性エンジニアのリアルな1日

「エンジニアってどんな生活？」のギモンに答えます

1

目次

朝〜出社：1日のはじまりはどんな感じ？

仕事の中身：実際に何をしているの？

ワークライフバランス：プライベートとの両立

未経験からエンジニアへ：キャリアパスと第一歩

2

女性エンジニア

1

朝〜出社

1日のはじまりはどんな感じ？

3
女性エンジニア

女性エンジニアの1日タイムスケジュール

リモートワーク中心の女性エンジニアのある1日。フレックスタイムを活かした柔軟な働き方です。

No.単元内容形式時間
108:00起床・朝食・身支度準備60分
209:00業務開始（Slack確認・タスク整理）朝のルーティン30分
309:30コーディング・実装作業集中作業120分
411:30チームとの朝会・進捗共有ミーティング30分
512:00昼食・休憩ランチ60分
No.単元内容形式時間
613:00コードレビュー・フィードバック対応レビュー90分
714:30機能追加・バグ修正実装90分
816:001on1ミーティング・相談コミュニケーション30分
916:30翌日のタスク整理・ドキュメント作成クローズ作業60分
1017:30業務終了・プライベートタイム退勤―
4

女性エンジニア

2

仕事の中身

実際に何をしているの？

5
女性エンジニア

エンジニアの仕事内訳

「ずっとコードを書いているのでは？」と思われがちですが、実際の仕事はとても多彩です。

コーディング・実装
  • 新機能の開発
  • バグの調査と修正
  • テストコードの作成
ミーティング・相談
  • チームの朝会・進捗共有
  • デザイナーや企画との連携
  • 1on1・メンタリング
コードレビュー
  • 他メンバーのコードを確認
  • 改善点のフィードバック
  • 品質を守るための協力作業
学習・情報収集
  • 新しい技術のキャッチアップ
  • ドキュメント・仕様書の読み込み
  • 社内勉強会への参加
6
残り 9 枚を読む

Web 開発

HTMLとCSSって何が違うの？

10 枚

Web制作の基本

図解5分でわかる

HTMLとCSSって何が違うの？

1
Web制作の基本

Webページの仕組み

あなたが見ているWebページは、3つの技術でできています。

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

HTMLとは

HTMLはWebページの骨組みを作る言語です。

  • 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とは

CSSはWebページの見た目を整える言語です。

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

CSSのコード例

・セレクタでHTML要素を指定し、プロパティで見た目を変えます。

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

p {
  line-height: 1.8;
}

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

ネットワーク

HTTP と HTTPS

26 枚

HTTPとHTTPS入門

HTTP と HTTPS

Webの会話ルールを2時間で理解する

1

目次

今日の流れ

1. Webページが表示されるまで（全体像）

2. HTTP — ブラウザとサーバーの会話

3. メソッドとステータスコード

4. HTTPの弱点と HTTPS のしくみ

5. 証明書とデモ・まとめ

2
HTTPとHTTPS入門 - イントロ

今日のゴール

この2時間で身につけてほしいことです。

  • ブラウザとサーバーがどう会話しているかをイメージできる
  • HTTPのリクエストとレスポンスの中身が読める
  • 主なメソッドとステータスコードの意味が分かる
  • HTTPSがなぜ安全なのか、人に説明できる
  • 開発者ツールで実際の通信をのぞける
10
HTTPとHTTPS入門 - イントロ

Webページが表示されるまで（全体像）

URLを入力してから画面が出るまで、裏ではこんな流れが起きています。

1. 名前を住所に変換

DNSがドメイン名をサーバーのIPアドレスに翻訳する

2. リクエスト送信

ブラウザがサーバーへ「このページをください」と頼む

3. サーバーが応答

HTMLやCSS・画像などのデータを返す

4. 画面に描画

ブラウザが受け取ったデータを組み立てて表示する

11
HTTPとHTTPS入門 - HTTP

HTTP とは

ブラウザとサーバーが会話するための「共通の言葉」です。

HTTP（エイチティーティーピー / HyperText Transfer Protocol）

ブラウザ（クライアント）とサーバーがWebページやデータをやりとりするときのルールやWebの土台となる通信の約束ごと。

・クライアントが頼み、サーバーが応える形

・やりとりはテキストで書かれていて人も読める

・1回のやりとりごとに完結する（後で詳しく）

・HTTPSはこのHTTPを暗号化で守ったもの

12
HTTPとHTTPS入門 - HTTP

HTTP ＝ 手紙のやり取りに似ている

ブラウザとサーバーの会話は、手紙の往復にたとえると分かりやすいです。

あなた（ブラウザ）
  • 「このページください」と手紙を書く
  • これがリクエスト
郵便（HTTP）
  • 決まった書式で手紙を運ぶ
  • 行きと帰りの約束ごと
相手（サーバー）
  • 手紙を読んで返事を書く
  • これがレスポンス
13
残り 20 枚を読む