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

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

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…

『WEB+DB PRESS Vol.107』の「実践CircleCI」を読んだ

職場にあったので何となく目を通してみたら、思ったより初歩から説明してあったのでちゃんと読むことにした。 gihyo.jp CircleCI、というかCIについてはほとんど何も知らないレベルだったが、ちゃんと入っていけた。 最後のほうは流し読みだから大した知識は…

Gatsby + CircleCI + AWS でサイトを構築した

サイトを作り直した。 それに伴い、デプロイのフローも整備した。 具体的には CircleCI でビルドを行い、S3 へのアップロードや CloudFront のキャッシュのクリアまで行う。 ソースは全部公開してあるので参考にどうぞ。 github.com 前提として、予めサイト…

Webpacker を使っている Rails アプリに Vue のユニットテストを導入する

真っ白な環境に Vue のユニットテストを導入する記事を以前書いた。 numb86-tech.hatenablog.com 今回は、Webpacker を用いて Vue を使用している Rails アプリに、Vue のユニットテストを導入する方法を書いていく。 rails newでプロジェクトを作成するとこ…

『RubyでつくるRuby ゼロから学びなおすプログラミング言語入門』を読んだ

タイトル通り、Rubyを使ってRubyインタプリタを作っていく面白いテーマの本。 プログラミング初心者も対象読者に入っているため、非常にコンパクトにまとまっており、140ページ程度でインタプリタを作れる。 RubyでつくるRuby ゼロから学びなおすプログラミ…

『Team Geek ――Googleのギークたちはいかにしてチームを作るのか』を読んだ

同僚に借りて読んだ。 ソフトウェア開発者を対象に、チームのなかでどのように振る舞うべきか、どのようなチームにしていけばいいのか、チームを守るために何をすべきか、チームリーダーの役割とは、といったものを説いていく。 非常に有名な本で、自分もタ…

Vue CLI を使わずに Vue のユニットテストを実行できるようにする

Vueのユニットテストを書こうと思い調べてみたが、ざっと読んだところ、Vue CLI の利用を前提にしている文書が多かった。 だが現実的には、何らかの理由で Vue CLI を使わない、使っていないというケースも多いはず。 そこで、Vue CLI を使わない環境でユニ…