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