はてなブックマーク

結論から 無駄な再レンダリングを発生させない 処理しないこと 高速化とは処理しないことです 矛盾しているように思えますが、処理が減ればアプリケーションは高速化します Reactの処理を減らすためには 再レンダリングをしないことです もちろん完全に再レンダリング無しというのは不可能なので、いかにそれを減らしていくかが重要です 再レンダリングの妥当性 妥当な再レンダリング コンポーネントのstateに変化があって自身の挙動を変更しなければならないとしたら、その再レンダリングは妥当です 妥当ではない再レンダリング コンポーネント自身がそのstateを必要としておらず、下位に配るためstateを保持しているとしたら、その際レンダリングは妥当ではありません そういう構造を作ってしまえば、配下にいる全コンポーネントがstateと無関係に再レンダリングされます。 何故、こんな構造がまかり通ってしまうのか

[React]useStateによるstate管理の問題点とその解決方法を模索した結果、3つの機能を分離するに至った話TypeScripthooksReactredux useStateの問題点 本来別々にするべき以下の3つの機能が統合されてしまっている state作成機能 stateの空間を確保し、必要なら初期値を設定する state変更機能 stateの値を変更し通知を行う state取得機能 stateの変更を検知し、値を受け取る 3つ機能が統合されていることによる弊害 stateを作成したコンポーネントは、必ずコンポーネントの再評価に巻き込まれる 親コンポーネントで作成したstateを、自分自身では使用せず子に配るだけのような場合も、親がstate変更の通知を受け取ってしまう 再評価の影響範囲を最小化する場合、上位のコンポーネントでstateが作成できない 上位コンポーネントで作成

前提条件 Windows10 Build:21364以降のWSL2でLinuxカーネルのアップデートが完了していること Windows11でも動作確認済み 設定コマンド sudo apt update sudo apt install -y fcitx-bin fcitx-mozc dbus-x11 language-pack-ja sudo update-locale LANG=ja_JP.UTF8 cat << EOS | sudo tee /etc/fonts/local.conf <?xml version="1.0"?> <!DOCTYPE fontconfig SYSTEM "fonts.dtd"> <fontconfig><dir>/mnt/c/Windows/Fonts</dir></fontconfig> EOS cat << EOS >> ~/.profile expo

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

. ├── README.md ├── dist [出力ディレクトリ] │ ├── index.html │ └── js │ ├── bundle.js │ └── bundle.js.map ├── front │ ├── public │ │ └── index.html [トップページ定義] │ ├── src │ │ ├── App.tsx [Application初期設定] │ │ ├── GitHub │ │ │ ├── FirebaseGitAuthModule.ts [FirebaseGit認証用モジュール] │ │ │ ├── GitHubModule.ts [Githubアクセス用モジュール] │ │ │ └── GraphQLgetRepositories.ts [GraphQLクエリ] │ │ ├── Parts [サブパーツコンポーネント] │ │ │ ├──

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ついに正式対応されるRustのawait/asyncを1.39betaで確認してみた ※こちらにも同じ内容を書いています 2019年11月リリース予定のRust1.39でついにawait/asyncが正式対応となります。ここにたどり着くまでに色々な紆余曲折があったようです。 １．待機にawaitを使わない場合 ソースコード 内容としてはファンクションを二つ用意して、中で10回ループ、ループごとに500msスリープを入れるという流れです。これをspawnで実行し、全ての処理が終了するまで待ちます。 このコードでは通常のスレッド用Sleepを使って待機を行っています。 # ![allow(non_snake_case)] use std::{thread, time}; async fn foo1() { for i in 0..10 { std::thread::sleep(time::Du

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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

[TypeScript]幻の型を実行時に召喚、メソッドの引数や戻り値を自動的にチェックする 前回の内容とほとんど同じですが、それをnpmに登録したので記事を焼き直します。 TypeScriptと型 TypeScriptの型は、入力補完やコンパイル段階までのエラーチェックには利用できるものの、実行結果に影響を与えることは出来ません。理由は簡単、コンパイルされた段階で、型に関する情報が影も形も無くなるからです。無いものは使えません。 しかしtsconfig.jsonの設定項目には実験的オプションとして、以下の二つの項目があります。 experimentalDecorators クラスやメソッド、パラメータに追加機能を割り込ませる機能 クラスを継承せずに動作をカスタマイズすることが出来る emitDecoratorMetadata コンパイル結果に型情報を埋め込む機能 ただし埋め込まれる型情報は

function FormComponent() { const todoModule = useModule(TodoModule); return ( <JSWindow>{/*←追加*/} <div style={{ textAlign: "center" }}> <div> <div>タイトル</div> <input style={{ width: "20em" }} value={todoModule.getState("input", "title")!} onChange={e => todoModule.setState(e.target.value, "input", "title")} /> <div>説明</div> <textarea style={{ width: "20em", height: "5em" }} value={todoModule.getSta

[TypeScript]型の基本とイミュータブルな追加・更新・削除 ～ 際限なき型地獄 ～ 今回はTypeScriptの型の基本を扱っていきたいと思います。練習用の題材として、データ操作の基本中の基本、追加・更新・削除を行う関数をイミュータブルの形で実装していきます。 前提条件 イミュータブルの形を崩さないように、狂ったようにreadonly 一度生成したオブジェクトの書き換えは許さない interfaceにはプライマリーキー用とデータの用のインターフェースを用意 データの構造は後から変えられるようにする addItemは自動的にidを採番するため、入力データはidがあっても無くても通るようにする もちろん他に関係ないプロパティが来たらエラー updateItemはidが必須、それ以外のデータは任意 送られてきたプロパティだけ置き換え deleteItemはidが必須 それ以外のデータは任

Reduxが難しい？ それは過去の話だ！ ～ ToDoアプリを最小限の労力で記述する ～ React-Reduxを簡単に利用するためのパッケージ@jswf/redux-moduleを利用して、最小限の労力でToDoアプリを作成するという内容です。 ※追記 @jswf/redux-moduleの使い方は以下記事で、もう少し短いソースにて確認できます React-ReduxだけどReducerもActionも書かず、Dispatchすら使わず、データも何となく受け取れるようにする方法 最初に プログラムはファイル一つだけにまとめました。 内容は以下のように構成されています。 データ構造の定義 データ操作用クラスの作成 データ入力用コンポーネント データ表示用コンポーネント 今回はReduxラッパーの機能を使うため、データの入力と表示はコンポーネントは分けてあります。 ここで見ていただきたいのは

１．今回のブツ ２．仮想ウインドウとは Webコンテンツを表示する際、そのコンテンツを表示しているアプリケーションは、モバイルも含めてウインドウ単位でUIが構成されています。デスクトップ用のOSはマルチウインドウ、モバイルの場合はシングルウインドウを切り替えていく方式になっています。 今回は仮想ウインドウということで、ブラウザのWebコンテンツを表示する領域に仮想的なウインドウを作ります。この仮想ウインドウがあると、流れの異なる入出力を同時に表示させることが出来ます。その他、突発的なデータ入力の際、入力フォームを埋め込む位置をレイアウトの中に用意しなくて済むようになります。 ３．仮想ウインドウを作る上で考えるべき事 PC用のOSのようなマルチウインドウシステムは、実際に実現しようとするといくつか面倒な部分があります。マウスやタップイベントの処理、イベントが発生したウインドウとそのパーツの把

TypeScriptによるバックエンドとフロントエンドの両面開発 ※全てをTypeScriptで記述したツリー型情報掲載システムを運用中です １．言語の選択 Web開発を一つの言語で行おうと思った場合、事実上の選択肢は素のJavaScriptを使うか、AltScript系を使うことになります。 前者のJavaScriptは気軽にコーディングできる反面、気付かぬうちに危険なコードが混入します。JavaScriptは仕様をきっちり把握していればある程度回避できますが、実は地雷原をサンダルで散歩するに等しい言語なのです。今日は無事でも、明日は足が吹っ飛ばされるかもしれません。 JavaScriptの危険性を回避するにはAltScript、中でも急速に伸びているTypeScriptを強くお勧めします。TypeScriptが一つ使えれば、フロントエンドとバックエンド両方が同じ言語で、しかもある程度の

地獄の管理人、その名はTypeScript ※前回の記事 地獄からの使者、その名はTypeScript ～ 固かった型の形 ～ 2 1. 気が付くとそこは迷宮 地獄の地図 初学者がTypeScriptを始めようとするのなら、おそらくはどこかしらの解説記事をみることになるだろう。ところがTypeScriptは迷宮の入り口なのである。知らずに進めば、GPSもコンパスも役に立たない永劫の樹海を彷徨うことになるだろう。 まずは入り口でこう問われることになる 『おぬしの進むべき道は、前か後ろか？』 大抵の人間はこう答えるだろう。 「もちろん前に進む、そのために来たのだ！」 その答えに対して、再び問われる。 『ふむ、まあ良いだろう。では次の問いだ。おぬしは環境を重んじるか？』 大半の人間にはその意味が分からない。しかし分からないままこう答える。 「環境は良い方がいいなぁ」 気がついたらフロントエンドで

TypeScriptは便利である。変な書き方をしていれば教えてくれるし、開発環境が入力補完の支援もしてくれる。まさにヘブンである。しかし書き方を知らないと、その世界は地獄と化す。真っ赤なエラーに焼き尽くされた地獄に。 地獄を回避するためには解決法を知ることである。TypeScriptは今も刻一刻と進化しており、昨日の知識は原始の人間が棒の握り方を覚えたに等しい。 ということで地獄を渡り、天国へ到達するための知恵の一部を紹介していきたいと思う。たぶん他にもあるような気がするのだが、TypeScriptを使い始めてだいぶ慣れてしまったので、何に困ったのか全てを覚えていない。思い出したら、記事を追記して投稿していこうと思う。こういう場合にどう解決するべきなのかという疑問があれば、それを考えていきたい。 1. JavaScriptからTypeScript移行時に最初に訪れる試練、連想配列 これを一

1．JavaScriptの仮想ウインドウフレームワーク SPA(SinglePageApplication)によるフロントエンド開発は、UIを構成するコストがとんでもなく大きいのがネックとなります。出来ることなら簡単に実装したいところです。ということで、最小限のコーディングで、それなりのUIが作れるフレームワークを開発しました。IE11やGoogleBotにも対応しています。 一般的なフロントエンドフレームワークとの違いは、ウインドウを基本単位とするところです。そしてHTMLタグを拡張するような考え方はありません。データの入出力は潔くJavaScript/TypeScriptで記述します。 フレームワーク使用例 どんなコードで動くのか ちなみに最初の紹介画像は以下のコードだけで作ることが出来ます。今回はリストビューのサンプルです。リストビューはヘッダのリサイズやソートに標準対応しています。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? お勧めしたい理由 1 新しい文法を使っても古い環境で動作させることができる 私の場合、GoogleBotが認識できるJavaScriptが前提なので、おのずと使える機能はES5に制限される。その範囲ではclassすら使うことはできない。しかしTypeScriptを用いれば、classだろうが継承だろうがやりたい放題だ。事前にやるべきことは出力ターゲットの指定だけだ。 2 型チェックが強力で柔軟 変数に型を付けることができるので、ちょっとしたミスが起きにくくなる。TypeScriptの凄まじいところは、可能性のある型をすべて記述できること

1 アセンブラのすすめ C言語を学ぶにあたって「ポインタが理解できない」という声を聞くことがある。自分の記憶をたどってみると「ポインタが理解できない」と考えたことは一度も無かった。何故なのか、答えは簡単である。C言語をやる前にアセンブラをやっていたからだ。そしてアセンブラをやることによってポインタで必要となるアドレスの概念だけでなく、レジスタやスタックという高水準言語では直接使うことの無い重要な構造を学ぶことが出来るのだ。今回はx86系32bitを前提に話を進めていきたい。 2 アセンブラを使うにはどうしたらいいのか 統合環境でデバッグまで考えた場合、VisualStudioから扱うのが一番楽だ。 VisualStudio2017のダウンロード先 https://visualstudio.microsoft.com/ja/downloads/ MASMのドキュメント https://doc

過去記事 SQLite3のJSON機能が便利だった SQLite3のJSON機能が便利だった2 今回の内容 今回はテーブルの内容を抽出する時に、一部分だけをJSONとして取得する 実はこれが恐ろしいほどに便利なのだ 1 テーブルとデータの作成 内容は太郎君と次郎君の好きな言語を保存したものである 今回、テーブル内のデータにはJSONを使用しない 1.1 SQL文 create table users(users_id primary key,users_name text); create table langs(langs_id primary key,langs_name text); create table binds(users_id integer,langs_id integer,primary key(users_id,langs_id), FOREIGN KEY(user

前書き 普及しないSPA これだけ時代が進んだのに、Webでは未だにガチャガチャページが切り替わるシステムが多い。SPAの普及を阻止しようとしている勢力がいるとしか思えない状況だ。「そんな悪の組織みたいな勢力がいるんだね、へぇしょっかぁ」とかギリギリのラインでネタをぶち込んでも仕方が無い。 今回はWebシステムの基本といえる掲示板を作成し、SPAの動作について確認していきたい Webアプリケーションとは九割九分、掲示板の変形である Webアプリケーションの基本は掲示板だ。DBからデータを抽出し出力、データを受け取りDBに保存、保存後の状態を再出力。たったこれだけのことだが、あらゆるシステムで利用される基本なのである。世の中のシステムは掲示板をベースにデータの種類を増やしたり、カテゴリ分けがあったり、ほとんどがちょっとした派生でしかないのだ 掲示板を作ることができれば、大抵のシステムはなんと

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 関連リンク ソースコード https://github.com/mofon001/TreeTypeInfomationService 実運用サイト https://croud.jp/ ※2019/07/06追記 現在、バックエンドをPHPからNode.jsに置き換え、 全てTypeScriptで作り直したものを以下のサイトで公開しています。 https://ttis.croud.jp/ 動作画面 SPAとツリー型システム Single Page Application(SPA)でのシステム構築 Web上に様々な記事を掲載するにあたって、

では、これを元に図を作ってみたい。 深淵への案内、MVCを図にしてみた 1. MVCで間違った例として叩きのめされる例 コントローラがサーバにあるので、ユーザはどうやってコントロールすれば良いのか分からない例である。 2. MVCでユーザがコントローラに触れられる例 ビューに操作オブジェクトがある場合と、単純にキーボードやマウスの状態を拾うことを考慮する例である。しかしよく考えるとおかしい。たとえばキーボードから入力した文字を画面に表示しているのは誰なのだろう？ 3. お前、実はそこにいたんだという例 人間の認識ではビューとコントローラが同じ場所にいるように見えるが、モデルからみれば全く別物である。実はモデルがあなたの背後をとり、気づかれずに入力したモノを対象となる位置に表示する指示を出しているに過ぎない。JavaScriptを使っていない場合でもそれは変わらないのだ。 4. いや、人間の