😘
ハリーポッターAPIとNext.jsを使って簡単な図鑑を作ってみた😎
はじめに
初めまして。2023年4月に社会人かつエンジニアになりました、てるし〜と申します。
仲良くしてください😎
今回はハリーポッタAPIとNext.jsで図鑑を作ってみましたのでそれを記事にしようと思います。
今後も機能を追加していく予定ですが、大枠はできたので投稿します!
ソースコードについては長くなるのでリポジトリに直接見に行ってください!
何を言っているのかわからない部分があったりつまらないと思うことがあると思います。それでもいいよって方はゆっくりしていってください。
作成したもの
作成したものは以下のものです。
ソースコードは以下です。ハリーポッターAPIとは
ハリーポッタAPIはハリーポッターのキャラクタの名前や画像等のデータが格納されているAPIです。
私自身全てを見たわけではないですが、全てのキャラクターや名前ををsearchパラメータで与えてあげるとそのその名前に関係するキャラクタが取得できるようです。
- リンク( https://potterapi-fedeperin.vercel.app/en/characters ) で叩くとキャラクター全てのデータを取得できます。
- リンク( https://potterapi-fedeperin.vercel.app/es/characters?search=Harry James Potter )と一番後ろのsearchパラメータに名前を入れるて叩くことでそののキャラクタの情報を取得できまます。ちなみにこの上記URLはハリーです。
使用した技術
全体のディレクトリ構成
.
├── 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.tsximport 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で図鑑を作ってみたという紹介記事を書いてきました。特にディレクトリ構成を中心に書いていきました。私自身もディレクトリ構成はじっくり考えながらこのアプリを作りました。ディレクトリ構成を考えるのは開発の中で重要な工程になると思います。バグが見つかった時の修正のや機能追加の時の時間の短縮等にとても役立つと思います。
今後も機能をつけたりするのでディレクトリ構成やファイル構成などを変わることもあるかもしれませんがそこはご了承ください。
最後まで見ていただきありがとうございます😄
Discussion