Reactで本・映画を記録するウェブサイトを作りました。

本記事では、React で個人開発をする際に使用した技術を紹介いたします。

私は現在ＩＴ企業でテストエンジニアとして働いているもののＲeact を使用したウェブ開発の実務経験はありません。学習開始から現時点までにおいて、プログラミングスクール等には通っておらず、学習は全て独学です。

独学中心でReact のアプリ開発に挑戦したい、個人で何か作りたいと考えている方々にとって参考になればと思います。

現段階ではベータ版としてリリースしています。

「大体できたけど、まだ完ぺきではないよ。だから不具合があっても怒らないでね」なバージョンです。

開発アプリ概要

アプリ名：WithCinema（ウィズシネマ）

読書・映画鑑賞の管理、記録をすることができるウェブアプリです。

Web URL: https://withcinema.com

アピールポイント

• タイトル、著者名の他にもメモの内容からでも検索可能（ブクログにはない機能！）
• データのエクスポート（フィルマークスにはない機能！）
• 読んだ本、見た映画の本数が分かるグラフ機能付き。年・月ごとのデータを確認することができます。例えば劇場で見た映画・旧作別の年間本数が一目で分かります。（フィルマークスにはない機能！）
• 懐かしい図書貸出カード風に登録データを表示（他のサイトにはない機能！）
• 読んだ本、見た映画で積み木みたいに遊べます（？）

使用技術

•  React ( create-react-app / Custom Hooks/ Material-UI / eslint&prettier)
•  Firebase ( Authenication/ Firestore / Functions/ Hosting)
•  各種API　( The Movie Database (TMDb) / Rakuten Books Total Search API )

機能一覧

ユーザー機能

• 新規登録、サインイン、サインアウト、テストユーザーサインイン機能
• 登録情報編集
• アカウント削除
• パスワードリセット機能（ベータ版では無し）

検索機能

• APIを使用し本、映画を検索

その他

• カテゴリーの追加、削除、編集
• タグの追加、削除、編集
• メモ機能
• グラフ機能
• 画面のスクロール位置に応じて必要な分だけ画像を表示
• お問い合わせフォーム (reCAPTCHA 導入)
• 図書貸出カード風に登録データを表示
• 物理演算ライブラリを使用して、データを表示
• csv ファイルでデータをエクスポート
• レスポンシブ対応(スマホ、PC)

現段階ではゲストユーザー機能もありますので、気軽に利用してみて下さい。

推奨ブラウザは Chrome です。

技術スタック

こちらがインフラ構成です。

Front-end

フロントエンドは React.js 。Redux は使わずに、Context と Hooks を使用しています。

次回は Redux にトライしてみようと思ってます。

主要ライブラリ

• create-react-app
• Material-UI: UI コンポーネントライブラリ
• react-photo-gallery: イメージギャラリーコンポネント
• eslint & prettier: コード整形
• EmailJs: JavaScript からメール送信
• ChartJs: グラフを表示できるライブラリ
• Matter.js: 物理演算ライブラリ
• Algolia: 全文検索サービス

Back-end

バックエンド・インフラ周りは すべてFirebaseで完結しています。デプロイもFirebaseで。Firebase最高！

• Authentication: ユーザー認証
• Firestore: データ管理
• Functions: 設定したトリガーでバックエンド処理を自動的に実行
• Hosting: デプロイ

無料プランではなく、従量制の Blaze プランめちゃくちゃ便利です。

Blaze プランで利用が可能になる Functions を使うことで簡単にアカウント削除時にそのユーザーが登録していた本や映画のデータを全て削除することができたりします。

また便利な拡張機能もたくさんあります。

最近、新しいAlgolia の拡張機能も出ました。もっと早く出て欲しかった・・・

頑張って自力で実装したのに。

API

API は書籍に関しては、Rakuten Books Total Search API、映画・テレビドラマに関してはThe Movie Database (TMDb)を使用しています。

書籍検索APIは楽天のが一番使いやすいと思いました。日本の書籍も多いですし。

ただ今回サイトを作っていて、個人開発の場合「本と映画の棚」のように外部のAPIをメインとして開発するのは避けた方がいいかなとは思いました。

APIの制限もありますし、仕様が変更したりすることもあります。

デザイン

Material-UI というUIコンポーネントライブラリを使っています。

コンポーネントを組み合わせるだけで手軽に見栄えの良いものを作ることができます。
アイコンは Canva のフリーアイコンを使用しました。

テスト

robotframework + seleniumlibrary を導入しテストを自動化しています。

最後に

「ウィズシネマ」は完璧な趣味プロダクトです。

なんかちょっと面白いものができたのでリリースしました。

サイト作りに関しては以前からブクログやフィルマークスといった読んだ本、見た映画を記録するウェブサービスを使っていたのでこの２つのサイトを主に参考にしています。

お気に入りのサイトです。

あとYouTubeチャンネルのシネマンションの動画も参考にしてサイトにどんな機能を付けようか考えてました。シネマンションファンです。