はじめに
記事の目的
ポートフォリオとして作成したWebアプリケーションの紹介記事です。
こちらのURLで公開中です。
https://picture-app-9da4b.web.app/
また、Githubのコードはこちらです。
https://github.com/rickeysan/picture-app
作成した人
未経験からのエンジニア転職を目指しています。前回はPHP(Laravel)でポートフォリオとして習慣化アプリを作成しました。このとき、フロントエンドの知識不足を感じ、モダンなJavaScriptとReactの勉強をしています。
Reactのポートフォリオと検索すると、ToDoリストばかりが出てきてしまい、あまり面白い題材がないなと感じています。今回作成したアプリは、基本的な構造は投稿サイトのようなものですが、題材（テーマ？）にはこだわりました。
1. アプリの概要
絵画をじっくりと観察する（事実だけを抽出する）ことにより、観察力を鍛えることができるアプリです。元ネタは下記の本になります。
www.amazon.co.jp/dp/415209642X
著書によると、名画をじっくりと見ることは、観察力を鍛えることにつながり、この能力は日常生活や仕事でも役に立つということだそうです。また、さまざまなテクニックについて、ハンズオン形式で解説されており、充実した内容でした。名画を観察して、その絵から分かることを140字で要約し（文章として書き）、投稿できるアプリがあれば面白いのではと思いました。なかなか一人では絵画を客観的に見る訓練は難しいと考え、今回は絵画の感想（感想と言っても、客観的な事実だけを記述する）を投稿するアプリを作成しました。
2. アプリの特徴
なるべく気軽に試した欲しいという思いから、ユーザー登録などの機能は実装していません。アプリは投稿エリアと一覧エリアに分かれており、投稿エリアでは右側に絵画をランダムに表示しています。この絵画の情報は、メトロポリタン美術館のAPIを活用しました。その絵を見て、左側に名前とコメント（絵画から分かる客観的な事実）を入力できるフォームがあります。
また、投稿エリアではこれまでの投稿を一覧で見ることができます。また、簡単にですが、検索機能も作成しました。
3. 使用した技術スタック
使用技術
tailwindcss 3.0.23
React 17.0.2
TypeScript 4.6.2
axios 0.26.1
トロポリタン美術館の外部API
Firebase
各々の技術を使ってみての感想を記述していきます。
tailwindcss
今回はせっかくReactを使っているので、相性が良いとされるTailwindCssと、そのフレームワークであるdaisyUIを用いました。今回CSSのフレームワークを久しぶりに使いました（Bootstrapも昔、簡単なWebページを作成するのに使ったくらいです）
daisyUIのドキュメントを見れば、豊富なコンポーネントがあり、コピーアンドペーストで作成できるのは、非常に便利だと思いました。アプリの規模が違いますが、前回の習慣化アプリはフレームワークを使わずCssを全て記述したので、フレームワークを使う恩恵は確かにあると感じました。ただ、tailwindCssのクラス名の扱いに慣れる必要があったり、HTMLが汚くなる（コードの見通しが悪くなる）などの欠点をありました。
React
初めて自作アプリのReactで実装したので、かなり手こずりました。最初にコンポーネントの設計をきちんとしていなかったためか、あちこちでstateのバケツリレー（親コンポーネントからひ孫コンポーネントまで）が発生しました。あまり綺麗なコードではありませんが、Reduxなどを用いたstate管理の必要性がわかったのは良かったと思います。また、再レンダリングを抑えるなども今後の課題です。
Firebase
FirebaseはYouTubeの動画で勉強しました。書籍などは買わずに、公式サイトと動画で十分でしたが、CRUD処理まで開設している動画は、Youtubeでは日本語でなかったたので、海外の方（英語）の動画で勉強しました。また、FireBaseのデータベースは、MySQLではなく、NoSQLです。データベースがディレクトリ構造になっていることが特徴だと感じました。
axios + 外部API
今回初めて、アプリ制作に外部のAPIを使用しました。非同期処理は、APIで絵画の情報を取得する処理と、ユーザーの投稿データをFirebaseのDBに登録する部分に、async構文で記述しました。もっと大規模なアプリだと、非同期処理も多く出現し、処理の終了タイミングを考慮しなければならないのではと考えています。
TypeScript
TypeScriptに関しては、ちょっと変数の定義の時に型付けを行うのに使った程度で、もっと勉強が必要であると実感しました。