+[Deno](https://deno.com/) とは、JavaScript や TypeScript で書かれたコードを実行する **JavaScript ランタイム（実行環境）** です。
Deno がインストールされた環境で`deno run <ファイル名>`のコマンドを実行することで、JavaScript や TypeScript で書かれたファイルを実行できます。
@@ -53,7 +72,7 @@ Deno はコードを実行する機能以外にも、コードをリントした
早速、Deno を以下のリンク先からインストールしてみましょう。
-[公式サイト - Deno のインストール方法](https://docs.deno.com/runtime/manual/getting_started/installation)
+[公式サイト - Deno のインストール方法](https://docs.deno.com/runtime/getting_started/installation/)
基本的には公式サイトの手順を参考にします。
@@ -65,11 +84,124 @@ Mac OS の人は`homebrew`というパッケージ管理ツールをインスト
[homebrew の公式サイト](https://brew.sh/ja)
-# 3. Deno 使ってみよう
+インストールできたら、以下のコマンドでバージョンを確認してみましょう。
+
+```shell
+deno --version
+```
+
+`deno 2.` から始まる行が表示されれば成功です。
+
+# 3. GitHub に自分のリポジトリを作ろう
+
+次の章から、いよいよサンプルプロジェクトを動かしていきます。
+
+その前に、**今日つくるものの置き場所**を用意しておきましょう。GitHub に**自分のリポジトリ**を作ります。
+
+なぜ先に作るかというと、6 章でインターネットに公開するときに、**「GitHub に置いてあるコードを読み込む」**という形で公開するからです。最初から自分のリポジトリの中で作業しておけば、あとから引っ越す手間がかかりません。
+
+> [!NOTE]
+> GitHub アカウントをまだ持っていない人は、先に作成してください。
+> アカウントの作り方や Git の基本的な使い方は [Git / Github 学習資料](../git/README.md) にまとまっています。
+
+## 3-1. 新しいリポジトリを作る
+
+GitHub にログインした状態で、緑色の「**New**」ボタンを押します。
+
+
+
+> [!TIP]
+> このボタンは自分のリポジトリ一覧のページにあります。画面右上の「**+**」から「**New repository**」を選んでも同じ画面に進めます。
+
+「Create a new repository」の画面が開きます。
+
+
+
+たくさん項目がありますが、**さわるのは 2 箇所だけ**です。
+
+**1. Repository name — 好きな名前を入れる**
+
+自分のアプリの名前です。ここでは例として`deno-app`としています。
+
+- 半角の英数字とハイフン(`-`)で付けるのがおすすめです
+- 入力欄の下に緑色で `〇〇 is available.` と出れば、その名前は使えます
+- すでに同じ名前のリポジトリを持っていると使えないので、その時は別の名前にしましょう
+
+**2. Start with a template —`jigintern/template-deno-dev`を選ぶ** ← **一番大事**
+
+`Start with a template`は、**空っぽのリポジトリではなく、あらかじめファイルが入った状態でリポジトリを作る**ための設定です。
+
+`jigintern/template-deno-dev`には Deno で動くサンプルが入っているので、これを選ぶだけで**動かす準備ができた状態**のリポジトリが手に入ります。
+
+その下の`Include all branches`は`Off`のままで大丈夫です。
+
+残りの項目はさわらなくて大丈夫です。`Choose visibility`（誰が見られるか）も`Public`のままで進めましょう。
+
+入力できたら、画面を下にスクロールして「**Create repository**」を押します。
+
+## 3-2. できたリポジトリを確認する
+
+しばらく待つと、自分のリポジトリのページが表示されます。
+
+
+
+テンプレートの中身がコピーされた状態でリポジトリができました。`public`フォルダやサーバーのファイルが並んでいれば成功です。
+
+ここが、これから自分のコードを置いていく場所になります。
+
+## 3-3. 自分の PC にクローンする
+
+いまリポジトリは GitHub 上、つまりインターネットの向こう側にあります。
+自分で編集するために、これを**自分の PC にダウンロード**しましょう。
+
+この操作を **clone（クローン）** と言います。
+
+緑色の「**Code**」ボタンを押して、「**Local**」タブ →「**HTTPS**」タブの順に選び、表示された URL の右にあるコピーボタンを押します。
+
+
+
+URL は`https://github.com/<自分のユーザー名>/<リポジトリ名>.git`という形になっています。
+
+コピーできたらターミナルを開いて、リポジトリを置きたい場所（デスクトップなど）に移動してから、以下のコマンドを実行します。
+
+```shell
+git clone <コピーしたURL>
+```
+
+たとえば、こんな形になります。
+
+```shell
+git clone https://github.com/nari88118/deno-app.git
+```
+
+実行すると、リポジトリと同じ名前のフォルダが作られて、その中にファイルがダウンロードされます。
+
+```shell
+Cloning into 'deno-app'...
+remote: Enumerating objects: 15, done.
+Receiving objects: 100% (15/15), done.
+```
+
+`cd`でそのフォルダに入って、中身を確認してみましょう。
+
+```shell
+cd deno-app
+ls
+```
+
+ファイルが並んで表示されれば成功です 🎉
+
+> [!TIP]
+> ターミナルではなく、VSCode の画面から clone することもできます。
+> やり方は [Git / Github 学習資料](../git/docs.md#2-1-clone-githubリポジトリを丸ごとダウンロードしよう) を参照してください。
+
+これで、自分だけの作業場所ができました。次の章から、このフォルダの中で作業していきます。
+
+# 4. Deno 使ってみよう
サンプルプロジェクトのコードを Deno で実行してみよう。
-## 3-1. 下準備
+## 4-1. 下準備
1. VSCode で、`intern-dev-tutorial/deno`を開きましょう。
@@ -104,7 +236,7 @@ Deno を有効化すると、現在のフォルダに`.vscode`というフォル
}
```
-## 3-2. JavaScript のコードを実行してみよう
+## 4-2. JavaScript のコードを実行してみよう
このセクションでは、Deno で JavaScript ファイルを**実行する**方法を学びます。
@@ -125,10 +257,12 @@ deno run server.js
実行すると以下のような文言がターミナルに表示されます。
```shell
-┌ ⚠️ Deno requests net access to "0.0.0.0:8000".
-├ Requested by `Deno.listen()` API.
-├ Run again with --allow-net to bypass this prompt.
-└ Allow? [y/n/A] (y = yes, allow; n = no, deny; A = allow all net permissions) >
+┏ ⚠️ Deno requests net access to "0.0.0.0:8000".
+┠─ Requested by `Deno.listen()` API.
+┠─ To see a stack trace for this prompt, set the DENO_TRACE_PERMISSIONS environmental variable.
+┠─ Learn more at: https://docs.deno.com/go/--allow-net
+┠─ Run again with --allow-net to bypass this prompt.
+┗ Allow? [y/n/A] (y = yes, allow; n = no, deny; A = allow all net permissions) >
```
一旦は深く考えずに`y`を入力していきましょう。
@@ -136,7 +270,7 @@ deno run server.js
そうすると以下のような文言がターミナルに表示されます。
```shell
-Listening on http://localhost:8000/
+Listening on http://0.0.0.0:8000/ (http://localhost:8000/)
```
では、ブラウザのアドレスバーに はじめてのWebアプリです！
+``` + +保存したら、ブラウザを再読み込みしてみましょう。追加した文章が表示されます。 + +> [!TIP] +> `public`フォルダの中のファイルは、サーバーを再起動しなくても反映されます。 +> ブラウザの再読み込みだけで大丈夫です。 + +色や文字の大きさを変えたい人は、`public/styles.css`をいじってみましょう。 + +HTML と CSS について詳しくは [HTML/CSS を始めよう](../html-css/README.md) のセクションを参照してください。 + +## 5-3. うまくいかないときは + +**ブラウザに何も表示されない** + +ターミナルを見てみましょう。赤い文字でエラーが出ていませんか？ 出ている場合は、直前に書き換えた箇所を見直してみてください。 + +**「このサイトにアクセスできません」と出る** + +サーバーが起動していない可能性があります。ターミナルに`Listening on ...`と表示されているか確認しましょう。表示されていなければ、もう一度コマンドを実行してください。 + +**書き換えたのに表示が変わらない** + +ブラウザの再読み込みを忘れていないか確認しましょう。それでも変わらない場合は、キャッシュが残っているかもしれません。`Ctrl + Shift + R`（Mac は `Cmd + Shift + R`）で強制的に再読み込みできます。 + +**どうしても直らない** + +書き換える前の状態に戻したいときは、VSCode で `Ctrl + Z`（Mac は `Cmd + Z`）を何度か押すと元に戻せます。それでも解決しない場合は、遠慮なく声をかけてください 🙋 + +## 5-4. 書き換えたら、GitHub に送っておこう + +満足いくまで書き換えられたでしょうか。 + +ただし、書き換えた内容は**まだ自分の PC の中にあるだけ**です。3 章で作ったリポジトリには、まだ何も届いていません。 + +次の章のデプロイは「**GitHub に置いてあるコードを読み込む**」という形で動きます。このままだと、**書き換える前の状態が公開されてしまいます。** + +前日にやった **commit** と **push** で、変更を GitHub に送っておきましょう。 + +1. VSCode の左側の **ソース管理（Source Control）** タブを開く +2. 変更したファイルを確認して、メッセージを書いて **commit** する +3. **push** して GitHub に送る + +やり方を忘れてしまった人は、こちらを見てください。 + +- [2-3. commit: 作業前と後の差分を記録しよう](../git/docs.md#2-3-commit-作業前と後の差分を記録しよう) +- [2-5. push: 作業の成果を Github にアップロードして共有しよう](../git/docs.md#2-5-push-作業の成果をgithubにアップロードして共有しよう) + +push できたら、**GitHub の自分のリポジトリのページをブラウザで開いて確認しておきましょう。**書き換えた内容が反映されていれば準備完了です。 + +# 6. デプロイして、他の人に見てもらおう + +ここまでで、自分だけの Web アプリができました。 + +でも、今の状態では**自分の PC でしか見られません。**PC を閉じたら止まってしまいます。 + +他の人にも見てもらえるように、**デプロイ**しましょう。デプロイとは、作ったものを外部の環境に配置して、誰でもアクセスできる状態にすることです。 + +このセクションは**スライドで進めます。** + +- [デプロイ編のスライドへ（17枚目〜）](https://jigintern.github.io/intern-dev-tutorial/deno/deno-slide.html#17) +- [PDF資料（17ページ〜）](https://jigintern.github.io/intern-dev-tutorial/deno/deno-slide.pdf#page=17) +- [テキスト資料](./slide.md) + +使うのは [Deno Deploy](https://deno.com/deploy) です。Deno を作っているところが用意している置き場所で、個人の練習なら無料で使えます。 + + デプロイが終わったら、**自分のスマホで URL を開いてみてください。**さっき書き換えた文言が、自分のスマホに表示されます 🎉 + +# 7. (発展) Deno の便利な機能を使ってみよう + +ここからは発展的な内容です。Deno には、コードを実行する以外にも便利な機能が標準で備わっています。 + +> [!IMPORTANT] +> **7 章と 8 章は、この教材リポジトリ（`intern-dev-tutorial/deno`）を開いて進めてください。** +> ここから先は`deno.json`という設定ファイルを見ながら進めますが、3 章で作った自分のリポジトリには入っていません。 +> VSCode でもう 1 つウィンドウを開いて、`intern-dev-tutorial/deno`フォルダを開くのがおすすめです。 + +## 7-1. (発展) 毎回打ち込むコマンドが長いと感じたら 前のセクションでは以下のコマンドで`server.js`が実行できることを学びました。 @@ -278,7 +554,7 @@ deno task start このセクションでは**task**コマンドについて学びました。 便利コマンドなのでぜひ使ってみてください！ -## 3-5. (発展) JavaScript ファイルをリントしてみよう +## 7-2. (発展) JavaScript ファイルをリントしてみよう このセクションでは、Deno で JavaScript ファイルを**リント**する方法を学びます。 @@ -314,9 +590,9 @@ deno lint } ``` -今回のこの設定は[Deno 公式サイト](https://docs.deno.com/runtime/manual/getting_started/configuration_file/#lint)の設定をコピーしたものです。 +今回のこの設定は[Deno 公式サイト](https://docs.deno.com/runtime/fundamentals/configuration/)の設定をコピーしたものです。 -Deno でリント時に参照されるルールの一覧は[Deno のリントルール](https://lint.deno.land/?q=&all=on)で確認できます。 +Deno でリント時に参照されるルールの一覧は[Deno のリントルール](https://docs.deno.com/lint/)で確認できます。 今回の設定では`tags`に`recommended`が指定されているので、上記のサイトのルール一覧の中から`recommended`タグがついているもの全て適用しています。 @@ -330,38 +606,42 @@ Deno でリント時に参照されるルールの一覧は[Deno のリントル `server.js`を開いて一番下の行に以下の行を追加して、`Ctrl + S`で保存してみましょう。 ```js -var message = "Jig.jpインターンへようこそ！"; +var message = "jig.jpインターンへようこそ！"; ``` 保存ができたらターミナルで以下のコマンドを実行してみましょう。 -```txt +```shell deno lint ``` そうすると以下のような結果が表示されます。 ```shell -(no-var) `var` keyword is not allowed. -var message = 'Jig.jpインターンへようこそ！'; -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - at /Users/fujii/dev/deno-sample-project/server.js:27:1 +error[no-var]: `var` keyword is not allowed. + --> /path/to/intern-dev-tutorial/deno/server.js:24:1 + | +24 | var message = "jig.jpインターンへようこそ！"; + | ^^^ + + docs: https://docs.deno.com/lint/rules/no-var - help: for further information visit https://lint.deno.land/#no-var Found 1 problem Checked 3 files ``` -これは「var は使わないでください」といった警告文です。([詳細なルール: no-var](https://lint.deno.land/rules/no-var)) +これは「var は使わないでください」といった警告文です。([詳細なルール: no-var](https://docs.deno.com/lint/rules/no-var)) どのファイルの何行目まで表示してくれて便利です。 このように、**lint**コマンドを実行すると、あらかじめ決めておいた「ルール」を元に、それにそぐわないコードがないか チェック します。 +確認できたら、追加した`var`の行は削除しておきましょう。 + チーム開発でも**リント**を使って、潜在的にバグとなりうるコードがないかチェックしてみましょう！ -## 3-6. (発展) JavaScript ファイルをフォーマットしてみよう +## 7-3. (発展) JavaScript ファイルをフォーマットしてみよう このセクションでは、Deno で JavaScript ファイルを**フォーマット**する方法を学びます。 @@ -386,23 +666,23 @@ deno fmt フォーマットの設定は、`deno.json`の`fmt`部分で設定されています。 -こちらもリントと同様に、[公式サイト](https://docs.deno.com/runtime/manual/getting_started/configuration_file/#fmt)の設定をコピーしたものです。 +こちらもリントと同様に、[公式サイト](https://docs.deno.com/runtime/fundamentals/configuration/)の設定をコピーしたものです。 ```json "fmt": { - "useTabs": true, // タブを使用するか - "lineWidth": 80, // 一行の文字数 - "indentWidth": 4, // インデントの文字数 - "semiColons": true, // セミコロンをつけるかどうか - "singleQuote": true, // シングルクォートを使用するかどうか + "useTabs": true, // タブを使用するか + "lineWidth": 80, // 一行の文字数 + "indentWidth": 4, // インデントの文字数 + "semiColons": true, // セミコロンをつけるかどうか + "singleQuote": true, // シングルクォートを使用するかどうか "proseWrap": "preserve", - "include": ["./**/*.js"], + "include": ["./**/*.js"] } ``` 基本的にはこの設定で十分ですが、ルールを変更したい時にはこちらの設定をいじりましょう。 -設定できるフォーマッタの種類については[公式サイト](https://docs.deno.com/runtime/manual/tools/formatter/)から確認できます。 +設定できるフォーマッタの種類については[公式サイト](https://docs.deno.com/runtime/reference/cli/fmt/)から確認できます。 では、実際にフォーマットしてみましょう！ @@ -412,7 +692,7 @@ deno fmt をターミナルに打ち込んで Enter をしてみましょう。 -```chell +```shell Checked 3 files ``` @@ -426,36 +706,31 @@ Checked 3 files では試しに、フォーマットのルールを変えてみましょう。 -`deno.json`の`fmt`部分の -`semiColons`の部分を`false`, `singleQuote`の部分を`true`に書き換えてみましょう。 - -以下のようになります。 +`deno.json`の`fmt`部分の`semiColons`を`false`に書き換えてみましょう。 ```json "fmt": { - "useTabs": false, + "useTabs": true, "lineWidth": 80, - "indentWidth": 2, - "semiColons": false, // trueからfalseに変更した - "singleQuote": true, // falseからtrueに変更した + "indentWidth": 4, + "semiColons": false, // trueからfalseに変更した + "singleQuote": true, "proseWrap": "preserve", "include": ["./**/*.js"] - }, + } ``` そして再度、`deno fmt`を実行し, `server.js`の中身を見てみましょう。 -- 行末にセミコロン(;)がない - -- 文字列はすべて('')で囲まれている - -のように修正されていますね。 +行末のセミコロン(;)がなくなっていますね。 このように`deno fmt`を使用することでコードを整えてくれます。 +確認できたら、`semiColons`は`true`に戻して、もう一度`deno fmt`を実行しておきましょう。 + チーム開発でもこのフォーマット機能を利用してきれいなコードにしていきましょう！ -## 3-7. (発展) JavaScript ファイルをテストしてみよう +## 7-4. (発展) JavaScript ファイルをテストしてみよう このセクションでは、Deno で JavaScript ファイルを**テスト**する方法を学びます。 @@ -509,14 +784,14 @@ deno test ```shell running 1 test from ./sample.test.js -1 + 1 は 2 である ... ok (9ms) +1 + 1 は 2 である ... ok (246µs) -ok | 1 passed | 0 failed (89ms) +ok | 1 passed | 0 failed (2ms) ``` `./sample.test.js`の「1+1 は 2 である」というテストが 1 つ実行され、OK でしたと表示されています。 -では`sample.test.ts`の中身を以下のように修正し保存して、`deno test`を実行してみましょう。 +では`sample.test.js`の中身を以下のように修正し保存して、`deno test`を実行してみましょう。 ```js assertEquals(1 + 1, 2); @@ -529,6 +804,7 @@ assertEquals(1 + 1, 3); // 3に修正 すると今度は以下のような文言が表示されます。 ```shell +running 1 test from ./sample.test.js 1 + 1 は 2 である ... FAILED (10ms) ERRORS @@ -545,14 +821,14 @@ error: AssertionError: Values are not equal. throw new AssertionError(message); ^ - at assertEquals (https://deno.land/std@0.193.0/testing/asserts.ts:188:9) - at file:///Users/fujii/dev/deno-sample-project/server.test.js:5:3 + at assertEquals (https://jsr.io/@std/assert/1.0.19/equals.ts:67:9) + at file:///path/to/intern-dev-tutorial/deno/sample.test.js:5:2 FAILURES 1 + 1 は 2 である => ./sample.test.js:3:6 -FAILED | 0 passed | 1 failed (24ms) +FAILED | 0 passed | 1 failed (11ms) error: Test failed ``` @@ -567,11 +843,13 @@ error: Test failed - 期待された値とテスト時に渡された値 +確認できたら、`3`を`2`に戻しておきましょう。 + このように`Deno`では、テストを行える環境が標準で備わっています。 -より詳しい Deno での自動テストに関する記事は[公式サイト](https://docs.deno.com/runtime/manual/basics/testing/)をみて見てください。 +より詳しい Deno での自動テストに関する記事は[公式サイト](https://docs.deno.com/runtime/test/)をみて見てください。 -# 4. (発展) サンプルプロジェクトのコードを読んでみよう +# 8. (発展) サンプルプロジェクトのコードを読んでみよう ここからはいままで実行してきた`server.js`やこのディレクトリのファイル構造についてみていきましょう。 @@ -597,7 +875,7 @@ error: Test failed - `index.js` - ブラウザからサーバーにアクセスする処理が書かれたファイル -## 4-1. (発展) server.js を読んでみよう +## 8-1. (発展) server.js を読んでみよう このセクションでは`server.js`を読みながら以下のことを学んでいきましょう！ @@ -607,7 +885,7 @@ error: Test failed - クライアント側からの API リクエストに対して、ファイルや文字列を返す方法 -## 4-2. (発展) ESModule の形でファイルを読み込む +## 8-2. (発展) ESModule の形でファイルを読み込む まずは「ESModule の形でファイルを読み込む方法」について学んでいきます。 @@ -634,7 +912,7 @@ import { <変数>, <メソッド> } from "JavaScriptファイルのPathやUrl" `server.js`の最初の行で行っているように外部の`serveDir`メソッドを取り込むことは以下のようにしてできます。 ```js -import { serveDir } from "jsr:@std/http/file-server@1.0.17"; +import { serveDir } from "jsr:@std/http@1.1.3/file-server"; ``` しかし、実際の`server.js`で書かれているコードは少し違っていますね。 @@ -644,26 +922,27 @@ import { serveDir } from "jsr:@std/http/file-server@1.0.17"; このセクションでは**ESModule**と言う形で外部のファイルを取り込む方法を学びました！ -## 4-3. (発展) import map を使ってみよう +## 8-3. (発展) import map を使ってみよう 前のセクションで以下のように外部の変数やメソッドを取り込む方法を学びました。 ```js -import { serveDir } from "jsr:@std/http/file-server@1.0.17"; +import { serveDir } from "jsr:@std/http@1.1.3/file-server"; ``` ここで、Deno の**import map**と言う機能を使ってみましょう。 -まず`deno.json`の`import`部分をみてみると以下のようになっています。 +まず`deno.json`の`imports`部分をみてみると以下のようになっています。 ```json "imports": { - "@std/http": "jsr:@std/http@^1.0.17" + "@std/assert": "jsr:@std/assert@^1.0.19", + "@std/http": "jsr:@std/http@^1.1.3" }, ``` この設定によって JavaScript ファイルで外部のファイルにアクセスするとき、 -`jsr:@std/http/file-server@1.0.17`は`@std/http`でアクセスできるようになりました。 +`jsr:@std/http@1.1.3/file-server`は`@std/http`でアクセスできるようになりました。 よって以下のように書き換えることができます！ @@ -681,15 +960,15 @@ import { serveDir } from "@std/http"; - 使用する外部のファイルのバージョンを固定できる -- バージョンの変更は`deno.json`の`import`部分の URL の数字を変えるだけで全てのファイルに適用される +- バージョンの変更は`deno.json`の`imports`部分の URL の数字を変えるだけで全てのファイルに適用される -- `deno.json`の`import`部分を見るだけで、このプロジェクトで使用されているライブラリの一覧を確認できる +- `deno.json`の`imports`部分を見るだけで、このプロジェクトで使用されているライブラリの一覧を確認できる ぜひ使ってみましょう！ このセクションでは**import map**と言う機能の使い方や使用するメリットを学びました。 -## 4-4. (発展) クライアント側からの API リクエストを処理 +## 8-4. (発展) クライアント側からの API リクエストを処理 クライアント側からの API リクエストに関する処理を学びましょう！ @@ -699,7 +978,7 @@ import { serveDir } from "@std/http"; - 文字列を返す処理 -まずクライアント側からの API リクエストを受け付ける処理は以下のように`serve`関数で行います。 +まずクライアント側からの API リクエストを受け付ける処理は以下のように`Deno.serve`関数で行います。 ```js /** @@ -753,11 +1032,11 @@ return serveDir(req, { よって、`deno run`を実行してから、`http://localhost:8000/`にアクセスすると`public`内の`index.html`のページが表示されるんですね。 -## 4-5. (発展) public/index.js を読んでみよう +## 8-5. (発展) public/index.js を読んでみよう クライアント側で表示される`index.html`から読み込まれる`index.js`を読んでいきましょう。 -`index.js`の読み込み方法は以下のように、「[3-７-2. (発展) ESModule の形でファイルを読み込む](#3-７-2-発展-esmoduleの形でファイルを読み込む)」でも説明しましたように ESModule の形で読み込んでいます。 +`index.js`の読み込み方法は以下のように、「[8-2. (発展) ESModule の形でファイルを読み込む](#8-2-発展-esmodule-の形でファイルを読み込む)」でも説明しましたように ESModule の形で読み込んでいます。 ```html @@ -784,7 +1063,7 @@ fetch メソッドは引数で**path**を指定して、サーバーにリクエ この場合、引数が`/welcome-message`になっているので、現在開いているアドレスのホスト名の`http://localhost:8000`に path の`/welcome-message`をくっ付けて`http://localhost:8000/welcome-message`にアクセスします。 -先ほどの「[4-4. (発展) クライアント側からの API リクエストを処理](#4-4-発展-クライアント側からの-api-リクエストを処理)」でも説明しましたように、この API リクエストに対してクライアント側に`"jig.jpインターンへようこそ！👍"`という文字を返しています。 +先ほどの「[8-4. (発展) クライアント側からの API リクエストを処理](#8-4-発展-クライアント側からの-api-リクエストを処理)」でも説明しましたように、この API リクエストに対してクライアント側に`"jig.jpインターンへようこそ！👍"`という文字を返しています。 以下のコードで`index.html`内にある`id="welcomeMessage"`の要素を探して、`"jig.jpインターンへようこそ！👍"`の文字を入力しています。 @@ -794,65 +1073,20 @@ document.querySelector("#welcomeMessage").innerText = await response.text(); これで`http://localhost:8000/`へアクセスした時に、「jig.jp インターンへようこそ！」の文言が画面に表示されるサンプルプロジェクトの流れを追うことができました。 -# 5. Deno Deploy を用いてコードをデプロイしてみよう - -ここでは自分のコードをデプロイする方法を学びましょう。 - -前のセクションまでは手元のコンソールで`deno run <ファイル名>`のコマンドを入力して、ブラウザから
-
-ログインできたら「Overview」の画面の右上にある「New Project」ボタンからプロジェクト作成画面に移動しましょう。
-
-
-
-自分が作成したプロジェクトを選択しましょう。
-
-
-
-もしここに作成したプロジェクトが表示されない場合は、「Modify GitHub Permission」をクリックして、GitHub の設定画面に遷移してください。
-
-
-
-「Repository access」の項目で Deno Deploy からアクセスできるリポジトリ(プロジェクト)を選択できます。「Select Repositories」から自分が作成したプロジェクトを選択して、「Save」ボタンで保存しましょう。
-
-保存し終えたら Deno Deploy の画面から再度自分が作成したリポジトリを選択しましょう。
-
-選択したら、「Entrypoint」の欄から`deno run`で実行したいファイルを選択します。`deno run server.js`としたい場合は`server.js`を選択します。
-
-
-
-「Entrypoint」のファイルを選択し終えたら、「Deploy Project」ボタンからデプロイを行いましょう！
-
-デプロイが完了したらダッシュボード画面に遷移します。
+# 9. まとめ
-その画面の「Domains」の箇所に記載されている URL をクリックすることでサイトにアクセスできます！
+このセクションの初めに立てた目標は達成できましたでしょうか？
-コードを書かずにポチポチ選択するだけでデプロイできました！ 簡単ですね！
+> **スマホで、自分の Web アプリが見られる** 🚀
-# 6. まとめ
+1. Deno をインストールした
+2. GitHub に自分のリポジトリを作った
+3. `deno run`コマンドでサンプルプロジェクトを動かした
+4. 中身を自分で書き換えた
+5. インターネットに公開した
-このセクションの初めに以下の目標を立てましたが、達成できましたでしょうか？
+ここまでできれば、後日のチーム開発の準備は万全です。
-> このセクションでは以下の項目をマスターしましょう 🎉
->
-> 1. `deno run`コマンドで TypeScript ファイルを実行できる 💪
-> 2. Deno Deploy を用いてコードをデプロイする方法を理解する 🚀
+うまくいかなかったところがある人は、**必ず今日中に相談してください。**
-他の発展的な内容もとても便利な機能ばかりですので、ぜひ実際に開発する時には Deno の様々な機能を活用してみてください！
+発展的な内容もとても便利な機能ばかりですので、ぜひ実際に開発する時には Deno の様々な機能を活用してみてください！
diff --git a/deno/deno.json b/deno/deno.json
index 4d9e441f..7e03a936 100644
--- a/deno/deno.json
+++ b/deno/deno.json
@@ -1,15 +1,11 @@
{
"imports": {
- "@std/http": "jsr:@std/http@^1.0.17"
+ "@std/assert": "jsr:@std/assert@^1.0.19",
+ "@std/http": "jsr:@std/http@^1.1.3"
},
"tasks": {
"start": "deno run --watch --allow-net --allow-read server.js"
},
- "compilerOptions": {
- "lib": [
- "deno.window"
- ]
- },
"lint": {
"include": [
"./**/*.js"
diff --git a/deno/imgs/deno-image-01.png b/deno/imgs/deno-image-01.png
deleted file mode 100644
index 717c567b..00000000
Binary files a/deno/imgs/deno-image-01.png and /dev/null differ
diff --git a/deno/imgs/deno-image-09.png b/deno/imgs/deno-image-09.png
index 07c25b47..38162000 100644
Binary files a/deno/imgs/deno-image-09.png and b/deno/imgs/deno-image-09.png differ
diff --git a/deno/imgs/deno-image-10.png b/deno/imgs/deno-image-10.png
deleted file mode 100644
index fbe8ab85..00000000
Binary files a/deno/imgs/deno-image-10.png and /dev/null differ
diff --git a/deno/imgs/deno-image-11.png b/deno/imgs/deno-image-11.png
deleted file mode 100644
index 130b6e35..00000000
Binary files a/deno/imgs/deno-image-11.png and /dev/null differ
diff --git a/deno/imgs/deno-image-12.png b/deno/imgs/deno-image-12.png
deleted file mode 100644
index 873c122c..00000000
Binary files a/deno/imgs/deno-image-12.png and /dev/null differ
diff --git a/deno/imgs/deno-image-13.png b/deno/imgs/deno-image-13.png
deleted file mode 100644
index f2dac77c..00000000
Binary files a/deno/imgs/deno-image-13.png and /dev/null differ
diff --git a/deno/imgs/deno-image-14.png b/deno/imgs/deno-image-14.png
deleted file mode 100644
index fcfed3c4..00000000
Binary files a/deno/imgs/deno-image-14.png and /dev/null differ
diff --git a/deno/imgs/deno-logo.svg b/deno/imgs/deno-logo.svg
new file mode 100644
index 00000000..3a3d70a3
--- /dev/null
+++ b/deno/imgs/deno-logo.svg
@@ -0,0 +1,32 @@
+
diff --git a/deno/imgs/deploy-01-landing.png b/deno/imgs/deploy-01-landing.png
new file mode 100644
index 00000000..81acf8c4
Binary files /dev/null and b/deno/imgs/deploy-01-landing.png differ
diff --git a/deno/imgs/deploy-02-signin.png b/deno/imgs/deploy-02-signin.png
new file mode 100644
index 00000000..99a1564b
Binary files /dev/null and b/deno/imgs/deploy-02-signin.png differ
diff --git a/deno/imgs/deploy-03-github.png b/deno/imgs/deploy-03-github.png
new file mode 100644
index 00000000..3ffcdf53
Binary files /dev/null and b/deno/imgs/deploy-03-github.png differ
diff --git a/deno/imgs/deploy-04-org.png b/deno/imgs/deploy-04-org.png
new file mode 100644
index 00000000..e73a014d
Binary files /dev/null and b/deno/imgs/deploy-04-org.png differ
diff --git a/deno/imgs/deploy-05-select-repo.png b/deno/imgs/deploy-05-select-repo.png
new file mode 100644
index 00000000..8e11586b
Binary files /dev/null and b/deno/imgs/deploy-05-select-repo.png differ
diff --git a/deno/imgs/deploy-06-github-access.png b/deno/imgs/deploy-06-github-access.png
new file mode 100644
index 00000000..0e9ed7a6
Binary files /dev/null and b/deno/imgs/deploy-06-github-access.png differ
diff --git a/deno/imgs/deploy-07-config.png b/deno/imgs/deploy-07-config.png
new file mode 100644
index 00000000..3c939969
Binary files /dev/null and b/deno/imgs/deploy-07-config.png differ
diff --git a/deno/imgs/deploy-08-build.png b/deno/imgs/deploy-08-build.png
new file mode 100644
index 00000000..4faa3902
Binary files /dev/null and b/deno/imgs/deploy-08-build.png differ
diff --git a/deno/imgs/repo-01-new.png b/deno/imgs/repo-01-new.png
new file mode 100644
index 00000000..ac8a4707
Binary files /dev/null and b/deno/imgs/repo-01-new.png differ
diff --git a/deno/imgs/repo-02-create.png b/deno/imgs/repo-02-create.png
new file mode 100644
index 00000000..94954116
Binary files /dev/null and b/deno/imgs/repo-02-create.png differ
diff --git a/deno/imgs/repo-03-created.png b/deno/imgs/repo-03-created.png
new file mode 100644
index 00000000..8b2c823a
Binary files /dev/null and b/deno/imgs/repo-03-created.png differ
diff --git a/deno/imgs/repo-04-clone.png b/deno/imgs/repo-04-clone.png
new file mode 100644
index 00000000..8f7b39bc
Binary files /dev/null and b/deno/imgs/repo-04-clone.png differ
diff --git a/deno/sample.test.js b/deno/sample.test.js
index 51d9ac80..be6f742e 100644
--- a/deno/sample.test.js
+++ b/deno/sample.test.js
@@ -1,4 +1,4 @@
-import { assertEquals } from 'testing/asserts.ts';
+import { assertEquals } from '@std/assert';
Deno.test('1 + 1 は 2 である', () => {
// 1 + 1 は 2 であることを確かめる
diff --git a/deno/server.js b/deno/server.js
index 2870648b..e6b18774 100644
--- a/deno/server.js
+++ b/deno/server.js
@@ -14,7 +14,7 @@ Deno.serve((req) => {
// publicフォルダ内にあるファイルを返す
return serveDir(req, {
- fsRoot: 'deno/public',
+ fsRoot: 'public',
urlRoot: '',
showDirListing: true,
enableCors: true,
diff --git a/deno/slide.md b/deno/slide.md
new file mode 100644
index 00000000..bc525eb0
--- /dev/null
+++ b/deno/slide.md
@@ -0,0 +1,883 @@
+---
+marp: true
+theme: default
+paginate: true
+header: 'はじめてのDeno'
+style: |
+ section {
+ font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
+ font-size: 30px;
+ padding: 60px;
+ }
+ section.lead {
+ text-align: center;
+ justify-content: center;
+ }
+ section.lead h1 {
+ font-size: 66px;
+ }
+ section.big {
+ justify-content: center;
+ text-align: center;
+ }
+ section.big p {
+ font-size: 52px;
+ line-height: 1.6;
+ font-weight: bold;
+ }
+ section.chapter {
+ background: #1f2933;
+ color: #fff;
+ justify-content: center;
+ text-align: center;
+ }
+ section.chapter h1 { color: #fff; font-size: 60px; }
+ section.chapter p { color: #9aa5b1; }
+ h1 { color: #1f2933; }
+ h2 { color: #1f2933; border-bottom: 3px solid #4dc0b5; padding-bottom: 12px; }
+ strong { color: #0b8f82; }
+ h1 strong, h2 strong, h3 strong, h4 strong { color: #0b8f82; }
+ code { font-size: 0.9em; }
+ table { font-size: 28px; }
+ .step {
+ display: inline-block;
+ background: #4dc0b5;
+ color: #fff;
+ border-radius: 50%;
+ width: 52px; height: 52px;
+ line-height: 52px; text-align: center;
+ font-weight: bold; margin-right: 12px;
+ }
+ .note {
+ font-size: 24px;
+ color: #616e7c;
+ margin-top: 36px;
+ }
+ /* --- 図用 --- */
+ .row {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 50px;
+ margin-top: 50px;
+ }
+ .box {
+ border: 4px solid #7b8794;
+ border-radius: 16px;
+ padding: 28px 36px;
+ text-align: center;
+ font-size: 30px;
+ font-weight: bold;
+ color: #3e4c59;
+ min-width: 300px;
+ }
+ .box .label {
+ font-size: 22px;
+ font-weight: normal;
+ color: #7b8794;
+ display: block;
+ margin-bottom: 18px;
+ }
+ .engine {
+ background: #4dc0b5;
+ border: none;
+ color: #fff;
+ border-radius: 12px;
+ padding: 22px 28px;
+ font-size: 28px;
+ font-weight: bold;
+ min-width: auto;
+ }
+ .inner {
+ background: #f5f7fa;
+ border-radius: 12px;
+ padding: 18px 24px;
+ font-size: 26px;
+ color: #3e4c59;
+ margin-top: 16px;
+ }
+ .arrow {
+ font-size: 64px;
+ color: #4dc0b5;
+ font-weight: bold;
+ }
+ .dim { opacity: 0.35; }
+ .goal {
+ font-size: 56px;
+ font-weight: bold;
+ color: #0b8f82;
+ margin: 30px 0;
+ }
+ /* --- ブラウザの形 --- */
+ .browser {
+ width: 380px;
+ border: 4px solid #7b8794;
+ border-radius: 14px;
+ overflow: hidden;
+ background: #fff;
+ }
+ .browser .bar {
+ background: #cbd2d9;
+ padding: 12px 16px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+ .browser .dot {
+ width: 13px; height: 13px;
+ border-radius: 50%;
+ background: #9aa5b1;
+ display: inline-block;
+ }
+ .browser .barlabel {
+ margin-left: 14px;
+ font-size: 20px;
+ color: #52606d;
+ }
+ .browser .screen {
+ padding: 26px 22px;
+ min-height: 130px;
+ }
+ /* --- PC（モニター）の形 --- */
+ .pc { width: 380px; }
+ .pc .monitor {
+ border: 4px solid #7b8794;
+ border-radius: 12px;
+ padding: 26px 22px;
+ background: #fff;
+ min-height: 130px;
+ }
+ .pc .stand { width: 70px; height: 18px; background: #7b8794; margin: 0 auto; }
+ .pc .base { width: 180px; height: 12px; background: #7b8794; border-radius: 0 0 8px 8px; margin: 0 auto; }
+ .pc .caption { text-align: center; font-size: 20px; color: #52606d; margin-top: 14px; }
+ .frame-row {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 46px;
+ margin-top: 36px;
+ }
+ .logobox { text-align: center; }
+ .logobox img { width: 150px; height: 150px; }
+ .logobox .caption { font-size: 22px; color: #52606d; margin-top: 10px; }
+ .rtlist { margin-top: 16px; }
+ .rtlist div { font-size: 24px; color: #9aa5b1; line-height: 1.6; }
+ .rtlist div.on { font-size: 30px; color: #0b8f82; font-weight: bold; }
+ .titlelogo { width: 120px; height: 120px; margin-bottom: 10px; }
+ .compact { margin-top: 18px; }
+ .compact .browser, .compact .pc { width: 300px; }
+ .compact .browser .screen, .compact .pc .monitor { min-height: 84px; padding: 18px 16px; }
+ .compact .browser .bar { padding: 9px 12px; }
+ .compact .engine { padding: 14px 18px; font-size: 24px; }
+ .compact .inner { padding: 12px 16px; font-size: 22px; margin-top: 10px; }
+ .compact .arrow { font-size: 48px; }
+ .compact .pc .caption { font-size: 18px; margin-top: 10px; }
+ .frame-row.mid { margin-top: 20px; }
+ .mid .browser, .mid .pc { width: 340px; }
+ .mid .browser .screen, .mid .pc .monitor { min-height: 104px; }
+ .mid .pc .caption { margin-top: 10px; }
+ .note.tight { margin-top: 16px; }
+ .leadin {
+ margin-top: 20px;
+ font-size: 29px;
+ font-weight: bold;
+ color: #0b8f82;
+ }
+ .etclist { margin-top: 16px; }
+ .etclist div {
+ font-size: 22px;
+ color: #3e4c59;
+ line-height: 1.8;
+ }
+ .etclist strong { color: #0b8f82; }
+ .etclist span { color: #7b8794; }
+ .etclist div.etc { color: #9aa5b1; margin-top: 2px; }
+ .ng {
+ font-size: 66px;
+ font-weight: bold;
+ color: #e12d39;
+ }
+ .sidelist { text-align: left; }
+ .sidelist div {
+ font-size: 34px;
+ font-weight: bold;
+ color: #3e4c59;
+ margin: 22px 0;
+ }
+ .sidelist div.on { color: #0b8f82; }
+ .browsers {
+ display: flex;
+ justify-content: center;
+ gap: 28px;
+ margin-top: 70px;
+ }
+ .browsers span {
+ border: 3px solid #cbd2d9;
+ border-radius: 12px;
+ padding: 26px 30px;
+ font-size: 32px;
+ font-weight: bold;
+ color: #3e4c59;
+ }
+ .companies {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px 20px;
+ margin-top: 30px;
+ }
+ .companies span {
+ border: 3px solid #cbd2d9;
+ border-radius: 10px;
+ padding: 14px 26px;
+ font-size: 30px;
+ font-weight: bold;
+ color: #3e4c59;
+ }
+ .cloud { width: 380px; }
+ .cloud .body {
+ border: 4px solid #0b8f82;
+ background: #f0fdfa;
+ border-radius: 60px;
+ padding: 30px 24px;
+ min-height: 100px;
+ text-align: center;
+ }
+ .cloud .caption { text-align: center; font-size: 20px; color: #0b8f82; margin-top: 12px; font-weight: bold; }
+ .frame-row {
+ display: flex; align-items: center; justify-content: center;
+ gap: 46px; margin-top: 30px;
+ }
+ /* --- PCの中に入れる小さいブラウザ --- */
+ .minibrowser {
+ border: 3px solid #9aa5b1;
+ border-radius: 10px;
+ overflow: hidden;
+ background: #fff;
+ margin-top: 14px;
+ }
+ .minibrowser .mbar {
+ background: #cbd2d9;
+ padding: 7px 10px;
+ display: flex; align-items: center; gap: 6px;
+ }
+ .minibrowser .mdot {
+ width: 9px; height: 9px; border-radius: 50%;
+ background: #9aa5b1; display: inline-block;
+ }
+ .minibrowser .mlabel { margin-left: 8px; font-size: 15px; color: #52606d; }
+ .minibrowser .mscreen {
+ padding: 16px 12px;
+ font-size: 22px;
+ color: #3e4c59;
+ text-align: center;
+ font-weight: bold;
+ }
+ .minibrowser .mscreen.ok { color: #0b8f82; }
+ .minibrowser .mscreen.no { color: #a1121f; }
+ /* 左右のモニターの高さを揃える */
+ .eq .pc .monitor { min-height: 208px; }
+ .steps { margin-top: 26px; }
+ .steps div {
+ font-size: 27px;
+ color: #3e4c59;
+ line-height: 2.0;
+ }
+ .steps strong { color: #0b8f82; }
+ .steps span { color: #7b8794; font-size: 24px; }
+ .shot { margin-top: 26px; text-align: center; }
+ .shot img {
+ max-height: 400px;
+ max-width: 100%;
+ border: 3px solid #cbd2d9;
+ border-radius: 10px;
+ }
+ .shot.sm { margin-top: 18px; }
+ .shot.sm img { max-height: 300px; }
+ .shot2 {
+ margin-top: 26px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 30px;
+ }
+ .shot2 img {
+ max-height: 380px;
+ border: 3px solid #cbd2d9;
+ border-radius: 10px;
+ }
+ .warn {
+ margin-top: 26px;
+ background: #fffbea;
+ border-left: 8px solid #f0b429;
+ padding: 18px 24px;
+ font-size: 25px;
+ color: #3e4c59;
+ }
+---
+
+
+
+
+
+
+
+# はじめてのDeno
+
+---
+
+## 今日のゴール
+
+
+ Ctrl + C で止めたら終わり。PCの電源を切っても終わりです
+
+deno.com/deploy →「Try Deno Deploy」を押します
+
+ 
+
+
+
+server.js が文言を作って返すので、あちらのPCで動かしてもらう必要があります
+
+server.js と入力してください。
+
+