こんにちは、AIと個人開発をテーマに活動しているK（@kdevelopk）です
はじめに
技術調査や勉強会の資料作成をしているとき、「他のエンジニアはどういう構成でスライドを書いているんだろう？」「この技術のわかりやすい図解はないかな？」 と、参考資料を探し回ることはありませんか？
私はあります。Google検索だと古いPDFがヒットしたり、ブログ記事ばかりが出てきて、肝心の「スライド資料」になかなか辿り着けないことが多々ありました。
そう思い、エンジニア向けの技術スライドだけをサクッと横断検索できるWebサイトを開発しました。
まだ機能はシンプルですが、基本的な検索動作は快適に動くようになったので、サイトの公開とあわせて技術的な知見を共有します。
作ったもの
Tech Deck
https://tech-slides-collection.vercel.app/
主な機能
- 技術スライドの横断検索: Speaker DeckやSlideShareなど、複数のプラットフォームに散らばるスライドを一括検索
- 高速なレスポンス: 入力から結果表示までをストレスなく実行
- タグ/カテゴリ絞り込み: [※もしあれば] 特定の技術スタックやイベント名での絞り込み
背景と動機
Speaker DeckやSlideShareは素晴らしいプラットフォームですが、それぞれ個別に検索する必要があったり、最新の技術トレンドを追うのに少し手間がかかったりするのが課題でした。
「勉強会の登壇前」や「新技術のキャッチアップ」の際に、サクッと良質なスライドだけが見つかる場所が欲しかったのです。
そこで、モダンなフロントエンド技術の学習も兼ねて、個人開発で作ってみることにしました。
技術的なポイント
今回の開発でポイントとなったのは以下の点です。
1. Next.js (App Router) による高速な動作
フロントエンドには Next.js を採用し、Vercelにデプロイしています。
App Routerを活用することで、サーバーコンポーネントとクライアントコンポーネントを適切に分離し、初期表示の速度とSEOパフォーマンスの両立を目指しました。
// 検索処理のイメージ（実際のコードとは異なる場合があります）
import { searchSlides } from '@/lib/api';
export default async function SearchPage({ searchParams }) {
const query = searchParams.q;
const slides = await searchSlides(query);
return (
<div className="grid grid-cols-3 gap-4">
{slides.map((slide) => (
<SlideCard key={slide.id} data={slide} />
))}
</div>
);
}
2. シンプルなUI設計
「検索すること」に特化させるため、UIは極力シンプルにしました。
余計なアニメーションや複雑なナビゲーションは排除し、エンジニアが欲しい情報（タイトル、サムネイル、投稿日）がひと目で分かるカード型のレイアウトを採用しています。[Tailwind CSS] を使用してスピーディにスタイルを構築しました。
3. [※独自の工夫があれば追記] 検索APIの統合
各プラットフォームのAPIやRSSを活用し、効率よくデータを収集・正規化する処理をバックエンド（Server Actions / API Routes）で実装しています。
CORSの問題やAPIレート制限を考慮しつつ、ユーザーには待たせないようなキャッシュ戦略も今後強化していく予定です。
使い方
面倒な登録は不要です。以下のURLにアクセスして、気になるキーワード（例: React, AWS, 個人開発）を入力するだけです。
URL: https://tech-slides-collection.vercel.app/
今後の展望 (TODO)
現在はまだリリース直後のため、以下の機能実装や改善を予定しています。
- 検索対象サイトの拡充: 現在対応していないプラットフォームの追加
- お気に入り機能: 気になったスライドを保存できる機能
- 検索精度の向上: より関連性の高いスライドが上位に来るようなアルゴリズム改善
- OGP画像の自動生成: シェアしたくなるようなリッチな表示
おわりに
あくまで自分用に「こんなのあったら便利だな」と思って作り始めたものですが、もし同じような「良質なスライドを探すのに疲れた」というエンジニアの方がいれば、ぜひ使ってみてください。
フィードバックや「こんな機能が欲しい！」というリクエストもお待ちしています。