## 前提条件
[[Deno]]と[[TypeScript]]がインストールされている。
```console
$ deno --version
deno 1.23.3 (release, x86_64-pc-windows-msvc)
v8 10.4.132.8
typescript 4.7.4
```
## プロジェクト作成
Getting startedに従う。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://fresh.deno.dev/favicon.ico" />
<span class="link-card-v2-site-name">fresh.deno.dev</span>
</div>
<div class="link-card-v2-title">
Fresh - The simple, approachable, productive web framework.
</div>
<div class="link-card-v2-content">
Fresh features just-in-time edge rendering, island based interactivity, and zero-configuration TypeScript suppor ...
</div>
<img class="link-card-v2-image" src="https://fresh.deno.dev/og-image.webp?__frsh_c=2c36becff09efdcb6ffd9f482200fbf6bb88735d" />
<a href="https://fresh.deno.dev/#getting-started"></a>
</div>
```console
deno run -A -r https://fresh.deno.dev fresh-sandbox
```
[[Twind]]を使うか聞かれるのでyes。
## 起動
```console
cd fresh-sandbox
deno task start
```
`localhost:8000`にアクセスするとページが表示される。
![[Pasted image 20220710215834.png]]
[[tsx]]ファイルを変更すると自動でリロードされる。ラグが2～3秒あり、[[Vite]]ほどのサクサク感ではない。コードが増えたときにラグがどこまで増えるかは気になる。
## ルーティング
`routes`ディレクトリ配下がルーティングされる。
- View
- `localhost/hoge` で `[name].tsx`に対応 (`name = hoge`)
- API
- `localhost:8000/api/joke`で`api/joke.ts`に対応
## [[IntelliJ IDEA]]で開く
当たり前だが、プラグインなしでは動かなかった。[[Deno(IntelliJ)]]が必要。
> [!caution]
> 定義へ移動などができない(固まる)場合は[[IntelliJ IDEA]]を再起動したらなおった。
ただ、[[tsx]]ファイル内で[[Preact]]の型定義が`any`になってしまう。
```ts
import { useState } from "preact/hooks";
```
これで開発はキツそう... [[Deno(IntelliJ)]]の評価も高くないので[[VSCode]]も試す。
## [[VSCode]]で開く
もう一度プロジェクト作成をしなおす。[[VSCode]]を使うか? と質問されるところでyes。
```console
deno run -A -r https://fresh.deno.dev fresh-sandbox
```
[[IntelliJ IDEA]]と同様に、[[Deno(VSCode)]]が必要。[[VSCode]]だと`useState`も完璧に候補や型定義が補完される。
## [[VSCode]]と[[IntelliJ IDEA]]の違い
定義へ移動したときのファイルが異なるようだ。
- [[IntelliJ IDEA]]では `
[email protected]/deno/hooks.js` を見る
- [[VSCode]]では `
[email protected]/hooks/src/index.d.ts` を見る
現状、[[Fresh]]を[[IntelliJ IDEA]]で使う必要性はないので深追いせずここまでとしておく。
## 感想
- 😁 30秒ほどでUI/APIを兼ね備えた[[TypeScript]]プロジェクトが作れるのは強い
- 😃 久々に[[React]]の書き方をしたが、そんな違和感もない (正確には[[Preact]]だが...)
- 😃 [[Tailwind CSS]]は普段使わないが、[[JSX]]にガンガン書けるので便利そう
- 😃 ここ2年くらい[[Deno]]試しては苦労ばかりしたけど、今回は楽だった
- 😃 [[SSR]]の経験ほぼないので、機会があれば使ってみたい
- 😃 [[Deno Deploy]]で簡単にデプロイできそうなので、プライベートで試してみたい
- 😅 [[IntelliJ IDEA]]でも書けるようになってほしい