😘

ハリーポッターAPIとNext.jsを使って簡単な図鑑を作ってみた😎

2024/03/20に公開

Next.js

tech

はじめに

初めまして。2023年4月に社会人かつエンジニアになりました、てるし〜と申します。
仲良くしてください😎

今回はハリーポッタAPIとNext.jsで図鑑を作ってみましたのでそれを記事にしようと思います。
今後も機能を追加していく予定ですが、大枠はできたので投稿します！

ソースコードについては長くなるのでリポジトリに直接見に行ってください！

何を言っているのかわからない部分があったりつまらないと思うことがあると思います。それでもいいよって方はゆっくりしていってください。

作成したもの

作成したものは以下のものです。
https://hp-app-zu3u.vercel.app/
ソースコードは以下です。

ハリーポッターAPIとは

ハリーポッタAPIはハリーポッターのキャラクタの名前や画像等のデータが格納されているAPIです。

私自身全てを見たわけではないですが、全てのキャラクターや名前ををsearchパラメータで与えてあげるとそのその名前に関係するキャラクタが取得できるようです。

リンク( https://potterapi-fedeperin.vercel.app/en/characters ) で叩くとキャラクター全てのデータを取得できます。
リンク( https://potterapi-fedeperin.vercel.app/es/characters?search=Harry James Potter )と一番後ろのsearchパラメータに名前を入れるて叩くことでそののキャラクタの情報を取得できまます。ちなみにこの上記URLはハリーです。

使用した技術

https://nextjs.org/
https://vanilla-extract.style/

全体のディレクトリ構成

.
├── src
│   ├── app
│   │   ├── clientSide
│   │   │   ├── characterDetail
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx
│   │   ├── favicon.ico
│   │   ├── global.css.ts
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── serverSide
│   │       ├── [id]
│   │       │   └── page.tsx
│   │       └── page.tsx
│   ├── assets
│   │   └── backgroundImage.png
│   ├── components
│   │   ├── layout
│   │   │   ├── characterDetailTemplate
│   │   │   │   ├── characterDetailTemplate.tsx
│   │   │   │   └── style.css.ts
│   │   │   ├── charactersTemplate
│   │   │   │   ├── CharactersTemplate.tsx
│   │   │   │   ├── index.ts
│   │   │   │   └── style.css.ts
│   │   │   └── loading
│   │   │       ├── index.ts
│   │   │       ├── loading.tsx
│   │   │       └── style.css.ts
│   │   └── linkButton
│   │       ├── data.ts
│   │       ├── index.ts
│   │       ├── linkButton.tsx
│   │       ├── style.css.ts
│   │       └── type.ts
│   ├── model
│   │   ├── fetcher
│   │   │   ├── character
│   │   │   │   └── character.ts
│   │   │   ├── characters
│   │   │   │   └── characters.ts
│   │   │   ├── index.ts
│   │   │   └── types.ts
│   │   └── hooks
│   │       ├── index.ts
│   │       ├── useCharacterDetail.ts
│   │       └── useCharacters.ts
│   ├── stories
│   │   └── linkButton.stories.ts
│   └── view
│       ├── RCC
│       │   ├── RCC.tsx
│       │   └── RCCCharacterDetail
│       │       └── RCCCharacterDetail.tsx
│       ├── RSC
│       │   ├── RSC.tsx
│       │   └── RSCCharacterDetail
│       │       └── RSCCharacter.tsx
│       └── top
│           ├── style.css.ts
│           └── top.tsx
└── tsconfig.json

ディレクトリ構成は上記のようにしました。

app
- ここはNext.jsのプロジェクトを作るときに自動で作られています
- app/page.tsxが最初のページの画面のソースコードになります
- ルーティングをするにはapp/[path名]/page.tsxを作成します
- 今回はpage.tsxにはコードの詳細はかかずviewのコンポーネントを呼び出す形にしてあります
- 一例を下に記載しておきます
app/page.tsx
```
    import Top from "@/view/top/top"
    export default function Home() {
        return <Top />
    }
```
assets
- ここは主に画像を保存しています
- 最初のページのハリーポッタのロゴを保存しています
components
- ここは画面で使用するの部品(component)を格納しています
- 今回はpart1とpart2で使用する共通の画面レイアウトをcomponents/layoutの下に格納しておりそれ以外はcomponentsの下にソースコードを格納しています
model
- ここではAPIを叩く処理等のソースコードを格納しています
- APIを叩く部分はmodel/fetcherに格納してあります
- hooksはswrを用いたカスタムhookのソースコードを格納してあります
stories
- ここはstorybookのstoryを格納しています
- storybookをinstallするときに自動で作成されます
view
- ここは画面全体のコンポーネントのソースコードを格納しています
その他工夫したところなどなど
- ファイルもデータを格納するファイル、型定義をするファイル、装飾ファイルなど役割ごとに分けました
- ディレクトリやファイルを役割ごとに分けることでそのファイルは何の役割を持っているのかの見分けが個人的には付けやすかったです
- 今回はロジックがそこまでなかったので分けませんでしたが案件によってはロジックが多くコンポーネント名.logic.tsxとコンポーネント名.view.tsxなどlogicとviewに分けることもあります

ソースコード

ソースコードの説明は長くなってしまうので省略します。実際の細かい処理等が気になる方はリポジトリを見に行ってください。

まとめ

ハリーポッターAPIとNext.jsで図鑑を作ってみたという紹介記事を書いてきました。特にディレクトリ構成を中心に書いていきました。私自身もディレクトリ構成はじっくり考えながらこのアプリを作りました。ディレクトリ構成を考えるのは開発の中で重要な工程になると思います。バグが見つかった時の修正のや機能追加の時の時間の短縮等にとても役立つと思います。

今後も機能をつけたりするのでディレクトリ構成やファイル構成などを変わることもあるかもしれませんがそこはご了承ください。

最後まで見ていただきありがとうございます😄