知識のリンク集

技術系アウトプット

React

親コンポーネントから子コンポーネントの関数を実行したい

子コンポーネント 子コンポーネント自体を forwardRef() に渡し、親コンポーネントのref.current を通じて子コンポーネントの ref にアクセスすることができるようにする。 import { forwardRef } from 'react'; const VideoPlayer: React.FC<Props> = (props, ref)</props>…

POLARの運動データを取得してかっこいいグラフにしたい

開発動機 私が通っている暗闇ボクシングではPOLARという心拍計測器を使うことができ、心拍数や運動時間から下記の項目を算出してくれます。計測項目 運動時間 最高心拍数 平均心拍数 心拍数推移 消費カロリー 2日に1回以上のペースで通って2ヶ月以上経ちまし…

PEGを使ってWikiシステム作ってみた

JavaScript用のパーサージェネレーターのPEG.jsを使ってWiki記法をReactオブジェクトに変換してWikiシステムを作ってみた。PEG文法で記法のルールを書いた`pegjs`という拡張子のファイルを用意し、 `pegjs -o src/wiki_parser.js src/wiki_parser.pegjs`コマ…

WebSocketを使ってリアルタイムチャットアプリを作った

Reactの勉強の一環としてWebSocketを用いたリアルタイムチャットアプリを作った。 使用ライブラリ Express Socket.IO リアルタイムな双方向通信を可能にするNode.jsライブラリとブラウザ用ライブラリのセット WebSocket サーバーとクライアントの双方向通信…

SPA(ReactとExpress)

Reactの勉強の一環としてSPAを作成してみた。WebサーバーはNode.jsで構築するが、その際にフレームワークはExpressを使用した。 SPA それまでWebアプリケーションは画面の表示を変更するたびにWebサーバーと通信を行い、表示すべきHTMLを受け取っていた。 そ…

Electronでマストドンのクライエントアプリ作った

Reactの勉強をしたかったので作ってみた。 github.com 目新しい技術について Electron ics.media Webpack ics.media

Reactの描画処理が速い理由

Reactの描画処理では仮想DOMの採用にはじまり、高速化するために工夫がこらされている。 工夫の方向としては"処理が重いリアルなDOMの操作を極力抑える"というものでる。 まずはリアルDOMの処理内容を知り、そこからどういった点で仮想DOMの方が速いのか比較…