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

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

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

堅牢性と変更容易性

いろいろと考える機会があったので、備忘録としてまとめておく。 システムにおける堅牢性とは何か。 それは、壊れにくいこと、破綻しにくいことだと思う。 では、破綻しているとはどういう状態なのか。 システム全体の複雑さが増していって開発者がコントロ…

SPA の CSRF 対策や CORS について検証する

SPAのCSRF対策について調べる機会があったので、まとめておく。 CORSの挙動を中心に、実際にコードを書いて検証していった。 間違ったことは書いていないと思うけど、利用は自己責任でお願いします。 CSRF とは CSRFそのものについての詳しい記事はネット上…

「『現場で使える Ruby on Rails 5速習実践ガイド』増刷記念 著者交流会」に行ってきた

『現場で使える Ruby on Rails 5速習実践ガイド』の著者にサインをもらえるイベントがあったので、行ってきた。 diveintocode.doorkeeper.jp 正月休みに読んだのだが、よい本だった。本書のおかげで少しは「Railsの基礎を身に着けた」と思えるようになった。…

パブリッシュしていない npm ライブラリをプロジェクトで使う方法

社内プロジェクトなどで、共通の処理をライブラリとして切り出したいが、そのライブラリもクローズドにしたいのでパブリッシュできない。というケースを想定している。 package.jsonは、ライブラリのGitリポジトリのパスを指定することも出来るので、それを…

webpack のビルドとマークアップのパース処理

Vueのコンポーネントをwebpackでビルドする際のパフォーマンスの話。 他のライブラリでは分からない。 詳しい人にとっては常識かもしれないし、大した話ではないのだが、ここまでパフォーマンスに違いが出るのは知らなかったので、記録しておく。 webpackと…

Vue + Rails ではてなブックマークをインポートできるアプリを作った

習作なので実用性は低い。 後述するように Heroku にデプロイしてきちんと動いているので、動作に問題はない。 github.com 作成した目的 サーバーサイドの知識がなさすぎるので、それを学ぶため。 実際に何かを作るのが一番勉強になるし、ソースコードが手元…

Steb by Step で剥がす Webpacker

この記事では、Webpackerを使っている Rails アプリからWebpackerを剥がし、webpackを使うようにするための手順を書いていく。 Webpackerを止めたい理由は様々だが、主な理由は以下のような感じだろうか。 現時点ではWebpackerが使用しているwebpackのバージ…

Webpacker の基本的な仕組み

webpackではなく、Rails の gem であるWebpackerの話。 Webpackerを止める方法について書く予定だったが、前提であるWebpackerの説明だけで長くなってしまったので別の記事として切り出した。 脱 Webpacker についてはこちら。 numb86-tech.hatenablog.com r…