Reactの勉強がてらQiitaAPIv2を使ってアプリを作ったので、
過程でハマったポイントや初心者の方が戸惑いそうだと感じた所を学習記録として残すことにしました。
ReactやFirebaseをこれから使ってみよう・勉強中という方向けのレベル感です。
ソースコード
デプロイ先(ゲストログインで全機能利用出来るようにしています)
#記事の前提
- 筆者はWeb制作の経験が少しあるくらいで、Web開発の勉強中の初学者です。誤った記載があればご指摘下さい。
- この記事で書くこと
- 作ったアプリの紹介
- 以下に記述する技術に関してハマったポイントの解説
- この記事で書かないこと
- アプリの詳細な制作過程
- 各技術の使用方法・詳細な解説
- パッケージのバージョン等、環境によって変わる話は極力無い様にしています。
#使用技術(ざっくり)
- 言語：HTML、CSS/Sass、JavaScript/TypeScript
- FW：React
- バックエンド：firebase(Hosting/Authentication/Firestore)
#環境構築
今回はwebpackやbabel周りの勉強のためにcreate-react-appを使わずに環境構築しました。
日本語の解説記事も豊富なので大体は調べながらなんとかなると思います。
ハマったポイント
webpack5になってwebpack.config.jsの記述方法がかなり変わっている様で、結構ハマりました。
英語記事を含め設定方法を詳しく解説している記事はv4のモノが割と多く、
v5で記述方法の変更があったことを知らなかったのが原因です。
公式Docのこの辺やこの辺をガッツリ読めば大体解決しました。(英語頑張って読みましょう)
#React
Reactは公式のチュートリアルがめちゃくちゃ丁寧なので、
チュートリアルをやって公式Docを通読すれば致命的にはハマるところは無さそうです。
しいて挙げるとすると、stateが更新されるタイミングとかが勘違いしそうなくらいです。
その辺は触ってみていくつか簡単なアプリを作ってみるとすぐ分かると思います。
ちなみに今回はHooksを使用し、Reduxは採用していません。
#TypeScript
今回初めて触りました、基本的にはJSに型宣言がくっついただけと考えて良いと思います。
特別ハマったポイントはなかったですが、JS以外のプログラミング言語を触ったことがない方はそもそも型宣言がどういったものなのかを理解する所から始めたほうが良さそうです。
こちらの記事がTypeScriptの型について詳しく解説されているので参考になります。
文法や機能については公式HandBookやDeep Diveを読みましょう。
どちらも日本語翻訳されたものがあります。
#QiitaAPIv2
公式ドキュメントを読めば問題なく使えると思います。
今回使用した機能は記事の一覧取得のみでしたので、特にハマるポイントはありませんでした。
「ハマった！」と思ったら、そもそもAPIリクエスト周りの記述や、Reactのレンダリングのタイミング等を勘違いしている可能性も考えてみましょう。
#Sass
今回は機能実装に重きを置いたのでデザインはかなり適当です。(そもそもデザインスキルも無いので)
CSSの設計はBEMをベースに「コンポーネント名」=「Block名」で固定し、各コンポーネントのスタイルを1ファイルで管理するようにしています。
イケてるUIにしたい場合はやはりMaterialUI等のライブラリを使用していくのが効率良さそうに感じました。
#Firebase
firebaseもv8とv9でかなり違いがあるので注意が必要です。公式ドキュメントをしっかり読みましょう。
日本語で詳しく解説している記事はv8の記述が多いですが、v9でもv8の記述方法が使えたりするので上手く書き換えたりして対応するとよいかと思います。
ハマったポイント
react-firebase-hooksが動かない。
react-firebase-hooksというfirebaseの操作をhooksで実現できるパッケージですが、これがなぜか動かずハマりました。
ひたすら調べた結果Stack Over Flowでこんな投稿を見つけました。
どうやらreact-firebase-hooksはv9に対応していないようです。
この記事で回答されているようにv8の記述形式に書き換えれば問題なく動きました。
#テストについて
jest + react-testing-libraryでテストを書きました。
機能や書き方についてはドキュメントを読めばOKです。
Jest
testing-library
難しかったポイント
何をテストすれば良いか分からない
今回テストを書くのが初めてだったため、「何をテストするか」「どこまでテストするか」が全然わかりませんでした。
Reactのテストについて色々調べて自分なりに考えた結果以下のようになりました。
- 意図したとおりに描画されているか
- クリックイベントなどのユーザーからのアクションに対して意図したとおりに画面が変化するか
- 詳細な実装についてはテストしない
正直未だにどうするのが良いかあまり分かっていない気がします。
私と同じように初めて書く方は、とにかく調べて様々な意見を見て自分で考えるのが今後のためにも良さそうです。
testing-libraryやEnzymeって何？？
Reactアプリのテストについて調べるとほとんどの場合jestに関する記事がヒットすると思います。
しかし調べていくとどうやらreact-testing-libraryやEnzymeというものも使用している様で混乱しました。
どちらが良いとかはさておき、こちらの記事で違いが分かりやすく解説されていましたので参考になりました。
今回はreact-testing-libraryを使用しました。使い方についてはこちらの記事が丁寧で参考になりました。
まとめ
今回私にとっても初めて触る技術が多かったのですが、どの技術についても公式ドキュメントをしっかり読めばほとんどの事は解決しました。
また、当然ですが英語の方が圧倒的に情報量が多いので英語の記事やドキュメントを抵抗なく読めればテンポよく学習できると思います。
逆に英語記事が読めないとかなり大変だと思いますので、頑張って英語の勉強をしましょう！
今後やりたいこと(おまけ)
- 今回は学習しながらの制作でデザイン面についてはかなり妥協したので、MaterialUI等を導入していい感じのUIを作れるようにしたい。
- 実装の仕方自体もっと良い方法があるだろうと感じている部分が多々あるので、プログラミングスキルを上げて見直していきたい。
- 最低限の機能しかないので、よりユニークな機能を考えて実装していきたい。