細かい解説はまた後で書きます/** *Storeデータ設定を行う * * @export * @template T * @param {(action: Action) => void} dispatch * @param {(string string[])} name Storeのオブジェクト名(階層指定可能) * @param {AddOptionType<T>} params パラメータ */ export declare function setStoreState<T = map>(dispatch: (action: Action) => void, name: string string[], params: AddOptionType<T>): void;/** *Reduxにモジュール機能を組み込む * * @export * @param {*} [state={}] * @param {Action} action * @returns */ export declare function ModuleReducer(state: {} undefined, action: Action): map;/** *ストアデータ操作用基本モジュールクラス * * @export * @class ReduxModule * @template State */ export declare class ReduxModule<State = { [key: string]: unknown; }> { //デフォルト値設定用 static defaultState?: unknown; //外部参照モジュールの指定用 //(getModuleで呼び出せるようになる) static includes?: (typeof ReduxModule { module: typeof ReduxModule; prefix: string; })[]; /** *includesに記述した外部参照モジュールを取得する * * @template T * @tem
細かい解説はまた後で書きます/** *Storeデータ設定を行う * * @export * @template T * @param {(action: Action) => void} dispatch * @param {(string string[])} name Storeのオブジェクト名(階層指定可能) * @param {AddOptionType<T>} params パラメータ */ export declare function setStoreState<T = map>(dispatch: (action: Action) => void, name: string string[], params: AddOptionType<T>): void;/** *Reduxにモジュール機能を組み込む * * @export * @param {*} [state={}] * @param {Action} action * @returns */ export declare function ModuleReducer(state: {} undefined, action: Action): map;/** *ストアデータ操作用基本モジュールクラス * * @export * @class ReduxModule * @template State */ export declare class ReduxModule<State = { [key: string]: unknown; }> { //デフォルト値設定用 static defaultState?: unknown; //外部参照モジュールの指定用 //(getModuleで呼び出せるようになる) static includes?: (typeof ReduxModule { module: typeof ReduxModule; prefix: string; })[]; /** *includesに記述した外部参照モジュールを取得する * * @template T * @tem
React上で利用するReduxを、Fluxの知識をすっ飛ばして利用するためのラッパーコンポーネントです。 Reducer、Action、Dispach等の知識は一切不要で、Reduxの状態管理が行えます。 npmに登録してありますインストール 利用手順 サンプルアプリ モジュール連携のサンプル writeOnly属性
React上で利用するReduxを、Fluxの知識をすっ飛ばして利用するためのラッパーコンポーネントです。 Reducer、Action、Dispach等の知識は一切不要で、Reduxの状態管理が行えます。インストール 利用手順 サンプルアプリ
React-Reduxの内側からFluxをぶっ壊す！ ～ Reactラッパーの開発 ～
Reactでプログラムを書き始めて一ヶ月、React自体の使い方の確認を兼ねて作っていた仮想Windowフレームワークの作成が終わりました。これでメインのシステム開発に移れると思っていたところ、今度は状態管理が必要となりました。ということでReactで一番シェアが多いと思われるReact-Reduxに手を出しました。 ざっとReduxの入門記事に目を通しました。「うん、意味が分からん。解説ソースが長すぎて全体の流れが掴めん」 理解したのは、とんでもなく冗長な記述が必要になるということです。 さらにもう一つ理解したこと、それは自分の頭がとんでもなく悪いのだということです。 ということで入門記事を理解するのは諦めて、プログラムを書き始めました。 内容の理解など省いて、必要だと思われるものだけをかき集めて、最低限の動作をするプログラムを強引に書いてしまえば良いのです。 最初にやったのは適当にReducerを作って、Dispatchからオブジェクトを送ってデータを書き換え、それをコンポーネントに反映させるところからです。そこで分かったのは、そもそもActionなんて畏まって作らなくったって、データを送ればStoreの書き換えは出来るということでした。正確に言えば、データを送ったというイベントさえ起こせば、Reducerで勝手な値を生成してStoreに書き込むことすら可能です。もちろんそれをやったらテストで地獄を見るのは自明の理なのでさすがに禁じ手です。 ここまでやって何故自分がReduxの入門記事を理解できなかったのか分かりました。動作に不必要な要素が多すぎて、頭が理解を拒んでいたのです。とにかくデータの流れを掴んだことによって、ようやく入門記事の内容が理解できるようになりました。一日がかりでしたが、めでたくReduxが使えるようになりました。「めんどくせぇ、めんどくせぇ、息をするのもめんどくせぇ」 面倒くさい病の発病です。Fluxの正式な手続きでReduxを使うことを、私の心が拒否し始めました。どうやらこの面倒くささによって、代替のライブラリを探し始める人が続出しているようです。しかしここで代替のライブラリを使ったとしたら、それはどういうことか？導き出される結論は一つです。 敗北！ まだ大して戦ってもいないのに、敗北を認めるわけにはいきません。無能には無能なりのプライドがあります。ということで、自分が使いやすいように
Vue.js用仮想WindowコンポーネントWindows用のネイティブアプリケーションをイメージして作っています。利用する場合はVue.jsの環境を整えて、以下のコマンドでインストールしてくださいnpm -D i @jswf/vueリンク スクリーンショット 使用例 JSWindow
ツリー構造を生成します。TreeViewと組み合わせて使用します。Props Method 使い方
ツリー構造を生成するコンポーネントですTreeViewの仮想DOMのデータは初回のみ利用されます。ツリー構造を仮想DOMで操作するのは現実的ではないという判断でそういう仕様になっています。後からデータを変更する場合は、Methodを利用してください。Props Method 使い方 使い方2
ツリー構造を生成するコンポーネントですProps Method 使い方
WindowsライクなListViewのコンポーネントです。 アイテムデータは仮想DOMを使用することが可能です。 データの操作は宣言的な使い方と命令的な使い方の両方が使用可能ですが、命令による書き込みを行うと、その時点で仮想DOM内のデータ更新を反映しないモードに切り替わります。 両方同時は論理的に無理なので、そのような仕様になっています。Props Method 使い方 使い方2
WindowsライクなListViewのコンポーネントです。 アイテムデータは仮想DOMを使用することが可能です。Props Method 使い方
子ノードを2分割します。 そのためSplitViewの配下は仮想DOMのオブジェクトを二つ配置する必要があります。Props 使用例 使用例2
子ノードを2分割します。 そのためSplitViewの配下は仮想DOMのオブジェクトを二つ配置する必要があります。Props 使用例
仮想ウインドウの基本コンポーネントです。 このコンポーネントを使うことによって、配下のノードが仮想Window化します。Props Method 使用例1 使用例2 使用例3
仮想ウインドウの基本コンポーネントです。 このコンポーネントを使うことによって、配下のノードが仮想ウインドウ化します。Props Method 使用例
React用仮想WindowコンポーネントWindows用のネイティブアプリケーションをイメージして作っています。利用する場合はReactの環境を整えて、以下のコマンドでインストールしてくださいnpm -D i @jswf/react リンク スクリーンショット 使用例
React用仮想WindowコンポーネントWindows用のネイティブアプリケーションをイメージして作っています。利用する場合はReactの環境を整えて、以下のコマンドでインストールしてくださいnpm -D i @jswf/react リンク スクリーンショット 使用例
「ブログリーダー」を活用して、空雲さんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
