20201013のReactに関する記事は7件です。

ちゃんと動いているのになぜ?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はファイルやコンポーネント、プロパティの命名でエラーになることがあるので、コード本体の間違いはもちろん、正しい名前をつけることができているかを確認することを意識して開発したいと思わされた出来事でした。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

React + TypeScriptで Firestoreを使ったアプリケーションを開発する

Reactを勉強するにあたり、どうしてもTypeScriptを使用したかった筆者が勉強するのに結構苦労したところです。参考記事が少なく、結構苦労しました。firebaseとReactの連携に関してはこのやり方が絶対正しいというわけではないと思いますので、手段の1つだと思って読んでいただきたいです。

本記事はReactがなんとなくわかっていて、Reduxなどもだいたいわかるよって人向けだと思います。さらに本記事で触れるのはFirestoreとReactアプリケーションの接続部分になりますので細かい設定の説明は吹っ飛ばしてます

Reactのセットアップ

以下のコマンドでアプリを作ります。
(この辺りの仕組みを筆者はあまりよく理解していないですが、このコマンド打てばReactのTypeScriptベースのアプリケーションの雛形が作れるんだなーって思ってます。)

npx create-react-app {作成するアプリケーション名} --typescript

Firebaseのセットアップ

FirebaseのFirestoreというRDB(リレーショナルデータベース)のサービスを利用します。大量に使わない限りは基本無料なので良いです。
firebaseに関しての設定は以下の記事を参考に進めてみてください。
React + TypeScript + Firebase環境を超高速で作る
※ この記事はyarnでインストールしてますが、npmでも問題なくできます。

React と Firebase どうやってデータやり取りするの問題

かなり悩んだところです。この記事に出会っていなければわからずじまいだったでしょう。
React/Redux/redux-saga/TypeScript/Cloud Firestore/Cloud Functionあたりを使ってブログを作った!

なんとこの記事、GitHubリポジトリを公開しています。(ありがたすぎました)
GitHubのコードを苦労しながら時間をかけて読み解いていくと、こんな感じの流れになっているんだなーというのがつかめてきました。

  1. APIと名の付いたファイルでfirebaseとの通信を実行するプログラムを書いておく
  2. redux-sagaを利用してユーザーの特定のアクションを待ち構える
  3. アクションを検知したredux-sagaがAPIを呼び出してFirebaseとStoreデータを更新する
  4. ReactのStoreデータが更新されるのでビューも更新される

ざっくりこのような流れです。
なので、
APIファイル群sagaファイル群 の順でみてもらうと大体の流れが掴めると思います。

お前この記事で何もやってねーじゃん

すみませんやってません。とりあえず、投稿したかったので。
ただこの辺りに関しては参考記事が少ないので、近いうちにしっかりパートを分けて記事化しようと思います。
TypeScript + React + Redux + Firebaseの記事が少ないので勉強するのに困った経験があるので。

TypeScript + React + Redux + Firebaseを勉強したい方におすすめの記事を最後に貼って終わりにします。

  1. React + Redux + TypescriptでサンプルWebアプリ
    これでTypeScriptベースのReactアプリケーション作成の基礎を学びます

  2. たぶんこれが一番分かりやすいと思います React + Redux のフロー図解
    Reduxというものを学びます(Reactというフレームワークが提供しているデータフロー)

  3. TypeScript で Redux DevTools extension を使う
    Reduxも使えるようになってきたらデバッグできるようにしておきましょう。開発が捗ります。

  4. React+Redux+typescript+firebaseで認証機能作るのが辛い①
    Fireabseを利用して、アプリケーションに必須なログイン機能をつけてみましょう。
    同時期にFirestoreとかもさわれたら尚良いです。

  5. redux-sagaで非同期処理と戦う
    firebaseを利用できるようになったらログインだけでなく、CRUDな処理をFirestoreを利用して実装するために必要です。redux-sagaとはアプリケーション上の処理(タスク)の概念をReduxに持ち込むためのもの(MiddleWare)です。
    ここを理解するのに少し時間がかかるかもしれませんが、わかってしまえばパターンなので頑張りましょう。

  6. Material-UI と styled-components を組み合わせて、React のサイトを怠惰にスタイリングする。
    なるべく簡単にレイアウトを作成する方法ですmaterial-uiを利用してスタイリングの手間を省きながら、綺麗なUI、レイアウトを目指しましょう

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Bootstrapに飽きてきたら React を勉強するタイミングかもしれない件

なぜこの記事を書こうと思ったのか

私も含めた Rails 初心者の皆さまはきっと Bootstrap を使ったことがあるはずです。

  • Railsチュートリアルで
  • ポートフォリオで
  • 入社してからの新人研修で
  • 個人開発で

ここで皆さんに問いたい。

Bootstrap飽きません?

はい、流石に飽きました。使いすぎです。それだけ人気だということですが、もう少しリッチな UI を実現したい。

だけど正直 Bootstrap臭 を排除したいだけで、 CSS をゴリゴリ書いていきたいわけではない。楽したい。しかもカッコよくしたい。

決まりです。
React を勉強しましょう。
React を勉強すると Material UI という最強のデザインフレームワークが使えるようになります。

Material UI って?

https://material.io/design

ざっくり言うと Google が提唱している効果的なデザインのパターンや法則のこと。
それをライブラリとして簡単に自分のアプリケーションに取り入れられるようにしてくれているのが Material UI というライブラリなのです?

どんなデザインが導入できるの?

ボタン、入力フォーム、カード、アイコンなどありとあらゆるデザインが1つ1つコンポーネント(部品)として提供されています。
あまりにも多くて全てを紹介することはできませんが、興味を持って頂くのが目的です。

以下サンプルは全て公式サイトにあるものを使わせて頂きます。
https://material-ui.com/

サインアップ画面のテンプレート
Screen Shot 2020-10-11 at 17.20.14.png

このようにシンプルで洗練されたデザインが魅力です。幅広い人に好印象を持たせられるテイストなのではないでしょうか?

今までBootstrap臭が漂っていたあなたのアプリケーションが一気にモダンな印象になります。すごい!!

Google の提供している各種サービスも基本的には Material design を採用しているはずなので、 Google っぽい デザインと言えば良いでしょうか。

おわりに

もちろん無料で使えますし、導入も npm パッケージを使って、

$ npm install @material-ui/core

を実行するだけです。

私は最近React の勉強を始めました。
始めた理由は、「そろそろフロントもやっておかないとな〜」というのもありますが、この Materil UI を使いたくなったから というのが大きいです。

デザインがイケてるとやっぱり開発のモチベーションが上がります。
もうBootstrapを卒業したいという方は是非React を勉強して Material UI を使ってみてはいかがでしょうか?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

既存の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の経験がある人が多かったのも一つです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

既存の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の経験がある人が多かったのも一つです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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に引き渡す処理を実装した際に発生。
色々と検索してみた結果以下の記事を発見、参考にしてみました。

なんとなく CORS がわかる...はもう終わりにする。

なるほど。セキュリティ上の問題か〜賢い!そしておもしろい!
参考にしていじってみよう。

そして10年後・・・・(冗談)

サーバーを再起動したら解決

いろいろと試行錯誤した結果、「まさか!」と思い、
control+cして、yarn startしたところ、普通に解決しました。
なぜだ・・・。

一日中サーバー起動しっぱなしで作業してたからですかね?
詳しい方、教えていただけますと幸いです。。。

再起動したら改善されることは、よくあることなので覚えておこう。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ReactアプリケーションをFirebase Hostingで公開する

個人的に学習した内容と詰まったところを記述していこうと思います。また、本記事はReactで作成したアプリケーションを前提に記載しています。所々怪しい部分もあるかもしれませんが、その際はコメントいただけるとありがたいです。

基本的には以下の流れで簡単にデプロイすることができます。

Firebaseの準備

  1. Firebaseに登録Firebase

  2. CLIをインストール

npm install -g firebase

3. Firebaseへログイン

firebase login

これでFirebaseを利用できる環境になりました。
ただ、上記の手順だとログインしただけなので、firebaseの機能を利用することはできません。
プロジェクトの作成も合わせて行いましょう!
Firebaseプロジェクトの作成(外部サイト)

Firebaseでデプロイ

Firebaseの準備が整ったら早速デプロイです。
FirebaseのHostingを利用したデプロイはかなりお手軽で簡単にできます。
また、Firebaseのコンソール上からデプロイ履歴もみることができるので管理もしやすいです。

以下、デプロイ手順になります。

  1. デプロイしたいアプリケーションのディレクトリまで移動して以下のコマンドを実行
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は無料で使い始めることができるのでいいですね。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む