こんにちは、白澤です。 最近、事例紹介ページにカテゴリーで絞り込む機能を実装しました。 そもそも事例紹介ページがどうやってできているか、若干特殊な作りをしているので今回は紹介できればと思います。 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合同会社のブログを開始します！

ブログを開始します！

PE-BANK 様より、当社代表 白澤のエンジニアインタビュー記事を掲載頂きました。 記事はこちらからご確認いただけます: <a href="https://note.com/pebank/n/n8cb60193083e" target="_blank" rel="noopener noreferrer">【エンジニアインタビュー⑧】クラウドファンディングで渡米したアメリカで刺激を受け高校在学時に起業　大船渡で活躍する若手エンジニア</a>

PE-BANK 様より、当社代表のエンジニアインタビュー記事を掲載頂きました

【掲載情報】PE-BANK エンジニアインタビュー

本日、2023年10月1日より「適格請求書等保存方式（インボイス制度）」が導入されるに伴い、当社では以下のように対応を行いましたのでお知らせいたします。 <h2 id="hf89a392c9e">適格請求書発行事業者登録番号</h2>当社は、2023年10月1日に適格請求書発行事業者として登録を行いました。 登録番号は「T5400003002601」です。 登録情報につきましては、国税庁の「<a href="https://www.invoice-kohyo.nta.go.jp/regno-search/detail?selRegNo=5400003002601" target="_blank" rel="noopener noreferrer">適格請求書発行事業者公表サイト</a>」 からご覧いただくことも可能です。 インボイス制度導入以降の帳票系につきましては、インボイス対応済みの帳票を発行させていただきます。 <h2 id="ha09a4e3ef3">開発物について</h2>当社が開発する販売管理システム、業務システム等、各種帳票を出力できるシステムにつきましては、インボイス対応済みの帳票を出力することが可能となっております。

適格請求書等保存方式（インボイス制度）導入に伴う当社の対応について

誠に勝手ながら、下記期間は臨時休業とさせていただきます。 何卒ご理解のほどよろしくお願いいたします。 期間 2023年5月19日（金）〜2023年5月22日（月）

2023年5月19日（金）〜22日（月）まで休業致します。

臨時休業のお知らせ

<a href="https://www.novalumo.co.jp/case-study" target="_blank" rel="noopener noreferrer">事例紹介ページ</a>を公開しました。 当社にて制作・開発したシステムやWebサイトなどを掲載しています。 また、掲載されていないものでも個別にご紹介できるものもございますので、 お気軽に<a href="https://www.novalumo.co.jp/contact" target="_blank" rel="noopener noreferrer">お問い合わせ</a>ください。

Novalumoが制作に携わった事例をいくつかご紹介しています

事例紹介ページを公開しました

岩手日報様より、会社設立に関する記事を掲載いただきました。 岩手日報: <a href="https://www.iwate-np.co.jp/article/2020/5/20/78349" target="_blank" rel="noopener noreferrer"><s>https://www.iwate-np.co.jp/article/2020/5/20/78349</s></a> （公開終了） <img src="https://images.microcms-assets.io/assets/f664ca91739d42b3a72b5b9bf68cba91/345fd5fa3f114e47af27c7538865da3c/20200520-2-1.jpg" alt=""> <img src="https://images.microcms-assets.io/assets/f664ca91739d42b3a72b5b9bf68cba91/7af85670022b44f08cf0343c124cac64/20200520-2-2.jpg" alt=""> ※岩手日報様より掲載可能な画像を提供して頂きました。

Make It Better, Together.

News