cheerio での文字列補間関数出力

この記事も、昔のプロジェクトで使われていたテンプレートエンジンを Node で無理やり動かそうとする試みの一つです。
今回は Java の Spring の Thymeleaf expression を使って書かれた HTML ファイルをターゲットとして、サンプル程度に処理を実装してあります。

この記事にある内容を思いつく直前までは xml2js を使っていましたが、ツリーの親子関係・兄弟関係を維持したままの加工が少々面倒でした。
そこで、 cheerio を少し捻って使うことにしました。

サンプルプロジェクトはこちら

Read More

SCSS を lit-html でも使う

毎日変化しているフロントエンドライブラリ向けの共通ライブラリを Web Components で書くことを夢見て、 lit-html を便利に使うべく検証しています。

今回は、 SCSS を lit-html と共に使ってみます。
おそらく PostCSS Stylus LESS など、 Webpack の loader がある言語であればなんでも動かせると思います。

サンプルプロジェクトはこちら

Read More

fork-loader を公開しました

先日投稿した記事での Webpack の使い方を応用して、 fork しているように処理パイプラインを構築できる loader を作成しました。(fork 関数とは違って、現時点では親プロセスは意味を持たなくなります。)
ユースケースは多くないかもしれませんが、 multi-loader 的な使い方ができるかと思います。(全く同じようにするには終端器となる loader が必要かもしれません。)

何かある場合は GitHub のリポジトリにお願い致します。

$ yarn add -D fork-loader

Webpack でファイルの複合体を分離して処理する

あるプロジェクトで使われているライブラリでは、コンパイル結果として一つのファイルからはページ・スタイル・スクリプトがそれぞれ生成されます。
Webpack でこれを正しいらしい設定で処理するにはどうすればいいかを実験してみました。

サンプルプロジェクトはこちら
(これは概念検証用のため、性能や安全性等は保証できません。)

Read More

lit-html を Storybook 上で表示させる

乱立しているフロントエンド界隈の共通ライブラリの作成について、 Web Components による問題解決を夢見て、最近は lit-html を触っています。

以前の記事で取り上げましたが、 React などのライブラリはたくさんのツールが存在しています。
Custom Elements (Web Components) については、必要ないからかツールはあまりありませんが、 Storybook は役に立つツールとなるのではないかと思います。

Custom Elements は v1 、 Storybook は v3.4.1 で確認しました。

サンプルプロジェクトはこちら

Read More

Python で gRPC の単体テスト

Swagger (OpenAPI) による API 定義が鬱陶しく感じるようになってきたので、 gRPC を使った API でシンプルに記述したいと思うようになりました。
要求として Python で不自由なく使えることという事項があったため、現状の Python による単体テストについて調査しまとめました。

公式には広くドキュメント化されていない方法ですので、これから変更が加えられる可能性はあります。

Python 3.6.5 と gRPC 1.13.0 の組み合わせで確認しました。

サンプルプロジェクトはこちら

5 月 31 日更新
Pipenv の場合の説明を追加しました。

7 月 22 日更新
“grpcio-testing” パッケージが PyPI から取得できるようになったため、それと Pipenv の利用を前提とした説明に変更しました。
古いページはこちら から参照できると思います。

Read More

camel2kebab-proxy を公開しました

昨日投稿した記事Jest を使っていた際、 CSS Modules での複雑なユースケースでは新しいファイルを加える工夫が必要でした。
一単語のセレクタだけにするのが正答のような気がしますが、試験的に設定してみるのも悪くないなと思い、 Jest 用の Mapper を作成してみました。

何かある場合は GitHub のリポジトリにお願い致します。

$ yarn add -D camel2kebab-proxy

transmit-update-loader を公開しました

昨日投稿した記事webpack を使っていた際、すこし脇道を通るような処理をさせたい場合や、名前以外に関連がないようなファイルにロードを伝搬させたい場合がでてきました。
こういうユースケースは正答ではないような気がしますが、試験的に設定してみるのも悪くないなと思い、 webpack の loader を作成してみました。

これを変に使うと、複雑に絡み合うネットワークや止まらないローダー、ラッチ回路などもできてしまうかもしれません。

何かある場合は GitHub のリポジトリにお願い致します。

$ yarn add -D transmit-update-loader

React を TypeScript で使う際のツール考察 2018 春

最近のフロントエンドの流れから取り残されている感じがしたので、一念発起して React で小さなアプリを作ろうと思いました。
せっかくなので、 React 関連ツールはなるべく統合して使うようにし、コード本体は TypeScript を使って開発しようと設定を始めました。
( webpack 4 が出てきてしまいましたので、まだ周回遅れです。)

残念ながら、 create-react-app でテンプレートを作成してからツールを追加していくたびにエラーに見舞われたので、メモ書きとして記録しておきます。
執筆に長い期間かかってしまいましたので、もしその間にライブラリがアップデートされ、動かなくなっていたら申し訳ありません。

目次と使用ツール

(以下のリンクは関係する部分へジャンプします。)

Windows 10 Pro (Fall Creators Update), Yarn, WebStorm で動かしています。

Read More