こんにちは、白澤です。 最近、事例紹介ページにカテゴリーで絞り込む機能を実装しました。 そもそも事例紹介ページがどうやってできているか、若干特殊な作りをしているので今回は紹介できればと思います。 2023年7月18日現在、コーポレートサイトは Next.js で開発されているのですが、その中でそもそも事例紹介のデータを現状どのように管理しているかというと、data というディレクトリの中に cases.ts というファイルを作って、その中に JSON のような感じで Object の配列を格納する感じにしています。 なぜ cases.ts のように JSON ではなくしているかというと、型定義をしっかりしたいからですね。JSON でもできないことはないと思いますが、こうした方が個人的に手っ取り早かった。 ちなみに今後は cases.ts を import ではなく API 経由でデータを取得してあげるようにしたいですね。これは事例データが大量になってきたら考えることにします。 あとは export された cases.ts のデータを SG で生成するだけですね。 <pre><code>export const getStaticPaths = async () =&gt; {
 const paths = CASES.map((c) =&gt; `/case-study/${c.slug}`);
 return { paths, fallback: false };
};

export const getStaticProps = async (context: any) =&gt; {
 const slug = context.params.slug;
 const data = CASES.find((c) =&gt; c.slug === slug);
 return {
 props: {
 data,
 },
 };
};</code></pre> 個別ページはこういうイメージです。 本題の一覧ページですが、この cases.ts の配列を filter してあげるだけです。 まず、どのカテゴリーが選択されているかを useState で管理してあげます。初期値は useRouter().query.category とします。 あとはその state で filter する条件をその都度変更しているだけです。だいぶシンプルですね。 以上、今回はちょっとした開発の裏側のご紹介でした。Next.js は、最近 App Router なるものができたので、こっちに移行したいなという気持ちがありますが、それなりに変更箇所が多いので対応はだいぶ先になりそうですね。。。

事例紹介ページにカテゴリーで絞り込む機能を実装してみました。

事例紹介にカテゴリーで絞る機能を追加しました！

こんにちは！Novalumo（ノバルーモ）合同会社 代表の白澤です。 本日よりブログを開始することになりました！ この会社について幅広く知ってもらいたい！といった理由でのスタートになります。 というのも、白澤の同級生を含む多くの方から 『何をしている会社なのかよくわからない』 という話をよくもらいます。確かに。 このITという業種、何をしているかというのがわかりにくかったりします。 GAFAMのような大きな会社であれば 「あなたが使ったことのある〇〇というサービス・アプリを運営・提供している会社だよ」 みたいに説明をすることができますが、 残念ながら現状はこの会社で表立って提供しているサービスがないのが実態です。 なので、舞台裏ってほどではないですが、活動報告がてらの更新になると思います。 特に決まったカテゴリーの話をするわけではなく、 結構幅広く記事を書いていく予定ですので、お暇な時にでも読んでもらえると嬉しいです！ こう見えて白澤、ブログは小学５年の時から書いていたんですね。アメブロで。 ドラマの感想書いたりとか趣味の話とかして、それなりにPVもありましたが。。。 最近は特に文章を書くこともなくなり、割と作文からも逃げてきたこの２年間？で、 正直なところ結構文章を書くのが苦になっているところもあったので、リハビリにもなるかなと。 ニュースリリースだったり会社の重要な内容は文章の体裁は整えますが、 ブログは割と自由に書こうかなと思っています。 なんとなく、長文が書けるTwitterのような状態になりそう...ｗ というわけで、今後ともよろしくお願いします！

Novalumo合同会社のブログを開始します！

Blog

事例紹介にカテゴリーで絞る機能を追加しました！

ブログを開始します！