30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

Cookie 概説

Cookie とは、HTTP でステートフルなやり取りを実現するために、ブラウザとサーバ間で情報を送受信する仕組みである。 HTTP は本来ステートレスなプロトコルである。そのため、同一のユーザーが連続でリクエストを行っても、それぞれ独立したリクエストであ…

CSS で斜線を描画する

CSS

HTML や CSS に、斜線を描画するための仕組みは用意されていない。 だがlinear-gradientを利用することで、このような斜線を描画できる。 「Can I use...」で確認すると、主要なブラウザは全てlinear-gradientに対応している。 linear-gradientはその名の通…

React.Suspense と React.lazy でコンポーネントを動的に読み込む

React.SuspenseとReact.lazyを使うことで、import()で動的に読み込んだコンポーネントを通常のコンポーネントとしてレンダリングすることができる。 動的読み込みはパフォーマンス向上のためなどに使われるが、それを簡単に React アプリに取り入れることが…

Dynamic import() で JavaScript ファイルを動的に読み込む

ECMAScript では、モジュールを読み込むための仕組みとしてimport文を定義している。 // sub.js export const foo = 1; export default 2; // main.js import value, {foo} from './sub.js'; console.log(value, foo); // 2 1 import文は仕様上、トップレベ…

React Test Renderer の createNodeMock で ref 属性のモックを作る

React Test Rendererのcreateメソッドは、オプションでcreateNodeMockという機能を使うことができる。 ref属性を使っているコンポーネントのテストに便利なのだが、初見では理解しづらい機能だったので、整理しておく。 React Test Rendererについてはこちら…

サードパーティライブラリを使わずに React コンポーネントのユニットテストを書く

React コンポーネントのユニットテストを書くときは、React Testing LibraryやEnzymeなどのサードパーティライブラリを使うことが多いはず。 だがそれらを使わなくても、公式が提供している機能だけでも十分にユニットテストを書くことが出来る。 この記事で…

React のプレリリースチャンネルで実験的な機能にアクセスする

React は公式に3つのリリースチャンネルを用意しており、これを利用すれば安定版以外の React もインストールすることが出来る。 Latest いわゆる安定版のリリースを行うチャンネル。セマンティックバージョニングに準拠している。安定性や段階的移行を重視…

React.memo を使ったパフォーマンス最適化について

この記事はReact #2 Advent Calendar 2019の20日目の記事です。 パフォーマンス・チューニングには、「こうすれば必ず上手くいく」という方法論や銀の弾丸はなく、地道に試行と計測を繰り返すしかない。 しかしだからこそ、基本的な考え方や仕組みを理解する…

React の状態管理についての論点整理

この記事はReact #2 Advent Calendar 2019の17日目の記事です。 なぜグローバルな Store を作るのか React アプリの設計論では、複数のコンポーネントで利用する値をどのように管理するか、というテーマがよく話題になる。 前提として、コンポーネントは小さ…

『白と黒のとびら オートマトンと形式言語をめぐる冒険』を読んだ

オートマトンの世界に触れることが出来る技術書、ではなくて、ファンタジー小説。 今年はいろいろとよい本を読めたが、これも非常によかった。 本当によく出来ていて、物語と学習が高度に融合している。 以下の出版社のサイトで、プロローグと1章が無料で公…

forwardRef と useImperativeHandle

この記事はReact #2 Advent Calendar 2019の6日目の記事です。 コンポーネント内の DOM 要素にRefオブジェクトを渡すための機能であるforwardRefと、コンポーネントにメソッドを生やす Hooks であるuseImperativeHandleについて、説明する。 どちらもRefオブ…

React Ref の基本

この記事はReact #2 Advent Calendar 2019の5日目の記事です。 React におけるRefには、2つの意味がある。 ひとつはRefオブジェクト。もうひとつは DOM 要素やコンポーネントのref属性。 この2つは関連がないわけではないが、それぞれ別の概念なので、分けて…

React のクラスコンポーネントの bind は何を解決しているのか

この記事はReact #2 Advent Calendar 2019の4日目の記事です。 クラスコンポーネントでイベントハンドラを設定する際に必要になる、constructorメソッドでのバインド。 そもそもこれはなぜ必要なのか。どのような動作をすることで、どのような問題を解決して…

宣言的な React と、ミュータブルな this

この記事はReact #2 Advent Calendar 2019の3日目の記事です。 宣言的と命令的の対比 React の特徴のひとつとして、UI を宣言的に記述する、というものが挙げられる。 これは、UI の最終結果だけを記述する、ということである。 データと UI が一対一で、こ…

React Router v5.1 で導入された Hooks API について

React Router のv5.1で Hooks API が導入された。 reacttraining.com URL パラメータやhistoryオブジェクトなどを、より簡単に取得できるようになった。 これまでの書き方も使えるが、今後のバージョンアップで非推奨になる可能性が高いとのことなので、今の…

『基礎からわかるTCP/IP ネットワークコンピューティング入門 第3版』を読んだ

ネットワークの勉強のために読んだ。 www.ohmsha.co.jp 勉強したい分野の一つにネットワークがあり、何かよい本はないかと探していたとき、以下のツイートが流れてきた。 TCP/IPをコンピューターの側面から理解したい人にはしつこく『基礎からわかるTCP/IP …

『WEB+DB PRESS Vol.113』の「体験 ドメイン駆動設計 モデリングから実装までを一気に制覇」を読んだ

ドメイン駆動設計(以下 DDD)に関心があるので読んでみた。 私のような初心者にも分かりやすい内容だったので、DDD に興味を持ったけど挫折した、という人は読んでみるといいと思う。 gihyo.jp DDD に関心を持ったキッカケはよく覚えていて、今年の2月。 SP…

なぜ useEffect では無限ループが起こり得るのか

React のuseEffectは、その仕組み上、書き方によっては無限ループが発生してしまう。 それはなぜ発生するのか、そしてどう対処すればいいのか。一度理解してしまえば大した話でもないのだが、自分の理解を整理するために書いておく。 動作確認に使った React…

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' コミット…

『アルゴリズム図鑑 絵で見てわかる26のアルゴリズム』を読んだ

プログラマとしての基礎体力をつける、が今の関心事なので、アルゴリズムとデータ構造についても勉強しようと思っている。 その第一歩として、評判のよかった本書を読んだ。評判通りの良書だった。 www.shoeisha.co.jp Apple の「Best of 2016」の一つにも選…

『TCP/IPの絵本 第2版 ネットワークを学ぶ新しい9つの扉』を読んだ

ネットワークについて(も)勉強しようと思っており、手始めに読んだ。 www.shoeisha.co.jp 「○○の絵本」というシリーズで既に何冊も出版されており、以前『UNIXの絵本』を読んだことがある。 シリーズに共通しているのだと思うが、見開き2ページで1セクショ…

なぜ E2E テストを書くのか

あまりまとまってないし、大したことは書いていない。このへんの話について知見を持っている人は、いろいろ教えて欲しい。 前提として、フロントエンドエンジニアの立場から書いている。 E2Eテストは高コストだと言われる。書くのも大変だし、メンテナンスも…

『Software Design 2019年6月号』の「思わず実践したくなるシェル&シェルスクリプト」を読んだ

初心者向けに書かれているので、読みやすかった。 コマンドがファイルとして定義されていることすら知らないレベルだったので、勉強になった。 分かっているようで分かっていなかった「パスを通す」の意味も分かったし。分かってしまえば、なんで分からなか…

standard-version と commitlint で npm パッケージのリリース管理を省力化する

standard-versionというライブラリを使うことで、リリース管理に伴う作業のいくつかを自動化できる。 具体的には以下の内容。 package.jsonのversionフィールドの値の更新 CHANGELOG.mdの更新 更新したpackage.jsonとCHANGELOG.mdのコミット Git のタグを打…

React Hooks + Redux Hooks + TypeScript で SPA を構築する

2019/07/14 追記 ディスカウント後の価格みたいな導出項目はselector (reselect)を使うとよいのでは https://redux.js.org/recipes/computing-derived-data - YonmanHasseのコメント / はてなブックマーク というコメントを頂き、確かに便利そうだったので導…

郵便番号で住所を検索できる npm パッケージ Ken All を公開した

パッケージ名はken-all。 github.com 郵便番号を渡すと、該当する住所を値として持つpromiseオブジェクトを返す。 import KenAll from 'ken-all'; // [['東京都', '千代田区', '大手町']]; KenAll('1000004').then(res => console.log(res)); 詳しい使い方は…

TypeScript で npm パッケージを作る

TypeScript で書いたプログラムを npm パッケージとして配布する手順を書いていく。 まだ npm パッケージの配布をしたことがない人を、想定読者としている。 よりよい書き方、詳細な設定、は措いておき、まずは最低限の要件を満たすものを作り上げる。 今回…

Error Boundary で React アプリ内のエラーを捕捉する

Error Boundary は React のv16から導入された機能で、これを使うとコンポーネント内で発生したエラーをキャッチすることが出来る。 主に、エラー用のUIを表示したり、エラーを記録したりすることに使われる。 前者にはstatic getDerivedStateFromErrorとい…

『オブジェクト指向設計実践ガイド ~Rubyでわかる 進化しつづける柔軟なアプリケーションの育て方』を読んだ

SPAをフルスクラッチで作ることになり、設計に対して関心が高まっていた。いきなりドメイン駆動設計は厳しいしそもそもオブジェクト指向についてよく分かっていないので、ネット上で評判がよかった本書を読んだ。 サンプルが Ruby で書かれているのも、選ん…