はじめに
Reactを使ったWebアプリを開発することにしたので、その詳細をブログ記事に残していこうと思います。第1回の今回は準備段階編ということで、制作目標や今後の流れについて説明します。
経緯
昨今のWebのフロントエンド開発は、HTMLやCSS、JavaScriptを使って1からコードを書いていくよりも、ReactやVue.jsといった既存のJavaScriptライブラリを使って開発するのが定番だと思います。
この流れに乗るべく（かなり乗り遅れていますが）、自分もReactやフレームワークを使って何か作ってみようと思い立ちました。
まず初めに考えたのが、HTML・CSSとPHPで作られたこの貧弱な個人ブログサイトのReact化です。ただ、現在の共用レンタルサーバでは、Node.jsやNext.jsといったサーバーサイドの実行環境やフレームワークが導入できないと知り、すぐに断念しました。（一応、React単体であればCDN経由で利用することもできるのですが、それだとあまり面白くないので...）
（※2024/10/18追記 : React単体をクライアントサイドのみで使用したい場合、フレームワークでビルドしたものをサーバにアップロードすればOKです。 → 既存プロジェクトに React を追加する – React）
一方で、Reactの入門書を読んでいたところ、Vercelというプラットフォームを使えば、作ったWebアプリを無料でデプロイできるということを知りました（無料プランの場合、制限もあります。詳細は後述）。
VPSサーバやクラウドのホスティングサービスの利用といったコストをかけなければ公開は難しいのかと考えていたところだったので、作ったアプリを無料で公開できる場があるというのはかなりの朗報でした。こうして公開の目途が立ったので、Reactを使って何か新しいWebアプリを制作することにしました。
ちなみに学習に利用したのはコチラの本です。↓
これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで (Amazon)
コンポーネントやjsx、フックといったReactの基本が学べることに加えて、UIデザイン用のライブラリやTypeScript、Next.jsといった周辺知識にまで触れてくれるので、かなり勉強になりました。HTMLやJavaScriptの知識があれば、特に引っかかることなく読めると思います。オススメです。
制作目標
制作するWebアプリは、SpotifyのWeb APIを使った音楽関連のアプリにしようと思っています。このAPIは、単なるアルバムや曲のデータだけでなく、Spotify側で分析された曲の特徴量（明るさ、アコースティック感など）も取得することができるそうです。この情報を使って面白い機能を作ることができそうなので使うことにしました（しかも無料！）。
実装を考えている機能は以下の通りです。
- アルバム情報の表示
- 曲の特徴量をグラフ化して表示
- 特徴量が類似する曲を提案
- アルバム、曲の検索機能
- お気に入りをグループ化して登録＆公開（e.g. 無人島に持っていくアルバム10枚）
- 上で選んだ曲の特徴量から好みの傾向を分析＆表示
ひとまず予定の段階です。全て実装できるのかはわからないので、上から順に段階的に実装していこうと考えています。
ちなみに、承認を求めればSpotifyユーザーの情報にアクセスしたり、そのユーザーのプレイリストを編集したりといったこともAPIを通して可能になるのですが、アクセストークンの管理やセキュリティ面など考慮する点が多くなるので、今回は使用しない方針です。もし余裕があったらチャレンジしようと思います。
開発の流れ
開発の大まかな流れです。
1．Next.jsでサンプルページを作る
2．Spotify Web APIを試してみる
3．2で得られた情報をもとに、ページの構成、レイアウト等を決める
4．機能を段階的に実装
5．完成＆デプロイ
使用するもの
開発に使用するフレームワークやライブラリ、サービスを備忘録として列挙しておきます。（ライブラリに関しては、今後の予定次第では変更したり新たに追加したりするかもしれません。ひとまずは、入門書に登場したものの中で今回の開発にも使用できそうなものを挙げておきました。）
・Next.js（公式サイト）
代表的なReactフレームワーク。今回はこれを利用してReactを使っていきます。
・Node.js（公式サイト）
JavaScript実行環境。ローカルでの開発に使用します。pythonのように、ターミナルでnodeコマンドを実行すると対話モードが利用できるので便利です。
（余談ですが、今まで何かの折にNode.jsという単語が出るたびにGoogleで調べ、サーバーやら何やらという説明に頭を抱えていたのですが、今回の入門書の「実行環境である」という説明でようやくその実体を理解することができました）
・TypeScript（公式サイト）
JavaScriptに型を付けた言語、という浅い認識ですが、それほどJavaScriptと変わらないと思うので学習目的に今回はこちらを使っていこうと思います。
・TanStack Query (旧 ReactQuery)（公式サイト）
外部APIから情報をフェッチする際に使うライブラリです。今回、SpotifyのAPIとのやり取りで非同期処理を多く行うことになると思うので、使用することにしました。（現在、名前が入門書で紹介されていたものから変わっているようです）
・daisyUI（公式サイト）
CSSフレームワークであるTailwind CSSベースのUIライブラリです。
入門書の方ではTailwind CSSをそのまま使用していましたが、クラス名の列挙が長くなることやあらかじめ用意されたコンポーネントが利用できないなど、実装に時間がかかりそうな点が多いので、より洗練されたライブラリを使うことにしました。（Tailwind CSSベースのライブラリを比較されているコチラのサイトが参考になりました→Tailwind CSS で作られた UI Library あれこれ | Zenn）
公式サイトが凝った作りになっていて結構面白いです。
・Spotify Web API（公式サイト）
Spotifyが提供しているWeb APIです。Spotifyアカウントを持っていれば無料で使えます。過去30秒間のAPIへのリクエスト数が一定の基準を超過するとアクセス制限がかかるようです。（Rate Limits | Spotify for Developers）
・Vercel（公式サイト）
Webサイト、Webアプリをデプロイや管理できるクラウドのプラットフォームです。
Next.jsの開発元でもあるそうで、無料プラン（Hobbyプラン）を使えばNext.jsやその他のフレームワークで開発されたWebアプリを無料でデプロイすることができます。ただし、商用利用不可であり、アフィリエイトや広告の貼り付けといった行為も禁止されています。（公式のガイドライン）
おわりに
頑張って作っていきます。
次回の記事↓
