はじめてのDeno

はじめてのDeno

今日のゴール


スマホで
自分のWebアプリが見られる
自分のサイトをインターネットに公開するところまでやります
はじめてのDeno

まずは基礎から

1. Denoとは何か

はじめてのDeno

JavaScriptって、
どこで動いていますか？

はじめてのDeno

1 ブラウザの中で動いている

Chrome Edge Safari Firefox
こういうアプリの中で、JavaScriptが動いています
はじめてのDeno

2 ブラウザの中に「エンジン」が入っています

ブラウザ
JSを動かすエンジン
JavaScript
だから今までは、ブラウザがないと動かせなかった
はじめてのDeno

3 そのエンジンを、PCに置いたら？

ブラウザ
JavaScript
→
JSを動かすエンジン
あなたのPC
はじめてのDeno

4 それが Deno です

JSを動かすエンジン
JavaScript
あなたのPC
Deno
Deno
Node.js
Bun
今日使うのはDeno
こうした「ブラウザの外でJavaScriptを動かす仕組み」を JavaScriptランタイム（実行環境） と呼びます
はじめてのDeno

Denoとは


「ブラウザの外で
JavaScriptを動かす道具」

はじめてのDeno

ブラウザの中は、制限されている


ブラウザで動くJSからは、
PCの機能をほとんど使えません
ブラウザ
JavaScript
ファイルを開く、好きなところと通信する、など
不便だからではなく、わざとそうしてあります（安全のため）
はじめてのDeno

PC上でなら、PCの機能を使えます

JavaScript
ファイル
ネットワーク
あなたのPC
1. ファイル操作ができる
2. ネットワークを使える
なお、どちらも使うときは Deno が「許可していいですか？」と聞いてきます。安全ですね。
はじめてのDeno

ネットワークが使えると

送る側
あなたのPC
→
ブラウザ
受け取る側
・アクセスを待ち受けられる ＝ HTTPサーバー、バックエンドを立ち上げられる
・他所のAPIに、相手側の設定に関係なく繋げる — ブラウザからだと弾かれることがある
・HTTP以外の通信もできる — データベースに直接つなぐ、など
・そのまま公開できる — 他の人にも見てもらえる
etc...
一番上の「アクセスを待ち受けられる」が大切
はじめてのDeno

「アクセスを待ち受けられる」により、
Denoだけで
バックエンドもフロントエンドも作れます

はじめてのDeno

Denoを使っている会社

Slack Spotify GitHub Stripe Netlify Supabase
たとえば Slack は、アプリの自動化を動かす仕組みにDenoを使っています
はじめてのDeno

1章のまとめ


  • Denoは JavaScriptランタイム（実行環境）。ブラウザの外でJavaScriptを動かす道具
  • PC上でなら、ファイルやネットワークが使える
  • だから、自分のPCでサーバーを動かせる

READMEに戻って、セットアップをしましょう！

作ったものを、

他の人に見てもらう

Deno Deploy

はじめてのDeno

今は、自分しか見られません

server.js
localhost:8000
見られる
あなたのPC
✕
localhost:8000
見られない
友達のPC
local（手元の）＋ host（コンピュータ1台）
＝ 手元のコンピュータ。誰が開いても、その人自身のPCを指します
はじめてのDeno

PCを閉じたら、止まります

停止中
あなたのPC
✕
ブラウザ
見られない
Ctrl + C で止めたら終わり。PCの電源を切っても終わりです
はじめてのDeno

ずっと動いてくれるPCを、借ります

server.js
借りたPC（24時間動いている）
→
https://...
誰でも見られる
これを「デプロイ」と言います
はじめてのDeno

使うのは Deno Deploy


Denoを作っているところが用意している、置き場所

個人の練習なら無料で使えます

GitHubに置いたコードを読み込んで、勝手に動かしてくれます
はじめてのDeno

準備は、もうできています


1. GitHubアカウント ✅

2. コードがGitHubに置いてあること ✅

さっき作った自分のリポジトリに、書き換えた内容をpush済みですね。
あとは、それをDeno Deployに教えるだけです。
はじめてのDeno

1 Deno Deploy を開く

Deno Deploy トップページ
deno.com/deploy →「Try Deno Deploy」を押します
はじめてのDeno

2 サインインする

サインイン画面 GitHubログイン画面
「Sign in with GitHub」→ GitHubのIDとパスワードを入れます
はじめてのDeno

3 「許可しますか？」と聞かれたら


そのまま承認してください

DenoがGitHubのリポジトリを読んでいいか、確認されます。初回だけです
はじめてのDeno

4 自分の置き場所が開く

Organization overview
ここに、作ったアプリが並んでいきます。「+ New app」を押します
初回は、この置き場所の名前を決める画面が出ます。
名前は後から変えられません。公開URLの一部になります。
はじめてのDeno

5 リポジトリを選ぶ

リポジトリを選ぶ画面
さっき作った自分のリポジトリを選びます
はじめてのDeno

一覧に出てこないときは

GitHubのRepository access画面
「Configure GitHub app permissions」→ GitHubに移動 → 自分のリポジトリを選んでSave → 戻ると選べます
はじめてのDeno

6 動かし方を指定する


Static Site（静的サイト） — 置いてあるファイルを、そのまま返すだけ
Dynamic App（動的アプリ） — アクセスのたびに、コードを動かす

このアプリは「Dynamic App」です

server.js が文言を作って返すので、あちらの置き場所で動かしてもらう必要があります
はじめてのDeno

6 Edit app config を押す

Runtime Configurationの設定
最初は Static Site が選ばれています。
Dynamic App に切り替えて、Entrypoint に server.js と入力してください。
はじめてのDeno

7 Create App を押す

ビルドのログ
緑のチェックが並べば成功です
はじめてのDeno

URLが発行されます

スマホからも見てみましょう

アプリ名.置き場所の名前.deno.net
はじめてのDeno

これからは、pushするだけ


GitHubに変更を送ると、自動でやり直してくれます

毎回この画面を開く必要はありません
はじめてのDeno

まとめ


  • 自分のPCで動かしている間は、自分しか見られない
  • デプロイすると、ずっと動いてくれるPCに置ける
  • Deno Deployなら、GitHubのコードを読み込んで動かしてくれる

チーム開発の成果物も、これで公開します