ゆめさくコード

教材ライブラリ

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

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

12 本のスライド集 / 全 103 件

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 枚を読む

Web 開発

API設計の原則

26 枚

API設計入門

API設計の原則

使いやすいAPIとは 〜RESTfulな設計〜

1

目次

今日の流れ

1. 良いAPIの条件とリソース指向

2. メソッドとステータスコードの使い分け

3. 命名・バージョン管理・認証

4. エラー設計とドキュメント・良し悪し

5. まとめと振り返り

2
API設計入門 - イントロ

今日のゴール

この時間で身につけてほしいことです。RESTfulなAPI設計の基本を理解しましょう。

  • 良いAPIに共通する条件が分かる
  • リソース指向のURL設計が分かる
  • メソッドとステータスコードの使い分けが分かる
  • 命名・バージョン管理の考え方が分かる
  • 良い例と悪い例を見分けられる
10
API設計入門 - イントロ

復習 REST API

以前学んだREST APIを思い出しましょう。今日はその「設計の質」を高める話です。

REST API（おさらい）

データを「リソース（資源）」として捉え、URLで名前をつけ、HTTPメソッドで操作するAPI。今日は、このRESTを使いやすく設計するためのコツを学ぶ。

・リソースは扱いたいデータのまとまり

・URLはリソースの住所

・操作はメソッドで表す

・この基本の上に良い設計を積む

11
API設計入門 - イントロ

良いAPIの3つの条件

使いやすいAPIには共通点があります。大きく3つの観点で押さえましょう。

分かりやすい
  • URLを見れば用途が分かる
  • ドキュメント無しでも推測できる
  • 一貫した名づけ
予測できる
  • 似た操作は似た形
  • ルールが統一されている
  • 驚きが少ない
変えやすい
  • バージョンで安全に進化
  • 既存利用者を壊さない
  • 拡張しやすい
12
API設計入門 - イントロ

リソース指向の設計

RESTの土台は「データを名詞でとらえる」考え方です。URLは住所、操作はメソッドで表します。

リソース指向（Resource Oriented）

扱いたいデータを「リソース」という名詞で表し、URLでその住所を示す設計。何をするかはURLではなくメソッドで表すのが基本。

・URLは名詞だけにする（動詞を入れない）

・一覧はusers、個別はusers/1のように表す

・操作の種類はメソッドが担う

・住所と動作を分けて考える

13
残り 20 枚を読む

Web 開発

データ形式 JSON・XML・YAML

27 枚

データ形式入門

データ形式 JSON・XML・YAML

データをやり取りする形 〜共通の書き方〜

1

目次

今日の流れ

1. データをやり取りする形式とは

2. CSV と XML — 昔からある書き方

3. JSON — APIの定番フォーマット

4. YAML と3形式の比較・使いどころ

5. まとめと振り返り

2
データ形式入門 - イントロ

今日のゴール

この時間で身につけてほしいことです。代表的なデータ交換フォーマットを理解しましょう。

  • データを「共通の書き方」で渡す意味が分かる
  • CSV・XML・JSON・YAMLの特徴が分かる
  • JSONの基本的な書き方が読める
  • それぞれの使いどころをイメージできる
  • 同じデータが形を変えて表せると分かる
10
データ形式入門 - イントロ

データ形式 とは

プログラム同士がデータを受け渡すときの「共通の書き方」のことです。

データ交換フォーマット

異なるプログラムやシステムの間でデータを渡すための、決められた書き方のこと。送る側と受け取る側が同じルールで読み書きするから、内容が正しく伝わる。

・人もプログラムも読める文字の並び

・送る側と受け取る側で書き方を統一する

・以前学んだAPIは、この形式でデータを返す

・言語やOSが違ってもやり取りできる

11
データ形式入門 - イントロ

宅配便の伝票にたとえると

データ形式は、宅配便の伝票のように「決まった欄に決まった情報を書く」しくみに似ています。

伝票の様式
  • 名前・住所・品名の欄
  • 誰が見ても読める書き方
  • これがデータ形式
送る人
  • 欄を埋めて荷物を出す
  • これがデータを作る側
受け取る人
  • 同じ欄を読んで処理
  • これがデータを使う側
12
データ形式入門 - イントロ

代表的な4つの形式

今日学ぶ4つの形式を、ざっくり一言で押さえておきましょう。

CSV
  • カンマ区切りの表
  • 表計算と相性が良い
  • シンプルで軽い
XML / JSON
  • 入れ子の構造を表せる
  • JSONはAPIの定番
  • Webで広く使われる
YAML
  • 設定ファイル向き
  • 人が書きやすい
  • インデントで構造を表す
13
残り 21 枚を読む

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 枚を読む

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 枚を読む

Web 開発

5分でわかる Markdownの基本

24 枚

5分でわかる Markdownの基本

エンジニアの「書く」を変える軽量マークアップ言語

1

目次

Markdownの基本

学習内容

１　Markdownとは？

２　基本の記法を覚える

３　実際に使われる場面

４　理解度チェック

2

Markdownについて

1

Markdownとは？

3
Markdownについて

Markdownとは_e2e_e2e_e2e

テキストベースの軽量マークアップ言語です。

Markdownaaa

プレーンテキストに # や ** などの記号を使って書式を指定し、HTMLなどに変換できる記法。2004年にJohn Gruberが考案。GitHubやNotion、Slack、Zenn、Qiitaなど多くのツールが対応している。

イメージ
4
Markdownについて

なぜMarkdownが選ばれるのか

特別なソフトを買わなくても、テキストエディタさえあればすぐに書ける。

シンプルに書ける

  • 特別なソフト不要
  • テキストエディタだけで完結
  • 記号を覚えるだけで使える

どこでも使える

  • GitHubのREADMEやIssue
  • NotionやZennなどのメモツール
  • スライドや技術ブログの執筆
5
Markdownについて

Markdownの立ち位置

文書を書くための技術の中で、Markdownは最もシンプルな存在です。

文書作成の手段
リッチエディタ
Word書式が複雑
Google Docs共有は便利
マークアップ言語
HTMLタグが冗長
Markdownシンプル！
プレーンテキスト
.txt書式なし
6
残り 18 枚を読む

Web 開発

はじめてのREST API

21 枚

REST API入門

はじめてのREST API

Webアプリ同士が会話するしくみを2時間で理解する

1

目次

今日の流れ

1. APIってなに？ — まずはイメージから

2. HTTPのおさらい — メソッドとステータス

3. REST設計の考え方 — きれいなURLとは

4. ライブデモ — 実際にAPIを叩いてみる

5. まとめと振り返り

2
REST API入門 - APIとは

APIとは

プログラム同士がやり取りするための「窓口」のことです。

API（エーピーアイ / Application Programming Interface）

あるソフトウェアの機能やデータを、別のソフトウェアから使えるように公開した「決められた使い方の窓口」。

・人間ではなくプログラムが使う窓口

・「こう頼めば、こう返ってくる」という約束ごと

・中身のしくみを知らなくても利用できる

・REST APIはWebでよく使われるAPIの形式の一つ

11
REST API入門 - APIとは

API = レストランの注文に似ている

APIの役割は、レストランのウェイターにたとえると分かりやすいです。

あなた（客）
  • アプリやブラウザ
  • 「これがほしい」と注文する
ウェイター（API）
  • 注文を厨房に伝える
  • 料理を運んでくる
  • 決まった頼み方がある
厨房（サーバー）
  • データを保管・処理
  • 客とは直接話さない
  • ウェイター経由で応える
12
REST API入門 - APIとは

Webアプリが動くときの流れ

私たちがアプリを使うとき、裏ではこんなやり取りが起きています。

1. リクエスト

アプリが「天気を教えて」とAPIにお願いを送る

2. 処理

サーバーがデータベースから今日の天気を探す

3. レスポンス

「晴れ・25度」というデータをアプリに返す

4. 表示

アプリが受け取ったデータを画面に表示する

13
REST API入門 - APIとは

実は身近にあるAPI

普段使っているサービスの多くが、裏でAPIを呼び出しています。

裏で呼ばれているAPIの例

地図アプリで現在地を表示

地図サービスのAPIで地図データを取得

通販サイトで決済

決済サービスのAPIでクレジット処理

アプリにSNSログイン

SNSのAPIで本人確認

天気予報ウィジェット

天気サービスのAPIで予報を取得

14
残り 15 枚を読む

Web 開発

Webレンダリング手法の全体像

22 枚

Webレンダリング手法の全体像

CSR・SSR・SSG・ISR・RSC を一気に理解する

1

目次

Webレンダリング手法の全体像

学習内容

１　レンダリング手法の変遷史

２　CSR / SSR / SSG / ISR の基本

３　モダン・レンダリング（RSC / Islands）

４　認証・認可とレンダリング

2
Web制作の基本

レンダリングとは？

「データ → ユーザーの画面に見える HTML」に変換する処理のこと

  • どこで HTML を組み立てるか？（サーバー or ブラウザ）
  • いつ HTML を組み立てるか？（リクエスト時 or ビルド時）
  • この 2軸 の組み合わせで手法が決まる
3

Web制作の基本

1

レンダリング手法の変遷史

4
Web制作の基本

レンダリング手法の進化

約30年のWeb史を5つの時代に分けて振り返る

純粋SSR
Ajax
SPA/CSR
モダンSSR
RSC
5
Web制作の基本

① 黎明期：純粋なSSR時代

1990年代〜2000年代半ば

  • Perl (CGI), PHP, Ruby on Rails, Java (Struts)
  • リクエストのたびにサーバーがHTMLを組み立てて返却
  • ページ遷移のたびに画面が真っ白 → 再読み込み
  • ロジックも表示もすべてサーバー側
  • 「フロントエンド」という概念がまだ薄かった
6
残り 16 枚を読む

Web 開発

同じ1ページ、5通りの届き方

23 枚

Webレンダリング

同じ1ページ、5通りの届き方

そのHTMLを、いつ、どこで作るか

1

目次

1ページを追いかけながら5つの手法を見ます

1. 今日ずっと追いかける1ページ

2. CSR — ブラウザで作る

3. SSR — 頼まれてからサーバーで作る

4. SSG — 頼まれる前に作っておく

5. ISR — 古いまま返して裏で作り直す

6. RSC と、選び方

2
Webレンダリング - 共通の題材

今日ずっと追いかける1ページ

この講座ページを、最後まで例に使います。まず完成形を見てください。

利用者に見えている画面
chotdekiru.com/lesson/python-intro
Python入門
¥4,900
受講者 1,284人
その画面を作っているHTML
<h1>Python入門</h1>
<p>¥4,900</p>
<p>受講者 1,284刻々と増えていく値人</p>
3
Webレンダリング - 共通の題材

問いはひとつだけ

CSR・SSR・SSG・ISR・RSC は、どれも別々の技術に見えて、答えているのは同じ問いです。

  • さっきのHTMLを「いつ」作るか — 利用者が来たとき / それより前
  • さっきのHTMLを「どこで」作るか — サーバー / 利用者のブラウザ
  • この2つの答えの組み合わせが、そのまま手法の名前になっている
  • 以降のスライドは、すべてこの2点だけを見ていきます
4
Webレンダリング - CSR

CSR — ブラウザで作る

サーバーは空の入れ物だけを返し、中身はブラウザが後から組み立てます。

ブラウザ
利用者の手元
Webサーバー
ファイルの置き場
APIサーバー
データの置き場
/lesson/python-intro をください
①
空のHTMLと app.js をどうぞ
②
app.js が動いた。講座データをください
③
受講者 1,284人 です
④
5
Webレンダリング - CSR

CSRで最初に届くHTML

④が終わるまで、利用者の画面には何も出ていません。

②の直後に見えている画面
chotdekiru.com/lesson/python-intro
（白いまま。Python入門 の文字はまだどこにも無い）
②で実際に届いたHTML
<div id="root"></div>中身が無い
<script src="/app.jsこれから取りに行く"></script>
6
残り 17 枚を読む

Web 開発

Markdownの基本

10 枚

Markdownについて

1 - 1

Markdownの基本

1
Markdownについて

Markdownとは

Markdown

プレーンテキストに記号を使って書式を指定し、HTMLなどに変換できる記法。

・2004年にJohn Gruberが考案

・README・ブログ・ドキュメントで広く使われている

・GitHubやNotion、Slackなど多くのツールが対応

2
Markdownについて

Markdownを使うメリット

シンプルに書ける

  • 特別なソフト不要
  • テキストエディタだけで完結
  • 記号を覚えるだけで使える

どこでも使える

  • GitHubのREADMEや Issue
  • NotionやZennなどのメモツール
  • スライドや技術ブログの執筆
3
Markdownについて

見出し・テキストの装飾

Markdown
# 見出し1
## 見出し2
### 見出し3

**太字**　　*斜体*　　~~打ち消し~~
4
Markdownについて

リストの書き方

Markdown
- 項目A
- 項目B
  - ネストした項目

1. 手順1
2. 手順2
3. 手順3
5
Markdownについて

リンクと画像

Markdown
[リンクテキスト](https://example.com)

![画像の説明](./image.png)

> 引用テキストはこのように書きます
6
残り 4 枚を読む