初心者がReact,TypeScript,Firebaseを使用し、読書アプリを作成した

はじめに

今回、転職活動に向けてTypeScript,React,Firebaseを使用し、読書アプリというテーマでポートフォリオを作成しました。

またデザインについてはパーツ、コンポーネント単位でUIデザインをするAtomic Designをベースにデザインしました。

2020年の8月からフロントエンドエンジニアを目指し、学習をし始めました。
時間の合間を活用し勉強を進めながら作成しました。
また、作成期間は２ヶ月弱といったところです。

※コードの解説については後日、投稿したいと思います！
webpackの設定はこちら

アプリの概要について

「Read Out」 という読書アウトプットアプリを今回作成しました。
読書した内容をアウトプットすることを目的としたアプリです。
また、アウトプット量を可視化させたグラフや数値を表示や書籍を検索できる機能をつけました。

ディレクトリの構成

/src
┣━ /Auth
┃     ┗━ AuthService.tsx
┣━ /config
┃     ​┗━ firebase.ts
┣━ /img
┣━ /module
┃     ​┗━ Text.module.ts
┣━ /components
┃     ┗━ Chart.tsx
┃     ┗━ Edit.tsx
┃     ┗━ Footer.tsx
┃     ┗━ Header.tsx
┃     ┗━ List.tsx
┃     ┗━ Menu.tsx
┃     ┗━ Post.tsx
┣━ /pages
┃     ​┗━ BooksSearch.tsx
┃     ​┗━ History.tsx
┃     ​┗━ Home.tsx
┃     ​┗━ Login.tsx
┃     ​┗━ Profile.tsx
┃     ​┗━ ResetPass.tsx
┃     ​┗━ SetUp.tsx
┃     ​┗━ Top.tsx
┣━ /ui
┃    ​┗━ /atoms
┃    ┃​   ┗━ button.tsx
┃    ┃​   ┗━ font.tsx
┃    ┃​   ┗━ image.tsx
┃    ┃​   ┗━ input.tsx
┃    ┃​   ┗━ link.tsx
┃    ┃​   ┗━ title.tsx
┃    ​┗━ /molecules
┃    ┃​   ┗━ TableHome.tsx
┃    ┃​   ┗━ TableLogin.tsx
┃    ┃​   ┗━ TableMenu.tsx
┃    ┃​   ┗━ TableProfile.tsx
┃    ┃​   ┗━ TableReset.tsx
┃    ┃​   ┗━ TableSearch.tsx
┃    ┃​   ┗━ TableSetUp.tsx
┃    ┃​   ┗━ TableTop.tsx
┃    ​┗━ /organisms
┃    ┃​   ┗━ MainPages.tsx
┃    ┃​   ┗━ MainTable.tsx
┃    ┗━ /templates
┃     ​   ┗━ Table.tsx
┣━ index.css
┣━ index.html
┗━ index.tsx ・・・エントリーポイント

投稿画面

検索画面

プロフィール画面

作った背景

読書した内容は時間が経つにつれ、忘れてしまうことが多いと思います。
そこで記憶の定着化を図るためにも、アウトプットが必要だと思い今回作成しました。

ただ投稿するだけでは面白くないと思い、Chart.jsを使用して毎日のアウトプット量を右肩上がりのグラフを表示することで成長の実感をフィードバックできるようにしました。

また、今回はreact-create-appで開発環境を整えず、webpackの設定やpackageを一から設定し勉強しながら開発環境を作成しました。（まだまだ知識不足な感じがあります。。。）

実装した機能

• ログイン、ユーザー作成機能
  • バリデーション機能
• ゲストログイン機能
• 投稿機能
  • 画像追加
  • 削除機能
  • 編集機能
• プロフィール管理機能
• 検索機能
• グラフ機能

使用技術

• HTML5/CSS3/JavaScript
• TypeScript v4.1.3
• styled-components v5.2.1
  • Atomic Design
• React v17.0.1
  • react-router-dom v5.2.0
  • react-chartjs-2 v2.11.1
  • react-hook-form v6.15.4
• webpack v4.44.2
  • webpack-dev-server v3.11.0
  • webpack-cli v3.312
  • webpack-merge v5.7.3
• Firebase v8.2.6
  • Authentication
  • Cloud Firestore
  • Hosting
• Google Books API
• axios
• shortid
• moment

苦労した点

正直、苦戦した点は細かいところを言えば沢山ありますが、、

• Atomic Designを取り入れたことでディレクトリの構成や分子、生体、テンプレートといったレベルの分け方に苦戦しました。完璧な分け方はないと思うのでAtomic Designの概念を理解することが大事だと思いました。

• chartjsを使用する際にfirestoreを参照したデータの渡し方と日付の表示に苦戦しました。なんとか工夫を重ねて実装できましたが、コードをもう少し短縮できる気がします。

今後やりたいこと

• reduxの導入
• いいね機能の実装
• 投稿者ランキングの表示
• ページネーション機能
• コメント機能

感想

初めて一人でのでwebアプリ作成だったので達成感はすごくありました！
自分の思い描いている一つの機能をイメージしてどうやって、データを元に表示させるか試行錯誤し工夫することで実現が可能できたことは嬉しかったです。

ただ、機能を実装する上で気をつけたことはコードが長くならないよう短くわかりやすいコードを書くことを意識したのですが、まだまだコードの可読性が低いなと感じました。

また今回、TypeScriptとReactで初めて作成したのですが、型定義をすることで事前にコードのエラー検知やpropsの値を出してくれたので開発効率がぐんと上がったことの実感はありました。（最初は正直、扱いに苦戦しました。笑）

まだまだつけたい機能、導入をしていきたいので学習のアウトプットとしてこれからも改善し続けたいと思います！