😏

ZennのPWAをSvelteを学習しながら作った話

2022/03/23に公開

きっかけ

最近Reactばかり使ってて、新しいフレームワークを触ってみたいなと思い、元々VueからReactに乗り換えた身なので、今度は開発者に愛されているフレームワークランキング1位のSvelteを試す事にした

普段 dev.to(PWA版)を見ることが多く、自分の興味のあるトピックをフォローしておいて、関連の記事や技術を常にチェックできるところがとても気に入っていた。

Zennもとても使いやすくて見やすいが、トピックにフォローできないのと、トップページを開くとお勧めがずらっと並んでいて、自分が見たいものだけ見れたらなとずっと思っていた。

Stack

  1. Svelte + TS
  2. Express + TS
  3. Vercel
  4. TailwindCSS
  5. Vite

成果物👇
https://zenn-pwa.vercel.app/

機能

興味のあるトピックを予め設定しておいて、興味のあるトピックの記事だけ一覧で表示する。

クライアント

一ページだけなので、特にSPAルートなどの実装はしていない、リンク飛ばすだけなので、PWA化してインストールできるようにしているが、キャッシュあたりは全く触っていない。

スマホ利用を想定して作っているので、パソコン画面の場合はちょっと見栄えが悪いかもしれない。

サーバー

クライアントだけでいいかなと思ったが、CORSに引っかかってしまった、サーバーでZennのAPI
(非公式)にリクエストを投げてそのままクライアントに返す感じで作っている。

その他

自分の中ではSvelteはVueより学習コストが低く書きやすい印象だった、ただやはりTSとの相性はReactにはかなわない。

Zennの公式のAPIが公開されたら色々遊べそう😁

Discussion