Web サイトといっても 1ページで完結するので大したものではないんですが。
技術関連の情報は、個人 Blog、Blog サービス、あるいはテック系コミュニティで日々更新されていて、それらを集めたいと思ったときに使うツールとしては RSS リーダー （「RSS リーダー」 ってもう死語的な扱いなんですかね...... ちなみに私はここ数年 Feedly を愛用） とか、Twitter とか、はてなブックマークのようなソーシャルブックマークサービスなどを利用するケースが多いと思います。
もちろん、それで十分便利なんですが、個人的にパッと一覧で今人気の技術系記事をチェックする方法が欲しいなと思い立ちまして、ちょうど Next.js + Vercel を使った自動デプロイの練習とかもしたかったので、お勉強がてらに 「TechDeck」 という Web サイトを作ってみました。
TechDeck とは？
TechDeck は、フロントエンド開発に関連する技術系記事をまとめてチェックできるエンジニア向けの Web サイト、というか Web ページです。
下記の Web サイト、及びトピックスから人気の記事をひとまとめにして表示しています。記事の内容は 30分に 1回程度更新されるようになっています。
- Zenn から 「Tech」 カテゴリに分類される人気記事
- Qiita から過去 10 日間の人気記事 （20 ストック以上されている記事）
- はてなブックマーク 「テクノロジー」 カテゴリの人気記事
- DEV Community から、フロントエンド開発に関連しそうなタグごとの人気記事
仕事しながらブラウザのタブで開きっぱなしにして...... といった使い方を想定していて、スマートフォンなど小さい画面で閲覧することはあまり考えていないため、画面が小さいとちょっと使いにくいかもしれません。あとたくさんの記事が 1ページに表示されるため重いかも。
使っている技術
- JavaScript フレームワークとしては Next.js を使用して、SSG （Static Site Generation / 静的サイト生成）
- 見た目は名前からも容易に想像つくと思いますが、TweetDeck リスペクト、というか劣化版パクリ。CSS フレームワークには Tailwind CSS を使用
- 記事データの取得方法は下記の通り
- DEV Community に関しては Bata ながら API が提供されていますのでそちらを使用 （DEV API (beta)）
- Qiita も API が提供されていますので、そちらを使用 （Qiita API v2）
- Zenn は API はないものの、トレンド記事のフィードが提供されているので、そちらを使おうと思ったんですが、もう少し柔軟にデータを取得したかったので、フィードを Feedly に登録した上で Feedly API 経由で （The Feedly API）
- はてなブックマークのホットエントリーに関しても、Zenn と同じ手法で
- ホスティングは Vercel を利用。GitHub Actions を使用した定期デプロイで、30分おきにデータを更新するように
- Vercel のカスタムドメイン機能を使用して、取得したドメインを割り当て
課題とか今後とか
作ろうかなと思い立って、ひとまず見た目適当だけど動く状態までするのに約 1.5日くらい、そこから見た目整えたりするのでもう 1.5日くらいという感じで、仕事の合間を縫って 3日くらいで作ったのでちょっとまだ雑な感じはありますが、ひとまず公開しちゃおうかなということでこの記事を書いています。
API 叩いてデータ取得して、Vercel にデプロイみたいな部分は別にそれ程難しいことをしているわけではないのでそんなに時間はかかっていないんですが、素直に画面上に必要な全データ取ってきて SSG しちゃうと、レンダリングされる DOM の数がとんでもないことになって非常にパフォーマンスが悪いため、遅延読み込みやってみたりと色々試してみましたがあんまり納得いく感じにはなっていません。この辺は課題。
といっても別にこの Web サイトでサービスを立ち上げようとかいう話ではないので気が向いたらちょこちょこ手を入れていこうかなくらいの感じですけども。
あとはロゴとかも時間がなくて作れていないので、この辺はおいおい作ってみようかなと思っております。
ちょうど Blog 書くネタがなくて困っていたので、ここから何回かに分けて、実際にどういう感じで記事データ取得したかとか、GitHub Actions を使用した Vercel への定期デプロイ手順なんかを簡単にまとめていこうかなと思っております。
