2019-01-01から1年間の記事一覧
React は公式に3つのリリースチャンネルを用意しており、これを利用すれば安定版以外の React もインストールすることが出来る。 Latest いわゆる安定版のリリースを行うチャンネル。セマンティックバージョニングに準拠している。安定性や段階的移行を重視…
パフォーマンス・チューニングには、「こうすれば必ず上手くいく」という方法論や銀の弾丸はなく、地道に試行と計測を繰り返すしかない。 しかしだからこそ、基本的な考え方や仕組みを理解することが大切であり、それがなければ、どのように対処していけばい…
なぜグローバルな Store を作るのか React アプリの設計論では、複数のコンポーネントで利用する値をどのように管理するか、というテーマがよく話題になる。 前提として、コンポーネントは小さく分割すべき、という考え方がまずある。 これは React に特有の…
オートマトンの世界に触れることが出来る技術書、ではなくて、ファンタジー小説。 今年はいろいろとよい本を読めたが、これも非常によかった。 本当によく出来ていて、物語と学習が高度に融合している。 以下の出版社のサイトで、プロローグと1章が無料で公…
コンポーネント内の DOM 要素にRefオブジェクトを渡すための機能であるforwardRefと、コンポーネントにメソッドを生やす Hooks であるuseImperativeHandleについて、説明する。 どちらもRefオブジェクトやref属性を使った機能なので、それらを理解しているこ…
React におけるRefには、2つの意味がある。 ひとつはRefオブジェクト。もうひとつは DOM 要素やコンポーネントのref属性。 この2つは関連がないわけではないが、それぞれ別の概念なので、分けて考えたほうが理解しやすい。 まずRefオブジェクトについて扱い…
クラスコンポーネントでイベントハンドラを設定する際に必要になる、constructorメソッドでのバインド。 そもそもこれはなぜ必要なのか。どのような動作をすることで、どのような問題を解決しているのか。 Hooks が登場したことで今後はクラスコンポーネント…
宣言的と命令的の対比 React の特徴のひとつとして、UI を宣言的に記述する、というものが挙げられる。 これは、UI の最終結果だけを記述する、ということである。 データと UI が一対一で、このデータのときはこのような UI になる、という書き方をする。 …
React Router のv5.1で Hooks API が導入された。 reacttraining.com URL パラメータやhistoryオブジェクトなどを、より簡単に取得できるようになった。 これまでの書き方も使えるが、今後のバージョンアップで非推奨になる可能性が高いとのことなので、今の…
ネットワークの勉強のために読んだ。 www.ohmsha.co.jp 勉強したい分野の一つにネットワークがあり、何かよい本はないかと探していたとき、以下のツイートが流れてきた。 TCP/IPをコンピューターの側面から理解したい人にはしつこく『基礎からわかるTCP/IP …
ドメイン駆動設計（以下 DDD）に関心があるので読んでみた。 私のような初心者にも分かりやすい内容だったので、DDD に興味を持ったけど挫折した、という人は読んでみるといいと思う。 gihyo.jp DDD に関心を持ったキッカケはよく覚えていて、今年の2月。 SP…
React のuseEffectは、その仕組み上、書き方によっては無限ループが発生してしまう。 それはなぜ発生するのか、そしてどう対処すればいいのか。一度理解してしまえば大した話でもないのだが、自分の理解を整理するために書いておく。 動作確認に使った React…
マウントされた関数コンポーネントが再び実行されるのは、どのようなケースか。 stateが更新されたら再実行されるんでしょ、くらいの曖昧な理解だったので、検証して整理した。 reactとreact-domのバージョンは16.10.2。 動作確認にReact Developer Toolsも…
bash のバージョンは5.0.11(1)-release (x86_64-apple-darwin18.6.0)。 動機 Git のコミットメッセージに、その差分を生み出したコマンドを書くことがよくある。 例えば以下のように。 $ yarn run lint:fix $ git commit -am '$ yarn run lint:fix' コミット…
プログラマとしての基礎体力をつける、が今の関心事なので、アルゴリズムとデータ構造についても勉強しようと思っている。 その第一歩として、評判のよかった本書を読んだ。評判通りの良書だった。 www.shoeisha.co.jp Apple の「Best of 2016」の一つにも選…
ネットワークについて（も）勉強しようと思っており、手始めに読んだ。 www.shoeisha.co.jp 「○○の絵本」というシリーズで既に何冊も出版されており、以前『UNIXの絵本』を読んだことがある。 シリーズに共通しているのだと思うが、見開き2ページで1セクショ…
あまりまとまってないし、大したことは書いていない。このへんの話について知見を持っている人は、いろいろ教えて欲しい。 前提として、フロントエンドエンジニアの立場から書いている。 E2Eテストは高コストだと言われる。書くのも大変だし、メンテナンスも…
初心者向けに書かれているので、読みやすかった。 コマンドがファイルとして定義されていることすら知らないレベルだったので、勉強になった。 分かっているようで分かっていなかった「パスを通す」の意味も分かったし。分かってしまえば、なんで分からなか…
standard-versionというライブラリを使うことで、リリース管理に伴う作業のいくつかを自動化できる。 具体的には以下の内容。 package.jsonのversionフィールドの値の更新 CHANGELOG.mdの更新 更新したpackage.jsonとCHANGELOG.mdのコミット Git のタグを打…
2020/05/31 追記 勉強や経験を重ねた結果、この記事を執筆した時より知識が増え、コードの書き方にも変化があります。 サンプルアプリも同様で、以下のプロダクトのコードのほうが、今の自分の考えが反映されていると思います。 github.com 追記終わり 2019/…
パッケージ名はken-all。 github.com 郵便番号を渡すと、該当する住所を値として持つpromiseオブジェクトを返す。 import KenAll from 'ken-all'; // [['東京都', '千代田区', '大手町']]; KenAll('1000004').then(res => console.log(res)); 詳しい使い方は…
TypeScript で書いたプログラムを npm パッケージとして配布する手順を書いていく。 まだ npm パッケージの配布をしたことがない人を、想定読者としている。 よりよい書き方、詳細な設定、は措いておき、まずは最低限の要件を満たすものを作り上げる。 今回…
Error Boundary は React のv16から導入された機能で、これを使うとコンポーネント内で発生したエラーをキャッチすることが出来る。 主に、エラー用のUIを表示したり、エラーを記録したりすることに使われる。 前者にはstatic getDerivedStateFromErrorとい…
SPAをフルスクラッチで作ることになり、設計に対して関心が高まっていた。いきなりドメイン駆動設計は厳しいしそもそもオブジェクト指向についてよく分かっていないので、ネット上で評判がよかった本書を読んだ。 サンプルが Ruby で書かれているのも、選ん…
CircleCIの2.0で導入されたWorkflowsを使うことで、複数のジョブを実行できる。 ちなみにCircleCIのCLIツールでは、Workflowsは使えない模様。 バージョン0.1.5607+f705856のCLIツールを使ってローカルで実行しようとしたところ、ダメだった。 Workflowsを使…
TypeScript で書いている React アプリで、ユニットテストも TypeScript で書くようにするための手順。 テスティングフレームワークはJestで、ReactコンポーネントのテストをしやすくするためにEnzymeも使う。 また、アサーションライブラリとしてPower Asse…
ArrayBufferとTypedArrayはバイナリデータを扱うためのオブジェクトで、ES2015で標準化された。 この記事では、これらのオブジェクトの概要について述べたあと、Node.js でバイナリファイルを読み書きする方法についても説明する。 動作確認は Node.js のv10…
JavaScript で書いていたプロジェクトを TypeScript に移行する場合、アノテーションの追加やビルドの設定の他、ESLint の対応も必要になる。 この記事では、TypeScript に移行した後も引き続き ESLint を使えるようにするための手順を書いていく。 方針とし…
最小構成のサンプルから始めて、React のビルドや Babel プラグインの利用も出来るようにしていく。 当初はts-loaderとbabel-loaderを組み合わせてビルドする予定だったのだが、Babel プラグインが動かなかったので断念した。この資料の内容に沿って設定して…
SPA を開発する際に必須のタスクの一つとして、History APIのフォールバック（以下、単に「フォールバック」と記述する）がある。 この事象について掻い摘んで説明すると、SPA においては URL と HTML ファイルが一対一になっていないので、それに伴う対応を…
