すべてのカテゴリ

Reduxのデータ処理に値を渡すには？前回の記事では、Redux Toolkit を利用して、Redux を React で利用する簡単な事例を紹介しました。今回は、Redux のデータの処理をする際に値を渡す例を紹介します。Redux のデータ処理は、「slice reducer」前回の記事で紹介した通り、Redux Toolkit を利用して、Redux で管理しているデータを処理するのは「slice reducer」です。前回の例では、Redux で管理するデータはカウンタの値でサポートする処理は二つでした。＊　カウンタを１づつ増やす＊　カウンタをリセットする（「０」に戻す）　この処理は、データを処理する際にデータを渡す必要はありませんでした。今回の記事は、カウンタに特定の値をセットするという処理を追加します。この処理をするためには、セットする値を指定する必要があります。まずは、前回紹介した「slice reducer」に「init」という処理を追加した例です。 追加した処理は、指定された値をカウンタの値（value）にセットする処理を行なっています。import {  ActionReducerMapBuilder,  createSlice,} from "＠reduxjs/toolkit";interface SampelState {  value: number;}interface Action {  type: string;  payload: any;}const initialState: SampelState = {  value: 0,};exp

Redux Toolkit を使った Redux 活用法Redux Toolkit を使うと Redux の設定が簡素化されます。この連載では、何回かに分けて Redux Toolkit を使った Redux の活用事例を紹介していきます。Redux Toolkit を利用する利点React などで Redux を利用する際のハードルになるのは、Redux を利用する為の細かい設定が初心者には面倒という点がありました。Vue などでよく利用される、Vuex や Pinia などの場合は、Redux に比べると設定の部分が大幅に簡素化されていて、初心者でも扱いやすいというのが大きな利点になっています。Redux Toolkit を利用すると、この設定の部分を大きく簡素化する事ができます。Redux Toolkit をする場合に必要な設定は：＊　ストアの作成＊　React への組み込み＊　Slice Reducer の作成とストアへの登録　この三点です。ストア(store)は、データを一括管理するための、Redux の仕組みと考えてください。 このストアには、後から説明する、「slice reducer」と呼ばれる、実際に一括管理するデータの定義と、そのデータの処理方法を記述するモジュールを登録する必要がありますが、最初はまずその「型」を作ります。「slice reducer」は作成後に追加で登録すれば OK です。その後で、作成したストア（store）を React に組み込んで、あとは、実際のデータとその処理方法を記述した、「slice reducer」を作成して、最初に作成し

少し簡単になった ReduxReact でデータを一括管理したい場合には、Redux を利用するのが一般的です。Redux は React 専用のデータ管理モジュールというわけではなく、Vue などでも利用可能な仕組みです。しかし、Vue の場合には、VUEX や Pinia などの使いやすいモジュールを利用するのが一般的です。VUEX や Pinia に比べると、Redux の設定は面倒で、初心者が躓くポイントの一つです。しかし、Redux Toolkit を活用すると、必要な設定も少なく、以前に比べると使いやすくなっています。React の基本の紹介が一通り終わったので、Redux Toolkit を利用した、Redux の活用法を何回かに分けてお届けします！React で Redux を利用するための設定Vue の場合は、Vue のプロジェクトを作成する際に、VUEX や Pinia を利用する設定を選択すると、必要な設定をやってくれる為、あとはデータと、その処理を記述すれば利用可能で、比較的簡単にデータを一括管理できます。一方で、React の場合、多くの場合は、自分自身でモジュールをインストールして必要な設定を行う必要があります。慣れてしまえば、それほど難しい物ではありませんが、初心者には何をやっているのか分かりにくいです部分も多く、Vue で利用する、VUEX や Pinia に比べるとハードルが高いと言われていました。実際に必要な設定は大きく分けて以下の三つの設定です：＊　ストア（store)の作成＊　アクション(action)の定義＊　各アクションに対応した、ス

Redux の罠React などでフロントエンドの開発をする場合、Redux を利用するとデータをページ間で共有できるので便利です。しかし、Web ブラウザが動作している PC のメモリを多く消費する場合があるので注意が必要です。Redux の活用React などの開発で、少し複雑なページ構成でフロントエンドのアプリやサービスを開発する場合、ページ間やコンポーネント間でデータの受け渡しが結構面倒になります。シンプルな場合は、パラメータを利用して渡せば良いのですが、ページやコンポーネントの関係が複雑になると結構大変です。そうした場合に利用されるのが Redux です。要はサービス（アプリ）全体でまとめてデータを管理する仕組みで違うページやコンポーネントから共通のデータにアクセスできるので便利です。React のフレームワーク自体はこうした、データをまとめて管理する機能がありません。従って、データをまとめて一元管理する場合は、外部のモジュールである Redux を利用する場合が多くなっています。設定が面倒な Reduxところが、Redux 自体は React とは別のモジュールになるので、慣れないと設定が面倒なので、初めて学習する方には厄介な代物として扱われる事が多くなります。一旦、設定の仕方と、データをやり取りする仕組みを理解して仕舞えばそれほど難しい物ではありませんが、必要な設定を行うファイルや仕組みがわかりにくいので初心者には何をしているのかがよく見えずに使いこなすのに苦労している方が多い様です。やっている事自体はシンプルで、データを更新する際には、「Reducer」と呼ばれ

Javascript の変数の話Javascript に限らず、プログラミング言語には変数という概念があります。プログラムで扱うデータを入れる場所です。最新の Javascript では３種類の変数を利用する事ができます。＊　const＊　let＊　var　です。constとletは後から導入された物ですが、基本的にはこの２つを利用することが推奨されています。理由は、なるべくバグを出さないようにするためというのが大きいと思います。どうして、constやletを使うとバグを生み出し易いのかご存知ですか？この記事では Javascript での変数について書いてみました。varだけでプログラムは書けます！当たり前ですが、varだけでもプログラムは書けます。慎重にコードを書けば別にvarを使う事自体は問題ないのですが、少し大きなプログラム、特に後から手直ししたりする場合にバグの原因になるのでconstやletを使うことが推奨されています。幾つか理由がありますが、var の問題は大きいものが２点です同じ名前の変数を複数宣言できる変数の宣言前の参照も許されている（値はundefined）ESLint などプログラムをチェックするプログラムを使えば、「危ない」コードは見つけてくれます。そうした仕組みを上手く利用する場合は、大きな問題ではないのですが、こうした、仕組みを利用しない場合バグの原因になり易いので、letやconstが導入されました。それでも、verが残されているのは、互換性のためなので、新しくプログラムを書く際には基本的には「var」は使わないのがいちばんです！バグの少ないプログ

FirebaseかReduxか？React を使って、フロントエンドの実装をする場合、アプリの規模が大きくなると扱うデータを一言管理した方がデータを管理しやすくなる場合が多くなります。その場合、よく利用されるのが Redux です。ところが、この Redux は最初は中々分かりにくい代物です。特にプログラミングの初心者には分かりにくい分野の一つだと思います。この記事では、Web アプリで使うデータの扱いを改めて考えてみました。ハードウエア設計支援のアプリの開発を例にすると現在、行っている開発の一つに、コンピュータのハードウエア、特にコンピュータで使うプリント基板の設計支援アプリがあります。開発の詳細は書くことができませんが、比較的大きなデータを扱うアプリです。前回はこの、設計データの一部のファイルが非常に大きく、ファイルアクセスの性能評価の指標に使って M1 Mac のシステム性能を実際のデータで見てみました。行数は百万行以上になる物もあります。ある機能では、そうしたデータのファイルを３種類読み込んで処理を行う必要があって、データの容量だけでも、数ギガバイトになります。ハードウエアの開発を行う場合、開発に利用するアプリ自体も結構なメモリを使いますし、CPU の負荷も高くなります。こうした処理を毎回、フロントエンドで行うと、設計者が利用している PC には相当の負荷もかかりますし、よりハイスペックな PC が必要になってきます。いずれにせよ、元になるデータは大きいのでその処理は必要なのですが、毎回データを取り込むようなアプリの設計にすると、時間も、必要なメモリ容量や CPU の性

Reduxの代わりにFirebaseを使えるか？ReactでWebアプリやWebサービスを開発する場合、少し複雑なものになると色々な値の受け渡しも複雑になります。 そこで、データをまとめて管理するために、Reduxなどを利用する場合も多くなります。一方で、Reduxは慣れないと少しわかりにくい部分も多く、初心者にはハードルが高い場合もたくさんあります。 この記事では、FirebaseのデータベースをReduxの代わりに利用する可能性について考えてみました。 意外に高速なFirebaseのデータベースアクセス Reduxの代わりにFirebaseのデータベースにデータを置いて、データを一元管理することは技術的には可能です。当然、アクセスするスピードはReduxに置いた場合の方が高速なのは言うまでもありません。Firebaseのデータは基本的にFirebaseのサーバーに置かれていますのでデータの取得にはネットワークアクセスが必要です。当然、メモリにあるデータ（＝Reduxのデータ）の方が高速でアクセスできます。 しかし、Freibaseのデータベースアクセスは意外に高速です。以前、SendGridというE-Mailベースのメッセージ配信サービスのバックエンドの開発を受けて行いました。この時、最初の実装はフロントエンドからのリクエストをSendGridのサーバーに転送して、その応答をフロントエンドに返すという、仲介役の様な実装をしていました。しかし、実装を少し工夫して、FirebaseにSendGridの情報をコピーしておいてFirebaseを介してデータを取得するように変更