ReactとFirebaseのみで心霊スポットをシェアとレビューできるサイトを作成しました
作った経緯
私がホラー映像をはじめ心霊系が好きであったことと
いざ、心霊スポットにいきたいなあと思って検索するんですが、どのブログも同じような場所を書いていてマンネリ化している状況でした。
あと”マジで出る”ところはネット上には無い場合が多い気がしています
それなら共有できるサイトを僕が作っちゃえ！と思い作ったのがこのサービスです
リリースした後の影響を考えた
このサービスは本当にリリースしていいのかというのを考えました
不法侵入が不本意に起きてしまわないかや近隣住民の迷惑になりえないかその他諸々
そのあたりの注意事項は投稿時や利用規約に明記するようにしました
技術スタック
React(Typescript)
使ったライブラリー
- react-hook-form
- react-router
- chakra ui
Vueも少し触ってみたのですが、個人的にjsxがhtmlに似ていて、コンポーネントがわかりやすいというのがありました。あくまで僕が感じたことなので個人差はあるかと思います
あとは今後サービスを大きくしたい時やReact Nativeが使える点で将来的にスマホにも移植したい場合に移行しやすさも考えました
まだunit testはできていませんが、これから挑戦していこうと思っています
Firebase
使った機能
- Authentication
- Firestore
- Storage
- Hosting
- Analytics
Firebaseを採用した理由はReactに学習時間を割きたかったからというのが大きいです
結局同じぐらい勉強したんですけどね・・・・・
最終的にはrulesのテストまで実装することができました
テストなどを勉強するにあたって公式ドキュメントやYouTubeを参考にしました
Firebaseではログイン認証からデプロイまですべてコンソールでできる点が魅力的でした
あとGoogle Domainsを使えば独自ドメインも簡単に設定できます
これからやることとしては、現在は無料枠なのでBlazeプランに移行しCloud Functionsを使いたいと思っています
苦労・工夫したこと
モック作成とロゴ作成にFigmaとAffinity Designerを使用しました
デザイン全般については大学時代から使用していた経験もあり、比較的苦労なく作成できました
プログラミングについては完全に初心者だったのですべてにおいて苦労しました。笑
まずReactを始めるにあたってtypescriptの基礎とjavascriptの基礎を固める期間を設けました。
期間を決めて勉強してみて、何か作って、わからないことを解決するみたいなことを数回繰り返しました
しばらく勉強してからprogateなどをやってみましたが、結局udemyに落ち着きました
個人差があるとおもいます
無限ループ問題
React初心者がまず躓くポイントであろうuseEffectの無限ループ問題です
useEffectの無限ループが起きるてしまうと、Firebaseの場合その分だけデータの読み取りが行われてしまうのでお金の問題に直結してしまいます
なのでこの辺は慎重に行いました
ページごとにデータを読み取るようにして、同じような処理が繰り返し行われる場合にカスタムフックを作成し、ページ単体でドキュメント参照のみをするようにしました
render回数
極力render回数を減らしたくコンポーネント分割も慎重に考えました。
関数にはuseCallbackなどを使いました
次に取り組もうと思っているのはuseMemoやReact.memoを使って投稿一覧などをメモ化していきたいと思っています
直観的に操作できるように
デザインについては多少幼稚かなと思えるぐらいに簡潔にしあげたつもりです
心霊スポットに行くときは夜が多いと思うので長時間スマホをいじらなくて済むように知りたい情報をすぐに手に入れられるUI/UXを目指しました。
探せばもうちょっと出てくるかと思いますが、ぱっと出てくるところはこのくらいです
以上が工夫・苦労したところです
反省と今後の課題
完全初心者が完全独学でWebサービスを作ってみましたが、総じて言うと楽しかったと思います
エラーで挫けそうになったことや、できないからこの機能を削除しようと思ったことが何度かありますが諦めずに実装できたときの快感は言葉にできないものでしたし、成長してる感覚がリアルに感じれてひさしぶりの感覚でした
あとは独学だったこともあり、ネット上に聞くしかなかったので検索力も向上した気がしますし、検索していく中でReact以外のさまざまな面白そうなものを見つけれたり目的以外の収穫があったように感じます
反省点としては、まず第一に要件定義をするべきだったと感じました
はじめは思いつきで実装をしていて、途中これだったら必要以上に時間がかかると気づき要件定義をするようにしました
要件定義といってもページで必要なコンポーネントをAtom単位から検討しpropsの受け渡しをどうするかを考えただけなので要件定義を言っていいものかわかりませんが・・・
この作業はパズルを作ってるようで楽しかったです
今後の課題としてはもっとjavascriptについて理解することだと思います
今はなんだか雰囲気で書いてるような気がしていて、無駄なコードが多いんじゃないかと感じてます
なのでjavascriptを機能をしっかりと理解し、なんとなくを脱却することを今後の課題としたいと思います
簡単な自己紹介
最後に簡単な自己紹介をさせていただきます。
私は現在２７歳で以前は行政系の事務員として働いていましたが、現在は転職活動中です。
この記事を読んで少しでも気になる方がいればDMまでお待ちしております（お願いします。。)
プログラミング学習は全て独学で学びました
スクールなどを使った方が効率的だとは思いますがちょっと高かったので・・
ですがUdemyやYouTubeなどの動画媒体やQiitaなどの記事媒体を余すことなく活用しました
読んだ書籍はweb技術の基本やオライリーのTypeScriptです
オライリーの方は少し早かった気がしています。笑
web技術の基本はすごくわかりやすくレビュー通りいいものだと思いました
あとVueの勉強も少ししていたのでVue.js入門も一通り目を通しました
あと最後に動画教材で大変お世話になった方々にこの場を借りてお礼を言わせていただきます
はむさん @diveintohacking
基礎から応用まで網羅しており、TypescriptとJavascriptの違いがわかりやすく説明されていました。
おまけとして基本的なGitコマンドとlinuxコマンドを学習できたのがすごく良かったです
おすすめの講座はこちらです
ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門
他にも講座は購入したのですが、この講座が僕の中で一番でした
じゃけぇさん @bb_ja_k
Reactの基礎、customHooksの作り方などなどを網羅的に教えてくださいました。
この講座ではReactのより実践的な使いかたやAtomic Designについて学べたのが良かったです
Reactの講座ではこれが僕の中で一番です
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
mogaさん @_mogaming
Firebaseを勉強するならmogaさんのYouTubeと公式ドキュメントがかなり有用でした
公式ドキュメントを一緒に読んだり、rulesの書き方、便利な関数など、実際に作っていく中でのDB設計方法などすごくわかりやすくためになりました
以上の御三方本当にありがとうございました。