初めまして、駆け出しエンジニアのじゃむぱんです。
私は2020年の3月程から、フロントエンドエンジニアへのキャリア就職を目指して
今日に至るまで勉強してまいりました。
今回は私の一つ目の成果物を皆さんに発表し、何か一つアイデア等持ち帰って頂けたら
うれしい限りです。
成果物
サイト名：ぐろうん
制作期間：約2週間
フリー画像引用元：
https://piclike.net/
https://icon-icons.com/ja/
https://icooon-mono.com/
http://design-ec.com/?page_id=463
特徴
この「ぐろうん」の特徴は一日毎の成長記録ということです。
栽培、筋トレ、赤ちゃんの成長等種類問わず日単位の成長管理をすることができます。
編集ボタンから画像、コメントを編集することができ、その更新日も追記されます。
なぜ作ったのか
冒頭にも書いてある通り、私はフロントエンドエンジニアとしてキャリア就職したいため
日々、UdemyやProgateを活用し勉強してきました。
しかし、インプットだけしていても実践的な技術を学ぶことはできないため何か一つ成果物を作ることを決めました。
そして、実際に作るものを考え以下の条件を作りました
- React+Firebase使用する（学んだ技術を使う）
- ログイン機能を使用する
- 筋トレのモチベーションを高めたい（個人的理由）
- 車輪の再発明を極力回避したい
これらの条件を複合的に考えた時、「ランダムに力強い音楽が流れるアプリ」も考えましたが
これはYoutubeで出来てしまうため考え直し、「毎日の成長を記録するアプリ」を作ることに決めました。このような機能を持つアプリは探せばあると思います。
ですが「ランダムに力強い音楽が流れるアプリ」よりは明らかに少数派で車輪の再発明感が少なく、競争相手が少ないためより多くの人が使ってくれるかもしれないと思いこちらを選びました。
いずれ、ポートフォリオにも組み込んでいきたいと考えています。
使用した技術
- TypeScript(React Hooks)
- Redux-toolkit
- Firebase
- Material UI
Reactライブラリでは、react-modalを使用し、データ追加画面や、表示画面等あらゆる
状況で使用しました。
FirebaseはAuthentication、firestore、cloud storage、hostingを使用しました。
IDE
VScodeで全て書きました。
以前はAtomを使用していましたが、VScodeの自動補完、多数のライブラリ等機能性の高さに心を奪われ半年ほど前にこちらにシフトしました。
使用したVScodeライブラリ
- Prettier - Code formatter
- ESlint
- ES7 React/Redux/GraphQL/React-Native snippets
他にも使用しているライブラリがあるかもしれませんが、主に活躍したのは上三つです。
Prettierはインデントを自動で行い、ESlintは構文ミスをチェックし、snippetsはReactの基本の型を簡単に作り上げるライブラリです。
どれも有用ですのでまだ使っていない方いましたら是非インストールおすすめしてます。
環境はCreate-React-App
NextjsでもGatsbyでもなくCreate-React-Appです。
私はこのアプリを作り始める前、「Nextjsで書こう。」と思い
こちらの記事(https://qiita.com/thesugar/items/01896c1faa8241e6b1bc)
で二日ほどかけてNextjsの基本構文や、SSR、SSGとは何か等を学習させていただきました。
勉強していくうちに、SSR、SSGの圧倒的早さに感動しました。
そして学習を終えて、私は結局Create-React-Appで書くことに決めました。
その理由は以下です。
- 大規模なアプリを作るわけではないため速度に大きな差は出ないと判断したから
- SPAはSEOに弱いためブログに向いていないといわれるが、そもそもブログではないのであまり影響がないと感じたから
- どんどん技術を詰め込もうとすると、より多くのエラーが発生し挫折の原因に繋がるから
SSRやSSGは早くてSEOに強いですが、前述のとおり大規模なアプリを作るわけではなく速度に大きな差は出ないであろうと判断し、且つブログ等のようなSEOにとても大きく左右される種類ではないためSPAで十分であると判断しました。
そして何より、私はCreate-React-Appを使用した学習しかやってきませんでした。
なので、いきなり数日でSSRをインプットし成果物として活用するのはあまりに時期尚早であると判断しCreate-React-Appを環境として選択しました。
TypeScript大変
言語はTypeScriptを選定しました。理由としましては以下です
- バグが見つけやすい
- JavaScriptだけではなく、TypeScriptに対する需要が高まっていると転職サイトを見て思った
しかし、TypeScriptはそんな素晴らしいメリットがある一方で型の種類が多すぎると感じました。
尤も、厳格な型付けはバグを防ぎ、チームメイトが読みやすい等メリットはありますが
一人で全ての値に型を付けるとなるとそれはとても大変な作業でした。
特に、Firebase周りの型はよくわからないためQiitaの記事を参考に調べて回りましたが他にもどうすれば型付けすればいいのかわからない値が、書いていく中で多数出てきたため、多くの値に"any"を付けてしまいました。
妥協せず、もっと多くの型を調べるべきでした。
そして、私は設計等のような下準備をせず目の前の機能だけを書き続けていました。
これは失敗でした。コンポーネント毎に同じ値を使っているのに別々に定義してしまい、結果的にパフォーマンスを大きく下げることになりました。
よく使う値はRedux-Toolkitに定義し、それを一つ一つ型定義するのではなく別ファイルにinterfaceをexportした形で定義しそれをすべてのファイルで使うようにすればいいと今になって思いました。
しかし、TypeScriptでしっかり書き上げた自分を今日は褒めようと思います。
Redux-ToolkitはReduxより楽。だが大変
状態管理にはRedux-Toolkitを使用しました。理由は見出しの通りで、Reduxより楽だからです。
useReducer+useContextという状態管理の方法もHooksには存在しますが、Redux-Toolkitを学びたいという気持ちからこちらを選定しました。
コマンド
npx create-react-app my-app --template redux-typescript
このコマンドを使って環境構築しました。Create-React-Appが基盤でredux-toolkitがtypescriptで書かれた環境が簡単に出来上がります。
しかし、そんな簡単なredux-toolkitですが私は一つ前の「Typescriptは大変」で書き上げた通り
グローバルで使う値をRedux-Toolkitで管理していなかったので、この技術の本領発揮することができませんでした。
私は、useStateを使ってバケツリレー方式で多くの値を状態管理してしまったが故に、可読性とパフォーマンスを失いました。
もっと先を見据えた状態管理をすべきでした。
Firebaseは割と簡単
Firebaseをバックエンドとして使用しました。
その中のAuthentication、FireStore、Cloud Storage、Hostingを使いました。
Authenticationで新規作成、ログイン処理を行います。
FireStoreにユーザーのデータを管理させ、その中に含まれる写真は一度Cloud Storageに追加してからFireStoreで取り出す形を執っています。
最後にHostingをするだけで後はFirebaseがとやかくやってくれます。
バックエンドに慣れていないフロントエンドの方がアプリを作ろうと思っている場合firebaseはとてもお勧めですね。
バックエンド言語を習得するよりすくない学習コストでリッチなバックエンドができます。
Material UI素晴らしい！
Material UI素晴らしいですね。タグ名を変えて少し設定するだけでリッチでレスポンシブなWEBデザインが出来上がります。
Material UIの日本語教材は比較的少ない傾向にあるため、私はMaterial Uiの公式ドキュメントからフリーのExample(https://material-ui.com/getting-started/templates/)
のGItHubを参考にほぼ全てのページをデザインしました。
こちらもデザインに強くないReactエンジニアの方にとてもお勧めですね。
最後に
最後まで見てくださりありがとうございます。
何か一つアイデアはあったでしょうか？
二回目の投稿ということで語彙力から文章力までまだまだ至らない所が多くあると思います。
私はこれからも勉強を続けてよりわかりやすく有益な情報を皆さんに発信していきたいと思いますので
よければ良い点・悪い点含めてコメント頂けるとありがたいです。
最後まで見てくださりありがとうございました。