## 前提条件
[[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">
<div class="link-card-header">
<img src="https://fresh.deno.dev/favicon.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">fresh.deno.dev</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">fresh - The next-gen web framework.</p>
</div>
<div class="link-card-description">
Just in time edge rendering, island based interactivity, and no configuration TypeScript support usi...
</div>
</div>
<img src="https://fresh.deno.dev/home-og.png?__frsh_c=q6f2cvd4157g" class="link-card-image" />
</div>
<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]]でも書けるようになってほしい