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

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

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 で書かれているのも、選ん…

CircleCI の Workflows を使う

CircleCIの2.0で導入されたWorkflowsを使うことで、複数のジョブを実行できる。 ちなみにCircleCIのCLIツールでは、Workflowsは使えない模様。 バージョン0.1.5607+f705856のCLIツールを使ってローカルで実行しようとしたところ、ダメだった。 Workflowsを使…

Jest + Enzyme のテストコードを TypeScript で書く

TypeScript で書いている React アプリで、ユニットテストも TypeScript で書くようにするための手順。 テスティングフレームワークはJestで、ReactコンポーネントのテストをしやすくするためにEnzymeも使う。 また、アサーションライブラリとしてPower Asse…

ArrayBuffer と TypedArray でバイナリデータを扱う

ArrayBufferとTypedArrayはバイナリデータを扱うためのオブジェクトで、ES2015で標準化された。 この記事では、これらのオブジェクトの概要について述べたあと、Node.js でバイナリファイルを読み書きする方法についても説明する。 動作確認は Node.js のv10…

既存プロジェクトを TypeScript に移行する際の ESLint の対応

JavaScript で書いていたプロジェクトを TypeScript に移行する場合、アノテーションの追加やビルドの設定の他、ESLint の対応も必要になる。 この記事では、TypeScript に移行した後も引き続き ESLint を使えるようにするための手順を書いていく。 方針とし…

babel-loader で TypeScript をビルドする

最小構成のサンプルから始めて、React のビルドや Babel プラグインの利用も出来るようにしていく。 当初はts-loaderとbabel-loaderを組み合わせてビルドする予定だったのだが、Babel プラグインが動かなかったので断念した。この資料の内容に沿って設定して…

Lambda@Edge で History API のフォールバックを複数設定する

SPA を開発する際に必須のタスクの一つとして、History APIのフォールバック(以下、単に「フォールバック」と記述する)がある。 この事象について掻い摘んで説明すると、SPA においては URL と HTML ファイルが一対一になっていないので、それに伴う対応を…

フロントエンドエンジニアがお世話になるであろう AWS のサービス群

備忘録として、記録していく。 ひとつひとつのサービスについて詳しく説明したりはしない。あくまでも概要や役割と、サービス間の関係について紹介するのみ。 そもそも AWS について詳しくない。フロントエンドエンジニアが必要に駆られて触っている、という…

『プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで』を読んだ

仕事で多少 Rails を触る機会があったが、そもそも Ruby を理解していないとダメだなと感じて、本書を読んだ。 gihyo.jp とても分かりやすく、Ruby に対する理解が深まった。 ちゃんと説明しているのがよい。 入門者向けだからと誤魔化さず、言語仕様につい…

Ruby のモジュールの基礎

使用している Ruby のバージョンは2.5.3。 モジュールの定義 以下の構文で定義する。 module モジュール名 end モジュールはクラスと違い、インスタンスを作ることは出来ない。 module MyModule end MyModule.new # undefined method `new' for MyModule:Mod…

useEffect の概要と async function を使う際の注意点

使用している React のバージョンは16.8.4。 レンダー後の処理を指定するための仕組み React Hooks の一つであるuseEffectは、レンダー後に実行したい処理を React に伝えるための仕組み。 useEffect(fn)と記述すると、DOMの更新が終わったあとにfnを実行す…

Ruby のクラスの初歩

Rubyのクラスの理解が曖昧だったので、整理して記録しておく。 Railsをやるにしても、ここらへんをきちんと理解しておくのは前提だと思う。 動作確認しているRubyのバージョンは2.5.3。 用語の整理 オブジェクトとインスタンスは、同じものを指していること…

プログラミング言語を使って対象を記述していく

「よりよいプログラミング」を考える上で示唆に富む記事を読んだので、自分なりにまとめておく。 以下の記事を読むことで、プログラミングに対して大きなヒントを得られた。 設計やアーキテクチャの話ではなく、プログラミングというものに対する発想や認識…

IE11 で API と非同期通信を行うためのコード

年に1回くらいは必要になりそうだけど絶対に忘れてしまうと思うので、検証済みのコードを自分用に記録しておく。 APIを叩くコードを、IE11でも動くように書く。 何らかの理由で Babel によるトランスパイルが出来ない、したくない状況を想定している。 基本…

SPA フルリニューアル計画における技術選定や設計思想(2019年2月版)

SPA のフルリニューアルを技術選定や設計からやることになった。 前回の記事も、そのために検討や調査を行っている際に生まれた副産物をまとめたものだ。 目指すべきは変更しやすいシステムであり、そしてそれは、堅牢性を実現することで達成されるはずだと…