MBP(はてな)

MacBook Pro,iPhone Xs,React

DenoのWebフレームワーク Fresh

Deno の Web フレームワーク Fresh チュートリアル

$ curl -fsSL https://deno.land/install.sh | s
$ deno upgrade
$ deno --version

$ cd github
$ deno run -A --no-check https://raw.githubusercontent.com/lucacasonato/fresh/main/init.ts deno-fresh
$ cd deno-fresh
$ deno task start

http://localhost:8000


$ nvim routes/index.tsx ($ vimだとなぜかtsxの表示が遅い。速くなった2022/8/10)
編集して保存すると、画面が更新される

$ vi .gitignoreして追加。
deno/.gitignore at main · denoland/deno · GitHub

GitHubリポジトリを作成して、push
GitHub - hiroyuki12/deno-fresh


Deno Deploy (先にGitHubリポジトリを作成してpushしておく)
https://hiroyuki12-deno-fresh.deno.dev
新しい CDN Edge Worker, Deno Deploy について
Fresh - Deno の 次世代 Web フレームワーク | 豆蔵デベロッパーサイト
Deno Deploy - Overview
更新して、$ git pushするとDeploy先も更新される


GitHubAPIでユーザー情報を取得
アバター画像と、idを表示できた。
Fetching data | fresh docs
GitHub - denoland/fresh: The next-gen web framework.
https://api.github.com/users/denoland
ユーザー名が変数だと表示されなかったのでユーザー名(denoland)も入力
const resp = await fetch(`https://api.github.com/users/denoland`);
Fetch data | Manual | Deno


console.log(変数名);でTerminalに出力できる


Qiita APIで1つ目の記事のタイトルを表示
配列なのでUserに[]をつける
QiitaのAPIを叩いて記事を取得して表示するサンプルアプリを書いてみた その4(Xcode9.3&Swift4対応、Codable対応、標準API切り替え対応) - Qiita

const user: [User] = await resp.json();
return ctx.render(user[0]);


PWA
Building A Progressive Web App (PWA) in Deno Fresh - YouTube





Fresh - Deno の 次世代 Web フレームワーク | 豆蔵デベロッパーサイト