PWA/WebUI

Photo by Matthew Guay

deno test
denoのテスティング機能は、ツールを追加インストールせずに動作するテストランナーを提供しています。deno testサブコマンドで、ファイルやディレクトリ単位のテストスイートを一括実行できます。 …
Javascriptの条件つきコンパイル
TypescriptやJavascriptの言語仕様には条件つきコンパイルを含むマクロがありませんが、esbuildにはその機能があります。 if(DEBUG) { …
Litのコード構成
Litは、WebComponents標準に準拠したクラスコンポーネントを実装するフレームワークです。 APIクライアントの実装パターン APIクライアント用途の典型的な実装パターンは以下のような例に …
Selenium Python
SeleniumはWebアプリケーションをE2Eテストするフレームワークです。 ブラウザをスクリプト操作することで、実機の利用環境に近いテストを実装できます。Javascriptのみのインテグレーショ …
Litの特徴
LitはWebのUIコンポーネント開発向けライブラリで、React.jsやVue.jsなどのオルタナティブです。 Web Components標準に準拠していることと、VirtualDOMによらない …
HTMLフォームからAPIコールするイディオム
HTMLフォームには主にPOSTのリクエストを投稿する機能があります。 onSubmitイベントにハンドラを設定すると、Javascriptから任意のAPIコールなどを実行できます。 このハンドラの書 …
SVG画像にCSS変数を適用する
SVG画像はベクター画像標準としてWebで広く利用されています。 またSVGはXMLでもあり、加工するとCSS変数も利用できます。これにより、用途に応じて色を変えられる画像を作れます。 CSS変数を用 …
mwc-ripple
Material Web Componentsの mwc-rippleはインク・リップル効果を提供するWebComponentです。 CSS <mwc-ripple>というタグは、画面全体を装飾します …
ReactコンポーネントのAPIコール実装
ブラウザアプリケーションは多くの場合、何らかのWebAPIクライアント機能を実装します。 API呼び出しの実装ポイントは、非同期処理の組込み方にあります。 Reactの関数コンポーネントで …
esbuildからpreact/compatを利用する
preactを単体で利用する場合には、 tsconfig.jsonにjsxFactoryを適切に指定することで動作します。 { "compilerOptions": { "jsx": "react", …
Jestのモック関数実装
Javascriptのモジュール形式はESMに移行しつつありますが、テストツールのJestはESMのコードにモックを注入できません。 バンドラーがESMとcommonJSの両形式に対応しているのであれ …
JestからPostgresを操作する方法
特定のセットアップデータに依存するテストを実行したい場合、テストランナーから直接データベースを操作する構成が手軽です。 JestなどJavascriptプロジェクトでは、node-postgres を …
Denoによるブラウザ向けバンドル
denoでブラウザ向けのプロジェクトをビルドする場合、nodeとの最大の違いはパッケージの依存解決です。 denoのパッケージ参照にはpackage.jsonではなく deno.jsonを用います。 …
gRPC WebクライアントをESMにビルドする
gRPC WebのクライアントはNode向けのcommonJS形式で出力されますが、commonJSはレガシーなフォーマットになりつつあります。 node-resoleveとcommonjsプラグイン …
Preactのprops
PreactはReactとほぼ互換のコンポーネント軽量ライブラリで、propsの基本的な使い方もReactと同じです。 JSXのpropsはReactとまったく同じ書き方で動作します。 コンポーネント …
コンポーネント内リンクの描画ズレの修正
Javascriptのクライアントサイド・ルーティングを使用している場合、リンク先への遷移時にスクロール位置がリセットされないことがあります。 HTMLのaタグではページトップに遷移するため、利用時の …
右端の余白を除去する
CSSのレスポンシブ調整が不調な場合、モバイル表示の右端に原因不明の余白が表示されるケースがあります。 特定の要素が不揃いな場合にはまだ探せるのですが、ネガティブmarginが設定されているケースなど …
Reselectの使い方
ReduxなどのステートコンテナはReactクライアントのデータフロー整備に不可欠です。しかし、素朴に実装するとレンダリング回数が多くなりがちです。 Reselectはmemoize手法により、再計 …
Storybookの使い方
StorybookはReactなどのUIコンポーネントをリスト表示して動作確認するツールです。addonを利用して入力値ごとの挙動を確認することも可能です。 インストール npmでstorybook …
Rollupでwasm-bindgenの出力をバンドル
RustでWeb向けのWebAssemblyを開発するためのデファクトツールはwasm-bindgenです。Javascriptとのオブジェクト受け渡しインターフェースを実装したJavascriptラ …
TypeDocの使い方
TypeScriptのドキュメント生成ツールに、 TypeDocがあります。コードの型情報から基礎的な情報を収集し、規格化が進んでいる TSDocのアノテーションに対応しています。 コードコメントに …
Rollupの使い方
ブラウザ向けのJavascriptアプリやライブラリをビルドするためのバンドラーツールとして、webpackや rollup.jsが普及していますが、ブラウザの世代交代が進んできた結果、Rollupが …
ShadowDOMのCSSスタイリング
ShadowDOMはWebComponentsの基礎技術でもあり、Javascriptを活用したコンポーネント開発の際に、理解が求められます。 ShadowDOMの最大のポイント …
Ramda.jsでカリー化する
Ramda.jsには任意の関数をカリー化する curry()があります。 curried_func = R.curry( (arg) => { some_codes(); } ) といった書式でカリー …
Material Web Components リスト
Web向けのマテリアルデザインフレームワークのMaterial Components for Web(MDC)をWeb Componentsとしてリパックした Material Web …
customElementsのアップグレード待ち処理
customElements技術を用いてWebComponentsを作成した場合、利用するHTMLからプロパティ操作などを実行したいケースがあります。 customElementsはレンダリング後に機 …
Polymer 3の使い方
WebComponentsを先導してきた PolymerがGoogle I/O 2018でPolymer3.0をリリースし、アーキテクチャを大きく変えました。 実際に検証したところ、npmでパッケージ …
lernaでmonorepo管理
lernaはnpmベースのJavascriptプロジェクトでモノリシックなレポジトリを構築するツールです。 一括ビルド・一括テストなどの共通ワークフローやdevDependenciesに入るビルド …
dom-repeat: Polymerの階層データ処理
Polymerの dom-repeatを活用することで階層データのテンプレートを構造的に記述できます。 たとえばsomeonesというプロパティに、オブジェクトのArray（[{},{},]の構造）を …
paper-menu-button
paper-menu-buttonは、Material Designに沿ったWebComponentsベースのドロップダウンメニューです。 以下のPolymerElementsをセットで利用します（ …
vim8でコード補完（TypeScript）
vim-lspプラグインを利用することで、vim 8でもLanguage Server Protocol経由でコード補完機能を使えます。 例としてTypescriptのコード補完設定をとりあげます。 …
D3.js向けSVG情報
SVGフォーマットの画像は、画像ファイルであると同時にXMLドキュメントでもあり、プログラムで生成することも可能な形式です。 D3.jsはJavascriptのSVG描画ライブラリで、主にグラフデータ …
Material Components WebのSnackbar
Webアプリケーションの操作完了時には、flash（一時的なメッセージ変数）を通じて通知をフィードバックするケースが多くあります。 Material Components Webでは画面下から一時的に …
Material Components Webのダイアログ
Material Components Webで拡充されたウィジェットに、ダイアログがあります。ダイアログを活用することで、画面遷移を減らして操作フローの連続性を向上できます。 ダイアログの実装方法 …
MJMLでレスポンシブHTMLメール作成
MJMLはHTMLメールを生成する言語＆ツールです。Outlookなど、普及しているメールソフト間で見た目の再現性の高いHTMLコードを出力できる点が特長です。 ツールは、 MJML Appのページか …
React.jsをビルドしてexternals利用
React.jsプロジェクトでは、webpackによるビルド時のデフォルト挙動がReact.jsライブラリ自体もビルドするため、時間がかかります。 そのため、externals指定してReact.js …
ES2015で静的なライブラリ塊をバンドルする
複数のJavascriptモジュール（ファイル）から、単一のライブラリを作りたい場合向けに、webpack・Babel・ES2015のimport / exportを活用してビルドする方式のアウトライ …
webpackで共有ライブラリを使う&作るビルド設定
webpackをシンプルに導入すると、SPAのようにモノリシックなファイルにバンドルされますが、設定しだいでモジュール化も可能です。（モノリスなライブラリ作成ノウハウについては、 ES2015で静的な …
React.js / ES2015向けwebpackビルド設定
ES2015やReact.jsでWebアプリ開発する場合、Babelやwebpack（またはbrowserify）などのツールチェーンが不可欠です。 事実上、開発に入る前にビルド環境は構築し切っておく …
npm / yarn のライブラリ管理手順
各プロジェクト用ライブラリの一括更新フロー npm package.jsonを置いたディレクトリでnpm outdatedを実行して更新対象を確認したうえで、npm update。 $ npm …
es2015をairbnb流にESLintするための設定
ブラウザをターゲットとするUI開発では、Javascriptの開発ツールが重要になります。 機械的なバグチェック用途では、lintツールが主力のツールとなり、いま、ES2015規格に沿った開発が浸透し …
SCSSファイルに日本語UTF8
SCSSファイルをcompassでコンパイルする際、日本語が含まれていると、 error scss/app.scss (Line 91 of scss/_settings.scss: Invalid …