- 投稿日:2020-10-13T22:03:50+09:00
ちゃんと動いているのになぜ?React・Redux編
ちゃんとユーザーのアクションは取れているのにStoreが更新されない、Storeからデータが取れないなんてことになったことはないですか?
自分はあります、2日間くらい悩んでReact・Reduxの勉強やめたくなりましたが、なんとか解決することができ、React・Reduxの世界へ戻ってくることができたのでその時のお話をしたいと思います。
mapStateToPropsでちゃんと設定しているのに...
mapStateToPropsを利用してコンポーネントにStoreのデータを反映させようとしていた時のことです。
stateがundefinedになってんじゃん!ずっとこれでした、2日間。。。
なんでかという原因と解決策はこちらです。
- 原因:
- AppState(store本体のinterface)のプロパティ名と、mapStateToPropsで渡すときのプロパティ名が異なっていたため。
- 解決法:
- AppStateのプロパティ名とmapStateToPropsで渡すときのプロパティ名を確認し、合わせるようにする。
これだけです。
要は、受け取る側(mapStateToProps)と保存(Store)している側で、異なる名前をつけていたのでundefinedになっていました。
しかも自分がやっていたのはプロパティ名が単数形か複数形かの違いでこれにハマってました。そのほかにもReactはファイルやコンポーネント、プロパティの命名でエラーになることがあるので、コード本体の間違いはもちろん、正しい名前をつけることができているかを確認することを意識して開発したいと思わされた出来事でした。
- 投稿日:2020-10-13T21:51:12+09:00
React + TypeScriptで Firestoreを使ったアプリケーションを開発する
Reactを勉強するにあたり、どうしてもTypeScriptを使用したかった筆者が勉強するのに結構苦労したところです。参考記事が少なく、結構苦労しました。firebaseとReactの連携に関してはこのやり方が絶対正しいというわけではないと思いますので、手段の1つだと思って読んでいただきたいです。
本記事はReactがなんとなくわかっていて、Reduxなどもだいたいわかるよって人向けだと思います。さらに本記事で触れるのはFirestoreとReactアプリケーションの接続部分になりますので細かい設定の説明は吹っ飛ばしてます
Reactのセットアップ
以下のコマンドでアプリを作ります。
(この辺りの仕組みを筆者はあまりよく理解していないですが、このコマンド打てばReactのTypeScriptベースのアプリケーションの雛形が作れるんだなーって思ってます。)npx create-react-app {作成するアプリケーション名} --typescriptFirebaseのセットアップ
FirebaseのFirestoreというRDB(リレーショナルデータベース)のサービスを利用します。大量に使わない限りは基本無料なので良いです。
firebaseに関しての設定は以下の記事を参考に進めてみてください。
React + TypeScript + Firebase環境を超高速で作る
※ この記事はyarn
でインストールしてますが、npm
でも問題なくできます。React と Firebase どうやってデータやり取りするの問題
かなり悩んだところです。この記事に出会っていなければわからずじまいだったでしょう。
React/Redux/redux-saga/TypeScript/Cloud Firestore/Cloud Functionあたりを使ってブログを作った!なんとこの記事、GitHubリポジトリを公開しています。(ありがたすぎました)
GitHubのコードを苦労しながら時間をかけて読み解いていくと、こんな感じの流れになっているんだなーというのがつかめてきました。
- APIと名の付いたファイルでfirebaseとの通信を実行するプログラムを書いておく
- redux-sagaを利用してユーザーの特定のアクションを待ち構える
- アクションを検知したredux-sagaがAPIを呼び出してFirebaseとStoreデータを更新する
- ReactのStoreデータが更新されるのでビューも更新される
ざっくりこのような流れです。
なので、
APIファイル群
→sagaファイル群
の順でみてもらうと大体の流れが掴めると思います。お前この記事で何もやってねーじゃん
すみませんやってません。とりあえず、投稿したかったので。
ただこの辺りに関しては参考記事が少ないので、近いうちにしっかりパートを分けて記事化しようと思います。
TypeScript + React + Redux + Firebase
の記事が少ないので勉強するのに困った経験があるので。
TypeScript + React + Redux + Firebase
を勉強したい方におすすめの記事を最後に貼って終わりにします。
React + Redux + TypescriptでサンプルWebアプリ
これでTypeScriptベースのReactアプリケーション作成の基礎を学びますたぶんこれが一番分かりやすいと思います React + Redux のフロー図解
Reduxというものを学びます(Reactというフレームワークが提供しているデータフロー)TypeScript で Redux DevTools extension を使う
Reduxも使えるようになってきたらデバッグできるようにしておきましょう。開発が捗ります。React+Redux+typescript+firebaseで認証機能作るのが辛い①
Fireabseを利用して、アプリケーションに必須なログイン機能をつけてみましょう。
同時期にFirestoreとかもさわれたら尚良いです。redux-sagaで非同期処理と戦う
firebaseを利用できるようになったらログインだけでなく、CRUDな処理をFirestoreを利用して実装するために必要です。redux-sagaとはアプリケーション上の処理(タスク)の概念をReduxに持ち込むためのもの(MiddleWare)です。
ここを理解するのに少し時間がかかるかもしれませんが、わかってしまえばパターンなので頑張りましょう。Material-UI と styled-components を組み合わせて、React のサイトを怠惰にスタイリングする。
なるべく簡単にレイアウトを作成する方法ですmaterial-uiを利用してスタイリングの手間を省きながら、綺麗なUI、レイアウトを目指しましょう
- 投稿日:2020-10-13T19:21:15+09:00
Bootstrapに飽きてきたら React を勉強するタイミングかもしれない件
なぜこの記事を書こうと思ったのか
私も含めた Rails 初心者の皆さまはきっと Bootstrap を使ったことがあるはずです。
- Railsチュートリアルで
- ポートフォリオで
- 入社してからの新人研修で
- 個人開発で
ここで皆さんに問いたい。
Bootstrap飽きません?
はい、流石に飽きました。使いすぎです。それだけ人気だということですが、もう少しリッチな UI を実現したい。
だけど正直 Bootstrap臭 を排除したいだけで、 CSS をゴリゴリ書いていきたいわけではない。楽したい。しかもカッコよくしたい。
決まりです。
React を勉強しましょう。
React を勉強すると Material UI という最強のデザインフレームワークが使えるようになります。Material UI って?
ざっくり言うと Google が提唱している効果的なデザインのパターンや法則のこと。
それをライブラリとして簡単に自分のアプリケーションに取り入れられるようにしてくれているのが Material UI というライブラリなのです?どんなデザインが導入できるの?
ボタン、入力フォーム、カード、アイコンなどありとあらゆるデザインが1つ1つコンポーネント(部品)として提供されています。
あまりにも多くて全てを紹介することはできませんが、興味を持って頂くのが目的です。以下サンプルは全て公式サイトにあるものを使わせて頂きます。
https://material-ui.com/このようにシンプルで洗練されたデザインが魅力です。幅広い人に好印象を持たせられるテイストなのではないでしょうか?
今までBootstrap臭が漂っていたあなたのアプリケーションが一気にモダンな印象になります。すごい!!
Google の提供している各種サービスも基本的には Material design を採用しているはずなので、 Google っぽい デザインと言えば良いでしょうか。
おわりに
もちろん無料で使えますし、導入も npm パッケージを使って、
$ npm install @material-ui/coreを実行するだけです。
私は最近React の勉強を始めました。
始めた理由は、「そろそろフロントもやっておかないとな〜」というのもありますが、この Materil UI を使いたくなったから というのが大きいです。デザインがイケてるとやっぱり開発のモチベーションが上がります。
もうBootstrapを卒業したいという方は是非React を勉強して Material UI を使ってみてはいかがでしょうか?
- 投稿日:2020-10-13T18:06:00+09:00
既存のRailaアプリケーションにのせるフロントのフレームワークを比較した話
背景
既存のRailsのアプリケーションにフロントのフレームワークを導入する運びとなりまして、有名どころ3つをチェックポイントに沿って比較しましたのでその話を残しておきます。
今回はこういうやり方で比較したよ、という話なので、もしフレームワークを選ぶことになった際は参考程度に読んでいただき、その時々の状況やプロジェクトに応じて比較方法は変更すればよいと思います。なのでこれが正解というわけではないです。調査結果に誤りがある場合もあると思いますので、調査は自分で公式のものを見てちゃんと行った方がよいです。比較したフレームワーク
今回比較、検討したフレームワークは以下の3つです。
- VueJs
- React
- Angular
ちなみにAngularは、今回導入しようとしているアプリはそんなに大規模というわけではなかったので、ある程度のところでAngularの調査は切り上げ、VueとReactに絞りました。
チェックポイント
今回「まあこれが分かれば比較できそうかもしれない」と考えてチェックポイントをチーム内で相談し決めました。
- フレームワークの概要(特徴)
- 主なプログラミング言語
- 最新バージョン
- 学習難易度
- パッケージサイズ
- GUI
- 既存機能の実装難易度
- Heroku上の動作時における不具合等
- コード管理のしやすさ
- 開発手法
- ドキュメント
- 他フレームワークへの以降性
- ローカル環境構築のしやすさ
比較方法
期間:2週間
調査人数:エンジニア3~4名チームメンバーで上記のチェックポイントを分担し、確認を行っていきました。その際の情報共有はGoogleドキュメントを使用し、適宜必要に応じてHangoutを行いました。
比較結果
チェックポイント VueJs React Angular フレームワークの概要(特徴) OSSフレームワークでコミュニティにより開発・メンテ。GUIのコンポネントのみ提供。必要であれば他のライブラリをインストールする Facebook社により開発・メンテされている。GUIのコンポネントのみ提供する。必要であれば他のライブラリをインストールする Google社により開発・メンテ。フロントエンド用のMVCフレームワーク 主なプログラミング言語 EMACS6 EMACS6 Typescript 最新バージョン(調査当時) 2.6 16.13 10 学習難易度 容易:GUIのコンポネントとライフサイクルを理解すれば問題ない。CSSコードはコンポネントの中に記述してもいい 容易:GUIのコンポネントとライフサイクルを理解すれば問題ない。 難:GUIの作成方法以外、フレームワークのコンポネントを理解する必要がある パッケージサイズ(約) 80KB 100KB 500KB 既存のサイドパーティ Vue Material Kit, Vuetify, Vue Material, Quasar, Bootstrap-Vue Raect Material Kit, Material UI, React Bootstrap, Ant Design, Semantic UI React mdbootstrap, material, ng-bootstrap 既存機能の実装難易度 APIを新たに作成する必要がある。 Vue同様 ー Heroku上の動作時における不具合等 deployして検証 deployして検証 ー コード管理のしやすさ コンポネントで分かれているためコード管理はしやすい Vue同様 ー 開発手法 オブジェクト指向 コンポネント指向 コンポネント指向 ドキュメント 日本語あり 日本語バージョンは英語の直訳 日本語あり 他フレームワークへの以降性 独自フォーマットであるため、開発が進むと後戻りは困難 Vue同様 フルスタックなため代替は困難 ローカル環境構築のしやすさ 導入時の設定は少し困難だが、そこが完了していれば容易 Vue同様 ー 比較結果
既存機能を実際に開発してみて検証をし、ドキュメントを読んで比較した結果今回はVue&Vuetifyになりました。チームメンバーにVueの経験がある人が多かったのも一つです。
- 投稿日:2020-10-13T18:06:00+09:00
既存のRailsアプリケーションにのせるフロントのフレームワークを比較した話
背景
既存のRailsのアプリケーションにフロントのフレームワークを導入する運びとなりまして、有名どころ3つをチェックポイントに沿って比較しましたのでその話を残しておきます。
今回はこういうやり方で比較したよ、という話なので、もしフレームワークを選ぶことになった際は参考程度に読んでいただき、その時々の状況やプロジェクトに応じて比較方法は変更すればよいと思います。なのでこれが正解というわけではないです。調査結果に誤りがある場合もあると思いますので、調査は自分で公式のものを見てちゃんと行った方がよいです。比較したフレームワーク
今回比較、検討したフレームワークは以下の3つです。
- Vue.Js
- React
- Angular
ちなみにAngularは、今回導入しようとしているアプリはそんなに大規模というわけではなかったので、ある程度のところでAngularの調査は切り上げ、VueとReactに絞りました。
チェックポイント
今回「まあこれが分かれば比較できそうかもしれない」と考えてチェックポイントをチーム内で相談し決めました。
- フレームワークの概要(特徴)
- 主なプログラミング言語
- 最新バージョン
- 学習難易度
- パッケージサイズ
- GUI
- 既存機能の実装難易度
- Heroku上の動作時における不具合等
- コード管理のしやすさ
- 開発手法
- ドキュメント
- 他フレームワークへの以降性
- ローカル環境構築のしやすさ
比較方法
期間:2週間
調査人数:エンジニア3~4名チームメンバーで上記のチェックポイントを分担し、確認を行っていきました。その際の情報共有はGoogleドキュメントを使用し、適宜必要に応じてHangoutを行いました。
比較結果
チェックポイント Vue React Angular フレームワークの概要(特徴) OSSフレームワークでコミュニティにより開発・メンテ。GUIのコンポネントのみ提供。必要であれば他のライブラリをインストールする Facebook社により開発・メンテされている。GUIのコンポネントのみ提供する。必要であれば他のライブラリをインストールする Google社により開発・メンテ。フロントエンド用のMVCフレームワーク 主なプログラミング言語 EMACS6 EMACS6 Typescript 最新バージョン(調査当時) 2.6 16.13 10 学習難易度 容易:GUIのコンポネントとライフサイクルを理解すれば問題ない。CSSコードはコンポネントの中に記述してもいい 容易:GUIのコンポネントとライフサイクルを理解すれば問題ない。 難:GUIの作成方法以外、フレームワークのコンポネントを理解する必要がある パッケージサイズ(約) 80KB 100KB 500KB 既存のサイドパーティ Vue Material Kit, Vuetify, Vue Material, Quasar, Bootstrap-Vue Raect Material Kit, Material UI, React Bootstrap, Ant Design, Semantic UI React mdbootstrap, material, ng-bootstrap 既存機能の実装難易度 APIを新たに作成する必要がある。 Vue同様 ー Heroku上の動作時における不具合等 deployして検証 deployして検証 ー コード管理のしやすさ コンポネントで分かれているためコード管理はしやすい Vue同様 ー 開発手法 オブジェクト指向 コンポネント指向 コンポネント指向 ドキュメント 日本語あり 日本語バージョンは英語の直訳 日本語あり 他フレームワークへの以降性 独自フォーマットであるため、開発が進むと後戻りは困難 Vue同様 フルスタックなため代替は困難 ローカル環境構築のしやすさ 導入時の設定は少し困難だが、そこが完了していれば容易 Vue同様 ー 比較結果
既存機能を実際に開発してみて検証をし、ドキュメントを読んで比較した結果今回はVue&Vuetifyになりました。チームメンバーにVueの経験がある人が多かったのも一つです。
- 投稿日:2020-10-13T15:21:27+09:00
ReactでAPIを呼び出したところ、CORSエラーが発生。その対処方法
ReactでpixabayのAPIを使って画像検索アプリケーションを作成した際にCORSエラーが発生
エラー内容
Access to XMLHttpRequest at 'https://pixabay.com/api/?q=animal' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.エラーの発生経緯
const App =()=>{ const [images, setImages]= useState([]); const ApiKey = process.env.REACT_APP_PIXABAY_APIKEY; const onSearchSubmit =async(term)=>{ try{ const params={ key: ApiKey, q: term, }; const response= await axios.get('https://pixabay.com/api/', { params }); setImages(response.data.hits);上記のようにAPIキーを環境変数に記述し、App.jsに引き渡す処理を実装した際に発生。
色々と検索してみた結果以下の記事を発見、参考にしてみました。なるほど。セキュリティ上の問題か〜賢い!そしておもしろい!
参考にしていじってみよう。そして10年後・・・・(冗談)
サーバーを再起動したら解決
いろいろと試行錯誤した結果、「まさか!」と思い、
control+cして、yarn startしたところ、普通に解決しました。
なぜだ・・・。一日中サーバー起動しっぱなしで作業してたからですかね?
詳しい方、教えていただけますと幸いです。。。再起動したら改善されることは、よくあることなので覚えておこう。
- 投稿日:2020-10-13T08:36:11+09:00
ReactアプリケーションをFirebase Hostingで公開する
個人的に学習した内容と詰まったところを記述していこうと思います。また、本記事はReactで作成したアプリケーションを前提に記載しています。所々怪しい部分もあるかもしれませんが、その際はコメントいただけるとありがたいです。
基本的には以下の流れで簡単にデプロイすることができます。
Firebaseの準備
Firebaseに登録Firebase
CLIをインストール
npm install -g firebase3. Firebaseへログイン
firebase loginこれでFirebaseを利用できる環境になりました。
ただ、上記の手順だとログインしただけなので、firebaseの機能を利用することはできません。
プロジェクトの作成も合わせて行いましょう!
Firebaseプロジェクトの作成(外部サイト)Firebaseでデプロイ
Firebaseの準備が整ったら早速デプロイです。
FirebaseのHostingを利用したデプロイはかなりお手軽で簡単にできます。
また、Firebaseのコンソール上からデプロイ履歴もみることができるので管理もしやすいです。以下、デプロイ手順になります。
- デプロイしたいアプリケーションのディレクトリまで移動して以下のコマンドを実行
firebase initこのコマンドを打つといろんな質問が飛んできます。今回はHostingのみの利用を前提としているので、以下のように答えてもらえれば問題ないです。
Which Firebase CLI features do you want to setup for this folder ?
→ Hosting: Configure and deploy Firebase Hosting sites をスペースキーで選択してリターン
スペースキーで選択してからでないとエラーになります。
Select a default Firebase project for this directory
→ Firebaseコンソールで作成したprojectを選択
What do you want to use as your public directory?
→ public (何も入力せずリターン)
Configure as a single-page app (rewrite all urls to /index.html)
→ Y(SPA設定されていることの確認、Reactアプリケーション前提なので問題なし)
File public/index.html already exists. Overwrite
→ アプリケーションにあるものを上書きしますか?という質問。基本的にNOと答える。
(筆者は上書きしてしまい、Firebaseの初期画面がずっと出ていた。上書きされてReactのroot要素がなくなってしまったため)以上です!
質問途中でGithubとの連携を聞かれますがその質問もNOと答えていただければOKです。2. アプリケーションをビルド
ビルドする前に必ず確認して欲しいのが、firebase init したときに生成されるfirebase.json
というファイルがあるのですがそこの設定を確認して欲しいです。自分はこれがわからずに結構詰まってました。"hosting": { "public": "public", 以下略ここの設定が
public
のままだとデプロイしたあと何も表示されない白い画面しか出てこなくなります。なので、ここの設定が"hosting": { "public": "build", // ここが"build"になっていることを確認する 以下略以上を確認してから、
npm run buildを実行してください。
3. デプロイ
ここまで来ればほとんど作業は終わったと言っても良いです。あとは以下のコマンドを打てばあなたのアプリケーションはデプロイされ公開されます。firebase deployデプロイが完了すると、
=== Deploying to '*****'... 略 ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/*****/overview Hosting URL: https://*****.firebaseapp.comと表示されるので、
Hosting URL
に記載されているURLで公開されたアプリケーションをみることができます。かなり簡単にデプロイすることができます。Firebaseは無料で使い始めることができるのでいいですね。