TypeScript の陥りやすい罠

TypeScript の陥りやすい罠 Oreilly の Effective Typescript を読んだ。説明が簡潔でわかりやすく、章の構成も読みたいところだけ読めば良いようになっており、すらすら読める。対象読者層はある程度 TypeScript を使っており、ひと通りの機能を触ったこと…

TSをブラウザで実行するためのChrome拡張作った

ブラウザ上でTypeScriptをお手軽に試したいと思ったので作りました github.com コードスニペットを選択して拡張のメニューを押すと、そのコードを貼り付けたTS playgroundが開く 拡張のアイコンをクリックすると、TSが実行できるポップアップが開くのでGitHu…

TypeScriptでもジェネリクスをインスタンス化したい

C# だとジェネリクスの型パラメータは実行時にも利用できる using System; var factory = new Factory(); factory.LogType<Car>(); // Car class Car { string color = "red"; } public class Factory { public void LogType<T>() { Console.WriteLine(typeof(T).Nam</t></car>…

10分で作るSvelteマークダウンエディタ

10分で作るSvelteマークダウンエディタ 参考: Build a Svelte JS App: Magic Framework (Svelte 3 Tutorial) - Snipcart Svelteとは これを見るとSvelteが何なのかだいたい分かる https://youtu.be/AdNJ3fydeao これを読むとなぜSvelteを作ろうとしたかだい…

TypeScriptで実装するデータ構造

TypeScriptで実装するデータ構造 GitHub - uraway/data-structures.ts at master TOC LinkedList Stack Queue HashTable Tree Heap Trie BinarySearchTree Graph 参考 LinkedList LinkedListは、各要素が次の要素を参照を持っているシーケンスなデータ構造で…

Next.js API Route: ファイルをサーブする

Next.js API Route: ファイルをサーブする 環境: next: v10.0.1 参考: https://nextjs.org/docs/basic-features/data-fetching#reading-files-use-processcwd https://github.com/vercel/next.js/issues/8251 https://medium.com/@boris.poehland.business/n…

挿入ソートのアルゴリズム

挿入ソートのアルゴリズム 与えられた配列をソートする際、挿入ソートを用いるとする。 与えられた配列を、ソート済みの配列(長さは1)と未ソートの配列に分割する。未ソートの配列の中から一つ選び、ソート済みの配列に挿入する。挿入された値と、隣り合う要…

CircleCIでvscode-test

CircleCIでvscode-test vscode-test にサンプルがなかったのでメモ jobs: test: docker: - image: cimg/node:lts-browsers steps: - run: sudo apt update && sudo apt install libxss1 xvfb - run: | export DISPLAY=':99.0' /usr/bin/Xvfb :99 -screen 0 1…

Functional ComponentでforceUpdateをエミュレートする

Functional ComponentでforceUpdateをエミュレートする 参考 https://www.telerik.com/blogs/what-is-render-react-how-do-you-force-it?utm_source=reactdigest&utm_medium=email&utm_campaign=274 https://reactjs.org/docs/hooks-faq.html#is-there-somet…

Rails Active Storage で画像ファイルをHTTPSで配信したい

HTTPSページにて、AWS S3に保存された画像ファイルをActive Storageで配信すると、Mixed contentエラーが発生します。 ref: https://www.mixedcontentexamples.com/Test/NonSecureImage https://www.mixedcontentexamples.com/ デバッガーツールのSecurityタ…

CircleCIでマトリックスビルド

CircleCIでマトリックスビルド 現状CircleCIではマトリックスビルドはサポートされていませんが、実現するための方法がいくつかあります。 matrixキーがサポートされました Configuring CircleCI - CircleCI node v8、v10、v12、それぞれの実行環境でライブ…

CircleCIからnpm packageを公開するためのOrb

作りました。よろしくお願いします。 Orb Registry: npm-publisher GitHub Repo: npm-publisher 使用例 使い方 NPMトークンを取得し、環境変数NPM_TOKENとしてセット。package.jsonの情報に従ってパッケージを公開します。 モジュールのダウンロードやビルド…

配列の積和演算のアルゴリズム

配列の積和演算のアルゴリズム 「特別な配列」が与えられるので積和演算を行って値を返す。「特別な配列」は数値あるいは「特別な配列」をもつ。「特別な配列」内の数値をすべて加算するが、ネストレベルに応じてその和を乗算する。 例えば、 [x, y] → x + y…

二分探索木(binary search tree)から近似値を求める

二分探索木(binary search tree)から近似値を求める 二分探索木のデータとtargetが与えられる。二分探索木のデータの中からtargetの近似値を求める。 例えば次のような二分探索木のデータとtarget 5が与えられるとき、答えは6である。 8 /\ 3 10 /\ \ 1 6 14…

VS Code Extensionの公開を簡単にするCircleCI Orb作りました

VS Code Extensionの公開を簡単にするCircleCI Orb作りました 作りました: https://circleci.com/orbs/registry/orb/uraway/vsce リポジトリ: https://github.com/uraway/vsce 使い方 環境変数としてVSCODE_MARKETPLACE_TOKENにPersonal Access Tokenをセッ…

2つの数の和

2つの数の和 2つ以上のユニークな数字の集合Aの中から、ターゲット(target)の数字の和となる数字のペアを見つけ出す。数字のペアは最大1つある。答えは値が小さい順に並べるとする。 例えばAが1, 10, 5, -1、12、targetが15であれば、答えは10, 5のペアであ…

バイナリサーチ

バイナリサーチ 問: ソートされた数値の配列と数値targetを受け取り、配列中のtargetのインデックスを求める。その際、バイナリサーチを用いること。 アルゴリズム実装 $O(\log n)$ 配列の要素数をnとしたとき、left=0、right=nの変数を作る。また、leftとri…

VPC Peeringを使って、異なるVPCにあるRDSとEC2を接続する

aws

VPC Peeringを使って、異なるVPCにあるRDSとEC2を接続する VPC Peeringとは プライベートIPアドレスを使って、2つのVPC間でトラフィックをルーティングすることができる CIDRが一致または重複するVPC間の接続はできない VPC Peeringを設定する VPC Peeringを…

Palindrome Check (回文チェック) アルゴリズム

Palindrome Check (回文チェック) アルゴリズム 文字列stringを受け取って、回文かどうかをチェックする。すべての文字を比較しないといけないので、どうやっても計算量が$O(n)$以上になるはず。 アルゴリズム実装(1) $O(n)$ 両端から文字が等しいか比較して…

フィボナッチ数列のアルゴリズム

フィボナッチ数列のアルゴリズム 勉強がてらメモ フィボナッチ数列とは 「フィボナッチ数列」とは「前の2つの数を加えると次の数になる」という数列。1番目は0、2番目は1。n番目の数字は(n - 1)番目と(n - 2)番目の数字の和。 例えば、6番目の数は5 (0, 1, …

No such file or directory - bs_fetch:atomic_write_cache_file:chmod

No such file or directory - bs_fetch:atomic_write_cache_file:chmod docker-composeを使ってサーバーとsidekiq両方を動かそうとすると次のようなエラーが出る場合があります: $ docker-compose up app_1 | [12] Puma starting in cluster mode... app_1 |…

CircleCIのorb namespaceをリネーム(あるいは削除)したい

TL;DR 2019/03/20現時点ではnamespaceはCLIからリネームも削除もできない ここからサポートに連絡すればすぐに対応してくれる 表題について namespace を作り間違えたので、リネーム方法を探したところ、ドキュメントに次の一文が: Note: Namespaces cannot …

コンポーネントのマウント時にリクエストし、アンマウント時にキャンセルする axios リクエスト

とりあえず解はこうなった。 ライブラリのバージョン axio 0.18.0 react 16.8.3 react-dom 16.8.3 動作確認はこちら: ボタンクリックでコンポーネントのマウント・アンマウントが切り替えできる。APIリクエスト中にアンマウントされると、下のようなエラーメ…

TypeScript handbook Enums

TypeScript handbook Enums https://www.typescriptlang.org/docs/handbook/enums.html Enums Enums enums では、名前付きの定数群を定義します。その定数群の内容を明示したり、それぞれ異なるケースを簡単に作成することができます。TypeScript では、数値…

Rails 5 API + devise でパスワードのリセット

Rails 5 API + devise でパスワードのリセット 前回: http://uraway.hatenablog.com/entry/2016/07/11/090206 Rails 5 API + devise の資料があんまりなかったのでメモ。前提として devise を使ったユーザー登録、ログイン機能を持っている API を作成してい…

Docker で始める golang 入門

Docker で始める golang 入門 Docker 環境 動作確認済のバージョン: Version 2.0.0.0-mac81 (29211) こちら http://studio-andy.hatenablog.com/entry/go-todo-crud がすごいわかりやすくて良いので、これに沿うような Docker 環境を整えてみる。 まずは何は…

VSCode からはてなブログに投稿できる拡張作りました

VSCodeからはてなブログに投稿できる拡張作りました 作りました marketplace.visualstudio.com 気に入ったらスターください github.com 前に作ったAtom版はこっち github.com 下準備 使用には以下の3つが必要です Hatena ID Blog ID API Key Blog IDとAPI Ke…

S3 + CloudFront の CORS 設定

aws

手順をメモっとく S3 の設定 [Permissions] > [CORS configuration] から以下のように設定を追加: <CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> </CORSRule> </CORSConfiguration> CloudFront の設定 [Behavior] > [Cache Based on Selected Request Headers] から Origin ヘッダだけをS3に通す設定を行う: で、…

PWAでオフラインでも使える辞書アプリ作ってみた

いつも英語学習にはアルクの英辞郎の辞書アプリ使ってたんだけど、フィリピンのネットスピードでは使いづらいものがあって、オフラインでも使える辞書アプリ探すかなーと思っていたところ Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary)…

storybookで@babel7を使う

参考: github.com 環境: "@babel/core": "^7.1.2", "@storybook/react": "^3.4.11", "babel-loader": "^8.0.4", storybookで@babel7を使うために、storybookのwebpack設定を少し上書きする。 .babelrc.js (@babel7に対応したBabel設定ファイル) module.expor…