Skip to content

fix:Deno資料修正 - #79

Open
nari88118 wants to merge 9 commits into
mainfrom
taniguchi/deno-tutorial
Open

fix:Deno資料修正#79
nari88118 wants to merge 9 commits into
mainfrom
taniguchi/deno-tutorial

Conversation

@nari88118

@nari88118 nari88118 commented Aug 6, 2026

Copy link
Copy Markdown

概要

Deno 授業にあわせて、deno セクションを再構成しました。
ゴールを「スマホで、自分の Web アプリが見られる」の1本に絞り、そこまで一直線に進める構成にしました。

主な変更

授業の流れ(README)

  • ゴールと5ステップを示す 0章 を追加し、章立てを授業の進行順に並べ替え
  • 3章「GitHub に自分のリポジトリを作ろう」を新設
    • jigintern/template-deno-dev をテンプレートに使い、受講者は自分のリポジトリを作って clone する
    • これまで「コードが GitHub に置いてある」状態への到達手順が資料内に存在しなかった問題を解消
  • 5-4「書き換えたら、GitHub に送っておこう」を追加(commit / push。前日の Git 回へリンク)
  • 発展章(7・8章)は教材リポジトリで進める旨を明記

スライド(新規・34枚)

  • 1章「Deno とは何か」 — ブラウザにエンジンがある → それを PC で動かす → それが Deno、の4ステップで説明
  • デプロイ編(17枚目〜) — Deno Deploy の手順を実機のスクリーンショットで解説
  • 実際に1回デプロイして、コンソールの UI と記述が合っているか確認済み

サンプルコード

  • Deno 2 で動くように修正(@std/assert の import、不要な compilerOptions の削除など)
  • 依存を @std/http@^1.1.3 に更新

動作確認

  • deno test / deno lint / deno fmt --check が通ることを確認
  • 実際に Deno Deploy へデプロイし、公開 URL で表示されることを確認

おそらく去年の学生さんが間違ってmainにpushしたんだと思われます。
資料通りに動かすとエラーになるので元に戻しておきます。
deno testが型チェックで失敗していたため、テストのimportを
旧deno.land/std形式からJSRの@std/assertに変更する。

- deno.jsonのimportsに@std/assertを追加
- sample.test.jsのimportをtesting/asserts.tsから@std/assertに変更
- 不要になったcompilerOptions.lib(deno.window)を削除
- .vscode/settings.jsonのdeno.unstableを削除
  (Deno 2系のvscode_denoでは真偽値ではなく配列を取るため)
1章の内容をスライドで説明できるようにする。既存のgit/design/
about-webappと同じMarpのビルドフローに載せ、GitHub Pagesから
deno-slideとして公開する。

- deno/slide.mdとDenoロゴを追加
- gh-pages.ymlのマトリクスにdenoを追加
- deno/READMEの1章とルートREADMEのTOCにリンクを追加
- スライドと内容が重複する公式サイトのスクリーンショットを削除

今日のゴールは、授業構成に合わせてデプロイの成果を1本立てる形に
している。「コードが読める」は2時間では達成が難しいため入れていない。

ブラウザの紹介はロゴ画像ではなくテキストで表示する。他社ロゴは
MPL 2.0やCC BY 4.0で配布されており、MITライセンスの本リポジトリ
では同梱できないため。
授業構成の変更にあわせて、1〜2節(Denoとは)と5節(デプロイ)を
1つのデッキにまとめた版に差し替える。17枚から31枚になり、
デプロイ編は18枚目の章扉から始まる。

公開用に以下を適用している。

- 画像パスを ./assets/ から ./imgs/ に変更
- 発表者ノート(講師メモ)を除去。GitHub Pagesは公開されており、
  ページのソースから読めてしまうため
- ブラウザの紹介はロゴ画像ではなくテキストで表示。他社ロゴは
  MPL 2.0やCC BY 4.0で配布されており、MITライセンスの本リポジトリ
  では同梱できないため
- タイトルスライドから講師名と開催日を除去
授業の流れ(動かす→書き換える→デプロイする)に沿うよう章を
並べ替え、番号を振り直した。

- 4章「自分で書き換えてみよう」を新設。server.jsの文言と
  public/index.htmlを書き換えて、その場で結果を見る内容にする
- 5章のデプロイをスライドへの導線に置き換える。Deno Deploy
  Classicが2026年7月20日に停止し、旧手順が使えなくなったため
- 発展的な内容(旧3-4〜3-7、旧4章)を6章・7章として後ろに移動
- 0章の目標と8章のまとめをゴール(スマホで自分のWebアプリが
  見られる)に合わせて書き換える

あわせて、Deno 2で実際に出力を取り直して差し替えた。

- 権限プロンプトの表示、起動ログ、lint・testの出力例
- 移転していた公式ドキュメントのURL
- Deno 2では動かないimport specifier
  (jsr:@std/http/file-server@1.0.17 -> jsr:@std/http@1.0.17/file-server)
- 前任者のローカル絶対パス
- fmtの手順にあった、すでにtrueの項目をtrueに変える指示

Classicの操作手順のスクリーンショット5枚は参照されなくなったため
削除する。
指定が ^1.0.17 のままで数字が古く見えるため。^1.0.17 でも実際には
最新の 1.x が解決されるので動作は変わらない。
template-deno-dev 側の指定と揃えた。
デプロイ対象のリポジトリを用意する手順が資料全体に存在しなかったため、
テンプレートリポジトリから作る3章を新設し、3〜8章を4〜9章に繰り下げる。

- 3章を追加(テンプレートからリポジトリ作成 → clone)
- 5-4「書き換えたら、GitHubに送っておこう」を追加
- 6章の「事前に必要なもの」は3章と重複するため削除
- 5-1の引用と4-2のスクリーンショットをテンプレートの実物に合わせる
- 7章の冒頭に、発展章は教材リポジトリで進める旨を追記
console.deno.com のUIが資料の記述と食い違っていたため、実際に
デプロイして確認した内容に差し替える。

- ステップ6を2枚に分割。public/ があるとDeno Deployが自動で
  Static Siteを選ぶため、Dynamic Appへの切り替えを明記する
- ステップ5に、リポジトリが一覧に出てこないときの手順を追加
- 「必要なもの」は3章で済むため「準備は、もうできています」に変更
- 実機のスクリーンショットを8枚追加
「JavaScriptはブラウザのエンジンで動いている → そのエンジンをPCで
動かせるようにしたのがDeno」という流れに整理し、5ステップを4ステップに
まとめる。あわせて記述をサンプルの実物に合わせる。

- 「ただの文字です」の1枚を削除し、エンジンの説明に統合
- 図中の「JSを動かす仕組み」を「JSを動かすエンジン」に統一
- Denoを「JavaScriptランタイム(実行環境)」として説明(READMEも同様)
- 「Denoだけでバックエンドもフロントエンドも作れます」の1枚を追加し、
  「後日のチーム開発でもDenoを使います」の1枚を削除
- スライドが1枚減ったため、READMEの深リンクを18→17に修正
- READMEに残っていた@std/httpの旧バージョン表記(1.0.17)を更新
- 5-2のindex.htmlの引用をテンプレートの実物に合わせる
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant