Deploy a Qwik App to Cloudflare.

この抜粋の内容は次のとおりです。

- Qwik について
- 環境構築
- Project 構成
- 他の Framework との比較
- Summary

さらに詳しく見たい方は読み続けてください。

---

2023年8月4回目です。

このメモは、Qwik[^3] についてです。

[^3]: https://qwik.builder.io/

Qwik といえば、「Resumable vs. Hydration」

https://www.builder.io/blog/hydration-is-pure-overhead

> Yes, Qwik requires a different way of thinking and designing your application, but the result is near zero initial JavaScript with progressive JavaScript download based on user interactions.[^7]
> 
> 確かに、Qwikは異なる考え方とアプリケーションの設計を必要としますが、その結果、ユーザーのインタラクションに基づいてプログレッシブJavaScriptをダウンロードすることで、初期のJavaScriptはほぼゼロになります。

[^7]: https://qwik.builder.io/docs/concepts/think-qwik/

https://twitter.com/QwikDev/status/1521202882124521472

今回、Qwik と Svelte、Remix の違いを確認します。

題材とする実装は、簡易のポートフォリオ サイトです。

これまで試した Remix、Svelte に続いて Qwik です。

今回のサイトとコードはこちらです。

https://my-portfolio-qwik.pages.dev/

https://github.com/danny-yamamoto/my-portfolio-qwik

## Qwik について
- 「大規模な」 Web アプリケーションの配信に適しています。
   - Qwik は、初期ロードにおける JavaScript のサイズが application の大きさに依存せず変わりません。
- Qwik の開発元は、builder.io です。
   - builder.io の headless CMS は、ドラッグ＆ドロップでページやコンテンツを作成できるビジュアルエディタを備えています。
   - Qwik は、この headless CMS を支える技術です。monetize を目的に Qwik を公開しているわけではない？
   - Vercel / Next.js とは立ち位置が異なります。
   - Shopify / Remix の関係に近いです。[^1]
- Cloudflare や Cloud Run に deploy できます。[^2]

[^1]: https://remix.run/blog/remixing-shopify
[^2]: https://qwik.builder.io/docs/deployments/gcp-cloud-run/

## 環境構築
- `Empty App` を選択しています。

:::note info
- Qwik の default は、`TypeScript` です。
:::

<details><summary>npm create qwik@latest</summary>

```bash
┌  Let's create a  Qwik App  ✨ (v1.2.7)
│
◇  Where would you like to create your new project? (Use '.' or './' for current directory)
│  ./my-portfolio-qwik
│
●  Creating new project in  /home/yamamoto_daisuke/qwik/qwik-app  ... 🐇
│
◇  Select a starter
│  Empty App
│
◇  Would you like to install npm dependencies?
│  No
│
◇  Initialize a new git repository?
│  No
│
◇  App Created 🐰
│
○  Result ────────────────────────────────────────────────╮
│                                                         │
│  🦄  Success!  Project created in qwik-app directory    │
│                                                         │
│  🤍 Integrations? Add Netlify, Cloudflare, Tailwind...  │
│     npm run qwik add                                    │
│                                                         │
│  📄 Relevant docs:                                      │
│     https://qwik.builder.io/docs/getting-started/       │
│                                                         │
│  💬 Questions? Start the conversation at:               │
│     https://qwik.builder.io/chat                        │
│     https://twitter.com/QwikDev                         │
│                                                         │
│  👀 Presentations, Podcasts and Videos:                 │
│     https://qwik.builder.io/media/                      │
│                                                         │
│  🐰 Next steps:                                         │
│     cd qwik-app                                         │
│     npm install                                         │
│     npm start                                           │
│                                                         │
│                                                         │
├─────────────────────────────────────────────────────────╯
│
└  Happy coding! 🐇

yamamoto_daisuke@instance-1:~/qwik$
```

</details>

## Project 構成

<details><summary>Project Structure</summary>

```bash
.
├── adapters
│   └── cloudflare-pages
│       └── vite.config.ts
├── package.json
├── package-lock.json
├── public
│   ├── favicon.svg                    # edit
│   ├── _headers
│   ├── manifest.json
│   ├── _redirects
│   └── robots.txt
├── README.md
├── server
│   ├── package.json
│   ├── @qwik-city-not-found-paths.js
│   └── @qwik-city-static-paths.js
├── src
│   ├── components
│   │   ├── footer                     # add
│   │   │   ├── footer.module.css      # add
│   │   │   └── footer.tsx             # add
│   │   ├── portfolio                  # add
│   │   │   └── portfolio.tsx          # add
│   │   └── router-head
│   │       └── router-head.tsx
│   ├── entry.cloudflare-pages.tsx
│   ├── entry.dev.tsx
│   ├── entry.preview.tsx
│   ├── entry.ssr.tsx
│   ├── global.css
│   ├── root.tsx
│   └── routes
│       ├── index.tsx                  # edit
│       ├── layout.tsx                 # edit
│       ├── service-worker.ts
│       └── styles.css
├── tsconfig.json
└── vite.config.ts
```

</details>


## 他の Framework との比較
- Qwik は、React の JSX のような書き方です。

https://github.com/danny-yamamoto/my-portfolio-qwik/blob/c81b17c9d57c550d7c3f91523c70edd21da520ba/src/components/portfolio/portfolio.tsx#L5-L55

- Svelte/SvelteKit のように、Qwik/Qwik City で構成されます。
- Chrome の Largest Contentful Paint (LCP)の結果は、以下のとおりです。コード量の大きなプロダクションのコードで計測すると差が顕著に出るのかもしれません。
   - Remix: `0.65s`
   - Svelte: `0.62s`
   - Qwik: `0.36s`
![スクリーンショット 2023-08-20 15.15.25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/db8a1125-8fe9-9254-f17b-0677eeff852c.jpeg)

- HTML コメントで marking している点が他の framework と違います。
   - Qwik 特有のシリアライズです。
   - 開発者として意識する部分ではありません。rendering 時に marking されます。Chrome のデベロッパーツールで要素を見ると分かります。
![スクリーンショット 2023-08-20 15.11.47.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569971/10fdb435-187a-b29f-24e6-223728f90c31.jpeg)

## Summary
- Qwik について書きました。
- Svelte、Remix と同様に Cloudflare Pages に deploy しました。
- frontend の検証は終わりにして、`Go 1.21`[^4] の検証に移ろうと思いましたが、`VanJS`[^5] というものがあることを最近知りました。💦
- `VanJS` は、Google の senior staff software engineer が作っている framework です。今ある様々な JavaScript Framework にある壁を取り除くことを目的にしているそうです。
- 気になるので、もう一軒（`VanJS`）寄ってから、`Go 1.21` に取り掛かります。

[^4]: https://tip.golang.org/doc/go1.21
[^5]: https://vanjs.org/

この投稿をみて何か得られた方は、いいね ❤️ をお願いします。

門外漢の Software Engineer（Site Reliability）が Frontend について考察する理由は、サービスの向上です。

弊社の既存のメンバーは、常に目の前の課題・技術にとらわれます。今であれば React。

しかし、ぼくたち Engineer が存在する理由は、React を使うことが目的ではなく、「最高の買い物体験を提供すること」です。

ビジネス・技術的な選択肢として、何が最高なのかを検討する必要があります。

弊社の CMS[^6] も検討が必要な状況です。

[^6]: https://www.trial-net.co.jp/mag/

それでは、また別の話でお会いしましょう。👋