kenju's blog

About Programming and Mathematics

JavaScript

『JavaScript 関数型プログラミング - 複雑性を抑える発想と実践法を学ぶ』を読んだ

JavaScript関数型プログラミング 複雑性を抑える発想と実践法を学ぶ (impress top gear)作者: Luis Atencio,株式会社イディオマコムニカ加藤大雄出版社/メーカー: インプレス発売日: 2017/06/09メディア: 単行本(ソフトカバー)この商品を含むブログを見る …

eslint-plugin-compat のメンテナになった

https://github.com/amilajack/eslint-plugin-compat 仕事で利用しているライブラリの一つで、広告表示の JavaScript SDK の互換性担保のために最近入れたもの。 ブラウザ互換の問題で広告表示ができない、といったクリティカルな問題は避ける必要があって、…

社内システムのCoffeeScriptをES6に書き換えた

久々にフロントエンド周り書いた。 広告配信サーバーの入稿システム、20-30程度のCoffeeScriptファイルが中途半端な移行期状態で残っていたので、一気に移行した。 主業務がかなり忙しかったので、時間を見つけながらちょこちょこやってきた。 CoffeeScript…

TypeScriptでNumbers->SVGのコンパイラを書いた

少し前の話だけど、@kosamariさんのコンパイラになる※方法 — JavaScriptでコンパイラを作る - Qiitaという記事を読んでインスピレーションを受けたので、全く同じ仕様をTypeScriptで書き換えてみた。 github.com 本家との違いは、 TDDで開発した 入力値/出力…

"Emscripten: An LLVM-to-JavaScript Compiler"論文メモ

Open Frameworks で作成したプロジェクトをブラウザで実行できる方法の一つとして、LLVMをJavaScriptにコンパイルする"emscripten"というツールがある。 公式ドキュメントの他に、docs/ディレクトリにペーパーが付随していたので、それを読んだ読書メモ。 gi…

Reactを一年書く中で感じたこと

Compositionによる関心の分離は心地よい Viewを部品ごとに分割し、フロントを設計するComposition Patternsの場合、「今書いているComponentsが画面上のどの部分」なのかが非常にイメージしやすい。 ReactのDesign Principlesとして「Composition」が尊重さ…

JavaScriptでeval()をWeb Workerで実行する

Serverless Single Page Apps: Fast, Scalable, and Availableを読んでいた時に、↓のテクニックについて知った。 tl;dr ユーザーからの入力値をeval()に渡すのは、悪意のあるスクリプトを実行される可能性があるので基本的にご法度 しかし、JavaScriptのmain…

bind()は常に新しいインスタンスを返却する

bind(this) とすると返却される関数は常に新しいインスタンスである。 stackoverflow.com 具体例:React Componentsのイベントハンドラーをbind()する場合 問題 たとえば、React Componentsを書いている時、イベントハンドラーを以下のようにbind()する場合…

Railsで特定のURLにアクセスしたときにJS側でLocalStorage消去をしたい

tl;dr Railsで特定のURLにアクセスしたときにJS側でLocalStorage消去をしたいときの実装例 より汎用的に言うと、JS側でしか処理できない任意のロジックをRailsアプリケーションへのリクエストのタイミングでどのように呼び出すかと言う話 考え方 「Rails側で…

mocha でテストを実行するときに役立つデバッグ手法

mocha でテストしていた時に便利だったTipsのまとめ。 現状進行形で使っている。 Debugger API (Node.js) を使う Node.js 本体の提供するデバッガーを使うと、binding.pry みたいなデバッグができます。 mocha も Node.js のランタイムで実行されるので、当…

webpackビルドの進捗を標準出力に表示させる方法

webpack-core がビルドの進捗を取得できる ProgressPlugin を用意しているので、それを使えばパーセンテージとタスク内容メッセージが取得できる。 github.com シンプルに標準出力に書き出したいならば、ざっと以下のような感じ // webpack.config.js plugin…

React画像用ライブラリ"react-simple-image"

github.com なぜ作ったか srcSet, mediaConditionなどを宣言的に書けるReact Componentsが欲しかったから React Components libraryを作成し公開するまでの一連の流れを経験するため 特徴 srcSetに指定する、pixel descriptorもしくはwidth descriptorを宣言…

Reactをテストするenzymeを導入した際の知見メモ

“JavaScript Testing utilities for React"である"enzyme"を導入した際の知見。 github.com 要件 Testing Frameworkはmocha Full DOM Rendering(mount API)を利用 ポイント mochaでmount APIを使うときは--requireで最初に擬似DOM環境をセットする必要がある…

OSS: EnzymeのJSDOMドキュメントのバージョンアップデート

自分の出したPR備忘録。今回は、Enzymeのドキュメントが、最新のJSDOMバージョンに対応していなかったので、修正した。 github.com 解決した課題 ドキュメントのJSDOMのバージョンが古く、最新のJSDOMのバージョンでは動かなかった ポイント copyPropsで、JS…

Intercom JavaScript APIの知見メモ

CSツールとして仕事でIntercomを利用している。 Intercom JavaScript APIが存在していて、globalに読み込んでいるIntercom objectに対して、 起動時・シャットダウン・未読数変更時などのイベント監視 設定のオーバーライド 動的なメッセージウィンドウの開…