空雲リファレンス

[TypeScript] 型地獄で戦うための定石メモ

汎用的な型変換の必要性 GenericsとType Genericsに登場するinfer 具体例 複雑化する型の変換 まとめ

2021/02/16 10:44

型地獄で戦うためのTypeScriptの定石メモ

//Tがstringだったらnumber、それ以外ならbooleanに変換type Test01<T> = T extends string ? number : booleantype Test01A = Test01<string> //numbertype Test01B = Test01<object> //boolean//Tに関係なく、問答無用でnumberに変換(unknownはanyでも可)type Test02<T> = T extends unknown ? number : booleantype Test02A = Test02<string> //numbertype Test02B = Test02<object> //number//変換元interface01interface TestIf01 { a: { a0: number } b: { b0: number }}//特定の部分を取り出すtype Test03<T> = T extends { a: infer R } ? R : nevertype Test03A = Test03<TestIf01> //{a0:number}//キーを削除して値だけ取り出すtype Test04<T> = T extends { [_ in keyof T]: infer R } ? R : nevertype Test04A = Test04<TestIf01> //{a0:number} {b0:number}//共用体型を直交型に変換type Test05<T> = (T extends any ? (_: T) => void : never) extends (_: infer I) => void ? I : nevertype Test05A = Test05<Test04A> //{a0:number} & {b0:number}//変換元interface02interface TestIf02 { 200: { token: string } 500: { err: string }}//構造を整形するtype Test06<T> = T

2021/02/16 10:44

Next.js+TypeScript+Fastifyのカスタムサーバ作成

カスタムサーバ マルチプロセス化について Fastifyに関して インストールが必要な最低限のパッケージ カスタムサーバの実装コード スクリプト関係 まとめ

2021/01/26 22:34

Next.js+TypeScript+Fastifyのカスタムサーバ作成

2021/01/26 22:34

Reactコンポーネント間の通信を簡単にする

Reactとコンポーネント間の通信 何故グローバル変数が使えないのか setStateのdispatchをグローバル変数に格納せよ Sample components/InputBox.tsx pages/index.tsx 動作内容

2021/01/23 20:13

Reactコンポーネント間の通信を簡単にする

Reactとコンポーネント間の通信 何故グローバル変数が使えないのか setStateのdispatchをグローバル変数に格納せよ Sample components/InputBox.tsx pages/index.tsx 動作内容

2021/01/23 20:13

Next.jsでSSRを簡単にするには 其の壱「流浪」

・作成したnpmパッケージhttps://www.npmjs.com/package/@react-liblary/use-fetch・ソースコードhttps://github.com/SoraKumo001/use-fetch1. キャッシュと副作用を考える 2. データ構造を考える 3. useFetch作成 4. SSR用データの作成とクライアントへの引き渡し 5. 書きかけ

2021/01/20 21:29

Next.jsでSSRを簡単にするには 其の壱「流浪」

・作成したnpmパッケージhttps://www.npmjs.com/package/@react-liblary/use-fetch・ソースコードhttps://github.com/SoraKumo001/use-fetch1. キャッシュと副作用を考える 2. データ構造を考える 3. useFetch作成 4. SSR用データの作成とクライアントへの引き渡し 5. 書きかけ

2021/01/20 21:29

Next.jsでSSRを簡単にするには 其の壱「旅立ち」

1. Next.jsでのSSRはApolloが優秀 2. Next.js上でSSRをする時に使う物 3. useSWRを試してみる 4. useSWRのような使い勝手でApolloみたいなことをするには

2021/01/17 21:26

Next.jsでSSRを簡単にするには 其の壱「旅立ち」

2021/01/17 21:26

Next.jsでSSRを簡単にするには

プログラム系技術情報

2021/01/17 21:25

Next.jsでSSRを簡単にするには

2021/01/17 21:25

Docker-Volumeのバックアップとリストア

何故か標準でバックアップ方法が存在しない ネットで検索すると出てくる方法 標準入出力を使おう バックアップコマンドを作ってみる リストアコマンドを作ってみる 高速化したい バックアップ用Imageを作成する Docker Hubに登録 まとめ

2021/01/10 02:56

Docker-Volumeのバックアップとリストア

何故か標準でバックアップ方法が存在しない ネットで検索すると出てくる方法 標準入出力を使おう バックアップコマンドを作ってみる リストアコマンドを作ってみる 高速化したい バックアップ用Imageを作成する Docker Hubに登録 まとめ

2021/01/10 02:56

Caddy WebServer入門

CaddyはGolangで書かれた軽量かつ高機能なWebサーバです Let'sEncryptの証明書を自動生成したり、HTTP/3に逸早く対応出来たりと高機能なのが特徴ですまた、設定ファイルも柔軟かつ簡単に記述出来ますしかし設定ファイルに書き方が色々ありすぎて、結局どう書くのが正解なのかよく分からないという問題もあります現在はWebServerというとNginxが優勢な状況ですが、情報が増えてくれば今後はCaddyの使用率も上がるかもしれませんCaddyの実験環境を作る VirtualHost location 再利用可能ブロック Methodによるアクセス分岐 Headerの操作 圧縮設定 キャッシュ設定 Proxy httpsとLet'sEncryptの証明書発行 レスポンスの強制指定 HTTP3を使用する まとめ

2020/11/05 06:33

Caddy WebServer入門

CaddyはGolangで書かれた軽量かつ高機能なWebサーバです 現在WebServerというとNginxが使われていますしかしCaddyはLet'sEncryptの証明書を自動生成したり、HTTP/3にいち早く対応出来たりと機能的に優位にありますまた、設定ファイルも簡単に記述できるのが特徴です逆に設定ファイルが簡単なせいで、逆にどう書くのが正解なのかよく分からなくなるという欠点もありますCaddyの実験環境を作る VirtualHost location 再利用可能ブロック Methodによるアクセス分岐 Headerの操作 Proxy httpsとLet'sEncryptの証明書発行 レスポンスの強制指定 HTTP3を使用する まとめ

2020/11/05 06:33

tlsによる接続

Dockerにはリモート作業時、パスワード認証のような機能はありませんhttpsを利用して、暗号化ついでにコマンドを勝手に実行されないように制限をかける必要がありますそのためにはオレオレ証明書を作成しサーバとクライアントに配る必要があるのですが、これをやるのに一手間二手間かかります余りに面倒なので、コマンド一発で終わるように、途中の入力を全てスキップするスクリプトを作成しました 証明書の作成 サービスの設定変更 tlsによる接続確認 リモートでのDockerイメージの転送 docker-composeから接続する場合

2020/10/31 17:34

tlsによる接続

Dockerにはリモート作業時、パスワード認証のような機能はありませんhttpsを利用して、暗号化ついでにコマンドを勝手に実行されないように制限をかける必要がありますそのためにはオレオレ証明書を作成しサーバとクライアントに配る必要があるのですが、これをやるのに一手間二手間かかります余りに面倒なので、コマンド一発で終わるように、途中の入力を全てスキップするスクリプトを作成しました 証明書の作成 サービスの設定変更 tlsによる接続確認 リモートでのDockerイメージの転送 docker-composeから接続する場合

2020/10/31 17:34

Docker

UbuntuにDockerをインストールし、tlsによるリモート接続までを説明しますDockerのインストール Dockerの起動設定 動作確認 一般ユーザでDockerを使えるようにする

2020/10/31 17:14

Docker

UbuntuにDockerをインストールし、tlsによるリモート接続までを説明しますDockerのインストール Dockerの起動設定 動作確認 一般ユーザでDockerを使えるようにする tlsによる接続

2020/10/31 17:14

Jestの簡単非同期並列ライブラリのパッケージ化

パッケージ化しました 使い方

2020/05/01 00:58

Jestの簡単非同期並列ライブラリのパッケージ化

パッケージ化しました 使い方

2020/05/01 00:58

Jestの並列テストを簡単にする

並列テストを簡単に行うためのモジュールを作成してみますテストの非同期化 テストの非同期化を簡単にする 実行結果 これを実現したコード まとめ

2020/04/30 20:06

Jestの並列テストを簡単にする

並列テストを簡単に行うためのモジュールを作成してみますテストの非同期化 テストの非同期化を簡単にする 実行結果 これを実現したコード まとめ

2020/04/30 20:06

concurrentによる並列テスト

※ 色々改良した結果、次の記事でもっと簡単に実現する方法を書きました Jestでconcurrentを使用して並列実行する際、beforeAllが後から呼ばれる問題に対処する内容です。 ネット上にconcurrent自体の使用例が少なく、beforeAllの問題に触れられている情報は皆無でした。 これだけテストが重要だと叫ばれている時代なのにここまで情報が無いと、みんな本当にテストを書いているのか疑問に思ってしまいます。非同期実行が非道すぎる 悲惨な結果を招くコード 非道なる非同期テストに対処したコード まとめ

2020/04/29 19:39

concurrentによる並列テスト

※ 色々改良した結果、次の記事でもっと簡単に実現する方法を書きました Jestでconcurrentを使用して並列実行する際、beforeAllが後から呼ばれる問題に対処する内容です。 ネット上にconcurrent自体の使用例が少なく、beforeAllの問題に触れられている情報は皆無でした。 これだけテストが重要だと叫ばれている時代なのにここまで情報が無いと、みんな本当にテストを書いているのか疑問に思ってしまいます。非同期実行が非道すぎる 悲惨な結果を招くコード 非道なる非同期テストに対処したコード まとめ

2020/04/29 19:39

JestによるTest

ここではJestを使ったTipsをメモ代わりに書いていきます

2020/04/29 19:38

JestによるTest

ここではJestを使ったTipsをメモ代わりに書いていきます

2020/04/29 19:38

GraphQLの利用

概要 スキーマーの取得

2020/02/17 01:28

GraphQLの利用

概要 スキーマーの取得

2020/02/17 01:28

githubでビジュアルテストのCI化

概要 事前準備 ビジュアルキャプチャ用CIの作成 ビジュアルテスト用CIの作成 ビジュアルリグレッションテストの手順

2020/02/16 01:49

githubでビジュアルテストのCI化

概要 事前準備 ビジュアルキャプチャ用CIの作成 ビジュアルテスト用CIの作成 ビジュアルリグレッションテストの手順

2020/02/16 01:49

コンポーネントのビジュアルテスト

フロントエンドコンポーネントのテスト コンポーネントのキャプチャ環境の構築

2020/02/16 01:16

コンポーネントのビジュアルテスト

フロントエンドコンポーネントのテスト コンポーネントのキャプチャ環境の構築

2020/02/16 01:16

StoryBookを併用する

StoryBookに関して 必要パッケージの組み込み package.jsonの追加設定 storyの読み込み設定 TypeScriptのコンパイル設定 コンポーネントをストーリーとして追加 動作確認 動作結果 発生する問題

2020/02/15 23:49

StoryBookを併用する

StoryBookに関して 必要パッケージの組み込み package.jsonの追加設定 storyの読み込み設定 TypeScriptのコンパイル設定 コンポーネントをストーリーとして追加 動作確認 動作結果 発生する問題

2020/02/15 23:49

Next.jsの基本

Next.jsとは Next.jsでの開発で遭遇する障害 Next.jsを使うときに必要なもの 開発環境の構築 プログラムの作成 動作確認 動作結果 やっておいた方が良い設定変更 ここまでのまとめ

2020/02/15 22:33

Next.jsの基本

Next.jsとは Next.jsでの開発で遭遇する障害 Next.jsを使うときに必要なもの 開発環境の構築 プログラムの作成 動作確認 動作結果 ここまでのまとめ

2020/02/15 22:33

Next.jsプログラミング入門

ここで使用しているソースhttps://github.com/SoraKumo001/next-story追加予定記事・Next.jsの基本的な使い方・Storybookとの連携・コンポーネントの画像キャプチャ・github-actionsによるビジュアルリグレッションテストの自動化 ←ここまで書いた・GraphQLとApolloの導入(サンプルでgithubのAPIを使う予定)・サーバサイドの構築と連携でTypeORMでGraphQLの使用途中まで書いていて気がつきました全然入門記事じゃなかったことに

2020/02/15 22:28

Next.jsプログラミング入門

ここで使用しているソースhttps://github.com/SoraKumo001/next-story追加予定記事・Next.jsの基本的な使い方・Storybookとの連携・コンポーネントの画像キャプチャ・github-actionsによるビジュアルリグレッションテストの自動化 ←ここまで書いた・GraphQLとApolloの導入(サンプルでgithubのAPIを使う予定)・サーバサイドの構築と連携でTypeORMでGraphQLの使用途中まで書いていて気がつきました全然入門記事じゃなかったことに

2020/02/15 22:28

Vue.js用仮想Windowコンポーネント

2019/12/03 03:19

Vue.js用仮想Windowコンポーネント

Vue.js用仮想WindowコンポーネントWindows用のネイティブアプリケーションをイメージして作っています。利用する場合はVue.jsの環境を整えて、以下のコマンドでインストールしてくださいnpm -D i @jswf/vueリンク スクリーンショット 使用例 JSWindow

2019/12/03 03:19

JavaScriptをts-loaderでトランスコンパイルしてみる

ts-loaderはJavaScriptをトランスコンパイル出来るのか？ 環境構築 テスト用プログラムの作成 ビルドとその結果 ts-loaderの利点 jsとtsのプログラムを混在させる まとめ

2019/12/02 03:25

JavaScriptをts-loaderでトランスコンパイルしてみる

ts-loaderはJavaScriptをトランスコンパイル出来るのか？ 環境構築 テスト用プログラムの作成 ビルドとその結果 ts-loaderの利点 jsとtsのプログラムを混在させる まとめ

2019/12/02 03:25

GitHubにGraphQLでアクセスする(TypeScript/サーバレス)

GitHub GraphQL API v4 にアクセスし、情報を取得するためのプログラム解説です作成するもの ソースコード 最初に 認証機能 GitHubへのアクセス 上部エリア リポジトリ表示部分 まとめ

2019/11/10 00:02

GitHubにGraphQLでアクセスする(TypeScript/サーバレス)

GitHub GraphQL API v4 にアクセスし、情報を取得するためのプログラム解説です作成するもの ソースコード

2019/11/10 00:02

まとめ

今回のプログラムを作ってみて、GraphQLのクエリーを初めて触ってみたのですが、慣れていないせいもあって、欲しいデータにたどり着くまでかなり時間がかかりました。 さらにGitHubのAPIはRestだと取得できるのにGraphQLでは存在しないデータ(Trraficデータ)があって不便でした。この辺りは今後追加されることを期待します。

2019/11/09 16:22

上部エリア

上部の表示やログイン処理の部分です 表示はReactで書いていますが、このアプリで書いたコンポーネントはpropsや標準stateは一切使っていません コンポーネント間のやりとりは@jswf/redux-moduleを使って、ReduxのStore経由になっていますTopArea.tsx LoginWindow.tsx LogoutWindow.tsx

2019/11/09 16:12

リポジトリ表示部分

RepositorieList.tsx

2019/11/09 16:09

GitHubへのアクセス

GraphQLgetRepositories.ts GitHubModule.ts

2019/11/09 16:00

最初に

使用している主なパッケージ 前提条件 アプリケーションキーの発行

2019/11/09 15:52

認証機能

OAuth認証にはFirebaseを利用しているので、アプリケーション登録のための初期設定さえ完了していれば、プログラム的には単純に書くことが出来ます。config.ts FirebaseGitAuthModule.ts

2019/11/09 15:26

TypeScriptの環境構築

TypeScriptの基本文法を確認するのが主な場合は、「TypeScriptの実験環境の構築」を参照してください

2019/11/07 02:04

TypeScriptの環境構築

TypeScriptの基本文法を確認するのが主な場合は、「TypeScriptの実験環境の構築」を参照してください

2019/11/07 02:04

準備

AndroidStudioでテストプログラムの作成 Json用ライブラリの組み込み

2019/11/02 18:29

準備

AndroidStudioでテストプログラムの作成 Json用ライブラリの組み込み

2019/11/02 18:29

Objectのプロパティチェックと自動型生成

TypeScriptでオブジェクトにプロパティが存在するかどうかを確認する場合には、inキーワードが使用できます。しかしinでメンバを判別しても前提の型情報が存在しないと、判別したプロパティを使用することが出来ません。これを解決する方法を紹介します。エラーが出る例 inの用途 プロパティチェックを使いやすくする 複数同時にチェックできるようにする まとめ

2019/10/31 19:27

Objectのプロパティチェックと自動型生成

TypeScriptでオブジェクトにプロパティが存在するかどうかを確認する場合には、inキーワードが使用できます。しかしinでメンバを判別しても前提の型情報が存在しないと、判別したプロパティを使用することが出来ません。これを解決する方法を紹介します。エラーが出る例 inの用途 プロパティチェックを使いやすくする 複数同時にチェックできるようにする まとめ

2019/10/31 19:27

Rustによる非同期プログラミング

2019年11月リリース予定のRust1.39でついにawait/asyncが正式対応となります。ここにたどり着くまでに色々な紆余曲折があったようです。しかし「にわかラグビーファン」のように、ついこの間Rustをさわり始めた私には特に感慨はありません。待機にawaitを使わない場合 awaitを使用した場合 まとめ

2019/10/21 18:15

Rustによる非同期プログラミング

システム系のプログラム開発においてC++の代替として期待されているRustですが、Web系の開発などではイマイチその力を発揮できません。そんなRustが11月にリリースされるバージョン1.39でようやくawait/asyncに正式対応されます。 ということでawait/asyncを使った非同期プログラムをbeta版で試してみたいと思います。コード 出力結果 まとめ

2019/10/21 18:15

FirebaseとReact+TypeScriptの連携

今回は以下の機能を利用しますFirebase hosting 静的コンテンツの設置とfunctionsへのプロキシ functions databaseへの入出力 database データ保存 Webからのアクセスはfunctionsも含め、必ずhostingを介するようにします。これで静的コンテンツとデータアクセス用の窓口のドメインが同一になるので、CORS対策で余計な処理を付け加える必要がなくなります。 Reactに関してはトランスコンパイル後のファイルを静的コンテンツとしてhostingに配置します。Firebaseへのアクセスはfunctions経由となるので、フロントエンド側にAPIキーの設定をする必要はありません。今回はその手のキーは一切使わないコードとなっています。基本設定 掲示板を作る デプロイ

2019/10/19 01:48

FirebaseとReact+TypeScriptの連携

今回は以下の機能を利用しますFirebase hosting 静的コンテンツの設置とfunctionsへのプロキシ functions databaseへの入出力 database データ保存 Webからのアクセスはfunctionsも含め、必ずhostingを介するようにします。これで静的コンテンツとデータアクセス用の窓口のドメインが同一になるので、CORS対策で余計な処理を付け加える必要がなくなります。 Reactに関してはトランスコンパイル後のファイルを静的コンテンツとしてhostingに配置します基本設定 掲示板を作る デプロイ

2019/10/19 01:48

RailsのAPIサーバとReact+TypeScriptの連携

私は日頃はサーバ側をNode.js+TypeScriptで構築しているので、その感覚をRailsに持ってきています。ということでRailsで書くべき流儀は全て無視というか、そもそも知りません.ソースコード 環境設定 Railsの基本設定 SPAの掲示板を作る まとめ

2019/10/17 03:58

RailsのAPIサーバとReact+TypeScriptの連携

私は日頃はサーバ側をNode.js+TypeScriptで構築しているので、その感覚をRailsに持ってきています。ということでRailsで書くべき流儀は全て無視というか、そもそも知りません.環境設定 Railsの基本設定 SPAの掲示板を作る まとめ

2019/10/17 03:58

TypeScriptの型を使った、実行時の値チェック

TypeScriptでは静的な型付けが可能です。しかしいくら型を定義しようとも、簡単に内容を誤魔化すことができてしまいます。厳密に型チェックを行うのであれば、コンパイル時だけでなく、実行時にも型をチェックしなければなりません。もちろん手動で一つ一つ書いていけば良いのですが、それでは面倒です。 今回はできるだけ簡単にクラスのメソッドに実行時の型チェック機能を付けるという内容をやっていきます。事前準備 ソースコード チェックの限界 まとめ

2019/10/09 08:35

TypeScriptの型を使った、実行時の値チェック

TypeScriptでは静的な型付けが可能です。しかしいくら型を定義しようとも、簡単に内容を誤魔化すことができてしまいます。厳密に型チェックを行うのであれば、コンパイル時だけでなく、実行時にも型をチェックしなければなりません。もちろん手動で一つ一つ書いていけば良いのですが、それでは面倒です。 今回はできるだけ簡単にクラスのメソッドに実行時の型チェック機能を付けるという内容をやっていきます。事前準備 ソースコード チェックの限界 まとめ

2019/10/09 08:35

Node.js用リモートファンクションシステム

フロントエンド側で使用するパッケージ @rfcs/adapterバックエンド側で使用するパッケージ @rfcs/core以上の二つのパッケージを用いて、フロントエンドとバックエンドの通信を、ローカルの関数を呼び出すのに近い形で実現します。最短で説明は以下のような感じです。バックエンドで以下のように記述しexport class TestModule extends Module { @EXPORT async add(a: number, b: number) { return a + b; } } フロントエンド側で以下のように呼び出すと const result = (await adapter.exec("TestModule.add", a, b)) as number;aとbの内容がバックエンド側に渡され、計算した結果がフロントエンド側に戻ってきます。環境構築手順 バックエンド側 フロントエンド側

2019/10/07 07:54

Node.js用リモートファンクションシステム

フロントエンド側で使用するパッケージ @jswf/adapterバックエンド側で使用するパッケージ @jswf/rfs以上の二つのパッケージを用いて、フロントエンドとバックエンドの通信を、ローカルの関数を呼び出すのに近い形で実現します。最短で説明は以下のような感じです。バックエンドで以下のように記述しexport class TestModule extends Module { async JS_add(a: number, b: number) { return a + b; } } フロントエンド側で以下のように呼び出すと const result = (await adapter.exec("TestModule.add", a, b)) as number;aとbの内容がバックエンド側に渡され、計算した結果がフロントエンド側に戻ってきます。環境構築手順 バックエンド側 フロントエンド側

2019/10/07 07:54

パッケージ内容

細かい解説はまた後で書きます/** *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

2019/09/30 01:40

パッケージ内容

細かい解説はまた後で書きます/** *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

2019/09/30 01:40

React-Redux用簡単ラッパー

React上で利用するReduxを、Fluxの知識をすっ飛ばして利用するためのラッパーコンポーネントです。 Reducer、Action、Dispach等の知識は一切不要で、Reduxの状態管理が行えます。 npmに登録してありますインストール 利用手順 サンプルアプリ モジュール連携のサンプル writeOnly属性

2019/09/30 01:12

React-Redux用簡単ラッパー

React上で利用するReduxを、Fluxの知識をすっ飛ばして利用するためのラッパーコンポーネントです。 Reducer、Action、Dispach等の知識は一切不要で、Reduxの状態管理が行えます。インストール 利用手順 サンプルアプリ

2019/09/30 01:12

React-Reduxの内側からFluxをぶっ壊す！ ～ Reactラッパーの開発 ～

Reactでプログラムを書き始めて一ヶ月、React自体の使い方の確認を兼ねて作っていた仮想Windowフレームワークの作成が終わりました。これでメインのシステム開発に移れると思っていたところ、今度は状態管理が必要となりました。ということでReactで一番シェアが多いと思われるReact-Reduxに手を出しました。 ざっとReduxの入門記事に目を通しました。「うん、意味が分からん。解説ソースが長すぎて全体の流れが掴めん」 理解したのは、とんでもなく冗長な記述が必要になるということです。 さらにもう一つ理解したこと、それは自分の頭がとんでもなく悪いのだということです。 ということで入門記事を理解するのは諦めて、プログラムを書き始めました。 内容の理解など省いて、必要だと思われるものだけをかき集めて、最低限の動作をするプログラムを強引に書いてしまえば良いのです。 最初にやったのは適当にReducerを作って、Dispatchからオブジェクトを送ってデータを書き換え、それをコンポーネントに反映させるところからです。そこで分かったのは、そもそもActionなんて畏まって作らなくったって、データを送ればStoreの書き換えは出来るということでした。正確に言えば、データを送ったというイベントさえ起こせば、Reducerで勝手な値を生成してStoreに書き込むことすら可能です。もちろんそれをやったらテストで地獄を見るのは自明の理なのでさすがに禁じ手です。 ここまでやって何故自分がReduxの入門記事を理解できなかったのか分かりました。動作に不必要な要素が多すぎて、頭が理解を拒んでいたのです。とにかくデータの流れを掴んだことによって、ようやく入門記事の内容が理解できるようになりました。一日がかりでしたが、めでたくReduxが使えるようになりました。「めんどくせぇ、めんどくせぇ、息をするのもめんどくせぇ」 面倒くさい病の発病です。Fluxの正式な手続きでReduxを使うことを、私の心が拒否し始めました。どうやらこの面倒くささによって、代替のライブラリを探し始める人が続出しているようです。しかしここで代替のライブラリを使ったとしたら、それはどういうことか？導き出される結論は一つです。 敗北！ まだ大して戦ってもいないのに、敗北を認めるわけにはいきません。無能には無能なりのプライドがあります。ということで、自分が使いやすいように

2019/09/29 23:03

TreeItem

Vue.js用仮想WindowコンポーネントWindows用のネイティブアプリケーションをイメージして作っています。利用する場合はVue.jsの環境を整えて、以下のコマンドでインストールしてくださいnpm -D i @jswf/vueリンク スクリーンショット 使用例 JSWindow

2019/09/14 07:57

TreeItem

ツリー構造を生成します。TreeViewと組み合わせて使用します。Props Method 使い方

2019/09/14 07:57

TreeView

ツリー構造を生成するコンポーネントですTreeViewの仮想DOMのデータは初回のみ利用されます。ツリー構造を仮想DOMで操作するのは現実的ではないという判断でそういう仕様になっています。後からデータを変更する場合は、Methodを利用してください。Props Method 使い方 使い方2

2019/09/14 07:56

TreeView

ツリー構造を生成するコンポーネントですProps Method 使い方

2019/09/14 07:56

ListView

WindowsライクなListViewのコンポーネントです。 アイテムデータは仮想DOMを使用することが可能です。 データの操作は宣言的な使い方と命令的な使い方の両方が使用可能ですが、命令による書き込みを行うと、その時点で仮想DOM内のデータ更新を反映しないモードに切り替わります。 両方同時は論理的に無理なので、そのような仕様になっています。Props Method 使い方 使い方2

2019/09/11 22:57

ListView

WindowsライクなListViewのコンポーネントです。 アイテムデータは仮想DOMを使用することが可能です。Props Method 使い方

2019/09/11 22:57

SplitView

子ノードを2分割します。 そのためSplitViewの配下は仮想DOMのオブジェクトを二つ配置する必要があります。Props 使用例 使用例2

2019/09/11 22:55

SplitView

子ノードを2分割します。 そのためSplitViewの配下は仮想DOMのオブジェクトを二つ配置する必要があります。Props 使用例

2019/09/11 22:55

JSWindow

仮想ウインドウの基本コンポーネントです。 このコンポーネントを使うことによって、配下のノードが仮想Window化します。Props Method 使用例1 使用例2 使用例3

2019/09/11 22:55

JSWindow

仮想ウインドウの基本コンポーネントです。 このコンポーネントを使うことによって、配下のノードが仮想ウインドウ化します。Props Method 使用例

2019/09/11 22:55

React用仮想Windowコンポーネント

React用仮想WindowコンポーネントWindows用のネイティブアプリケーションをイメージして作っています。利用する場合はReactの環境を整えて、以下のコマンドでインストールしてくださいnpm -D i @jswf/react リンク スクリーンショット 使用例

2019/09/11 19:40

React用仮想Windowコンポーネント

React用仮想WindowコンポーネントWindows用のネイティブアプリケーションをイメージして作っています。利用する場合はReactの環境を整えて、以下のコマンドでインストールしてくださいnpm -D i @jswf/react リンク スクリーンショット 使用例

2019/09/11 19:40

配列

通常配列 連想配列

2019/08/25 07:13

配列

通常配列 連想配列

2019/08/25 07:13

変数

変数と型 変数と文字列

2019/08/25 07:11

変数

変数と型 変数と文字列

2019/08/25 07:11

配列

通常配列 連想配列

2019/08/24 22:13

変数

変数と型 変数と文字列

2019/08/24 22:11

TypeScriptのDecorator

TypeScriptのデコレータはオプション機能扱いのため、tsconfig.jsonに設定を追加する必要があります。デコレータを使用すると、クラスやメソッドの動作を継承不要でカスタマイズすることが出来るようになります。"experimentalDecorators": true //デコレータの使用 "emitDecoratorMetadata": true //デコレータで型情報を使用 型情報の使用を許可すると、実行時にTypeScriptの型情報を取得することが出来るようになります。TypeScriptの型はJavaScriptに変換された時点で幻となって消えますが、デコレータによる型情報は消えずに残ります。型情報取得

2019/08/23 07:51

TypeScriptのDecorator

TypeScriptのデコレータはオプション機能扱いのため、tsconfig.jsonに設定を追加する必要があります。デコレータを使用すると、クラスやメソッドの動作を継承不要でカスタマイズすることが出来るようになります。"experimentalDecorators": true //デコレータの使用 "emitDecoratorMetadata": true //デコレータで型情報を使用 型情報の使用を許可すると、実行時にTypeScriptの型情報を取得することが出来るようになります。TypeScriptの型はJavaScriptに変換された時点で幻となって消えますが、デコレータによる型情報は消えずに残ります。型情報取得

2019/08/23 07:51

非同期とPromise/async/await

非同期とは何か Promiseでタイマーを処理する async/awaitを使って記述する Promiseと引数と戻り値 非同期と通信処理 Promise.allによる並行処理

2019/08/23 02:04

非同期とPromise/async/await

非同期とは何か Promiseでタイマーを処理する async/awaitを使って記述する Promiseと引数と戻り値 非同期と通信処理 Promise.allによる並行処理

2019/08/23 02:04

TypeScriptのDecorator

TypeScriptのデコレータはオプション機能扱いのため、tsconfig.jsonに設定を追加する必要があります。デコレータを使用すると、クラスやメソッドの動作を継承不要でカスタマイズすることが出来るようになります。"experimentalDecorators": true //デコレータの使用 "emitDecoratorMetadata": true //デコレータで型情報を使用 型情報の使用を許可すると、実行時にTypeScriptの型情報を取得することが出来るようになります。TypeScriptの型はJavaScriptに変換された時点で幻となって消えますが、デコレータによる型情報は消えずに残ります。型情報取得

2019/08/22 22:51

非同期とPromise/async/await

非同期とは何か Promiseでタイマーを処理する async/awaitを使って記述する Promiseと引数と戻り値 非同期と通信処理 Promise.allによる並行処理

2019/08/22 17:04

typeと型の演算

TypeScriptでは定義した型を後から変更することが出来ます。 組み合わせて使用すれば柔軟な型定義が出来る一方、どんどん複雑化してコードの見通しが悪くなるので注意が必要です。単純なtype宣言 ユニオン型 オブジェクトの交差型 オブジェクトのユニオン型 NonNullableによるnullの削除 Extractによる抽出 -?による省略パラメータの無効化 Excludeによる削除

2019/08/22 15:41

typeと型の演算

TypeScriptでは定義した型を後から変更することが出来ます。 組み合わせて使用すれば柔軟な型定義が出来る一方、どんどん複雑化してコードの見通しが悪くなるので注意が必要です。単純なtype宣言 ユニオン型 オブジェクトの交差型 オブジェクトのユニオン型 NonNullableによるnullの削除 Extractによる抽出 -?による省略パラメータの無効化 Excludeによる削除

2019/08/22 15:41

ジェネリクス(総称体)

ジェネリクスは、そのときの状況によって型を差し替えることの出来る便利なマクロです。柔軟な型定義をやろうとした結果、作った本人でさえ理解できない定義が作られてしまうことがあるので注意が必要です。functionでの使い方 クラスでの使い方 ジェネルクスの型の継承

2019/08/22 13:50